Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui(app-backups): match services/tasks tab shell — title row with right-pinned actions + recessed snapshot container

Browse Source 
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>
This commit is contained in:
librelad 2026-05-28 00:55:17 +01:00
parent 1a1813f1ea
commit 9522cc1d8d
3 changed files with 85 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
containers/libreportal/frontend/css/backup.css
View File

@ -1219,6 +1219,74 @@
only backup-specific styling is the location pill colour, the
ID chip, the deep-link highlight flash, and the inline tags.
============================================================ */
/* Tab shell — mirrors .services-section / .tasks-section so the
three app-detail tabs share one visual idiom: padding 0 here,
the title block provides its own 20px inset, the snapshots get
a recessed dark container of their own. */
.backup-section {
display: flex;
flex-direction: column;
padding: 0;
}
/* Header row — title left, action buttons right (Backup now /
Open backup center). Pinned at the top of the pane regardless of
scroll so the primary actions stay reachable when the snapshot
list grows. Same shape services-title uses for its Advanced
toggle. */
.backup-title {
padding: 20px;
background: transparent;
border-bottom: 1px solid var(--border-color);
margin-bottom: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.backup-title-main { flex: 1; min-width: 0; }
.backup-title h3 {
margin: 0 0 8px 0;
color: var(--text-primary, #fff);
font-size: 18px;
font-weight: 600;
}
.backup-title p {
margin: 0;
color: var(--text-secondary, #ccc);
font-size: 13px;
}
.backup-title-actions {
display: flex;
gap: 10px;
align-items: center;
flex-shrink: 0;
}
/* Recessed dark panel wrapping the snapshot list — same recipe as
.tasks-container / .services-rows so all three tabs match. */
.backup-snapshots-container {
padding: 16px;
margin: 16px;
background: rgba(var(--bg-rgb), 0.2);
border-radius: 8px;
}
/* Status line above the rows reading "Latest backup 5m ago · N total
across M locations". Set in JS via #backup-app-card-status. */
.backup-app-card-status {
color: var(--text-secondary, #ccc);
font-size: 13px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.backup-app-card-status .backup-card-hint {
color: rgba(var(--text-rgb), 0.5);
}
.backup-snapshot-rows {
display: flex;
flex-direction: column;

12
containers/libreportal/frontend/html/app-content.html
View File

@ -79,12 +79,18 @@
<!-- Backups Tab -->
<div class="tab-pane" id="backups-tab">
<div class="backup-section" id="backup-section">
<div class="backup-app-card" id="backup-app-card">
<div class="backup-app-card-status" id="backup-app-card-status">Loading…</div>
<div class="backup-app-card-actions">
<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>

8
containers/libreportal/frontend/html/apps-unified-layout.html
View File

@ -180,15 +180,17 @@
<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-app-card" id="backup-app-card">
<div class="backup-app-card-status" id="backup-app-card-status">Loading…</div>
<div class="backup-app-card-actions">
<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>