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

ux(system): match the System-page storage links to the pill CTA

Browse Source 
The "View/Open storage breakdown" links in the System storage summary were
plain text links; restyle them as the same accent pill CTA (icon + label)
used on the Disk metric page.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-05-28 23:28:37 +01:00
parent b04c2e242f
commit 3e18a85572
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
containers/libreportal/frontend/js/components/admin/admin-system.js
View File

@ -352,7 +352,10 @@ class AdminSystem {
return head + `
<div class="sys-storage-summary sys-storage-summary-empty">
<span>${msg}</span>
<button type="button" class="sys-storage-more" data-sys-storage>Open storage breakdown →</button>
<button type="button" class="sys-storage-cta" data-sys-storage title="Open the full storage breakdown">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>
Open storage breakdown
</button>
</div>`;
}
const C = window.LPCharts;
@ -381,7 +384,10 @@ class AdminSystem {
<div class="sys-storage-srows">${rows}</div>
<div class="sys-storage-summary-foot">
<span class="sys-storage-recl-pill">${this.bytes(recl)} reclaimable${reclPct ? ` · ${reclPct}% of total` : ''}</span>
<button type="button" class="sys-storage-more" data-sys-storage>View storage breakdown →</button>
<button type="button" class="sys-storage-cta" data-sys-storage title="Open the full storage breakdown">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>
View storage breakdown
</button>
</div>
</div>
</div>`;