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

Merge claude/1

Browse Source
This commit is contained in:
librelad 2026-05-28 00:55:17 +01:00
commit ad332f352b
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>

14
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">
<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-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>