nessi/NexaPG
1
0
Fork 0
Code Issues 19 Pull Requests Actions Packages Projects Releases 13 Activity

Revamp Dashboard UI and enhance target display.

Browse Source 
Refactored the dashboard page to improve layout and clarity, including updated KPIs with better alert and status representation. Redesigned the target list to a card-based layout with clear status indicators and actionable buttons. Updated styles for consistency and better user experience.
This commit is contained in:
Sascha Nesterovic
2026-02-12 12:14:03 +01:00
parent c63e08748c
commit c191a67fa7
3 changed files with 139 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
frontend/src/styles.css
View File

@@ -253,6 +253,102 @@ button {
color: #bfd0ea;
}
.dashboard-kpis .kpi-card {
border-left: 4px solid #2f7eca;
}
.dashboard-kpis .kpi-card.ok {
border-left-color: #2fa86f;
}
.dashboard-kpis .kpi-card.alert {
border-left-color: #d47a2a;
}
.dashboard-targets-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.dashboard-targets-head h3 {
margin: 0;
}
.dashboard-targets-head span {
color: #9eb8d6;
font-size: 13px;
}
.dashboard-target-list {
display: grid;
gap: 12px;
}
.dashboard-target-card {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
border: 1px solid #2b5b8f;
border-radius: 12px;
padding: 14px;
background: linear-gradient(180deg, #132c58, #102549);
}
.target-main h4 {
margin: 0;
font-size: 20px;
font-weight: 800;
}
.target-main p {
margin: 5px 0 0 0;
color: #d5e7ff;
}
.target-title-row {
display: flex;
align-items: center;
gap: 10px;
}
.status-chip {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
border: 1px solid transparent;
}
.status-chip.ok {
color: #bbf7d0;
background: #123827;
border-color: #2f8f63;
}
.status-chip.alert {
color: #fde68a;
background: #3a2c12;
border-color: #9b7b2f;
}
.details-btn {
display: inline-block;
padding: 8px 14px;
border-radius: 10px;
font-weight: 700;
border: 1px solid #2d9adb;
background: linear-gradient(180deg, #1c6aab, #17568c);
color: #eaf5ff;
}
.details-btn:hover {
border-color: #6ed2ff;
}
.query-insights-page .query-toolbar {
display: grid;
grid-template-columns: minmax(220px, 320px) minmax(320px, 1fr);
@@ -448,7 +544,7 @@ button {
align-self: end;
}
.target-actions {
.form-actions {
display: flex;
justify-content: flex-end;
gap: 8px;