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

fix: clamp max-speed label at edges + move trip location next to time

Browse Source 
- placeMaxTick() clamps the label so it stays within the scrubber instead of
  overlapping the time/speed readouts when max speed is near an edge
- give the scrubber row more bottom margin (mb-3) so the tick label clears the
  readout row below
- move the trip location readout directly under the timestamp (left side),
  removing the separate bottom line
This commit is contained in:
Mathieu Moran
2026-08-15 18:14:21 -04:00
parent 0072322bc2
commit 42d7f8eb18
3 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/templates/history.html
+5 -3
View File
@@ -67,7 +67,7 @@
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 mb-2"> <div class="d-flex align-items-center gap-3 mb-3">
<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>
@@ -81,13 +81,15 @@
</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">
<strong id="trip-replay-time"></strong> <div class="min-w-0">
<strong id="trip-replay-time" class="d-block"></strong>
<span id="trip-replay-location" class="text-muted" style="font-size:0.75rem;"></span>
</div>
<div class="text-end"> <div class="text-end">
<span id="trip-replay-speed" class="text-muted d-block"></span> <span id="trip-replay-speed" class="text-muted d-block"></span>
<span id="trip-replay-odometer" class="text-muted d-block" style="font-size:0.75rem;"></span> <span id="trip-replay-odometer" class="text-muted d-block" style="font-size:0.75rem;"></span>
</div> </div>
</div> </div>
<div id="trip-replay-location" class="text-muted mt-1" style="font-size:0.75rem;min-height:1rem"></div>
</div> </div>
</div> </div>
</div> </div>
static/js/history.js
+8 -2
View File
@@ -168,8 +168,14 @@
} }
var ratio = st.maxIndex / (st.points.length - 1); var ratio = st.maxIndex / (st.points.length - 1);
var thumb = 16; // approximate range thumb width var thumb = 16; // approximate range thumb width
var usable = Math.max(1, scrubber.clientWidth - thumb); var w = scrubber.clientWidth;
tick.style.left = (thumb / 2 + ratio * usable) + "px"; var usable = Math.max(1, w - thumb);
var x = thumb / 2 + ratio * usable;
// Keep the centered label inside the scrubber so it doesn't overlap the
// time (left) or speed (right) readouts when max speed is at an edge.
var halfLabel = 24;
x = Math.max(halfLabel, Math.min(w - halfLabel, x));
tick.style.left = x + "px";
tick.hidden = false; tick.hidden = false;
} }
templates/history.html
+5 -3
View File
@@ -64,7 +64,7 @@
<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 mb-2"> <div class="d-flex align-items-center gap-3 mb-3">
<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>
@@ -78,13 +78,15 @@
</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">
<strong id="trip-replay-time"></strong> <div class="min-w-0">
<strong id="trip-replay-time" class="d-block"></strong>
<span id="trip-replay-location" class="text-muted" style="font-size:0.75rem;"></span>
</div>
<div class="text-end"> <div class="text-end">
<span id="trip-replay-speed" class="text-muted d-block"></span> <span id="trip-replay-speed" class="text-muted d-block"></span>
<span id="trip-replay-odometer" class="text-muted d-block" style="font-size:0.75rem;"></span> <span id="trip-replay-odometer" class="text-muted d-block" style="font-size:0.75rem;"></span>
</div> </div>
</div> </div>
<div id="trip-replay-location" class="text-muted mt-1" style="font-size:0.75rem;min-height:1rem"></div>
</div> </div>
</div> </div>
</div> </div>