• Welcome to Simple Machines Community Forum. Please login or sign up.
October 19, 2021, 09:11:19 PM

News:

SMF 2.1 RC4 has been released! Try it out and help us test! :) Read more.


Simple Machines Site Upgrade

Started by SleePy, August 16, 2021, 11:25:39 PM

Previous topic - Next topic

Antechinus

Latest Firefox, on 2560 x 1440. Screeny attached.
No, I'm not on Discord or IRC.

You cannot see attachments on this board.

ETA: Y'know if you are making changes there anyway, there are superfluous classes in those boxes that are having to be overriden to get this look ~ .floatright and .windowbg could be ditched. Then the CSS could be simplified

SleePy

uggh.. I hate browsers some days.. I can't reproduce on Firefox on Windows or Mac at that resolution (simulated with dev tools in responsive mode).
Jeremy D — Site Team / SMF Developer
Support the SMF Support team!
Profiles:GitHub
Join us on IRC Libera.chat/#smf

Antechinus

Ok hang on. I'll clear my cache and see what happens.

ETA: Yup. Same result. Full width, does not wrap floated content. I'm on W10, by the way.

SleePy

Can you also try a private browsing with no extensions?  Make sure no resources are being blocked.

For fun, I've also checked Firefox on Ubuntu and I can't reproduce it.

Edit,   Even tried my phone.  I'm out of devices...
Jeremy D — Site Team / SMF Developer
Support the SMF Support team!
Profiles:GitHub
Join us on IRC Libera.chat/#smf

Antechinus

Hey just checked with Chrome, which does not have any code for the new site and did not have full cache. It's still showing the original styling, with two separate boxes in different colours, and no styling on the parent div. Beats me what is going on there.

ETA: Private window in Firefox, with no extensions, shows the same as Chrome.

Antechinus

Screeny...

You cannot see attachments on this board.

SleePy

So the private browsing is showing correct then?  It should be 2 boxes with slightly different colors.  Language on left because it stacked when you drop to a smaller browser size under the language selection.

Edit,

See your screeny.  Thats how it should look.  I suspect some extension is fudging with it.  You had one for CSS I thought for dark mode?  Is it causing it?
Jeremy D — Site Team / SMF Developer
Support the SMF Support team!
Profiles:GitHub
Join us on IRC Libera.chat/#smf

Antechinus

Lol. I know what is going on. You haven't changed the original presentation, with the separate boxes, so were are talking about two different things.

I'm talking about this: https://www.simplemachines.org/community/index.php?msg=4094322 :P

ETA: IOW, what is there now in your code is "correct" according to you. But everyone who has commented on the alternative says it is much cleaner. Which it is. But if you want your version, go for it. I'll just run an override.

Antechinus

Incidentally, the main menu looks a lot cleaner without the cheesy icons. :D

/* ---------------------------- */
/* Kill godforsaken menu icons. */
#main_menu .main_icons {
    display: none;
}

SleePy

Ahh that does explain it.  But it does poorly on 920 width resolutions.
Jeremy D — Site Team / SMF Developer
Support the SMF Support team!
Profiles:GitHub
Join us on IRC Libera.chat/#smf

Antechinus

That would be easy to fix. I can frig around with it later if you like.

SleePy

Yea it would have too.  Right now at a certain point those are hidden (I think 860) but anything under 1000 I think starts to stack it since it doesn't fit.
Jeremy D — Site Team / SMF Developer
Support the SMF Support team!
Profiles:GitHub
Join us on IRC Libera.chat/#smf

Antechinus

Simplified layouts for the Customize site. I find these easier to scan, and coding is simpler too.

You cannot see attachments on this board.

You cannot see attachments on this board.

You cannot see attachments on this board.

shawnb61

TBH, I strongly prefer the existing design...

Address the process rather than the outcome.  Then, the outcome becomes more likely.   - Fripp

Antechinus

Lol. I strongly don't. :D I'll just run whatever I like anyway,

Antechinus

Quote from: SleePy on August 18, 2021, 07:48:31 PMYea it would have too.  Right now at a certain point those are hidden (I think 860) but anything under 1000 I think starts to stack it since it doesn't fit.
It works well on any res if .site_header_box_container is absolute positioned and I reduce the padding a bit. Even looks better on widescreen with the reduced padding.

/* ------------------------------- */
/* Style godforsaken header boxes. */
#header {
    position: relative;
}
#header .site_header_box_container {
    position: absolute;
    right: 0;
    float: right;
    padding: 0 9px 7px;
    background: #fff;
    border: 1px solid #bbb;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 -2px 0 #fff, 0 2px 3px rgba(0, 0, 0, 0.16);
}
#header .site_header_box {
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
#header .site_header_box:first-child {
    float: left;
}

And half of that code is only necessary to override the existing .windowbg and .floatright classes in the markup. If the markup was changed to this:
<div class="site_header_box_container">
<div class="site_header_box">
<form action="https://www.simplemachines.org/search.php" method="post"></form>
</div>
<div class="site_header_box">
<form id="languages_form" method="get" class="floatright"></form>
</div>
</div>

Then CSS could be reduced to this:
/* ------------------------------- */
/* Style godforsaken header boxes. */
#header {
    position: relative;
}
#header .site_header_box_container {
    position: absolute;
    right: 0;
    float: right;
    padding: 0 9px 7px;
    background: #fff;
    border: 1px solid #bbb;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 -2px 0 #fff, 0 2px 3px rgba(0, 0, 0, 0.16);
}
#header .site_header_box {
    float: left;
}

SleePy

Hows that.  Still different from what you had, but holds better over smaller screen resolutions
Jeremy D — Site Team / SMF Developer
Support the SMF Support team!
Profiles:GitHub
Join us on IRC Libera.chat/#smf

Antechinus

That's basically what I have. Looks fine now.

ETA: Just changed reply after doing another refresh.

SleePy

You may have your ad blocker active.  I had to move a few things around to keep the ads looking good.
Jeremy D — Site Team / SMF Developer
Support the SMF Support team!
Profiles:GitHub
Join us on IRC Libera.chat/#smf

Antechinus

Yep, ad blocker is active. TBH I haven't even looked into how to turning it off in Firefox. Its just on by default, so I left it alone. I don't even know where the switch is. You'll probably find most users are the same these days. :D

Advertisement: