Add zoom/cell-size slider to grid viewer

Images and labels scale together with a range slider (40–300px).
Grid scrolls horizontally when cells exceed viewport width.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-21 01:08:25 +00:00
parent 520728c62b
commit 878b32f9e5
3 changed files with 35 additions and 3 deletions

View File

@@ -1190,9 +1190,16 @@ function render_grid_viewer() {
}
));
// Build cell grid
// Zoom slider
const zoom_el = document.getElementById('gv-zoom');
const cells_el = document.getElementById('grid-cells');
cells_el.style.gridTemplateColumns = `repeat(${grid.cols}, 1fr)`;
function apply_zoom(px) {
cells_el.style.gridTemplateColumns = `repeat(${grid.cols}, ${px}px)`;
}
zoom_el.addEventListener('input', () => apply_zoom(zoom_el.value));
apply_zoom(zoom_el.value);
const all_cells = grid.cells.flat().map((filename, idx) => {
const row = Math.floor(idx / grid.cols);