From ed4bf41cbabd958001075914ae34fc8a28d0f7c6 Mon Sep 17 00:00:00 2001 From: librelad Date: Sat, 30 May 2026 07:34:32 +0100 Subject: [PATCH] ux(updater): match the Backups page layout (sidebar, padding, click-to-open) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Restructure the updater page to mirror Backups exactly: - updater-content.html: shared .sidebar/.category (with .category-icon SVGs) outside the page card, .config-section + .page-header + a padded .updater-page-body — fixes the missing content padding. - updater.css: layout copied from .backup-* (flex, padding-bottom:48px, body padding:22px); dropped the custom sidebar/header styles (now using the shared chrome); kept the updater-specific content widgets. - updater-page.js: delegate clicks on .updater-layout (sidebar is now a sibling of the card) so clicking a sidebar entry opens that tab; fill the shared page-header icon slot. Co-Authored-By: Claude Opus 4.8 Signed-off-by: librelad --- .../components/updater/updater-content.html | 114 +++++++++++------- .../components/updater/updater-page.js | 13 +- .../frontend/components/updater/updater.css | 89 ++++++-------- 3 files changed, 115 insertions(+), 101 deletions(-) diff --git a/containers/libreportal/frontend/components/updater/updater-content.html b/containers/libreportal/frontend/components/updater/updater-content.html index 0171747..0f1d228 100644 --- a/containers/libreportal/frontend/components/updater/updater-content.html +++ b/containers/libreportal/frontend/components/updater/updater-content.html @@ -1,49 +1,73 @@ - -
-
- + +
+
-
-
- -
-

Overview

-

Update health, security posture, and recovery readiness at a glance.

-
-
- -
-
-
-
-
-
+
+
+ + + + Updates +
+
+ + + + Security +
+
+ + + + Recovery +
+
+ + + + History +
+
+
+ +
+
+
+
+
+
+

Overview

+

Update health, security posture, and recovery readiness at a glance.

