🤞 Sync 2026-04-21 20:24:56

luci-theme-design/Makefile

@@ -9,7 +9,7 @@ LUCI_TITLE:=Design Theme
 LUCI_DEPENDS:=
 PKG_LICENSE:=Apache-2.0
 PKG_VERSION:=7.1
-PKG_RELEASE:=3
+PKG_RELEASE:=4
 
 LUCI_MINIFY_CSS:=
 CONFIG_LUCI_CSSTIDY:=

luci-theme-design/htdocs/luci-static/design/js/style.js

@@ -65,6 +65,18 @@
         });
     }
 
+    function getOverviewPortColumns(width, cardCount) {
+        if (width <= 480) {
+            return 1;
+        }
+
+        if (width <= 768) {
+            return Math.min(cardCount, 2);
+        }
+
+        return Math.min(cardCount, 8);
+    }
+
     function syncOverviewPortStatus() {
         var view = document.getElementById('view');
         var portGroups = new Map();
@@ -186,7 +198,7 @@
 
         portGroups.forEach(function (cards, parent) {
             var width = window.innerWidth || document.documentElement.clientWidth || 1280;
-            var columns;
+            var columns = getOverviewPortColumns(width, cards.length);
 
             cards.forEach(function (card) {
                 var body = card.querySelector('.ifacebox-body');
@@ -220,18 +232,6 @@
                 }
             });
 
-            if (width <= 480) {
-                columns = 1;
-            } else if (width <= 768) {
-                columns = Math.min(cards.length, 2);
-            } else if (cards.length <= 4) {
-                columns = cards.length;
-            } else if (cards.length <= 6) {
-                columns = 3;
-            } else {
-                columns = 4;
-            }
-
             parent.style.setProperty('display', 'grid', 'important');
             parent.style.setProperty('grid-template-columns', 'repeat(' + columns + ', minmax(0, 1fr))', 'important');
             parent.style.setProperty('align-items', 'stretch', 'important');
@@ -258,6 +258,8 @@
             childList: true,
             subtree: true
         });
+
+        window.addEventListener('resize', syncOverviewPortStatus);
     }
 
     function syncNetworkInterfaceIcons() {

luci-theme-design/htdocs/luci-static/resources/menu-design.js

@@ -1,5 +1,6 @@
 'use strict';
 'require baseclass';
+'require fs';
 'require request';
 'require ui';
 
@@ -15,15 +16,60 @@ return baseclass.extend({
 				window.location.hash);
 		}
 
+		this.dynamicMenuTargets = {};
+
 		this.syncConditionalMenuCache()
 			.then(L.bind(function(reloading) {
 				if (reloading)
 					return;
 
-				return ui.menu.load().then(L.bind(this.render, this));
+				return this.resolveDynamicMenuTargets()
+					.then(L.bind(function() {
+						return ui.menu.load().then(L.bind(this.render, this));
+					}, this));
 			}, this));
 	},
 
+	resolveDynamicMenuTargets: function() {
+		this.dynamicMenuTargets = {};
+
+		if (!document.body.classList.contains('logged-in'))
+			return Promise.resolve();
+
+		return this.resolveFirewallMenuTarget().then(L.bind(function(target) {
+			if (target)
+				this.dynamicMenuTargets['admin/status/nftables'] = target;
+		}, this));
+	},
+
+	resolveFirewallMenuTarget: function() {
+		return L.resolveDefault(fs.exec_direct('/usr/sbin/nft', [ '--terse', '--json', 'list', 'ruleset' ], 'json'), null).then(function(nft) {
+			var hasTables = false;
+
+			if (!Array.isArray(nft && nft.nftables))
+				return null;
+
+			for (var i = 0; i < nft.nftables.length; i++) {
+				if (nft.nftables[i] && nft.nftables[i].hasOwnProperty('table')) {
+					hasTables = true;
+					break;
+				}
+			}
+
+			return hasTables ? null : 'admin/status/nftables/iptables';
+		});
+	},
+
+	getMenuHref: function(url, child) {
+		var path = [ url, child.name ].filter(Boolean).join('/'),
+			target = this.dynamicMenuTargets[path];
+
+		if (target)
+			return L.url.apply(L, target.split('/'));
+
+		return L.url(url, child.name);
+	},
+
 	reloadPageWithMenuFlush: function() {
 		var url = new URL(window.location.href);
 
@@ -180,11 +226,11 @@ return baseclass.extend({
 				ul.classList.add('active');
 				slideClass += " active";
 				menuClass += " active";
-			}
+				}
 
 			ul.appendChild(E('li', { 'class': slideClass }, [
 				E('a', {
-					'href': L.url(url, children[i].name),
+					'href': this.getMenuHref(url, children[i]),
 					'click': (l == 1) ? ui.createHandlerFn(this, 'handleMenuExpand') : null,
 					'class': menuClass,
 					'data-title': hasChildren ? children[i].title.replace(" ", "_") : children[i].title.replace(" ", "_"),