From 7ca65a845f6b215e984ad9d807e0dcd2119126d9 Mon Sep 17 00:00:00 2001 From: Waters Church Date: Tue, 22 Sep 2026 11:35:26 -0400 Subject: [PATCH] Grid Size: the stepper's row is a name and a number MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Layouts menu row reads "Grid Size − 12 +": the label is the setting's name, the readout is the bare column count, and the default/finer/coarser caption under the label is gone. The buttons keep their tooltips. Co-Authored-By: Claude Fable 5.1 --- README.md | 2 +- public/shell.js | 11 +++-------- public/style.css | 5 ++--- 3 files changed, 6 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 419ced4..9934e2d 100644 --- a/README.md +++ b/README.md @@ -274,7 +274,7 @@ below. Nothing is installed without someone clicking. the module's default tile. Saving over an existing name asks first, and the server keeps the copy it replaced: **Restore previous** in Admin → Saved layouts swaps it back (and swapping again undoes that). The menu's - **Grid** stepper sets how many columns this browser cuts the board into — + **Grid Size** stepper sets how many columns this browser cuts the board into — 8 to 24, 12 by default. Finer lets tiles be smaller so more fit across (a 4K wall), coarser suits a small screen read close up; row height follows, so tiles keep their shape and simply change size. Going coarser, a tile diff --git a/public/shell.js b/public/shell.js index 67c49dc..0f64e2d 100644 --- a/public/shell.js +++ b/public/shell.js @@ -328,18 +328,14 @@ function setGridCols(value, { save = true } = {}) { const STEP_MINUS_SVG = ''; const STEP_PLUS_SVG = ''; -/** The Layouts menu's density row — − 12 columns + — which steps without +/** The Layouts menu's density row — Grid Size − 12 + — which steps without closing the menu, so the board can be watched changing behind it. */ function gridStepper() { const row = document.createElement('div'); row.className = 'menu-stepper'; const label = document.createElement('span'); label.className = 'menu-stepper-label'; - const name = document.createElement('span'); - name.textContent = 'Grid'; - const sub = document.createElement('span'); - sub.className = 'sub'; - label.append(name, sub); + label.textContent = 'Grid Size'; const minus = document.createElement('button'); minus.type = 'button'; minus.className = 'menu-stepper-btn'; @@ -354,8 +350,7 @@ function gridStepper() { plus.innerHTML = STEP_PLUS_SVG; const paint = () => { const i = GRID_STEPS.indexOf(COLS); - value.textContent = `${COLS} columns`; - sub.textContent = COLS === GRID_DEFAULT ? 'default' : COLS < GRID_DEFAULT ? 'coarser' : 'finer'; + value.textContent = String(COLS); minus.disabled = i <= 0; plus.disabled = i >= GRID_STEPS.length - 1; }; diff --git a/public/style.css b/public/style.css index 1eacba1..922fc62 100644 --- a/public/style.css +++ b/public/style.css @@ -188,7 +188,7 @@ body.menu-hidden #topbar { } .menu-divider { height: 1px; background: var(--border); margin: 5px 4px; } -/* the Layouts menu's grid-density row: − 12 columns + */ +/* the Layouts menu's grid-density row: Grid Size − 12 + */ .menu-stepper { display: flex; align-items: center; @@ -197,7 +197,6 @@ body.menu-hidden #topbar { font-size: 13px; } .menu-stepper-label { flex: 1; } -.menu-stepper-label .sub { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; } .menu-stepper-btn { width: 26px; height: 26px; @@ -214,7 +213,7 @@ body.menu-hidden #topbar { .menu-stepper-btn[disabled] { opacity: 0.35; cursor: default; } .menu-stepper-btn svg { width: 12px; height: 12px; display: block; } .menu-stepper-value { - min-width: 86px; + min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }