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; display: flex;
flex-direction: column; flex-direction: column;
} }
.fullscreen-card #map-wrapper {
align-items: center !important;
}
.fullscreen-card #map-container { .fullscreen-card #map-container {
max-width: none !important; max-width: 100% !important;
height: 100% !important; width: min(100%, calc((100vh - 90px) * (var(--w) / var(--h)))) !important;
display: flex; height: auto !important;
align-items: center; aspect-ratio: calc(var(--w) / var(--h)) !important;
justify-content: center; display: block !important;
} }
.fullscreen-card #bg-image { .fullscreen-card #bg-image {
max-height: 100%; width: 100% !important;
width: auto !important; height: 100% !important;
max-width: 100%; object-fit: fill !important;
object-fit: contain; max-width: none !important;
max-height: none !important;
} }
</style> </style>
@@ -129,7 +133,7 @@ function buildHTML() {
</div> </div>
</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);"> <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;" /> <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> <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 w = bounds.xMax - bounds.xMin;
const h = bounds.yMax - bounds.yMin; 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 = ''; listEl.innerHTML = '';
markersEl.innerHTML = ''; markersEl.innerHTML = '';