Stage 17 (#12): lines-off board variant (gapless checkerboard), Settings toggle
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Successful in 8s
CI / integration (pull_request) Successful in 13s
CI / ui (pull_request) Successful in 30s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 55s

Add a 'Grid lines' preference (default off): when off the board drops the 1px grid
gaps for a gapless checkerboard (plain cells alternate shades; tiles get rounded
corners and a soft right-side shadow so adjacent gapless tiles still read apart),
saving ~14px of width. When on, the classic lined grid returns. Persisted with the
other board-style prefs; wired through Board's new lines prop. e2e locks the default
and the toggle.
This commit is contained in:
Ilia Denisov
2026-06-06 14:51:48 +02:00
parent d0c1306d9b
commit 71b054227a
8 changed files with 66 additions and 1 deletions
+12
View File
@@ -3,6 +3,7 @@
import {
app,
setBoardLabels,
setBoardLines,
setLocalePref,
setReduceMotion,
setTheme,
@@ -63,6 +64,14 @@
</button>
{/each}
</div>
<label class="row gridlines">
<span>{t('settings.boardLines')}</span>
<input
type="checkbox"
checked={app.boardLines}
onchange={(e) => setBoardLines(e.currentTarget.checked)}
/>
</label>
</section>
<section>
@@ -118,4 +127,7 @@
align-items: center;
justify-content: space-between;
}
.gridlines {
margin-top: 12px;
}
</style>