alee/golfgame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hide bottom bar during scoresheet modal and compact mobile layout

Browse Source 
Bottom bar is hidden when the hole results modal opens and restored
when dismissed. Also adds mobile-specific compact styles for the
scoresheet: smaller cards, tighter spacing, reduced padding.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken 2026-02-22 16:34:16 -05:00
parent 634d101f2c
commit a76fd8da32
2 changed files with 68 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/app.js
View File

@ -1789,6 +1789,10 @@ class GolfGame {
document.body.appendChild(modal);
this.setStatus('Hole complete');
// Hide bottom bar so it doesn't overlay the modal
const bottomBar = document.getElementById('mobile-bottom-bar');
if (bottomBar) bottomBar.classList.add('hidden');
// Bind next button
const nextBtn = document.getElementById('ss-next-btn');
nextBtn.addEventListener('click', () => {
@ -1918,6 +1922,10 @@ class GolfGame {
this.clearScoresheetCountdown();
const modal = document.getElementById('scoresheet-modal');
if (modal) modal.remove();
// Restore bottom bar
const bottomBar = document.getElementById('mobile-bottom-bar');
if (bottomBar) bottomBar.classList.remove('hidden');
}
// --- V3_02: Dealing Animation ---

60
client/style.css
View File

@ -5367,6 +5367,66 @@ body.mobile-portrait #waiting-screen {
max-height: 100dvh;
}
/* --- Mobile: Compact scoresheet modal --- */
body.mobile-portrait .scoresheet-content {
padding: 14px 16px;
max-height: 90vh;
max-height: var(--app-height, 90vh);
}
body.mobile-portrait .ss-header {
font-size: 0.95rem;
margin-bottom: 10px;
}
body.mobile-portrait .ss-players {
gap: 8px;
}
body.mobile-portrait .ss-player-row {
padding: 8px 10px;
}
body.mobile-portrait .ss-player-header {
margin-bottom: 4px;
}
body.mobile-portrait .ss-player-name {
font-size: 0.8rem;
}
body.mobile-portrait .ss-mini-card {
width: 30px;
height: 22px;
font-size: 0.6rem;
}
body.mobile-portrait .ss-columns {
gap: 6px;
margin-bottom: 4px;
}
body.mobile-portrait .ss-column {
gap: 2px;
padding: 3px 4px;
}
body.mobile-portrait .ss-col-score {
font-size: 0.6rem;
}
body.mobile-portrait .ss-scores {
font-size: 0.7rem;
gap: 12px;
margin-top: 2px;
}
body.mobile-portrait .ss-next-btn {
margin-top: 10px;
padding: 8px;
font-size: 0.85rem;
}
/* --- Mobile: Very short screens (e.g. iPhone SE) --- */
@media (max-height: 600px) {
body.mobile-portrait .opponents-row {