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

style(webui): wrap admin dashboard cards + task list in recessed panel

Browse Source 
Match the fleet Overview's .ov-tab-body treatment: the /admin/dashboard
card grid (under the header divider) and the /tasks list now sit inside a
recessed dark rounded box instead of floating directly on the page
gradient.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-06-17 18:23:49 +01:00
parent 9653c33931
commit 0641a9b790
3 changed files with 24 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
containers/libreportal/frontend/components/admin/core/css/admin.css
View File

@ -17,12 +17,21 @@
margin-bottom: 2px;
}
/* Recessed dark panel holding the overview cards, under the header divider —
same recipe as the fleet Overview's .ov-tab-body and the per-app
.tasks-container, so the admin board reads like the other tabbed areas. */
.admin-card-grid-wrap {
margin-top: 16px;
padding: 16px;
background: rgba(var(--bg-rgb), 0.2);
border-radius: 8px;
}
/* Overview cards */
.admin-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
margin-top: 8px;
}
.admin-card {

2
containers/libreportal/frontend/components/admin/overview/js/overview-page.js
View File

@ -243,12 +243,14 @@ class OverviewPage {
<p>System health and admin status at a glance. Manage anything from the cards below.</p>
</div>
</div>
<div class="admin-card-grid-wrap">
<div class="admin-card-grid">
${updCard}
${backupCard}
${sshCard}
${sysCard}
</div>
</div>
</div>`;
}

7
containers/libreportal/frontend/components/tasks/css/tasks.css
View File

@ -204,10 +204,17 @@
flex-direction: column;
}
/* Recessed dark panel holding the task list — same recipe as the fleet
Overview's .ov-tab-body / the per-app .tasks-container, so the list reads
as a contained box under the status-bar strip rather than floating on the
page gradient. */
.tasks-list {
flex: 1;
overflow-y: auto;
padding: 16px;
margin: 16px;
background: rgba(var(--bg-rgb), 0.2);
border-radius: 8px;
}
/* Hide scrollbar when not needed, show only when scrolling */