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; }