ux(backup): match per-app Backups tab action buttons to the config Save style

"Backup now" and "Open backup center" looked off compared to the rest of
the app page — the secondary link sat underlined with a trailing arrow
glyph instead of a real button, and neither carried an icon. Re-skins
both to use the .btn .btn-primary / .btn .btn-secondary pattern the
config Save / Reset buttons use, so the three action surfaces on an
app page read as one family.

  Backup now           .btn .btn-primary   + upload-cloud SVG (16x16)
  Open backup center   .btn .btn-secondary + external-link SVG (16x16)

The "Open backup center" link is now SPA-routed (preventDefault + call
navigateToRoute) so clicking it doesn't trigger a full page reload —
same behaviour as the deep-link cells in the global Snapshots table.
href is still /backup so cmd/ctrl-click and right-click → open-in-new-tab
still work the natural way.

Applied to both apps-unified-layout.html and the legacy app-content.html
since the existing app-page surface lives in both templates.

Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-05-28 01:36:00 +01:00
parent 930be04e47
commit 713cba76f0
2 changed files with 32 additions and 4 deletions

View File

@ -85,8 +85,22 @@
<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>
<button type="button" class="btn btn-primary" id="backup-app-card-backup-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="17 8 12 3 7 8"></polyline>
<line x1="12" y1="3" x2="12" y2="15"></line>
</svg>
Backup now
</button>
<a class="btn btn-secondary" href="/backup" onclick="event.preventDefault(); if(window.navigateToRoute){window.navigateToRoute('/backup');}else{window.location.href='/backup';}">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
<polyline points="15 3 21 3 21 9"></polyline>
<line x1="10" y1="14" x2="21" y2="3"></line>
</svg>
Open backup center
</a>
</div>
</div>
<div class="backup-snapshots-container">

View File

@ -185,8 +185,22 @@
<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>
<button type="button" class="btn btn-primary" id="backup-app-card-backup-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="17 8 12 3 7 8"></polyline>
<line x1="12" y1="3" x2="12" y2="15"></line>
</svg>
Backup now
</button>
<a class="btn btn-secondary" href="/backup" onclick="event.preventDefault(); if(window.navigateToRoute){window.navigateToRoute('/backup');}else{window.location.href='/backup';}">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
<polyline points="15 3 21 3 21 9"></polyline>
<line x1="10" y1="14" x2="21" y2="3"></line>
</svg>
Open backup center
</a>
</div>
</div>
<div class="backup-snapshots-container">