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

Grid density: cut the board finer or coarser, per browser #14

Merged
michael merged 3 commits from claude/grid-size into main 2026-09-22 11:45:54 -04:00
Conversation 0 Commits 3 Files Changed 7
+6 -12
3 changed files with 6 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7ca65a845f - Show all commits
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;
} }