jan/racecraft
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: display status items as three cards in a row

Browse source
This commit is contained in:
Jan-Peter von Hunnius 2026-06-05 20:37:17 +02:00
parent cf9af73281
commit aa6293d346
1 changed files with 14 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/views/DashboardView.vue
View file

@ -65,7 +65,7 @@ const aliveCount = computed(() => telemetry.feeds.filter((f) => f.health === 'al
</span> </span>
</div> </div>
<div class="status-grid"> <div class="grid grid-3">
<!-- API Server --> <!-- API Server -->
<div class="status-item"> <div class="status-item">
<span class="status-icon" :class="telemetry.connected ? 'status-ok' : 'status-err'"> <span class="status-icon" :class="telemetry.connected ? 'status-ok' : 'status-err'">
@ -220,28 +220,19 @@ const aliveCount = computed(() => telemetry.feeds.filter((f) => f.health === 'al
background: var(--color-surface-hover); background: var(--color-surface-hover);
} }
.status-grid {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.status-item { .status-item {
display: flex; display: flex;
align-items: flex-start; flex-direction: column;
gap: 0.75rem; gap: 0.5rem;
padding: 0.5rem 0; padding: 0.75rem;
} background: var(--color-surface-hover);
border: 1px solid var(--color-border);
.status-item + .status-item { border-radius: var(--radius);
border-top: 1px solid var(--color-border);
padding-top: 0.75rem;
} }
.status-icon { .status-icon {
font-size: 1.2rem; font-size: 1.4rem;
line-height: 1.3; line-height: 1;
flex-shrink: 0;
} }
.status-ok { color: var(--color-success); } .status-ok { color: var(--color-success); }
@ -252,21 +243,22 @@ const aliveCount = computed(() => telemetry.feeds.filter((f) => f.health === 'al
.status-detail { .status-detail {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.15rem; gap: 0.25rem;
min-width: 0; min-width: 0;
} }
.status-name { .status-name {
font-weight: 600; font-weight: 600;
font-size: 0.9rem; font-size: 0.85rem;
} }
.status-info { .status-info {
font-size: 0.8rem; font-size: 0.78rem;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.4rem; gap: 0.35rem;
flex-wrap: wrap; flex-wrap: wrap;
color: var(--color-text-secondary);
} }
.update-info { .update-info {