review (The REview): add density slider to the video catalog grid (fixed 4-col → adjustable --cols, localStorage) per the every-grid-gets-density rule; desktop-only (mobile keeps the responsive column rules). Sort omitted by design — catalog is category-rail grouped w/ chips+search, and /api/videos carries no date to sort by

48440b95ad5190c126f16d4698a674005f169749 · 2026-08-05 17:24:14 -0700 · Steve

Files touched

M public/review.html

Diff

commit 48440b95ad5190c126f16d4698a674005f169749
Author: Steve <steve@designerwallcoverings.com>
Date:   Wed Aug 5 17:24:14 2026 -0700

    review (The REview): add density slider to the video catalog grid (fixed 4-col → adjustable --cols, localStorage) per the every-grid-gets-density rule; desktop-only (mobile keeps the responsive column rules). Sort omitted by design — catalog is category-rail grouped w/ chips+search, and /api/videos carries no date to sort by
---
 public/review.html | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/public/review.html b/public/review.html
index 69be81fd..fd618fc3 100644
--- a/public/review.html
+++ b/public/review.html
@@ -49,7 +49,9 @@
   .sechead{display:flex;align-items:center;gap:12px;border-top:3px solid var(--ink);padding-top:10px;margin:22px 0 16px}
   .sechead h2{font-size:16px;text-transform:uppercase;letter-spacing:.06em}
   .sechead .count{margin-left:auto;font-size:12px;color:var(--sub)}
-  .cards{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:22px}
+  .cards{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:22px}
+  .revdens{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);white-space:nowrap}
+  .revdens input[type=range]{width:100px;accent-color:var(--red);cursor:pointer}
   .vcard{display:block;cursor:pointer;text-align:left;background:none;border:0;padding:0;font:inherit;color:inherit}
   .vcard .thumb{aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:linear-gradient(135deg,#475569,#94a3b8);position:relative}
   .vcard .thumb img{width:100%;height:100%;object-fit:cover;display:block}
@@ -75,7 +77,7 @@
   footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
   footer .logo{color:#fff;font-size:26px;margin-bottom:8px}footer h5{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}footer a{display:block;padding:4px 0;color:#aeb6bd}
   footer .fine{border-top:1px solid #2a2f34;margin-top:26px;padding-top:16px;font-size:12px;color:#7c848b}
-  @media(max-width:980px){.cards{grid-template-columns:1fr 1fr 1fr}}
+  @media(max-width:980px){.cards{grid-template-columns:1fr 1fr 1fr}.revdens{display:none}}/* density is desktop-only: below 980px the responsive column rules take over */
   @media(max-width:720px){.cards{grid-template-columns:1fr 1fr}.rhero h1{font-size:26px}}
   /* mobile hamburger nav — the .ham/.navlinks markup + JS toggle exist but the CSS was missing (parity with article.html) */
   .ham{display:none;background:none;border:0;font-size:24px;line-height:1;color:var(--ink);cursor:pointer;padding:8px 12px 8px 0}
@@ -120,6 +122,7 @@
   <div class="wrap">
     <div class="toolbar">
       <input id="q" placeholder="Search The REview — companies, topics, markets…" autocomplete="off">
+      <label class="revdens">Density <input id="dens" type="range" min="2" max="6" step="1" value="4" aria-label="Catalog grid density (columns)"></label>
       <span class="live"><span class="dot"></span><span id="freshness">live</span></span>
     </div>
     <div class="chips" id="chips"></div>
@@ -147,6 +150,11 @@
 document.getElementById('today').textContent = new Date().toLocaleDateString(undefined,{weekday:'long',month:'long',day:'numeric',year:'numeric'});
 let ALL=[], CATS=[], cat='all', q='';
 const esc=s=>(s||'').replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
+// Density slider (Steve's every-grid rule). Sort is intentionally omitted: the catalog groups by
+// category rails (chips + search already drive browse) and the /api/videos records carry NO date
+// field, so a Newest/Oldest sort would have no data to order by. Density adjusts the desktop columns.
+let dens=String(Math.max(2,Math.min(6,parseInt(localStorage.getItem('rev.dens'),10)||4)));
+function applyDens(){document.documentElement.style.setProperty('--cols',dens);}
 
 function chips(){
   const all=['all',...CATS];
@@ -225,6 +233,7 @@ async function load(){
     }
   }catch(e){document.getElementById('rails').innerHTML='<div class="empty">The REview catalog is temporarily unavailable — retrying…</div>';}
 }
+var _dens=document.getElementById('dens'); if(_dens){ _dens.value=dens; applyDens(); _dens.oninput=function(e){dens=e.target.value;localStorage.setItem('rev.dens',dens);applyDens();}; }
 load(); setInterval(load, 300000); // re-sync every 5 min
 var hb=document.getElementById('hamBtn');if(hb)hb.addEventListener('click',function(){var o=document.getElementById('nav').classList.toggle('open');hb.setAttribute('aria-expanded',o);});
 </script>

← 15dedf60 auto-save: 2026-08-05T17:14:13 (7 files) — data/deals-regist · back to Rentv · review density: Cody gate — flex-shrink:0 on .revdens + .liv 0e665e94 →