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

fix layout

Browse Source
This commit is contained in:
PROFERIS - Mi³osz Stocki
2026-07-07 12:41:34 +02:00
parent 63388d96b8
commit bde51a83f9
2 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/js/sections/board-control.js
+3 -3
View File
@@ -72,8 +72,8 @@ function buildHTML() {
<div class="card-header"><span class="card-title">Interactive Map</span></div> <div class="card-header"><span class="card-title">Interactive Map</span></div>
<div style="flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden;"> <div style="flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden;">
<div id="map-container" style="position: relative; width: 100%; max-width: 800px; aspect-ratio: 300/175; 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%; height: 100%; object-fit: cover; position: absolute; top:0; left:0; 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>
</div> </div>
</div> </div>
@@ -217,7 +217,7 @@ 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}`; // mapContainer.style.aspectRatio = `${w}/${h}`; // Let natural image aspect ratio dictate container height
listEl.innerHTML = ''; listEl.innerHTML = '';
markersEl.innerHTML = ''; markersEl.innerHTML = '';
web/js/sections/input-text.js
+3 -3
View File
@@ -88,8 +88,8 @@ function buildHTML() {
<div class="card-header"><span class="card-title">Live Position</span></div> <div class="card-header"><span class="card-title">Live Position</span></div>
<div style="flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden;"> <div style="flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden;">
<div id="map-container" style="position: relative; width: 100%; max-width: 800px; aspect-ratio: 300/175; 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%; height: 100%; object-fit: cover; position: absolute; top:0; left:0; 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="pos-marker" class="pos-marker" style="display:none;"></div> <div id="pos-marker" class="pos-marker" style="display:none;"></div>
</div> </div>
</div> </div>
@@ -240,7 +240,7 @@ async function loadSpots() {
if (mapContainer) { if (mapContainer) {
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}`; // mapContainer.style.aspectRatio = `${w}/${h}`; // Let natural image aspect ratio dictate container height
} }
updatePosMarker(); updatePosMarker();
} catch(e) { } catch(e) {