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

Landscape panel on the right side, nav hidden, GPS placeholder fix

Browse source 
- flex-direction:row in landscape — panel 200px on the right, stats vertical
- CSS rotation compensates phone orientation, user sees element coords directly
- Bottom nav hidden in landscape, restored on exit
- GPS placeholder overlay: separate div from map container to avoid Leaflet conflict
- display:contents removed, clean column layout for stats in landscape
This commit is contained in:
4aiman 2026-06-25 18:23:58 +03:00
commit 704c0892ec
4 changed files with 33 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

32
frontend/css/styles.css
View file

@ -1090,8 +1090,7 @@ select {
}
/* Landscape: CSS rotation compensates physical rotation.
flex-direction stays column: element-bottom = visual-right after rotate.
No font-size changes — everything stays portrait-sized, just rearranged. */
User sees element coords directly — so flex-direction:row = panel on the RIGHT. */
.rec-screen.landscape-right,
.rec-screen.landscape-left {
position: fixed;
@ -1100,6 +1099,7 @@ select {
top: calc((100vh - 100vw) / 2);
left: calc((100vw - 100vh) / 2);
z-index: 9999;
flex-direction: row;
}
.rec-screen.landscape-right {
transform: rotate(-90deg);
@ -1107,6 +1107,34 @@ select {
.rec-screen.landscape-left {
transform: rotate(90deg);
}
.rec-screen.landscape-right .rec-map-wrap,
.rec-screen.landscape-left .rec-map-wrap {
min-height: 0;
}
.rec-screen.landscape-right .rec-panel,
.rec-screen.landscape-left .rec-panel {
width: 200px;
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: space-evenly;
border-left: 1px solid var(--border);
}
.rec-screen.landscape-right .rec-stats,
.rec-screen.landscape-left .rec-stats {
flex-direction: column;
border-top: none;
padding: 8px;
gap: 2px;
}
.rec-screen.landscape-right .rec-bottom .rec-status,
.rec-screen.landscape-left .rec-bottom .rec-status {
display: none;
}
.rec-screen.landscape-right .rec-hr-row,
.rec-screen.landscape-left .rec-hr-row {
display: none;
}
.rec-stats {
display: flex;