ed4bf41cba
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>
74 lines
3.9 KiB
HTML
74 lines
3.9 KiB
HTML
<!-- 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>
|
|
|
|
<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>
|
|
<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>
|