Compare commits

...

2 Commits

Author SHA1 Message Date
librelad
c913be9808 Merge claude/2 2026-06-12 19:41:35 +01:00
librelad
3afe40bbbc refactor(overview): de-chrome the embedded Backups + Peers sub-tabs
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>
2026-06-12 19:41:35 +01:00
2 changed files with 81 additions and 43 deletions

View File

@ -1,11 +1,20 @@
<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>
<!-- 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="page-header-actions">
<div class="peers-list" id="peers-list"></div>
</div>
<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>
@ -37,17 +46,6 @@
</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>
<div class="peers-list" id="peers-list" style="padding-top:8px"></div>
</div>
<div class="backup-modal" id="peers-add-modal">
<div class="backup-modal-inner">
<div class="backup-modal-header">

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