michael/ProdDash
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 1 Wiki Activity

Grid Size: the stepper's row is a name and a number

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Waters Church
2026-09-22 11:35:26 -04:00
co-authored by Claude Fable 5.1
parent e383070a9e
commit 7ca65a845f
3 changed files with 6 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1 -1
View File
@@ -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 module's default tile. Saving over an existing name asks first, and
the server keeps the copy it replaced: **Restore previous** in Admin → the server keeps the copy it replaced: **Restore previous** in Admin →
Saved layouts swaps it back (and swapping again undoes that). The menu's 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 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, 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 so tiles keep their shape and simply change size. Going coarser, a tile
public/shell.js
+3 -8
View File
@@ -328,18 +328,14 @@ function setGridCols(value, { save = true } = {}) {
const STEP_MINUS_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14"/></svg>'; const STEP_MINUS_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14"/></svg>';
const STEP_PLUS_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>'; const STEP_PLUS_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></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. */ closing the menu, so the board can be watched changing behind it. */
function gridStepper() { function gridStepper() {
const row = document.createElement('div'); const row = document.createElement('div');
row.className = 'menu-stepper'; row.className = 'menu-stepper';
const label = document.createElement('span'); const label = document.createElement('span');
label.className = 'menu-stepper-label'; label.className = 'menu-stepper-label';
const name = document.createElement('span'); label.textContent = 'Grid Size';
name.textContent = 'Grid';
const sub = document.createElement('span');
sub.className = 'sub';
label.append(name, sub);
const minus = document.createElement('button'); const minus = document.createElement('button');
minus.type = 'button'; minus.type = 'button';
minus.className = 'menu-stepper-btn'; minus.className = 'menu-stepper-btn';
@@ -354,8 +350,7 @@ function gridStepper() {
plus.innerHTML = STEP_PLUS_SVG; plus.innerHTML = STEP_PLUS_SVG;
const paint = () => { const paint = () => {
const i = GRID_STEPS.indexOf(COLS); const i = GRID_STEPS.indexOf(COLS);
value.textContent = `${COLS} columns`; value.textContent = String(COLS);
sub.textContent = COLS === GRID_DEFAULT ? 'default' : COLS < GRID_DEFAULT ? 'coarser' : 'finer';
minus.disabled = i <= 0; minus.disabled = i <= 0;
plus.disabled = i >= GRID_STEPS.length - 1; plus.disabled = i >= GRID_STEPS.length - 1;
}; };
public/style.css
+2 -3
View File
@@ -188,7 +188,7 @@ body.menu-hidden #topbar {
} }
.menu-divider { height: 1px; background: var(--border); margin: 5px 4px; } .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 { .menu-stepper {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -197,7 +197,6 @@ body.menu-hidden #topbar {
font-size: 13px; font-size: 13px;
} }
.menu-stepper-label { flex: 1; } .menu-stepper-label { flex: 1; }
.menu-stepper-label .sub { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.menu-stepper-btn { .menu-stepper-btn {
width: 26px; width: 26px;
height: 26px; height: 26px;
@@ -214,7 +213,7 @@ body.menu-hidden #topbar {
.menu-stepper-btn[disabled] { opacity: 0.35; cursor: default; } .menu-stepper-btn[disabled] { opacity: 0.35; cursor: default; }
.menu-stepper-btn svg { width: 12px; height: 12px; display: block; } .menu-stepper-btn svg { width: 12px; height: 12px; display: block; }
.menu-stepper-value { .menu-stepper-value {
min-width: 86px; min-width: 28px;
text-align: center; text-align: center;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }