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

rec screen: status-bar backdrop so the system bar stays visible over the map

Browse source 
The recording map is edge-to-edge and drew behind the system status bar,
leaving its icons unreadable over the tiles (the map controls were already
offset by --safe-area-top, so the design intended a visible bar). Paint a
solid strip the height of the top inset behind the bar — like the header on
every other screen. Disabled in the rotated landscape modes.
This commit is contained in:
4aiman 2026-09-07 17:15:19 +03:00
commit 34927e3f52
2 changed files with 39 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

24
docs/session-logs/2026-09-07_rec-statusbar-backdrop.md Normal file
View file

@ -0,0 +1,24 @@
# Сессия 2026-09-07: статус-бар на экране записи
## Проблема
При включённом трекинге не видно системный статус-бар. Пользователь: перекрывают его только
карты, остальное приложение ведёт себя нормально. Просьба — сделать бар видимым (не рисовать свой
индикатор батареи).
## Причина
Карта на экране записи (`.rec-map-wrap`/`.rec-map`) рисуется edge-to-edge и заходит под системный
статус-бар. Контролы карты (компас, зум-кнопки leaflet) уже сдвинуты вниз на `--safe-area-top`
(строки 1155, 1161 styles.css) — то есть дизайн задумывался с видимым статус-баром, но у самого бара
нет подложки: иконки теряются на тайлах карты. На остальных экранах подложку даёт «шапка»
(`padding-top: calc(... + var(--safe-area-top)); background: var(--surface)`).
## Решение (только CSS, без сдвига координат карты)
Псевдоэлемент `.rec-map-wrap::before` — сплошная полоса высотой `var(--safe-area-top)` цвета
`var(--surface)`, `z-index:1100`, `pointer-events:none`. Даёт статус-бару подложку как «шапка».
Контролы карты уже начинаются ниже полосы, наложения нет. В ландшафте (rot-90/270) полоса отключена
(`display:none`) — там карта повёрнута и инсет физически в другом месте.
`--safe-area-top` ставится из нативных инсетов (main.js:189, get_safe_insets), на устройстве ненулевой.
## Файлы
- frontend/css/styles.css — `.rec-map-wrap::before` + отключение в rot-90/270.

15
frontend/css/styles.css
View file

@ -1159,6 +1159,21 @@ select {
}
/* Keep Leaflet zoom controls below the status bar on the recording map. */
.rec-map-wrap .leaflet-top { margin-top: var(--safe-area-top, 0px); }
/* Status-bar backdrop. The recording map is edge-to-edge (draws behind the system
status bar), so the bar had no backing and its icons were unreadable over the map
tiles. Paint a solid strip the height of the top inset — like the header on every
other screen — so the status bar stays visible. Controls already start below it. */
.rec-map-wrap::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: var(--safe-area-top, 0px);
background: var(--surface);
z-index: 1100;
pointer-events: none;
}
.rec-screen.rot-90 .rec-map-wrap::before,
.rec-screen.rot-270 .rec-map-wrap::before { display: none; }
.rec-compass-arrow { position: absolute; inset: 0; transition: transform 0.12s linear; }
.rec-compass-arrow::before {
content: "N"; position: absolute; top: 1px; left: 50%; transform: translateX(-50%);