4aiman/baldav
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Record screen: remove the status line + its black bar, tighten button padding, move ⛔/↪ off the zoom controls

Browse source 
- Drop the status line (and any text it showed) from the record screen; keep
  a no-op statusEl sink so existing writes don't crash. Removes the empty
  black bar above the buttons. Tighter .rec-bottom padding.
- The nogo (⛔) and reroute (↪) buttons had no position class, so they piled
  at the map top-left over the zoom controls. Give them stack slots.
This commit is contained in:
4aiman 2026-10-17 14:43:57 +03:00
commit 87a7fccfcc
2 changed files with 10 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/css/styles.css
View file

@ -1275,6 +1275,10 @@ select {
.rec-route-toggle { right: 8px; bottom: 200px; }
.rec-dark-toggle { right: 8px; bottom: 238px; }
.rec-follow-btn { right: 8px; bottom: 276px; font-size: 18px; }
/* nogo (⛔) and reroute (↪) had no position class — they piled at the map's top-left over the
zoom controls. Give them slots in the right-hand stack. */
.rec-nogo-btn { right: 8px; bottom: 314px; }
.rec-reroute-btn { right: 8px; bottom: 352px; }
/* Dark map: invert ONLY the tile layer (overlays — track, route, roads, puck — keep
their colours). User-tuned filter on OSM standard tiles. Applies to every Leaflet map. */
body.dark-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(1.5); }
@ -1411,8 +1415,6 @@ body.dark-map .poi-badge { background: #111; border-color: #eee; }
}
.rec-topbar .rec-top { font-size: 27px; font-weight: 700; color: var(--on-surface); }
.rec-topbar .rec-top-mid { color: var(--muted); }
/* Status line now stands alone under the stats (no longer stealing the buttons' width). */
.rec-panel > .rec-status { font-size: 12px; color: var(--muted); text-align: center; padding: 0 12px 4px; min-height: 14px; }
.rec-lbl {
font-size: 10px;
@ -1432,9 +1434,9 @@ body.dark-map .poi-badge { background: #111; border-color: #eee; }
.rec-bottom {
display: flex;
align-items: stretch;
gap: 10px;
padding: 8px 12px;
padding-bottom: calc(8px + var(--safe-area-bottom));
gap: 8px;
padding: 6px 8px;
padding-bottom: calc(6px + var(--safe-area-bottom));
background: var(--surface);
}

7
frontend/js/main.js
View file

@ -4605,7 +4605,6 @@ async function renderRecordingInline(container) {
<div class="rec-stat"><span id="rec-speed" class="rec-val">0</span><span class="rec-lbl">км/ч</span></div>
<div class="rec-stat"><span id="rec-elev" class="rec-val">—</span><span class="rec-lbl">Высота</span></div>
</div>
<div class="rec-status" id="rec-status">${GPS.recording.state === "waiting_gps" ? "Поиск GPS..." : GPS.recording.state === "ready" ? "Начните движение..." : ""}</div>
<div class="rec-bottom">
<button id="rec-hr-toggle" class="btn-secondary rec-hr-toggle${GPS.recording.hrOn ? " active" : ""}" title="Пульсометр вкл/выкл" aria-label="ЧСС"><svg viewBox="0 0 24 22" width="22" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20S3 14.5 3 8.3C3 5.6 5 4 7.2 4 9 4 10.6 5.1 12 7 13.4 5.1 15 4 16.8 4 19 4 21 5.6 21 8.3c0 1.3-.4 2.5-1 3.7"/><path d="M2 13h5l2-3 2.4 6 2-3H22"/></svg><span id="rec-hr-num" class="rec-hr-num"></span></button>
<button id="rec-pause" class="btn-secondary">${GPS.recording.manualPaused ? "Продолжить" : "Пауза"}</button>
@ -4908,7 +4907,7 @@ async function renderRecordingInline(container) {
async function refreshRecNogos() { recNogoLayer = await drawNogoAreas(map, recNogoLayer, refreshRecNogos); }
refreshRecNogos();
let recNogoBtn = document.createElement("button");
recNogoBtn.className = "rec-map-btn";
recNogoBtn.className = "rec-map-btn rec-nogo-btn";
recNogoBtn.textContent = "⛔";
recNogoBtn.title = "Здесь нет проезда (отметить текущее место)";
recNogoBtn.onclick = async () => {
@ -4925,7 +4924,7 @@ async function renderRecordingInline(container) {
// route or the recording. Tap again to rebuild from the new position; long-press to clear.
let rerouteLayer = null;
let rerouteBtn = document.createElement("button");
rerouteBtn.className = "rec-map-btn";
rerouteBtn.className = "rec-map-btn rec-reroute-btn";
rerouteBtn.textContent = "↪";
rerouteBtn.title = "Объехать: вернуться на маршрут за непроезжим местом";
rerouteBtn.onclick = async () => {
@ -5023,7 +5022,7 @@ async function renderRecordingInline(container) {
let spdEl = document.querySelector("#rec-speed");
let timeEl = document.querySelector("#rec-time");
let elevEl = document.querySelector("#rec-elev");
let statusEl = document.querySelector("#rec-status");
let statusEl = { style: {} }; // status line removed from the UI; keep a no-op sink so the existing statusEl.* writes don't crash
// Speed buffer for median
let speedBuf = [];