From 3afe40bbbc42d53e6b8c57940603fb978a928a39 Mon Sep 17 00:00:00 2001 From: librelad Date: Fri, 12 Jun 2026 19:41:35 +0100 Subject: [PATCH] refactor(overview): de-chrome the embedded Backups + Peers sub-tabs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Co-Authored-By: Claude Fable 5 --- .../admin/peers/html/peers-content.html | 84 +++++++++---------- .../components/apps/overview/css/overview.css | 40 +++++++++ 2 files changed, 81 insertions(+), 43 deletions(-) diff --git a/containers/libreportal/frontend/components/admin/peers/html/peers-content.html b/containers/libreportal/frontend/components/admin/peers/html/peers-content.html index cee326c..35287db 100644 --- a/containers/libreportal/frontend/components/admin/peers/html/peers-content.html +++ b/containers/libreportal/frontend/components/admin/peers/html/peers-content.html @@ -1,51 +1,49 @@
-
-
-
Tools
-

Peers

-

Named references to other LibrePortal instances. Use them in the Migrate tab to pull apps across without typing hostnames.

-
-
- - - - + +
+ +
-
diff --git a/containers/libreportal/frontend/components/apps/overview/css/overview.css b/containers/libreportal/frontend/components/apps/overview/css/overview.css index 7840eef..5da0ab0 100644 --- a/containers/libreportal/frontend/components/apps/overview/css/overview.css +++ b/containers/libreportal/frontend/components/apps/overview/css/overview.css @@ -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