ux(updater): match the Backups page layout (sidebar, padding, click-to-open)
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 <noreply@anthropic.com> Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad
parent
e7b299b9cc
commit
ed4bf41cba
@ -1,49 +1,73 @@
|
||||
<!-- App Updater page shell. Panels are filled by features/updater/updater-page.js.
|
||||
Page identity hue: --page-updater (teal), set on the root below. -->
|
||||
<div id="updater-page" class="updater-page admin-page" style="--page: var(--page-updater); --page-rgb: var(--page-updater-rgb);">
|
||||
<div class="updater-layout">
|
||||
<aside class="sidebar updater-sidebar">
|
||||
<div class="sidebar-heading">App Updater</div>
|
||||
<button class="category active" data-updater-tab="overview">
|
||||
<span class="cat-ico">▦</span> Overview
|
||||
</button>
|
||||
<button class="category" data-updater-tab="updates">
|
||||
<span class="cat-ico">⬆</span> Updates
|
||||
</button>
|
||||
<button class="category" data-updater-tab="security">
|
||||
<span class="cat-ico">🛡</span> Security
|
||||
</button>
|
||||
<button class="category" data-updater-tab="recovery">
|
||||
<span class="cat-ico">⟲</span> Recovery
|
||||
</button>
|
||||
<button class="category" data-updater-tab="history">
|
||||
<span class="cat-ico">🗒</span> History
|
||||
</button>
|
||||
</aside>
|
||||
<!-- App Updater page — layout mirrors the Backup page (shared .sidebar/.category
|
||||
+ .page-header + .config-section card with a padded .updater-page-body).
|
||||
Panels are filled by components/updater/updater-page.js. Page identity hue
|
||||
(--page-updater, teal) is set on #updater-page. -->
|
||||
<div class="container updater-layout">
|
||||
<div class="mobile-overlay" id="mobile-overlay"></div>
|
||||
|
||||
<section class="updater-content">
|
||||
<header class="updater-header">
|
||||
<div class="updater-header-icon" aria-hidden="true">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 2v6h-6"></path>
|
||||
<path d="M3 12a9 9 0 0 1 15-6.7L21 8"></path>
|
||||
<path d="M3 22v-6h6"></path>
|
||||
<path d="M21 12a9 9 0 0 1-15 6.7L3 16"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 id="updater-section-title">Overview</h1>
|
||||
<p id="updater-section-subtitle">Update health, security posture, and recovery readiness at a glance.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="updater-panels">
|
||||
<div class="updater-tabpanel active" id="updater-panel-overview"></div>
|
||||
<div class="updater-tabpanel" id="updater-panel-updates"></div>
|
||||
<div class="updater-tabpanel" id="updater-panel-security"></div>
|
||||
<div class="updater-tabpanel" id="updater-panel-recovery"></div>
|
||||
<div class="updater-tabpanel" id="updater-panel-history"></div>
|
||||
<div class="sidebar" id="sidebar">
|
||||
<div class="sidebar-section" id="updater-sidebar-list">
|
||||
<div class="category active" data-updater-tab="overview">
|
||||
<svg class="category-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="7" height="9"></rect><rect x="14" y="3" width="7" height="5"></rect>
|
||||
<rect x="14" y="12" width="7" height="9"></rect><rect x="3" y="16" width="7" height="5"></rect>
|
||||
</svg>
|
||||
Overview
|
||||
</div>
|
||||
</section>
|
||||
<div class="category" data-updater-tab="updates">
|
||||
<svg class="category-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 3v12"></path><polyline points="7 8 12 3 17 8"></polyline><path d="M5 21h14"></path>
|
||||
</svg>
|
||||
Updates
|
||||
</div>
|
||||
<div class="category" data-updater-tab="security">
|
||||
<svg class="category-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
||||
</svg>
|
||||
Security
|
||||
</div>
|
||||
<div class="category" data-updater-tab="recovery">
|
||||
<svg class="category-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
|
||||
</svg>
|
||||
Recovery
|
||||
</div>
|
||||
<div class="category" data-updater-tab="history">
|
||||
<svg class="category-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="9"></circle><polyline points="12 7 12 12 15 14"></polyline>
|
||||
</svg>
|
||||
History
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<div class="updater-page" id="updater-page" style="--page: var(--page-updater); --page-rgb: var(--page-updater-rgb);">
|
||||
<div class="config-section updater-page-section">
|
||||
<div class="page-header" id="updater-page-header">
|
||||
<div class="page-header-icon-slot" id="updater-page-header-icon"></div>
|
||||
<div class="page-header-title">
|
||||
<h1 id="updater-section-title">Overview</h1>
|
||||
<p id="updater-section-subtitle">Update health, security posture, and recovery readiness at a glance.</p>
|
||||
</div>
|
||||
<div class="page-header-actions">
|
||||
<button class="updater-btn" data-updater-action="check" title="Refresh versions & vulnerabilities">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="23 4 23 10 17 10"></polyline>
|
||||
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
|
||||
</svg>
|
||||
Check now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="updater-page-body">
|
||||
<section class="updater-tabpanel active" id="updater-panel-overview"></section>
|
||||
<section class="updater-tabpanel" id="updater-panel-updates"></section>
|
||||
<section class="updater-tabpanel" id="updater-panel-security"></section>
|
||||
<section class="updater-tabpanel" id="updater-panel-recovery"></section>
|
||||
<section class="updater-tabpanel" id="updater-panel-history"></section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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 = '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2v6h-6"></path><path d="M3 12a9 9 0 0 1 15-6.7L21 8"></path><path d="M3 22v-6h6"></path><path d="M21 12a9 9 0 0 1-15 6.7L3 16"></path></svg>';
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
@ -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; }
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user