luci-theme-openwrt-2020: further layout tweaks

 - Properly format mode menu
 - Fadeout of truncated cell labels in mobile layout
 - Limit maximum width of modal overlays

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

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 3217280d48104c75c3fab7758ef1f4671910ac94..f3fc7529f8e202375bc656ff9bb0625aff49923f 100644 (file)
--- a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
+++ b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
@@ -123,6 +123,26 @@ body {
        display: none;
 }
 
+#modemenu {
+       background: var(--main-bright-color);
+       padding: .5rem 1rem;
+       display: flex;
+       align-items: center;
+       color: var(--secondary-bright-color);
+       box-shadow: inset 0 0 1px var(--main-dark-color);
+       font-size: 1rem;
+       flex-wrap: wrap;
+}
+
+#modemenu > * {
+       margin: .125rem;
+}
+
+#modemenu > .active {
+       font-weight: bold;
+       border-bottom: 2px solid var(--secondary-bright-color);
+}
+
 #maincontainer {
        flex-direction: row;
        display: inline-flex;
@@ -216,8 +236,9 @@ body.modal-overlay-active #modal_overlay {
 }
 
 #modal_overlay > .modal {
-       max-width: 80%;
-       margin: 10% auto 25% auto;
+       max-width: 1300px;
+       width: 80%;
+       margin: 10% auto 5rem auto;
        background: var(--secondary-bright-color);
        box-shadow: 0 0 3px 1px var(--main-bright-color);
        padding: .5em;
@@ -776,6 +797,7 @@ ul > li {
        white-space: nowrap;
        opacity: 1;
        height: 1.8em;
+       max-height: none;
 }
 
 .cbi-tabmenu > li > a {
@@ -788,15 +810,17 @@ ul > li {
 }
 
 [data-tab] {
-       display: none;
        opacity: 0;
+       max-height: 0;
        transition: opacity .25s ease-in-out;
+       overflow: hidden;
 }
 
 [data-tab-active="true"] {
        opacity: 1;
        height: auto;
-       display: block;
+       max-height: none;
+       overflow: visible;
 }
 
 .alert-message:not(.modal) {
@@ -1555,6 +1579,10 @@ ul.errors {
                display: none;
        }
 
+       #modemenu {
+               padding: .125em .25em;
+       }
+
        #mainmenu {
                overflow-x: hidden;
                overflow-y: auto;
@@ -1643,6 +1671,17 @@ ul.errors {
                align-items: center;
        }
 
+       .td[data-title]::after {
+               content: "";
+               width: 2em;
+               position: absolute;
+               left: calc(40% - 2em);
+               top: 0;
+               bottom: 0;
+               display: block;
+               background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--secondary-bright-color) 90%);
+       }
+
        [data-page="admin-status-overview"] .cbi-section:nth-of-type(1) .td:first-of-type,
        [data-page="admin-status-overview"] .cbi-section:nth-of-type(2) .td:first-of-type {
                font-weight: bold;
@@ -1659,7 +1698,8 @@ ul.errors {
                line-height: 2.2rem;
        }
 
-       [data-page="admin-network-firewall-zones"] .td[data-name="_info"]::before {
+       [data-page="admin-network-firewall-zones"] .td[data-name="_info"]::before,
+       [data-page="admin-network-firewall-zones"] .td[data-name="_info"]::after {
                display: none;
        }
 
@@ -1722,7 +1762,8 @@ ul.errors {
 
        .assoclist .td:nth-of-type(6) { flex: 1; text-align: right !important; }
        .assoclist .td[data-title] { padding: .2em 0; }
-       .assoclist .td[data-title]::before { display: none; }
+       .assoclist .td[data-title]::before,
+       .assoclist .td[data-title]::after { display: none; }
 
        .leases6 .td:nth-of-type(3) { word-wrap: break-word; }
 
@@ -1730,7 +1771,7 @@ ul.errors {
        .td.cbi-section-actions > div > * { flex: 1; }
 
        body.modal-overlay-active #modal_overlay > .modal {
-               max-width: 95%;
+               width: 95%;
                margin: 5% auto;
        }
 

diff --git a/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm b/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm
index ad1a84c40740d5c96edeb7ddaad0985e4eb46e96..dc7f3bc8ece930a10ab13cfb876d648f86b917c4 100644 (file)
--- a/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm
+++ b/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm
@@ -25,7 +25,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/cascade.css" />
 <link rel="icon" href="<%=media%>/favicon.png" type="image/svg+xml" />
-<script type="text/javascript" src="<%=url('admin/translations', luci.i18n.context.lang)%>"></script>
+<script type="text/javascript" src="<%=url('admin/translations', luci.i18n.context.lang)%><%# ?v=PKG_VERSION %>"></script>
 <script type="text/javascript" src="<%=resource%>/cbi.js"></script>
 <script type="text/javascript">//<![CDATA[
        (function() {
@@ -104,25 +104,25 @@
                }
 
                function render_modemenu(tree) {
-                       var ul = document.querySelector('#modemenu'),
+                       var menu = document.querySelector('#modemenu'),
                            children = get_children(tree);
 
                        for (var i = 0; i < children.length; i++) {
                                var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0);
 
-                               ul.appendChild(E('li', {}, [
-                                       E('a', {
-                                               'href': L.url(children[i].name),
-                                               'class': isActive ? 'active' : null
-                                       }, [ _(children[i].title) ])
+                               if (i > 0)
+                                       menu.appendChild(E([], ['\u00a0|\u00a0']));
+
+                               menu.appendChild(E('div', { 'class': isActive ? 'active' : null }, [
+                                       E('a', { 'href': L.url(children[i].name) }, [ _(children[i].title) ])
                                ]));
 
                                if (isActive)
                                        render_mainmenu(children[i], children[i].name);
                        }
 
-                       if (ul.children.length > 1)
-                               ul.style.display = '';
+                       if (menu.children.length > 1)
+                               menu.style.display = '';
                }
 
                function render_tabmenu(tree, url, level) {
@@ -212,11 +212,10 @@
                        <span id="xhr_poll_status_off" style="display:none"><%:Paused%></span>
                </span>
        </span>
-
-       <ul id="modemenu" style="display:none"></ul>
-
 </div>
 
+<div id="modemenu" style="display:none"></div>
+
 <div id="maincontainer">
        <div id="mainmenu" style="display:none">
                <div></div>