justin/pokeazure
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix landscape layout: panels inside #app flex row so screen is centered between them

Browse Source
This commit is contained in:
Justin Oros
2026-05-20 22:48:20 -07:00
parent ffe6b9a522
commit 2808232a44
2 changed files with 44 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+6 -8
View File
@@ -198,11 +198,7 @@
</div> </div>
</div> </div>
</div><!-- /#app --> <div id="gba-left" class="gba-controller hidden">
<!-- ═══ GBA CONTROLLER OVERLAY ═══════════════════════════════
Shown over map + battle screens. Hidden on all others. -->
<div id="gba-left" class="gba-controller hidden">
<div class="dpad" id="dpad"> <div class="dpad" id="dpad">
<button class="dpad-btn dpad-up" id="dp-up" aria-label="Up">▲</button> <button class="dpad-btn dpad-up" id="dp-up" aria-label="Up">▲</button>
<button class="dpad-btn dpad-left" id="dp-left" aria-label="Left">◀</button> <button class="dpad-btn dpad-left" id="dp-left" aria-label="Left">◀</button>
@@ -214,14 +210,16 @@
<button class="gba-mid-btn" id="btn-select">SELECT</button> <button class="gba-mid-btn" id="btn-select">SELECT</button>
<button class="gba-mid-btn" id="btn-start">START</button> <button class="gba-mid-btn" id="btn-start">START</button>
</div> </div>
</div> </div>
<div id="gba-right" class="gba-controller hidden"> <div id="gba-right" class="gba-controller hidden">
<div class="ab-cluster"> <div class="ab-cluster">
<button class="ab-btn ab-b" id="btn-b">B</button> <button class="ab-btn ab-b" id="btn-b">B</button>
<button class="ab-btn ab-a" id="btn-a">A</button> <button class="ab-btn ab-a" id="btn-a">A</button>
</div> </div>
</div> </div>
</div><!-- /#app -->
<div id="toast" class="toast hidden"></div> <div id="toast" class="toast hidden"></div>
<script src="game.js"></script> <script src="game.js"></script>
style.css
+22 -18
View File
@@ -676,7 +676,7 @@ html, body {
.toast { position:absolute; bottom:max(20px,var(--safe-bottom)); left:50%; transform:translateX(-50%); background:var(--dark-bg); border:3px solid var(--yellow); color:var(--yellow); font-family:var(--font); font-size:clamp(6.5px,1.8vw,8px); padding:10px 18px; z-index:950; animation:slideUp .3s ease; white-space:nowrap; max-width:90%; overflow:hidden; text-overflow:ellipsis; } .toast { position:absolute; bottom:max(20px,var(--safe-bottom)); left:50%; transform:translateX(-50%); background:var(--dark-bg); border:3px solid var(--yellow); color:var(--yellow); font-family:var(--font); font-size:clamp(6.5px,1.8vw,8px); padding:10px 18px; z-index:950; animation:slideUp .3s ease; white-space:nowrap; max-width:90%; overflow:hidden; text-overflow:ellipsis; }
.hidden { display:none !important; } .hidden { display:none !important; }
/* ─── PORTRAIT: left panel has dpad+mid, right panel has ab ─ */ /* ─── PORTRAIT: panels fixed at bottom ───────────────────── */
@media (orientation: portrait) { @media (orientation: portrait) {
#gba-left, #gba-right { #gba-left, #gba-right {
position: fixed; bottom: 0; height: clamp(110px, 22vw, 148px); position: fixed; bottom: 0; height: clamp(110px, 22vw, 148px);
@@ -702,33 +702,37 @@ html, body {
.screen { position: relative; flex: 1; inset: auto; height: 100dvh; overflow: hidden; min-width: 0; } .screen { position: relative; flex: 1; inset: auto; height: 100dvh; overflow: hidden; min-width: 0; }
.gba-controller { #gba-left, #gba-right {
position: relative; position: relative !important;
height: 100dvh; width: clamp(100px, 20vw, 140px); bottom: auto !important; left: auto !important; right: auto !important;
bottom: auto; left: auto; right: auto; height: 100dvh; width: clamp(100px, 18vw, 140px);
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-top: none; border-top: none;
padding: 8px max(6px, env(safe-area-inset-left, 0px)) 8px 6px;
gap: 8px; gap: 8px;
flex-shrink: 0; flex-shrink: 0;
background: linear-gradient(180deg, rgba(26,10,62,.82) 0%, rgba(14,6,36,.95) 100%);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#gba-left {
order: -1;
border-right: 2px solid rgba(120,80,255,.35);
border-left: none; border-top: none;
padding: 8px 8px 8px max(8px, env(safe-area-inset-left, 0px));
}
#gba-right {
order: 1;
border-left: 2px solid rgba(120,80,255,.35);
border-right: none; border-top: none;
padding: 8px max(8px, env(safe-area-inset-right, 0px)) 8px 8px;
} }
.gba-controller.hidden { display: none; } .gba-controller.hidden { display: none; }
.dpad { .dpad { width: clamp(72px, 16vh, 100px); height: clamp(72px, 16vh, 100px); }
width: clamp(72px, 16vh, 100px); .ab-cluster { width: clamp(72px, 16vh, 100px); height: clamp(72px, 16vh, 100px); }
height: clamp(72px, 16vh, 100px);
}
.ab-cluster {
width: clamp(72px, 16vh, 100px);
height: clamp(72px, 16vh, 100px);
}
.gba-mid-btns { flex-direction: column; gap: 5px; } .gba-mid-btns { flex-direction: column; gap: 5px; }
.gba-mid-btn { min-width: 44px; width: 44px; font-size: 5px; padding: 6px 4px; } .gba-mid-btn { min-width: 44px; width: 44px; font-size: 5px; padding: 6px 4px; }
#gba-right { border-left: 2px solid rgba(120,80,255,.35); border-right: none; padding: 8px 6px 8px max(6px, env(safe-area-inset-right, 0px)); }
#gba-left { border-right: 2px solid rgba(120,80,255,.35); border-left: none; }
} }