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

Profile: render settings checkboxes as toggle switches

Browse source 
The .form-group input rule (width:100% + appearance:none) stretched every
checkbox into an empty full-width box. Add a .toggle class styling a checkbox
as a sliding on/off switch and apply it to the TEF, hydration and live-share
toggles in the profile modal.
This commit is contained in:
4aiman 2026-10-26 18:25:07 +03:00
commit 738c4e81a1
2 changed files with 39 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

36
frontend/css/styles.css
View file

@ -257,6 +257,42 @@ body {
appearance: none;
}
/* Toggle switch: a checkbox styled as a sliding on/off switch. Overrides the
full-width .form-group input rule above (which otherwise stretches a checkbox
into an empty box). Apply class="toggle" to <input type="checkbox">. */
.form-group input[type="checkbox"].toggle {
width: 46px;
height: 26px;
flex: 0 0 auto;
padding: 0;
border-radius: 13px;
background: var(--bg);
border: 1px solid var(--border);
position: relative;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.form-group input[type="checkbox"].toggle::after {
content: "";
position: absolute;
top: 50%;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--muted);
transform: translateY(-50%);
transition: left 0.15s, background 0.15s;
}
.form-group input[type="checkbox"].toggle:checked {
background: var(--primary);
border-color: var(--primary);
}
.form-group input[type="checkbox"].toggle:checked::after {
left: 23px;
background: #fff;
}
select {
background: var(--bg);
color: var(--on-surface);

6
frontend/js/main.js
View file

@ -8256,7 +8256,7 @@ function showProfileModal() {
</div>
<div class="form-group">
<label style="display:flex;align-items:center;gap:8px;cursor:pointer">
<input id="m-tef" type="checkbox" ${(GPS.config.tefFrac ?? 0) > 0 ? "checked" : ""}>
<input id="m-tef" class="toggle" type="checkbox" ${(GPS.config.tefFrac ?? 0) > 0 ? "checked" : ""}>
Учитывать переваривание (TEF 10%)
</label>
<div style="font-size:11px;color:#9aa4ae;margin-top:2px">Часть съеденного тратится на переваривание. Расход масштабируется от еды; на поддержке баланс не меняется.</div>
@ -8267,7 +8267,7 @@ function showProfileModal() {
</div>
<div class="form-group">
<label style="display:flex;align-items:center;gap:8px;cursor:pointer">
<input id="m-hydr-on" type="checkbox" ${localStorage.getItem("baldav_hydr_on") !== "0" ? "checked" : ""}>
<input id="m-hydr-on" class="toggle" type="checkbox" ${localStorage.getItem("baldav_hydr_on") !== "0" ? "checked" : ""}>
Следить за питьём на тренировке
</label>
<div style="font-size:11px;color:#9aa4ae;margin-top:2px">Во время заезда/VR копится потребность в воде (пот), а выпитое берётся из того, что ты логируешь в баланс (жидкость по water_pct). Молчит, пока успеваешь пить; громкий сигнал (канал будильника, пробивает громкость) - только когда отстаёшь сверх порога.</div>
@ -8275,7 +8275,7 @@ function showProfileModal() {
</div>
<div class="form-group">
<label style="display:flex;align-items:center;gap:8px;cursor:pointer">
<input id="m-live-on" type="checkbox" ${localStorage.getItem("baldav_live_on") === "1" ? "checked" : ""}>
<input id="m-live-on" class="toggle" type="checkbox" ${localStorage.getItem("baldav_live_on") === "1" ? "checked" : ""}>
Делиться местоположением онлайн
</label>
<div style="font-size:11px;color:#9aa4ae;margin-top:2px">Пока включено, во время записи заезда телефон отправляет текущую точку на сервер раз в 10 секунд. Видно только тем, кому дан доступ, и только после входа. Выключается здесь же.</div>