luci-theme-openwrt-2020 - unnecessary limited page width

[slimjimsoftware]

The openwrt-2020 theme artificially limits the entire page width to 1366px, this is unnecessary and makes the theme look dated. None of the other themes do this. Removing the max-width limitation IMO makes the theme look a lot nicer on larger screen sizes. Patch follows.

diff --git a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
index 1a276c49..8da5eabb 100644
--- a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
+++ b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
@@ -38,7 +38,6 @@
 html {
        height: 100%;
        width: 100%;
-       max-width: 1366px;
        margin: 0 auto;
        background: #fff linear-gradient(90deg, rgba(0, 0, 0, .8), rgba(0, 0, 0 ,.5), rgba(0, 0, 0, .8));
 }

[jow-]

Not sure if I agree with this particular fix. On very wide screens, removing the max width requires quite far mouse movements to reach from the left menu to the bottom right action buttons.

If the actual intent is to remove the dark backgrounds left and right of the limited with content column to make the theme look less "dated" (I didn't know that max width is considered "dated" nowadays) then the right content column or at the very least non-tabular forms should be limited in width somehow to not extend too far to the right.

Even with the fix proposed above, a number of CSS properties become redundant (such as html background, margin, width) and should be removed too.

[slimjimsoftware]

Yeah, that was a sloppy patch, sorry about that. Looking at it closer I agree that setting the right content column to a max width would probably be the nicest solution. Also just to clarify, this issue isn't so much about the dark background on either side, it's more that when one sees left side-menus they generally are anchored to the left of the browser window. This is just a personal thing but for me having a dark vertical bar to the left of the left-hand menu feels a little jarring and tends to draw the attention away from the menu. Obviously this is all subjective but I think the theme just looks nicer on larger screens when the menu is anchored left and there's no dark background, so another solution may be to just do that, remove the background and anchor the whole screen left? It's by far my favourite theme so would be nice to have it looking great on large screens.

[sky96111]

Yeah, if that, it seems a bug on HiDPI screens (3840x2160 with 200% scale). Its pixel equals to 1920x1080 screens with 100% scale, but 1366px will limit presentation on HiDPI screen though the screen is not vary wide. Remove the limitation patch works fine for me (but just for me), it breaks author's intention. I think it would be better to judge the scale of the screen, not just the pixels.

[slimjimsoftware]

How about this? I don't have a proper HiDPI screen to test on so have relied on Mozilla devtools but it seems to work quite well for me.

diff --git a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
index 1a276c495..2f896971a 100644
--- a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
+++ b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
@@ -37,10 +37,6 @@

 html {
    height: 100%;
-   width: 100%;
-   max-width: 1366px;
-   margin: 0 auto;
-   background: #fff linear-gradient(90deg, rgba(0, 0, 0, .8), rgba(0, 0, 0 ,.5), rgba(0, 0, 0, .8));
 }

 body {
@@ -152,6 +148,7 @@ body {
    background: var(--main-dark-color);
    color: var(--main-bright-color);
    padding: 1em;
+   max-width: 20rem;
 }

 #mainmenu:empty {
@@ -200,6 +197,7 @@ body {
 #maincontent {
    flex: 10;
    padding: 1em 1em 0 1em;
+   max-width: 85rem;
 }

 body > .luci {

[sky96111]

Sadly, it seems not work for me :( It leaves a white blank about 20px on the right side of the authentication interface, also proportion of main content and sidebar is about 1:4, which lead to sidebar presentation vary wide. It looks like rem is not suitable for resolving a non-fixed pixel in different scale ratio. Finally I choose to add

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  html {
    max-width: 2049px;
  }
}

to specify max-width to 1.5 times in HiDPI screens. Obviously, it is not elegant. Actually, remove the limitation may be better choice for me..

[NicolaP8]

Years passed, screens got bigger and this limitation remains! Limiting the width is not estetic is incompetence!