🛸 Sync 2026-10-27 02:27:08

luci-theme-argon/Makefile

@@ -12,7 +12,7 @@ LUCI_DEPENDS:=+luci-base +USE_APK:wget-any +!USE_APK:wget +jsonfilter +ucode-mod
 # Keep existing translation package names and the argon-config message domain.
 LUCI_BASENAME:=argon-config
 PKG_VERSION:=3.1.0
-PKG_RELEASE:=33
+PKG_RELEASE:=34
 PKG_LICENSE:=Apache-2.0 MIT
 
 # LuCI derives translations independently of the theme version. Keep release

luci-theme-argon/htdocs/luci-static/argon/css/cascade.css

@@ -4129,6 +4129,23 @@ td > .ifacebadge,
 .ifacebadge > img + img {
   margin: 0 0.2rem 0 0;
 }
+.ifacebadge[data-signal] {
+  min-width: min-content;
+  padding-inline: 0.5rem;
+  white-space: nowrap;
+}
+.ifacebadge[data-signal] > img {
+  flex: none;
+  margin: 0;
+}
+.ifacebadge[data-signal] > span {
+  flex-shrink: 0;
+  max-width: none;
+  direction: ltr;
+  unicode-bidi: isolate;
+  white-space: nowrap;
+  overflow-wrap: normal;
+}
 .network-status-table {
   display: flex;
   flex-wrap: wrap;
@@ -6762,6 +6779,7 @@ pre.command-output {
 [data-page="admin-status"] .argon-port-traffic > div,
 [data-page="admin-status-overview"] .argon-port-traffic > div {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
@@ -6770,6 +6788,7 @@ pre.command-output {
 [data-page="admin-status"] .argon-port-traffic dt,
 [data-page="admin-status-overview"] .argon-port-traffic dt {
   display: inline-flex;
+  flex: none;
   align-items: center;
   gap: 0.25rem;
   color: var(--muted-text);
@@ -6791,11 +6810,14 @@ pre.command-output {
 [data-page="admin-status"] .argon-port-traffic dd,
 [data-page="admin-status-overview"] .argon-port-traffic dd {
   margin: 0;
+  margin-inline-start: auto;
+  max-width: 100%;
   color: var(--text-strong);
   font-size: 0.75rem;
   font-weight: 500;
   font-variant-numeric: tabular-nums;
-  white-space: nowrap;
+  white-space: normal;
+  overflow-wrap: anywhere;
 }
 [data-page="admin-status-realtime"] .cbi-section > div:has(> svg),
 [data-page="admin-status-realtime-load"] .cbi-section > div:has(> svg),
@@ -8397,8 +8419,37 @@ pre.command-output {
   border-bottom: thin solid var(--border-subtle);
   box-shadow: 0 -1px 0 0 var(--border-subtle);
 }
-#wifi_assoclist_table > .tr > .td[data-title="RX Rate / TX Rate"] {
-  width: 23rem;
+#wifi_assoclist_table .ifacebadge[data-ssid] {
+  display: flex;
+  width: 100%;
+  gap: var(--control-gap);
+  padding: var(--control-gap);
+}
+#wifi_assoclist_table .ifacebadge[data-ssid] > img {
+  flex: none;
+  margin: 0;
+}
+#wifi_assoclist_table .ifacebadge[data-ssid] > span {
+  flex: 1 1 0;
+  min-width: 0;
+  text-align: start;
+}
+#wifi_assoclist_table .ifacebadge[data-ssid] small {
+  display: block;
+  direction: ltr;
+  unicode-bidi: isolate;
+}
+@media screen and (min-width: 1153px) {
+  #wifi_assoclist_table > .tr > :is(.th, .td):first-child {
+    width: 22%;
+    min-width: 14rem;
+  }
+}
+@media screen and (max-width: 600px) {
+  #wifi_assoclist_table .td:has(> .ifacebadge[data-ssid]) {
+    flex-basis: 100%;
+    padding-inline: var(--control-gap);
+  }
 }
 #cbi-wireless,
 #cbi-wireless *,
@@ -8664,6 +8715,11 @@ pre.command-output {
     flex-wrap: wrap;
     justify-content: center;
   }
