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

refactor(overview): de-chrome the embedded Backups + Peers sub-tabs

Browse Source 
The Backups tab's embedded BackupPage repeated the active section as a
big page header (icon + 'Dashboard' + subtitle) right under the nested
strip that already names it. Embedded-scoped CSS now hides the title
block and flips the header below the body (flex order), so its actions
(Refresh + per-section primary) become a bottom-left footer row — the
same place app-detail tabs keep theirs. The export dropdown flips to
open upward from the footer. The standalone /backup page is untouched.

The Migrate ▸ Peers sub-tab drops its page header (breadcrumb + title
+ blurb) the same way: the peer list/empty state now sit in the shared
recessed .ov-tab-body container with the four actions in a bottom-left
.peers-actions footer.

Signed-off-by: librelad <librelad@digitalangels.vip>

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
librelad 2026-06-12 19:41:35 +01:00
parent 0e8f645334
commit 3afe40bbbc
2 changed files with 81 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
containers/libreportal/frontend/components/admin/peers/html/peers-content.html
View File

@ -1,51 +1,49 @@
<div class="peers-page">
<div class="page-header config-page-header">
<div class="page-header-title">
<div class="admin-breadcrumb">Tools</div>
<h1>Peers</h1>
<p>Named references to other LibrePortal instances. Use them in the Migrate tab to pull apps across without typing hostnames.</p>
</div>
<div class="page-header-actions">
<button class="backup-refresh-btn" id="peers-refresh-btn" title="Refresh">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<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>
Refresh
</button>
<button class="backup-secondary-btn" id="peers-token-btn" title="Show this host's pairing token">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="11" width="18" height="11" rx="2"></rect>
<path d="M7 11V7a5 5 0 0110 0v4"></path>
</svg>
Show my token
</button>
<button class="backup-secondary-btn" id="peers-pair-btn" title="Paste a token from another LibrePortal">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07L11.5 5.45"></path>
<path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07L12.5 18.55"></path>
</svg>
Pair with token
</button>
<button class="backup-primary-btn" id="peers-add-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
Add backup-channel peer
</button>
<!-- No page header: this fragment renders inside the Overview ▸ Migrate ▸
Peers sub-tab, whose strip already names the section. The peer list
sits in the shared recessed container and the actions live in a
bottom-left footer row, like every app-detail tab. -->
<div class="ov-tab-body peers-body">
<div class="peers-empty" id="peers-empty" hidden style="padding:24px; text-align:center; opacity:.75">
<p>No peers yet.</p>
<p class="backup-card-hint">
Add one to give a memorable name to another LibrePortal you share a backup location with.
Or use <strong>Show my token</strong> / <strong>Pair with token</strong> for direct-SSH peers.
</p>
</div>
<div class="peers-list" id="peers-list"></div>
</div>
<div class="peers-empty" id="peers-empty" hidden style="padding:24px; text-align:center; opacity:.75">
<p>No peers yet.</p>
<p class="backup-card-hint">
Add one to give a memorable name to another LibrePortal you share a backup location with.
Or use <strong>Show my token</strong> / <strong>Pair with token</strong> for direct-SSH peers.
</p>
<div class="peers-actions" id="peers-actions">
<button class="backup-refresh-btn" id="peers-refresh-btn" title="Refresh">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<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>
Refresh
</button>
<button class="backup-secondary-btn" id="peers-token-btn" title="Show this host's pairing token">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="11" width="18" height="11" rx="2"></rect>
<path d="M7 11V7a5 5 0 0110 0v4"></path>
</svg>
Show my token
</button>
<button class="backup-secondary-btn" id="peers-pair-btn" title="Paste a token from another LibrePortal">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07L11.5 5.45"></path>
<path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07L12.5 18.55"></path>
</svg>
Pair with token
</button>
<button class="backup-primary-btn" id="peers-add-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
Add backup-channel peer
</button>
</div>
<div class="peers-list" id="peers-list" style="padding-top:8px"></div>
</div>
<div class="backup-modal" id="peers-add-modal">

40
containers/libreportal/frontend/components/apps/overview/css/overview.css
View File

@ -223,6 +223,35 @@
background: var(--card-bg);
border-radius: 0 0 12px 12px;
}
/* Embedded, the nested strip already names the section — BackupPage's big
page header (icon + h1 + subtitle) is redundant chrome. Hide the title
block and flip the header below the body via flex order, so its action
buttons (Refresh + the per-section primary) become a bottom-LEFT footer
row — the same place the app-detail tabs put theirs (.config-actions). */
#overview-view #ov-pane-backups .backup-page-section {
display: flex;
flex-direction: column;
}
#overview-view #ov-pane-backups .backup-page-section > .page-header {
order: 2;
border-bottom: none;
border-top: 1px solid rgba(var(--text-rgb), 0.08);
margin-bottom: 0;
padding: 16px 22px;
}
#overview-view #ov-pane-backups .backup-page-section > .page-header .page-header-icon-slot,
#overview-view #ov-pane-backups .backup-page-section > .page-header .page-header-title {
display: none;
}
#overview-view #ov-pane-backups .backup-page-body { order: 1; }
/* The export dropdown anchors below the actions; with the actions now at the
card's bottom edge it must open upward (and leftward) to stay on the card. */
#overview-view #ov-pane-backups .backup-page-section > .page-header .backup-export-menu {
top: auto;
bottom: calc(100% + 6px);
right: auto;
left: 0;
}
/* ---- Migrate tab: segmented sub-tabs (per-app Config-tab design) -------- */
/* .tabs-wrapper/.tabs-list/.tabs-content/.tab-button come from base.css; the
@ -231,6 +260,17 @@
#overview-view .ov-subtabs-content .tab-panel { display: none; }
#overview-view .ov-subtabs-content .tab-panel.active { display: block; }
/* Peers sub-tab: actions footer at the bottom left, mirroring the app-detail
tabs' .config-actions row. Left padding lines the buttons up with the
.ov-tab-body container's 16px inset above. */
#overview-view .peers-actions {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
padding: 0 16px 16px;
}
/* ---- per-app Updates tab (app-detail) ----------------------------------- */
/* Same idiom as the Config / Backups / Tasks tabs: a title block (icon + h3 +
description, with a bottom-border divider) followed by a recessed dark