viewer standard: add Grid/List toggle + per-field on/off menu to internal record-grid viewer

661af65401579df2e2c597f896119ca517c0f066 · 2026-08-12 08:53:17 -0700 · Steve
Files touched

M public/index.html
Diff

commit 661af65401579df2e2c597f896119ca517c0f066
Author: Steve <steve@designerwallcoverings.com>
Date:   Wed Aug 12 08:53:17 2026 -0700

    viewer standard: add Grid/List toggle + per-field on/off menu to internal record-grid viewer
---
 public/index.html | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index b362708..91a2090 100644
--- a/public/index.html
+++ b/public/index.html
@@ -78,6 +78,19 @@
   #toast.ok { border-color: #2a6a4a; } #toast.err { border-color: #a33; }
   .fields { display: inline-flex; gap: 10px; font-size: 11px; color: #666; }
   .fields label { display: inline-flex; gap: 3px; }
+
+  /* ── Grid / List toggle ── */
+  .vtoggle { display:flex; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
+  .vtoggle button { background:#fff; color:#888; border:none; padding:5px 11px; font:11px/1 inherit; cursor:pointer; }
+  .vtoggle button.on { background:var(--teal); color:#fff; font-weight:700; }
+
+  /* ── List view ── */
+  .grid.list { display:block; }
+  .grid.list .card { display:flex; flex-direction:row; align-items:stretch; margin-bottom:6px; border-radius:6px; }
+  .grid.list .card .img { aspect-ratio:auto; width:72px; min-width:72px; height:72px; background-size:cover; background-position:center; flex:none; }
+  .grid.list .card .body { flex:1; padding:6px 10px; font-size:12px; display:flex; flex-direction:column; justify-content:center; gap:2px; }
+  .grid.list .card .acts { flex:none; align-self:center; flex-direction:column; gap:3px; padding:6px 8px 6px 0; }
+  .grid.list .card .acts .act { font-size:10px; padding:3px 6px; }
 </style>
 </head>
 <body>
@@ -92,12 +105,20 @@
       <option value="newest">Newest</option>
       <option value="color">Color</option>
       <option value="pattern">Pattern A→Z</option>
-      <option value="collection">Collection</option>
+      <option value="collection">Collection A→Z</option>
       <option value="sku">SKU A→Z</option>
+      <option value="style">Style A→Z</option>
+      <option value="material">Material A→Z</option>
+      <option value="price">Price ↑</option>
+      <option value="type">Type A→Z</option>
     </select>
   </label>
   <label>Density <input type="range" id="cols" min="2" max="9" value="5" /></label>
   <label>Text <input type="range" id="fs" min="10" max="18" value="13" /></label>
+  <div class="vtoggle">
+    <button id="vGrid" class="on" onclick="setView('grid')">▦ Grid</button>
+    <button id="vList" onclick="setView('list')">☰ List</button>
+  </div>
   <label><input type="checkbox" id="imgonly" /> Image-only</label>
   <span class="fields">
     <label><input type="checkbox" class="ff" data-f="pat" checked> Name</label>
@@ -232,6 +253,16 @@ $('#q').oninput = e => { state.q = e.target.value; save('q', e.target.value); cl
 document.querySelectorAll('.ff').forEach(cb => cb.onchange = () => { applyField(cb.dataset.f, cb.checked); save('ff_'+cb.dataset.f, cb.checked); });
 function applyField(f, on) { document.querySelectorAll('.card .'+f).forEach(el => el.style.display = on ? '' : 'none'); }
 
+// ── Grid / List view toggle ──
+function setView(v) {
+  const g = document.querySelector('.grid#grid');
+  g.classList.toggle('list', v === 'list');
+  document.getElementById('vGrid').classList.toggle('on', v !== 'list');
+  document.getElementById('vList').classList.toggle('on', v === 'list');
+  save('view', v);
+}
+(function initView() { setView(ls('view', 'grid')); })();
+
 function fmtDate(iso) {
   if (!iso) return '';
   const d = new Date(iso);
← c76a882 zuber-internal: adopt shared /drill.js href-to-deeper-data p · back to Zuber Internal · nav-agent: universal grid-controls drop-in on internal viewe 5fae5d3 →