+  .table .td:has(.ifacebadge[data-signal]),
+  #cbi-wireless .td:has(.ifacebadge[data-signal]) {
+    min-width: min-content;
+    padding-inline: var(--control-gap);
+  }
   .td select,
   .td input[type="text"] {
     width: 100%;

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

@@ -201,6 +201,7 @@ return baseclass.extend({
 	 * Load menu data and trigger rendering
 	 */
 	__init__: function () {
+		this.bindSidebarToggle();
 		this.patchDynamicListFocus();
 		ui.menu.load().then(L.bind(this.render, this));
 	},
@@ -222,6 +223,25 @@ return baseclass.extend({
 		prototype.setFocus = guardedFocus;
 	},
 
+	bindSidebarToggle: function () {
+		var sidebarToggle = document.querySelector('.showSide');
+		var darkMask = document.querySelector('.darkMask');
+		// Navigation is synchronous: keep its controls enabled and focused.
+		var toggle = L.bind(this.handleSidebarToggle, this);
+
+		if (sidebarToggle)
+			sidebarToggle.addEventListener('click', toggle);
+		if (darkMask)
+			darkMask.addEventListener('click', toggle);
+
+		document.addEventListener('keydown', function(ev) {
+			if (ev.key === 'Escape' && sidebarToggle && sidebarToggle.classList.contains('active')) {
+				sidebarToggle.click();
+				sidebarToggle.focus();
+			}
+		});
+	},
+
 	/**
 	 * Main render function for the menu system
 	 * @param {Object} tree - Menu tree structure from LuCI
@@ -235,7 +255,8 @@ return baseclass.extend({
 		// Render tab menu if we're deep enough in the navigation hierarchy
 		if (L.env.dispatchpath.length >= 3) {
 			for (var i = 0; i < 3 && node; i++) {
-				node = node.children[L.env.dispatchpath[i]];
+				// A cached menu can predate the current page's route.
+				node = node.children ? node.children[L.env.dispatchpath[i]] : null;
 				url = url + (url ? '/' : '') + L.env.dispatchpath[i];
 			}
 
@@ -243,23 +264,6 @@ return baseclass.extend({
 				this.renderTabMenu(node, url);
 			}
 		}
-
-		// Attach event listeners for sidebar toggle functionality
-		var sidebarToggle = document.querySelector('.showSide');
-		var darkMask = document.querySelector('.darkMask');
-		
-		if (sidebarToggle) {
-			sidebarToggle.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
-		}
-		if (darkMask) {
-			darkMask.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
-		}
-		document.addEventListener('keydown', function(ev) {
-			if (ev.key === 'Escape' && sidebarToggle && sidebarToggle.classList.contains('active')) {
-				sidebarToggle.click();
-				sidebarToggle.focus();
-			}
-		});
 	},
 
 	/**

luci-theme-argon/less/components/network.less

@@ -33,6 +33,28 @@ td>.ifacebadge,
   margin: 0 .2rem 0 0;
 }
 
+// Signal/noise readings are measurements, not descriptive interface names.
+// Keep the value intact while allowing the icon to stack on narrow tables.
+.ifacebadge[data-signal] {
+  min-width: min-content;
+  padding-inline: .5rem;
+  white-space: nowrap;
+
+  > img {
+    flex: none;
+    margin: 0;
+  }
+
+  > span {
+    flex-shrink: 0;
+    max-width: none;
+    direction: ltr;
+    unicode-bidi: isolate;
+    white-space: nowrap;
+    overflow-wrap: normal;
+  }
+}
+
 .network-status-table {
   display: flex;
   flex-wrap: wrap;

luci-theme-argon/less/pages/overview.less

@@ -127,6 +127,7 @@
 
     > div {
       display: flex;
+      flex-wrap: wrap;
       align-items: center;
       justify-content: space-between;
       gap: .5rem;
@@ -135,6 +136,7 @@
 
     dt {
       display: inline-flex;
+      flex: none;
       align-items: center;
       gap: .25rem;
       color: var(--muted-text);
@@ -156,11 +158,14 @@
 
     dd {
       margin: 0;
+      margin-inline-start: auto;
+      max-width: 100%;
       color: var(--text-strong);
       font-size: .75rem;
       font-weight: 500;
       font-variant-numeric: tabular-nums;
-      white-space: nowrap;
+      white-space: normal;
+      overflow-wrap: anywhere;
     }
   }
 }

luci-theme-argon/less/pages/wireless.less

@@ -29,9 +29,43 @@
 }
 
 #wifi_assoclist_table {
-    >.tr {
-        >.td[data-title="RX Rate / TX Rate"] {
-            width: 23rem;
+    // Keep the network identity readable without reserving the rate column
+    // by its translated heading. Let the remaining columns share the space.
+    .ifacebadge[data-ssid] {
+        display: flex;
+        width: 100%;
+        gap: var(--control-gap);
+        padding: var(--control-gap);
+
+        > img {
+            flex: none;
+            margin: 0;
+        }
+
+        > span {
+            flex: 1 1 0;
+            min-width: 0;
+            text-align: start;
+        }
+
+        small {
+            display: block;
+            direction: ltr;
+            unicode-bidi: isolate;
+        }
+    }
+
+    @media screen and (min-width: 1153px) {
+        > .tr > :is(.th, .td):first-child {
+            width: 22%;
+            min-width: 14rem;
+        }
+    }
+
+    @media screen and (max-width: 600px) {
+        .td:has(> .ifacebadge[data-ssid]) {
+            flex-basis: 100%;
+            padding-inline: var(--control-gap);
         }
     }
 }

luci-theme-argon/less/responsive.less

@@ -259,6 +259,13 @@
 
     }
 
+    // Let a complete signal/noise reading move to its own line when needed.
+    .table .td:has(.ifacebadge[data-signal]),
+    #cbi-wireless .td:has(.ifacebadge[data-signal]) {
+        min-width: min-content;
+        padding-inline: var(--control-gap);
+    }
+
     .td select,
     .td input[type="text"] {
         width: 100%;

luci-theme-argon/tests/menu-navigation.test.js

@@ -0,0 +1,109 @@
+'use strict';
+
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const test = require('node:test');
+
+const source = fs.readFileSync(path.join(__dirname, '../htdocs/luci-static/resources/menu-argon.js'), 'utf8');
+
+function fixture() {
+	function element() {
+		const classes = new Set();
+		return {
+			attributes: {}, listeners: {}, disabled: false, focused: false,
+			classList: {
+				add: name => classes.add(name),
+				remove: name => classes.delete(name),
+				contains: name => classes.has(name)
+			},
+			setAttribute(name, value) { this.attributes[name] = value; },
+			addEventListener(type, handler) { (this.listeners[type] ||= []).push(handler); },
+			click() { for (const handler of this.listeners.click || []) handler({ currentTarget: this }); },
+			focus() { this.focused = true; }
+		};
+	}
+
+	const button = element(), sidebar = element(), mask = element(), content = element();
+	const nodes = { '.showSide': button, '#mainmenu': sidebar, '.darkMask': mask, '.main-right': content };
+	const document = {
+		listeners: {},
+		querySelector: selector => nodes[selector] || null,
+		addEventListener(type, handler) { (this.listeners[type] ||= []).push(handler); }
+	};
+	let finishLoad;
+	const loaded = new Promise(resolve => { finishLoad = resolve; });
+	const menu = new Function('baseclass', 'ui', 'L', 'document', source)(
+		{ extend: object => object },
+		{
+			menu: { load: () => loaded },
+			createHandlerFn() { throw new Error('Synchronous navigation must not disable its controls'); }
+		},
+		{
+			bind: (fn, context) => fn.bind(context),
+			env: { dispatchpath: ['admin', 'status', 'overview'] }
+		},
+		document
+	);
+	let mainRenders = 0, tabRenders = 0;
+	menu.renderModeMenu = () => { mainRenders++; };
+	menu.renderTabMenu = () => { tabRenders++; };
+	return { menu, button, sidebar, mask, content, document, loaded, finishLoad,
+		mainRenders: () => mainRenders, tabRenders: () => tabRenders };
+}
+
+function assertOpen(f, open) {
+	for (const node of [f.button, f.sidebar, f.mask, f.content])
+		assert.equal(node.classList.contains('active'), open);
+	assert.equal(f.button.attributes['aria-expanded'], String(open));
+	assert.equal(f.button.disabled, false);
+}
+
+test('the first sidebar tap is preserved while menu data is still loading', async () => {
+	const f = fixture();
+	f.menu.__init__();
+	f.button.click();
+	assertOpen(f, true);
+	assert.equal(f.mainRenders(), 0);
+
+	f.finishLoad({ children: { admin: { children: { status: {} } } } });
+	await f.loaded;
+	assert.equal(f.mainRenders(), 1);
+	assertOpen(f, true);
+	f.mask.click();
+	assertOpen(f, false);
+});
+
+test('cached menus missing the current route do not abort navigation rendering', () => {
+	for (const tree of [
+		{ children: { admin: { children: { status: {} } } } },
+		{ children: { admin: { children: {} } } },
+		{}
+	]) {
+		const f = fixture();
+		f.menu.__init__();
+		assert.doesNotThrow(() => f.menu.render(tree));
+		assert.equal(f.mainRenders(), 1);
+		assert.equal(f.tabRenders(), 0);
+		f.button.click();
+		assertOpen(f, true);
+	}
+});
+
+test('rendering tabs again does not duplicate sidebar events, and Escape restores focus', async () => {
+	const f = fixture();
+	const tree = { children: { admin: { children: { status: { children: { overview: {} } } } } } };
+	f.menu.__init__();
+	f.finishLoad(tree);
+	await f.loaded;
+	f.menu.render(tree);
+	assert.equal(f.tabRenders(), 2);
+	assert.equal(f.button.listeners.click.length, 1);
+	assert.equal(f.mask.listeners.click.length, 1);
+	f.button.click();
+	assertOpen(f, true);
+	for (const handler of f.document.listeners.keydown)
+		handler({ key: 'Escape' });
+	assertOpen(f, false);
+	assert.equal(f.button.focused, true);
+});