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-min-zoom="3" data-max-zoom="19"></div>
<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">
<i class="fas fa-play" aria-hidden="true"></i>
</button>
<div class="position-relative flex-grow-1">
<input id="trip-scrubber" class="form-range w-100" type="range"
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 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;
}
/* 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 {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
border-radius: 50%;
background: #f6c23e;
border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
top: 100%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
line-height: 1;
cursor: pointer;
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 ─────────────────────────────────────────────────────── */
templates/history.html
+5 -2
View File
@@ -64,14 +64,17 @@
<div id="history-map" aria-label="Selected trip route map"
data-min-zoom="8" data-max-zoom="15"></div>
<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">
<i class="fas fa-play" aria-hidden="true"></i>
</button>
<div class="position-relative flex-grow-1">
<input id="trip-scrubber" class="form-range w-100" type="range"
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 class="d-flex flex-wrap justify-content-between gap-2 small mt-2">