From 63d31a66df280ac7cea1c28f671df0f8dc1a775f Mon Sep 17 00:00:00 2001 From: CallMeTechie <34693633+CallMeTechie@users.noreply.github.com> Date: Tue, 23 Jun 2026 21:16:35 +0200 Subject: [PATCH] =?UTF-8?q?fix(theme):=20Aurora=20dashboard=20=E2=80=94=20?= =?UTF-8?q?compact=20KPI=20row,=20conditional=20Availability=20KPI,=20head?= =?UTF-8?q?er=20auto-update,=20no=20reload?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - KPI cards: moved into a responsive .aurora-kpi-grid (auto-fit, min 130px) so all six fit in one row down to a ~1200px viewport, then progressively wrap/stack. Cards compacted (smaller padding/icon/value) to fit six across. - Availability (monitoring) KPI is hidden by default and only shown when >=1 route has monitoring enabled (monitoring.total > 0), toggled in auroraRefreshStats. - Removed the 'Reload' button + its handler. - Moved the auto-update status (pill + version badge + re-check + set-up) from the page header into the topbar next to the connection badge, which is renamed 'WireGuard active' -> 'Tunnel active' (status.wg_active). - Re-check is now a refresh icon button; the set-up button is relabelled 'Set up auto-update' and only shows while auto-update is not active (status !== 'active'). Aurora-only. aurora_theme.test 144/0 (dashboard layout assertion updated). --- public/css/aurora.css | 10 ++++++++++ public/js/dashboard.js | 27 ++++++++++++++++----------- src/i18n/de.json | 4 ++-- src/i18n/en.json | 4 ++-- templates/aurora/pages/dashboard.njk | 23 +++++++++-------------- templates/aurora/partials/topbar.njk | 1 + tests/aurora_theme.test.js | 4 +++- 7 files changed, 43 insertions(+), 30 deletions(-) diff --git a/public/css/aurora.css b/public/css/aurora.css index a717f0c4..05be9e9c 100644 --- a/public/css/aurora.css +++ b/public/css/aurora.css @@ -438,6 +438,16 @@ input[type=date]:focus, select:focus { .kpi .val{font-family:var(--font-mono); font-weight:700; font-size:28px; line-height:1; letter-spacing:-.02em} .kpi .delta{font-size:11.5px; font-weight:600; display:inline-flex; align-items:center; gap:4px} .kpi .delta.up{color:var(--green)} .kpi .delta.down{color:var(--coral)} +/* Dashboard KPI row: all (5–6) cards in one row down to ~1200px, then they + progressively wrap/stack as the viewport narrows. auto-fit fills the row for + either 5 or 6 cards (the Availability KPI is conditionally hidden) with no + empty trailing slot. ~140px min lets six fit in the content area at 1200px. */ +.aurora-kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px; margin-bottom:18px} +.aurora-kpi-grid .card.kpi{padding:15px; gap:9px} +.aurora-kpi-grid .kpi .ic{width:30px;height:30px;border-radius:9px} +.aurora-kpi-grid .kpi .ic svg{width:16px;height:16px} +.aurora-kpi-grid .kpi .lab{font-size:11px} +.aurora-kpi-grid .kpi .val{font-size:23px} .kv{display:flex; flex-direction:column; gap:12px; margin-top:14px} .kv .row{display:flex; align-items:center; justify-content:space-between; gap:14px} diff --git a/public/js/dashboard.js b/public/js/dashboard.js index 51a87569..7ba2b328 100644 --- a/public/js/dashboard.js +++ b/public/js/dashboard.js @@ -301,13 +301,21 @@ host.appendChild(p); } - var recheck = document.createElement('button'); recheck.className = 'btn btn-ghost'; - recheck.textContent = T('autoupdate.recheck', 'Re-check'); + // Re-check is an icon button (refresh) rather than a text button. + var recheck = document.createElement('button'); recheck.className = 'icon-btn'; + recheck.style.cssText = 'width:30px;height:30px'; + recheck.title = T('autoupdate.recheck', 'Re-check'); + recheck.setAttribute('aria-label', recheck.title); + recheck.innerHTML = ''; recheck.addEventListener('click', loadAutoUpdate); host.appendChild(recheck); - var setup = document.createElement('button'); setup.className = 'btn btn-ghost'; - setup.textContent = T('autoupdate.setup', 'Set up'); - setup.addEventListener('click', openAuSetup); host.appendChild(setup); + // Setup button only while auto-update is NOT actually set up (status !== 'active'); + // once configured (cron running + recent check) it is hidden. + if (d.status !== 'active') { + var setup = document.createElement('button'); setup.className = 'btn btn-ghost btn-sm'; + setup.textContent = T('autoupdate.setup', 'Set up auto-update'); + setup.addEventListener('click', openAuSetup); host.appendChild(setup); + } if (d.mode === 'manual') { var trig = document.createElement('button'); trig.className = 'btn btn-primary'; @@ -359,12 +367,6 @@ }); }); - // ─── Reload button ───────────────────────────────────────────────────────── - const reloadBtn = document.getElementById('btn-reload'); - if (reloadBtn) { - reloadBtn.addEventListener('click', () => refreshAll()); - } - // ─── Refresh all ─────────────────────────────────────────────────────────── async function refreshAll() { await Promise.all([ @@ -422,6 +424,9 @@ var up = parseInt(data.monitoring.up, 10) || 0; var total = parseInt(data.monitoring.total, 10) || 0; var down = parseInt(data.monitoring.down, 10) || 0; + // Availability KPI only shows when ≥1 route has monitoring enabled. + var monCard = document.getElementById('kpi-monitoring'); + if (monCard) monCard.style.display = total > 0 ? '' : 'none'; if (total > 0) { monitorEl.textContent = up + '/' + total; if (monitorSubEl) { diff --git a/src/i18n/de.json b/src/i18n/de.json index 42083344..61411f42 100644 --- a/src/i18n/de.json +++ b/src/i18n/de.json @@ -686,7 +686,7 @@ "rdp.feature.gateway_locked": "Home-Gateway-Routing für RDP erfordert eine Pro-Lizenz.", "rdp.feature.gateway_locked_upgrade": "Upgrade für RDP über Home-Gateway", - "status.wg_active": "WireGuard aktiv", + "status.wg_active": "Tunnel aktiv", "status.wg_inactive": "WireGuard inaktiv", "time.now": "jetzt", @@ -1051,7 +1051,7 @@ "autoupdate.mode_auto": "Automatisch", "autoupdate.mode_manual": "Manuell", "autoupdate.recheck": "Neu prüfen", - "autoupdate.setup": "Einrichten", + "autoupdate.setup": "Auto Update einrichten", "autoupdate.trigger": "Jetzt aktualisieren", "autoupdate.trigger_queued": "Update eingeplant — greift beim nächsten Cron-Lauf", "autoupdate.setup_title": "Auto-Update einrichten", diff --git a/src/i18n/en.json b/src/i18n/en.json index ef5dd0ce..2246a5fd 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -686,7 +686,7 @@ "rdp.feature.gateway_locked": "Routing RDP through a Home Gateway requires a Pro license.", "rdp.feature.gateway_locked_upgrade": "Upgrade for RDP-via-Home-Gateway", - "status.wg_active": "WireGuard active", + "status.wg_active": "Tunnel active", "status.wg_inactive": "WireGuard inactive", "time.now": "now", @@ -1051,7 +1051,7 @@ "autoupdate.mode_auto": "Automatic", "autoupdate.mode_manual": "Manual", "autoupdate.recheck": "Re-check", - "autoupdate.setup": "Set up", + "autoupdate.setup": "Set up auto-update", "autoupdate.trigger": "Update now", "autoupdate.trigger_queued": "Update queued — applies on the next cron run", "autoupdate.setup_title": "Set up auto-update", diff --git a/templates/aurora/pages/dashboard.njk b/templates/aurora/pages/dashboard.njk index af9a7f32..cdd6bbef 100644 --- a/templates/aurora/pages/dashboard.njk +++ b/templates/aurora/pages/dashboard.njk @@ -26,11 +26,6 @@
{{ t('dashboard.subtitle') }}
- - {{ t('dashboard.add_peer') }} @@ -38,11 +33,11 @@
- -
+ +
-
+
@@ -53,7 +48,7 @@
-
+
@@ -64,7 +59,7 @@
-
+
@@ -75,7 +70,7 @@
-
+
@@ -86,7 +81,7 @@
-
+
@@ -96,8 +91,8 @@
—
- - + +