diff --git a/public/app.mjs b/public/app.mjs index 421e66e..955fc65 100644 --- a/public/app.mjs +++ b/public/app.mjs @@ -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); diff --git a/public/style.css b/public/style.css index 17ed8ba..4995d98 100644 --- a/public/style.css +++ b/public/style.css @@ -1333,13 +1333,32 @@ nav { .grid-viewer-actions { display: flex; + align-items: center; gap: 0.5rem; flex-shrink: 0; } +.gv-zoom-label { + display: flex; + align-items: center; + gap: 0.4rem; + font-size: 0.8rem; + color: var(--text-dim); +} + +.gv-zoom-label input[type=range] { + width: 100px; + accent-color: var(--accent); +} + +.grid-cells-wrap { + overflow-x: auto; +} + .grid-cells { display: grid; gap: 4px; + min-width: max-content; } .grid-cell { diff --git a/public/templates.html b/public/templates.html index 9fc962f..2548408 100644 --- a/public/templates.html +++ b/public/templates.html @@ -355,12 +355,18 @@
+
-
+
+
+