9522cc1d8d
The per-app Backups tab was the odd one out: snapshots and the "Backup now" / "Open backup center" buttons all sat inside a single flat .backup-app-card with no styling parity to Services or Tasks. The Services tab uses .services-title (20px header + bottom border) on top of a recessed .services-rows panel; Tasks uses the same recipe with .tasks-title + .tasks-container. Backups now matches. .backup-title is the header row — h3 + subtitle on the left, Backup-now (primary) and Open-backup-center (secondary) buttons pinned to the right so they stay reachable regardless of how long the snapshot list grows. No pagination needed: the renderer already soft-caps the displayed list at 50 with an "Open backup center" overflow link, and per-app snapshot counts almost never exceed that. .backup-snapshots-container is the dark panel (rgba bg 0.2, radius 8, padding/margin 16) wrapping the existing status line + snapshot rows. JS untouched — it still writes to #backup-app-card-status and #backup-app-card-snapshots; only the outer shell changed. Signed-off-by: librelad <librelad@digitalangels.vip>
103 lines
4.2 KiB
HTML
Executable File
103 lines
4.2 KiB
HTML
Executable File
<!-- App Management Layout -->
|
|
<div class="container">
|
|
<!-- Mobile overlay -->
|
|
<div class="mobile-overlay" id="mobile-overlay"></div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="sidebar" id="sidebar">
|
|
<!-- Categories will be dynamically generated here -->
|
|
<div id="dynamic-categories"></div>
|
|
</div>
|
|
|
|
<!-- Main content -->
|
|
<div class="main">
|
|
<div class="app-header" id="app-header">
|
|
<!-- App info will be dynamically inserted -->
|
|
</div>
|
|
|
|
<!-- Tabbed Interface -->
|
|
<div class="tabbed-interface">
|
|
<div class="tab-navigation">
|
|
<button class="tab-button active" data-tab="config" onclick="if(window.appTabbedManager) window.appTabbedManager.switchTab('config')">
|
|
<span class="tab-emoji">🛠️</span>
|
|
<span class="tab-name">Config</span>
|
|
</button>
|
|
<button class="tab-button" data-tab="services" onclick="if(window.appTabbedManager) window.appTabbedManager.switchTab('services')">
|
|
<span class="tab-emoji">⚡</span>
|
|
<span class="tab-name">Services</span>
|
|
</button>
|
|
<button class="tab-button" data-tab="tools" style="display: none;" onclick="if(window.appTabbedManager) window.appTabbedManager.switchTab('tools')">
|
|
<span class="tab-emoji">🧰</span>
|
|
<span class="tab-name">Tools</span>
|
|
</button>
|
|
<button class="tab-button" data-tab="routing" style="display: none;" onclick="if(window.appTabbedManager) window.appTabbedManager.switchTab('routing')">
|
|
<span class="tab-emoji">🛡️</span>
|
|
<span class="tab-name">Routing</span>
|
|
</button>
|
|
<button class="tab-button" data-tab="backups" onclick="if(window.appTabbedManager) window.appTabbedManager.switchTab('backups')">
|
|
<span class="tab-emoji">💾</span>
|
|
<span class="tab-name">Backups</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content">
|
|
<!-- Config Tab -->
|
|
<div class="tab-pane active" id="config-tab">
|
|
<div class="config-section" id="config-section">
|
|
<!-- Config form will be dynamically inserted -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Services Tab -->
|
|
<div class="tab-pane" id="services-tab">
|
|
<div class="services-section">
|
|
<div id="services-list" class="services-list">
|
|
<!-- Service rows are rendered here by services-manager.js -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tools Tab -->
|
|
<div class="tab-pane" id="tools-tab">
|
|
<div class="tools-section">
|
|
<div id="tools-list" class="tools-list">
|
|
<!-- Tool buttons are rendered here by tools-manager.js -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Routing Tab (Traefik only) -->
|
|
<div class="tab-pane" id="routing-tab">
|
|
<div class="routing-section-wrap">
|
|
<div id="routing-list" class="routing-list">
|
|
<!-- Routing rows rendered by routing-manager.js -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Backups Tab -->
|
|
<div class="tab-pane" id="backups-tab">
|
|
<div class="backup-section" id="backup-section">
|
|
<div class="backup-title">
|
|
<div class="backup-title-main">
|
|
<h3>💾 Backups</h3>
|
|
<p>Backups for <span id="backup-app-name">this app</span> across all configured locations.</p>
|
|
</div>
|
|
<div class="backup-title-actions">
|
|
<button type="button" class="backup-primary-btn" id="backup-app-card-backup-btn">Backup now</button>
|
|
<a class="backup-secondary-btn" href="/backup">Open backup center →</a>
|
|
</div>
|
|
</div>
|
|
<div class="backup-snapshots-container">
|
|
<div class="backup-app-card-status" id="backup-app-card-status">Loading…</div>
|
|
<div class="backup-app-card-snapshots" id="backup-app-card-snapshots"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|