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