+
+
+ +
+
+
+
+
+
+
+
+
+
+
diff --git a/containers/libreportal/frontend/components/updater/updater-page.js b/containers/libreportal/frontend/components/updater/updater-page.js index 9141750..2ae50ae 100644 --- a/containers/libreportal/frontend/components/updater/updater-page.js +++ b/containers/libreportal/frontend/components/updater/updater-page.js @@ -54,11 +54,13 @@ class UpdaterPage { debounceMs: 800, }); - // Delegated click handling for the whole feature root. - const root = document.getElementById('updater-page'); + // Delegated click handling on the whole layout (sidebar is a sibling of the + // page card, both inside .updater-layout). The element is replaced on + // navigation, so the listener is GC'd with it — no cross-page leak. + const root = document.querySelector('.updater-layout'); if (!root) return; root.addEventListener('click', (e) => { - const tabBtn = e.target.closest('.updater-layout .sidebar .category[data-updater-tab]'); + const tabBtn = e.target.closest('.sidebar .category[data-updater-tab]'); if (tabBtn) { this.switchTab(tabBtn.dataset.updaterTab); return; } const action = e.target.closest('[data-updater-action]'); @@ -210,6 +212,11 @@ class UpdaterPage { const subEl = document.getElementById('updater-section-subtitle'); if (titleEl) titleEl.textContent = t[0]; if (subEl) subEl.textContent = t[1]; + // Fill the shared page-header icon slot once (update-cycle glyph). + const iconEl = document.getElementById('updater-page-header-icon'); + if (iconEl && !iconEl.firstChild) { + iconEl.innerHTML = ''; + } } render() { diff --git a/containers/libreportal/frontend/components/updater/updater.css b/containers/libreportal/frontend/components/updater/updater.css index cf198f1..10328d3 100644 --- a/containers/libreportal/frontend/components/updater/updater.css +++ b/containers/libreportal/frontend/components/updater/updater.css @@ -1,58 +1,42 @@ -/* App Updater feature styles. Self-contained (does not borrow other features' - classes); uses the shared palette tokens + the --page-updater identity hue +/* App Updater feature styles. Layout mirrors the Backup page: shared + .sidebar/.category + .page-header chrome, with an updater-owned .config-section + card + padded body. Content widgets (stat grid, rows, badges, CVEs) are + updater-specific. Uses the shared palette tokens + the --page-updater hue set on #updater-page. Eager-linked from index.html. */ -.updater-page { padding: 4px 2px 40px; } - +/* ---- Layout (copied from .backup-* so the two pages match exactly) ---- */ .updater-layout { - display: grid; - grid-template-columns: 210px 1fr; - gap: 22px; - align-items: start; -} - -/* Sidebar */ -.updater-sidebar { display: flex; - flex-direction: column; - gap: 4px; - padding: 10px; - border-radius: 14px; - background: rgba(var(--text-rgb), 0.03); - border: 1px solid rgba(var(--text-rgb), 0.07); + min-height: calc(100vh - var(--topbar-height, 60px)); } -.updater-sidebar .sidebar-heading { - font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; - color: rgba(var(--text-rgb), 0.45); - padding: 6px 10px 8px; +.updater-layout .main { + flex: 1; + min-width: 0; + overflow-y: auto; } -.updater-sidebar .category { - display: flex; align-items: center; gap: 9px; - width: 100%; text-align: left; - padding: 9px 11px; border: 0; border-radius: 9px; - background: transparent; color: rgba(var(--text-rgb), 0.7); - font-size: 0.86rem; font-weight: 500; cursor: pointer; - transition: background 0.15s, color 0.15s; +.updater-page { + color: var(--text-primary); + width: 100%; + padding-bottom: 48px; } -.updater-sidebar .category .cat-ico { opacity: 0.8; font-size: 0.95em; width: 1.1em; text-align: center; } -.updater-sidebar .category:hover { background: rgba(var(--text-rgb), 0.05); color: rgba(var(--text-rgb), 0.95); } -.updater-sidebar .category.active { - background: rgba(var(--page-rgb, var(--accent-rgb)), 0.16); +/* One .config-section card holding the .page-header (flush, its border acts as + the divider) + the body, which carries the padding. */ +.updater-page-section { + padding: 0; + overflow: hidden; +} +.updater-page-section > .page-header { + margin-bottom: 0; +} +.updater-page-body { + padding: 22px; +} +/* The page-header icon tints with the page hue. */ +#updater-page .page-header-icon-slot { color: rgb(var(--page-rgb, var(--accent-rgb))); } -/* Header */ -.updater-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } -.updater-header-icon { - display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; - color: rgb(var(--page-rgb, var(--accent-rgb))); - background: rgba(var(--page-rgb, var(--accent-rgb)), 0.14); - border: 1px solid rgba(var(--page-rgb, var(--accent-rgb)), 0.3); -} -.updater-header h1 { margin: 0; font-size: 1.5rem; } -.updater-header p { margin: 2px 0 0; color: rgba(var(--text-rgb), 0.55); font-size: 0.86rem; } - -/* Stat grid (overview) */ +/* ---- Overview stat cards ---- */ .updater-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; } .updater-stat { position: relative; padding: 18px; border-radius: 14px; @@ -64,7 +48,7 @@ .updater-stat-sub { color: rgba(var(--text-rgb), 0.5); font-size: 0.78rem; margin-top: 2px; } .updater-stat .updater-btn { margin-top: 12px; } -/* Lists / rows */ +/* ---- Lists / rows ---- */ .updater-toolbar { display: flex; gap: 10px; margin-bottom: 14px; } .updater-list { display: flex; flex-direction: column; gap: 8px; } .updater-row { @@ -77,7 +61,7 @@ .updater-row-ver { color: rgba(var(--text-rgb), 0.6); font-family: var(--font-mono); font-size: 0.8rem; } .updater-arrow { color: rgb(var(--page-rgb, var(--accent-rgb))); } -/* Badges */ +/* ---- Badges ---- */ .updater-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; @@ -91,7 +75,7 @@ .sev-medium { background: rgba(234, 179, 8, 0.16); color: #fcd34d; } .sev-low { background: rgba(var(--text-rgb), 0.1); color: rgba(var(--text-rgb), 0.6); } -/* CVE blocks */ +/* ---- CVE blocks ---- */ .updater-cve-app { padding: 12px 15px; border-radius: 11px; background: rgba(var(--text-rgb), 0.035); border: 1px solid rgba(var(--text-rgb), 0.07); } .updater-cve-app-name { font-weight: 600; margin-bottom: 8px; } .updater-cve { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid rgba(var(--text-rgb), 0.06); font-size: 0.82rem; } @@ -104,8 +88,9 @@ .updater-cve-pkg { color: rgba(var(--text-rgb), 0.6); } .updater-cve-fix { margin-left: auto; color: rgba(var(--page-verify-rgb), 0.9); font-size: 0.76rem; } -/* Buttons */ +/* ---- Buttons ---- */ .updater-btn { + display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 9px; cursor: pointer; font-size: 0.82rem; font-weight: 600; background: rgba(var(--text-rgb), 0.07); color: rgba(var(--text-rgb), 0.9); border: 1px solid rgba(var(--text-rgb), 0.12); transition: background 0.15s, border-color 0.15s; @@ -118,13 +103,11 @@ } .updater-btn-primary:hover { background: rgba(var(--page-rgb, var(--accent-rgb)), 0.3); } -/* Hints / empty states */ +/* ---- Hints / empty states ---- */ .updater-hint { padding: 12px 15px; border-radius: 11px; margin-bottom: 14px; font-size: 0.84rem; background: rgba(var(--page-rgb, var(--accent-rgb)), 0.08); border: 1px solid rgba(var(--page-rgb, var(--accent-rgb)), 0.2); color: rgba(var(--text-rgb), 0.75); } .updater-empty { padding: 40px 20px; text-align: center; color: rgba(var(--text-rgb), 0.55); display: flex; flex-direction: column; gap: 14px; align-items: center; } -@media (max-width: 820px) { - .updater-layout { grid-template-columns: 1fr; } - .updater-sidebar { flex-direction: row; flex-wrap: wrap; } +@media (max-width: 600px) { .updater-row { grid-template-columns: 1fr; gap: 6px; } }