gkucmierz/nonograms
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(layout): use native browser scroll for game board on desktop

Browse Source
This commit is contained in:
Grzegorz Kucmierz
2026-02-11 05:49:47 +01:00
parent 6903c82992
commit 16b2363c51
2 changed files with 33 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/App.vue
View File

@@ -186,7 +186,7 @@ onUnmounted(() => {
.game-container { .game-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: stretch; /* was center */
gap: 20px; gap: 20px;
width: 100%; width: 100%;
padding-bottom: 50px; padding-bottom: 50px;
@@ -202,7 +202,7 @@ onUnmounted(() => {
align-items: center; align-items: center;
width: 90%; width: 90%;
max-width: 600px; max-width: 600px;
margin-bottom: 20px; margin: 0 auto 20px auto; /* Center it manually */
box-shadow: var(--banner-shadow); box-shadow: var(--banner-shadow);
} }
@@ -227,19 +227,26 @@ onUnmounted(() => {
.game-layout { .game-layout {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: stretch;
gap: 20px; gap: 20px;
width: 100%; width: 100%;
max-width: 1200px;
padding: 0 20px; padding: 0 20px;
} }
.board-section { /* Center children (except board section which handles itself) */
display: flex; .game-layout > *:not(.board-section) {
justify-content: center; margin-left: auto;
margin-right: auto;
max-width: 1200px; /* Keep constraint for panels */
width: 100%; width: 100%;
} }
.board-section {
display: block;
width: 100%;
overflow-x: visible;
}
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: opacity 0.3s ease; transition: opacity 0.3s ease;

20
src/components/GameBoard.vue
View File

@@ -118,6 +118,8 @@ const computeCellSize = () => {
const gap = parseFloat(gapRaw); const gap = parseFloat(gapRaw);
const gridPad = parseFloat(gridPadRaw); const gridPad = parseFloat(gridPadRaw);
const isDesktop = window.matchMedia('(min-width: 769px)').matches;
let containerWidth; let containerWidth;
if (scrollWrapper.value) { if (scrollWrapper.value) {
containerWidth = scrollWrapper.value.clientWidth; containerWidth = scrollWrapper.value.clientWidth;
@@ -131,8 +133,15 @@ const computeCellSize = () => {
const availableForGrid = Math.max(0, containerWidth - hintWidth); const availableForGrid = Math.max(0, containerWidth - hintWidth);
const size = Math.floor((availableForGrid - gridPad * 2 - (store.size - 1) * gap) / store.size); const size = Math.floor((availableForGrid - gridPad * 2 - (store.size - 1) * gap) / store.size);
if (isDesktop) {
// Desktop: Allow overflow, use comfortable size
cellSize.value = 30;
} else {
// Mobile: Fit to screen
// Keep min 18, max 36 // Keep min 18, max 36
cellSize.value = Math.max(18, Math.min(36, size)); cellSize.value = Math.max(18, Math.min(36, size));
}
}; };
const handleGlobalMouseUp = () => { const handleGlobalMouseUp = () => {
@@ -258,8 +267,15 @@ watch(() => store.size, async () => {
/* Desktop: Remove scroll behavior to ensure full grid visibility */ /* Desktop: Remove scroll behavior to ensure full grid visibility */
@media (min-width: 769px) { @media (min-width: 769px) {
.game-board-wrapper { .game-board-wrapper {
overflow-x: auto; /* Allow scrolling if grid is too large (e.g. 80x80) */ overflow: visible;
align-items: center; /* Center the grid on desktop */ width: max-content;
min-width: 100%;
margin: 0 auto; /* Center the wrapper safely */
align-items: flex-start; /* Prevent cropping when centered */
}
.game-container {
/* margin: 0 auto; - wrapper handles centering now */
} }
} }