quoije/yaris-obd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: timeline max-speed tick as up-arrow + 'Max speed' label

Browse Source 
Replace the circle dot on the scrubber with a small up-pointing arrow just
below the line and a 'Max speed' text label.
This commit is contained in:
Mathieu Moran
2026-08-15 18:05:38 -04:00
parent 7d6dd28680
commit 0072322bc2
3 changed files with 32 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/templates/history.html
+5 -2
View File
@@ -67,14 +67,17 @@
data-tile-attrib="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors &copy; <a href='https://carto.com/attributions'>CARTO</a>" data-tile-attrib="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors &copy; <a href='https://carto.com/attributions'>CARTO</a>"
data-min-zoom="3" data-max-zoom="19"></div> data-min-zoom="3" data-max-zoom="19"></div>
<div id="trip-timeline" class="border-top p-3" hidden> <div id="trip-timeline" class="border-top p-3" hidden>
<div class="d-flex align-items-center gap-3"> <div class="d-flex align-items-center gap-3 mb-2">
<button id="trip-play" class="btn btn-primary btn-sm" type="button" aria-label="Play"> <button id="trip-play" class="btn btn-primary btn-sm" type="button" aria-label="Play">
<i class="fas fa-play" aria-hidden="true"></i> <i class="fas fa-play" aria-hidden="true"></i>
</button> </button>
<div class="position-relative flex-grow-1"> <div class="position-relative flex-grow-1">
<input id="trip-scrubber" class="form-range w-100" type="range" <input id="trip-scrubber" class="form-range w-100" type="range"
min="0" max="0" value="0" aria-label="Trip replay timeline"> min="0" max="0" value="0" aria-label="Trip replay timeline">
<div id="trip-max-tick" class="trip-max-tick" title="Max speed" hidden></div> <div id="trip-max-tick" class="trip-max-tick" title="Max speed" hidden>
<span class="trip-max-tick-arrow" aria-hidden="true"></span>
<span class="trip-max-tick-label">Max speed</span>
</div>
</div> </div>
</div> </div>
<div class="d-flex flex-wrap justify-content-between gap-2 small mt-2"> <div class="d-flex flex-wrap justify-content-between gap-2 small mt-2">
static/yaris.css
+22 -9
View File
@@ -334,20 +334,33 @@ body {
padding-bottom: .375rem; padding-bottom: .375rem;
} }
/* Max-speed tick overlaid on the trip replay scrubber. */ /* Max-speed tick overlaid on the trip replay scrubber: a small up-arrow with
an event label, sitting just below the scrubber line. */
.trip-max-tick { .trip-max-tick {
position: absolute; position: absolute;
top: 50%; top: 100%;
transform: translate(-50%, -50%); transform: translateX(-50%);
width: 12px; display: flex;
height: 12px; flex-direction: column;
border-radius: 50%; align-items: center;
background: #f6c23e; gap: 1px;
border: 2px solid #fff; line-height: 1;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
cursor: pointer; cursor: pointer;
z-index: 2; z-index: 2;
} }
.trip-max-tick-arrow {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 7px solid #f6c23e;
}
.trip-max-tick-label {
font-size: .62rem;
font-weight: 600;
color: #9a7d0a;
white-space: nowrap;
}
/* ── Dashcam / video ─────────────────────────────────────────────────────── */ /* ── Dashcam / video ─────────────────────────────────────────────────────── */
templates/history.html
+5 -2
View File
@@ -64,14 +64,17 @@
<div id="history-map" aria-label="Selected trip route map" <div id="history-map" aria-label="Selected trip route map"
data-min-zoom="8" data-max-zoom="15"></div> data-min-zoom="8" data-max-zoom="15"></div>
<div id="trip-timeline" class="border-top p-3" hidden> <div id="trip-timeline" class="border-top p-3" hidden>
<div class="d-flex align-items-center gap-3"> <div class="d-flex align-items-center gap-3 mb-2">
<button id="trip-play" class="btn btn-primary btn-sm" type="button" aria-label="Play"> <button id="trip-play" class="btn btn-primary btn-sm" type="button" aria-label="Play">
<i class="fas fa-play" aria-hidden="true"></i> <i class="fas fa-play" aria-hidden="true"></i>
</button> </button>
<div class="position-relative flex-grow-1"> <div class="position-relative flex-grow-1">
<input id="trip-scrubber" class="form-range w-100" type="range" <input id="trip-scrubber" class="form-range w-100" type="range"
min="0" max="0" value="0" aria-label="Trip replay timeline"> min="0" max="0" value="0" aria-label="Trip replay timeline">
<div id="trip-max-tick" class="trip-max-tick" title="Max speed" hidden></div> <div id="trip-max-tick" class="trip-max-tick" title="Max speed" hidden>
<span class="trip-max-tick-arrow" aria-hidden="true"></span>
<span class="trip-max-tick-label">Max speed</span>
</div>
</div> </div>
</div> </div>
<div class="d-flex flex-wrap justify-content-between gap-2 small mt-2"> <div class="d-flex flex-wrap justify-content-between gap-2 small mt-2">