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; 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 */ /* Overview cards */
.admin-card-grid { .admin-card-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px; gap: 16px;
margin-top: 8px;
} }
.admin-card { .admin-card {

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

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

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

@ -204,10 +204,17 @@
flex-direction: column; 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 { .tasks-list {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 16px; padding: 16px;
margin: 16px;
background: rgba(var(--bg-rgb), 0.2);
border-radius: 8px;
} }
/* Hide scrollbar when not needed, show only when scrolling */ /* Hide scrollbar when not needed, show only when scrolling */