osiu97/ESP32-WijiBoard
1
0
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

fix mobile layout #28

Browse Source
This commit is contained in:
PROFERIS - Mi³osz Stocki
2026-07-15 14:43:35 +02:00
parent 3bdc02ee6e
commit 337344b197
1 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/js/sections/board-control.js
+16 -11
View File
@@ -93,18 +93,22 @@ function buildHTML() {
display: flex;
flex-direction: column;
}
.fullscreen-card #map-wrapper {
align-items: center !important;
}
.fullscreen-card #map-container {
max-width: none !important;
height: 100% !important;
display: flex;
align-items: center;
justify-content: center;
max-width: 100% !important;
width: min(100%, calc((100vh - 90px) * (var(--w) / var(--h)))) !important;
height: auto !important;
aspect-ratio: calc(var(--w) / var(--h)) !important;
display: block !important;
}
.fullscreen-card #bg-image {
max-height: 100%;
width: auto !important;
max-width: 100%;
object-fit: contain;
width: 100% !important;
height: 100% !important;
object-fit: fill !important;
max-width: none !important;
max-height: none !important;
}
</style>
@@ -129,7 +133,7 @@ function buildHTML() {
</div>
</div>
<div style="flex:1; display:flex; align-items:flex-start; justify-content:center; overflow:hidden;">
<div id="map-wrapper" style="flex:1; display:flex; align-items:flex-start; justify-content:center; overflow:hidden;">
<div id="map-container" style="position: relative; width: 100%; max-width: 800px; background: #111; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.5);">
<img id="bg-image" src="web/assets/backgrounds/${currentBg}/bg.svg" style="width: 100%; display: block; height: auto; border-radius: 8px;" />
<div id="markers-layer" style="position: absolute; top:0; left:0; width:100%; height:100%;"></div>
@@ -328,7 +332,8 @@ function renderSpots() {
const w = bounds.xMax - bounds.xMin;
const h = bounds.yMax - bounds.yMin;
// mapContainer.style.aspectRatio = `${w}/${h}`; // Let natural image aspect ratio dictate container height
mapContainer.style.setProperty('--w', w);
mapContainer.style.setProperty('--h', h);
listEl.innerHTML = '';
markersEl.innerHTML = '';