From beddfec8a5f3e6de8e0328146f2b63be948bbf7d Mon Sep 17 00:00:00 2001 From: Mathieu Moran Date: Sun, 9 Aug 2026 23:10:58 -0400 Subject: [PATCH] Phase 23 UX polish: compact layouts, collapsibles, test trip MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 <223556219+Copilot@users.noreply.github.com> --- static/yaris.css | 25 +++- templates/dash.html | 213 +++++++++++++++++------------- templates/history.html | 40 +++--- templates/index.html | 139 +++++++++++--------- templates/settings.html | 284 +++++++++++++++++++++++----------------- 5 files changed, 405 insertions(+), 296 deletions(-) diff --git a/static/yaris.css b/static/yaris.css index cfa41cd..34cb4af 100644 --- a/static/yaris.css +++ b/static/yaris.css @@ -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; } diff --git a/templates/dash.html b/templates/dash.html index 51af7ee..0d0c116 100644 --- a/templates/dash.html +++ b/templates/dash.html @@ -4,102 +4,129 @@ {% block title %}Dashcam - Yaris OBD{% endblock %} {% block content %} -

Dashcam

-
-
-

Detected device

-
-
-

Checking for a USB dashcam...

- - -
-
-
-
-
-

Files on dashcam

- Scanning... -
-
- - - - -
-
-
- {{ data_table( - "dashcam-file-list", - [ - {"key": "selected", "label": "Select", "sortable": false}, - {"key": "path", "label": "File", "sortable": true}, - {"key": "size", "label": "Size", "sortable": true}, - {"key": "modified", "label": "Modified", "sortable": true}, - {"key": "actions", "label": "Actions", "sortable": false} - ], - "No videos found", - "Connect the dashcam in USB storage mode, then refresh this list." - ) }} -
-
-
-
-

Import results

-
-
-

No import has been run yet.

-
-
- -
-
-
-

Imported videos on Pi

- Loading... -
- -
-
- {{ data_table( - "local-video-list", - [ - {"key": "thumbnail", "label": "Preview", "sortable": false}, - {"key": "path", "label": "File", "sortable": true}, - {"key": "size", "label": "Size", "sortable": true}, - {"key": "modified", "label": "Modified", "sortable": true}, - {"key": "uploaded", "label": "Upload", "sortable": true}, - {"key": "actions", "label": "Actions", "sortable": false} - ], - "No imported videos", - "Import videos from the connected dashcam to browse and play them here." - ) }} -
-
+

Dashcam

+ +{# ── Device status bar ───────────────────────────────────────────────── #} +
+
+ + Checking for a USB dashcam… + + +
+
+ +{# ── Files on dashcam (collapsible) ─────────────────────────────────── #} +
+
+ + +
+ + + + +
+
+
+
+ {{ data_table( + "dashcam-file-list", + [ + {"key": "selected", "label": "", "sortable": false}, + {"key": "path", "label": "File", "sortable": true}, + {"key": "size", "label": "Size", "sortable": true}, + {"key": "modified", "label": "Modified", "sortable": true}, + {"key": "actions", "label": "", "sortable": false} + ], + "No videos found", + "Connect the dashcam in USB storage mode, then refresh this list." + ) }} +
+
+ + No import has been run yet. +
+
+
+ +{# ── Imported videos on Pi ───────────────────────────────────────────── #} +
+
+ + Loading… + +
+
+
+ {{ data_table( + "local-video-list", + [ + {"key": "thumbnail", "label": "", "sortable": false}, + {"key": "path", "label": "File", "sortable": true}, + {"key": "size", "label": "Size", "sortable": true}, + {"key": "modified", "label": "Date", "sortable": true}, + {"key": "uploaded", "label": "Upload", "sortable": true}, + {"key": "actions", "label": "", "sortable": false} + ], + "No imported videos", + "Import videos from the connected dashcam to browse and play them here." + ) }} +
+
+
+ +{# ── Video player (hidden until opened) ─────────────────────────────── #} + {% endblock %} {% block scripts %} + {% endblock %} \ No newline at end of file diff --git a/templates/history.html b/templates/history.html index 552dd2b..0509de3 100644 --- a/templates/history.html +++ b/templates/history.html @@ -8,32 +8,29 @@ {% endblock %} {% block content %} -
-
-

Trip history

-

Review recorded drives and replay their routes offline.

-
-
+

Trip history

-
-
-
-
+{# Mobile: list on top, map below. Desktop: side by side. #} +
+ {# ── Trip list ──────────────────────────────────────────────────── #} +
+
+
Recorded trips
-
+
- Loading trips... + Loading…
{{ data_table( "trip-list", [ {"key": "started", "label": "Started", "sortable": true}, - {"key": "distance", "label": "Distance", "sortable": true}, - {"key": "duration", "label": "Duration", "sortable": true}, - {"key": "maxSpeed", "label": "Max speed", "sortable": true}, + {"key": "distance", "label": "km", "sortable": true}, + {"key": "duration", "label": "Time", "sortable": true}, + {"key": "maxSpeed", "label": "Max", "sortable": true}, {"key": "action", "label": "", "sortable": false} ], "No trips detected", @@ -42,9 +39,11 @@
-
-
-
+ + {# ── Route replay map ───────────────────────────────────────────── #} +
+
+
Route replay
Select a trip
@@ -52,10 +51,11 @@