Phase 23 UX polish: compact layouts, collapsibles, test trip
Dashboard: - OBD stat cards more compact (py-2, h6 health values, 'OBD' label fits) - obd-val class prevents Disconnected wrapping - Speed graph collapsed by default with toggle chevron button - GPS map + coordinates merged into single card with footer coords - Pi health rows use h6 (less tall), alert py-2 Dashcam: - Device status is now a compact single-line bar - Files on dashcam section is collapsible (hidden by default) - Import status moved into the dashcam files card footer - Imported videos on Pi moved to top, open by default - Column headers trimmed (Select→empty, Actions→empty, Preview→empty) Trip history: - col-12 on mobile so list stacks above the map - Shorter column labels (Distance→km, Duration→Time, Max speed→Max) - history-map height reduced for mobile (22rem on small screens) Settings: - Cellular + ntfy merged into one collapsible card - Alert thresholds collapsible (advanced) - Phone hotspot instructions shortened - Upload retention uses inline row layout (compact) - All cards use shadow-sm, smaller headers CSS: - obd-val: word-break + smaller font for OBD status values - collapse-chevron: smooth rotation transition - #map height 18rem (was 20rem) - history-map 32rem desktop / 22rem mobile (was 36rem) Co-authored-by: Copilot <[email protected]>
This commit is contained in:
+22
-3
@@ -211,11 +211,17 @@ body {
|
||||
|
||||
/* ── Maps ────────────────────────────────────────────────────────────────── */
|
||||
|
||||
#map { height: 20rem; }
|
||||
#map {
|
||||
height: 18rem;
|
||||
}
|
||||
|
||||
#history-map {
|
||||
height: 36rem;
|
||||
min-height: 24rem;
|
||||
height: 32rem;
|
||||
min-height: 20rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
#history-map { height: 22rem; }
|
||||
}
|
||||
|
||||
/* ── Alert dropdown ──────────────────────────────────────────────────────── */
|
||||
@@ -286,6 +292,19 @@ body {
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
/* Shrink long values (e.g. "Disconnected") so they don't wrap */
|
||||
.obd-val {
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* ── Collapsible chevron ──────────────────────────────────────────────────── */
|
||||
|
||||
.collapse-chevron {
|
||||
transition: transform .2s ease;
|
||||
}
|
||||
|
||||
/* ── Misc ────────────────────────────────────────────────────────────────── */
|
||||
|
||||
.border-start-primary { border-left: .25rem solid var(--primary) !important; }
|
||||
|
||||
Reference in New Issue
Block a user