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>

2 files changed, 59 insertions, 19 deletions

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 3217280d48..f3fc7529f8 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
@@ -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 ad1a84c407..dc7f3bc8ec 100644
--- 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>