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

ui(migrate): wrap empty-state in a bordered callout panel

Browse Source 
The 'No backups from other hosts visible…' empty state was rendering as
centred text inside the outer card, which read as floating prose rather
than a defined block. Wrapped it in a bordered callout (matches the
visual weight of the per-app task cards): rounded border, surface-2
background, padding, plus a centred location-pin glyph above the
message and the existing 'Open Locations' button as the CTA.

Inline styles so it works against the existing theme vars without
needing a new CSS rule.

Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-05-27 00:28:07 +01:00
parent ab43b97da2
commit 4cda8490ce
1 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
containers/libreportal/frontend/html/backup-content.html
View File

@ -158,18 +158,27 @@
<span class="backup-card-hint">Restore an app from another LibrePortal</span>
</div>
<div class="backup-migrate-empty" id="backup-migrate-empty" hidden>
<div class="backup-empty-state">
No backups from other hosts visible in any enabled location.<br>
Add a <strong>shared backup location</strong> on both hosts to enable cross-host migrate.
<div style="margin-top:12px">
<button type="button" class="backup-primary-btn" data-action="go-to-locations">
<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="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
Open Locations
</button>
<!-- Bordered callout panel — matches the per-app task-card
visual so the empty state reads as a contained block
rather than floating centred text. -->
<div class="backup-empty-state" style="border: 1px solid var(--border-color, #2a2a2a); background: var(--surface-2, rgba(255,255,255,0.02)); border-radius: 10px; padding: 28px 24px; margin: 12px 0;">
<div style="margin-bottom: 6px; opacity: .7; display: flex; justify-content: center;">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
</div>
<div style="margin-bottom: 14px;">
No backups from other hosts visible in any enabled location.<br>
Add a <strong>shared backup location</strong> on both hosts to enable cross-host migrate.
</div>
<button type="button" class="backup-primary-btn" data-action="go-to-locations">
<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="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
Open Locations
</button>
</div>
</div>
<div class="backup-migrate-body" id="backup-migrate-body"></div>