Leggero-v2 enhancement: Enable max-width to be percentage of the width instead of flat pixel numbers

[ynazar1]

Problem:
On wide and ultra wide monitors leggero theme poorly covers screen real estate, taking up at best about 1/3rd of the screen... and it only gets worse at higher resolutions or wider monitors. Example picture:

Proposal: Instead of using static max-width css anchors, use % of the screen wherever possible.

An example of changing just two max-width lines to 80% or so in devtools:

Challenges:
css is a multilayer cake and there are going to be a total whack-a-mole of different UIs to change.

Context: I hacked together a 80% coverage version in 1.2.0 but it was a bit of a mess as my skills aren't all that great. I may try doing it again in 1.3.1 eventually, it's all in leggero's common.css

[Fraenkiman]

Hi @ynazar1,

Thank you for your suggestion for improvement.
The Leggero v2 style, the Leggero theme was originally only designed for widths up to 1080. A percentage total width is problematic so far, because then the right menu bar also adjusts by percentage.
In the worst case, something like this can happen:
https://user-images.githubusercontent.com/50171344/185771419-dbf74ba0-b5d0-4b74-bf4f-03993344e6e3.png
In some cases, however, you want the right-hand menu bar to always have the same width.

Here is a quick & dirty hack:
Open the file /fp-interface/themes/leggero/leggero-v2/res/common.css in an editor. Copy lines 327 to 338 and paste them below.

flatpress/fp-interface/themes/leggero/leggero-v2/res/common.css

Lines 327 to 339 in 29c5874

	@media (min-width: 1440px) { /* Desktop-PC and TV */
	#body-container { max-width: 1250px }
	#main { width: 925px }
	.bbcode_video {
	max-width: 560px !IMPORTANT;
	width: 100%;
	height: 315px !IMPORTANT
	}
	}

Now you can adjust the screen width and width of #body-container and #main as desired.

Update:
I have just customized this.
Please test this common.css in Leggero v2 style.
https://github.com/flatpressblog/flatpress/blob/master/fp-interface/themes/leggero/leggero-v2/res/common.css

Alternatively, you can use the NHWS Scalable theme as a basis and customize it as you wish.

Best regards
Frank

[ynazar1]

😮 !!!

That looks great! I'll play around with it but no issues so far that i can see after replacing my common.css with your linked one. Preliminary testing: it looks like it scales and shrinks correctly when resizing window. Mobile looks fine too.

Did scroll bar in chrome previously matched the theme color? Cause that's kinda cool too.

[ynazar1]

Thank you.

For context, i've updated from 1.2.1 to 1.3.1 yesterday finally thus the request above. Looks awesome!

[Fraenkiman]

Hello @ynazar1

😮 !!!

Das sieht super aus!

Great that it suits you and that you like it. The right chrome scrollbar has the color #82271f (more red tint) and differs from the design color #B83C32. You have to experiment a bit to find the right color. I found #B83C32 a little too pale for the scrollbar. ...it's all a matter of taste.

Best regards
Frank