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

Record buttons equal width (border-box + uniform padding); HR strap charge as a background fill on the HR toggle

Browse source 
- Стоп was narrower: buttons had different horizontal padding and weren't
  border-box, so flex-basis:0 didn't equalize them. Force box-sizing + one
  padding on all three .rec-bottom buttons.
- HR strap battery now paints the HR toggle's background bottom-up 0-100%
  (--bat), coloured green/amber/red by level (setHrBatteryFill), instead of
  a number; cleared when HR is toggled off.
This commit is contained in:
4aiman 2026-10-17 14:35:54 +03:00
commit 69b36be591
2 changed files with 19 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/css/styles.css
View file

@ -726,10 +726,12 @@ select {
.workout-screen .btn-primary, .workout-screen .btn-secondary { margin-top: 8px; width: 100%; }
/* HR on/off toggle on the record screen (replaces the wind button): grey = off, coloured = on. */
.rec-hr-toggle { color: #888; display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 6px 10px; }
.rec-hr-toggle { color: #888; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
/* Strap battery as a background fill, bottom-up, 0-100% (--bat), coloured by level (--bat-color). */
background-image: linear-gradient(to top, var(--bat-color, transparent) var(--bat, 0%), transparent var(--bat, 0%)); }
.rec-hr-toggle svg { display: block; }
.rec-hr-toggle.active { color: #fff; background: #ef5350; } /* on = white icon+bpm on solid red */
.rec-hr-num { font-size: 14px; font-weight: 700; min-width: 0; }
.rec-hr-toggle.active { color: #fff; } /* HR on = white icon + bpm (over the battery fill) */
.rec-hr-num { font-size: 15px; font-weight: 700; min-width: 0; }
.rec-hr-num:empty { display: none; }
/* Progress fill for long-running action buttons: the background fills left-to-right by
@ -1436,13 +1438,9 @@ body.dark-map .poi-badge { background: #111; border-color: #eee; }
background: var(--surface);
}
/* All three controls (HR toggle, pause, stop) share the width equally — no clustering right. */
.rec-bottom > button { flex: 1 1 0; }
.rec-bottom .gps-rec {
padding: 12px 0;
flex-shrink: 1;
}
/* All three controls (HR toggle, pause, stop) share the width equally — no clustering right.
border-box + one padding so the different per-button paddings don't make them unequal. */
.rec-bottom > button { flex: 1 1 0; box-sizing: border-box; min-width: 0; padding: 12px 8px; }
.gps-header {
padding: 10px 12px;

12
frontend/js/main.js
View file

@ -1182,6 +1182,14 @@ function setBtnProgress(el, pct) {
el.style.setProperty("--pct", Math.max(0, Math.min(100, Math.round(pct))) + "%");
}
// Show the HR strap charge as a background fill on the HR toggle (0-100%, coloured by level).
function setHrBatteryFill(el, bat) {
if (!el) return;
if (bat == null || bat < 0 || bat > 100) { el.style.removeProperty("--bat"); el.style.removeProperty("--bat-color"); return; }
el.style.setProperty("--bat", bat + "%");
el.style.setProperty("--bat-color", bat > 40 ? "rgba(76,175,80,0.5)" : bat > 15 ? "rgba(255,183,77,0.55)" : "rgba(239,83,80,0.6)");
}
// Before a recording, nudge the user to turn on what it needs: Bluetooth (for the HR strap) and
// location (for the track). Can't silently toggle them on modern Android, so prompt + act: BT via
// the system enable dialog, location via the location-settings screen. Declining is fine, and the
@ -5082,7 +5090,9 @@ async function renderRecordingInline(container) {
if (hrEl) { hrEl.textContent = reading.hr; hrEl.className = "rec-val " + hrZoneClass(reading.hr); }
let hrNum = document.querySelector("#rec-hr-num"); // live HR on the toggle button itself
if (hrNum) hrNum.textContent = reading.hr;
setHrBatteryFill(document.querySelector("#rec-hr-toggle"), GPS.recording.currentBattery); // strap charge
};
setHrBatteryFill(container.querySelector("#rec-hr-toggle"), GPS.recording.currentBattery); // on render, if already known
// Timer — excludes pauses, starts only when recording
let timer = setInterval(() => {
@ -5138,7 +5148,7 @@ async function renderRecordingInline(container) {
hrToggle.disabled = true;
await GPS.setHrOn(!GPS.recording.hrOn);
hrToggle.classList.toggle("active", !!GPS.recording.hrOn);
if (!GPS.recording.hrOn) { let n = container.querySelector("#rec-hr-num"); if (n) n.textContent = ""; } // off -> icon only
if (!GPS.recording.hrOn) { let n = container.querySelector("#rec-hr-num"); if (n) n.textContent = ""; setHrBatteryFill(hrToggle, null); } // off -> icon only, no fill
hrToggle.disabled = false;
};