directory: add density slider (card-grid --cols, localStorage) to the flagship CRE Directory per the every-grid-gets-density rule; sort left for a usre server-side ordering task (registry ignores ?sort, client sort would mislead a 34k paginated set)

1ba53ee1cfaf61b754213d2b917f4adad83a385a · 2026-08-05 16:49:55 -0700 · Steve

Files touched

M public/directory.html

Diff

commit 1ba53ee1cfaf61b754213d2b917f4adad83a385a
Author: Steve <steve@designerwallcoverings.com>
Date:   Wed Aug 5 16:49:55 2026 -0700

    directory: add density slider (card-grid --cols, localStorage) to the flagship CRE Directory per the every-grid-gets-density rule; sort left for a usre server-side ordering task (registry ignores ?sort, client sort would mislead a 34k paginated set)
---
 public/directory.html | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/public/directory.html b/public/directory.html
index 512e229e..e480c57c 100644
--- a/public/directory.html
+++ b/public/directory.html
@@ -42,8 +42,13 @@
   .sbox input{width:100%;font:600 16px 'Inter';padding:14px 16px 14px 46px;border:2px solid var(--line);border-radius:11px;outline:0;background:#fff}
   .sbox input:focus{border-color:var(--red)}
   .meta{color:var(--sub);font-size:12.5px;font-weight:600;min-height:18px;margin:8px 2px}
-  .rows{padding:4px 0 8px}
-  .row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:13px 2px;border-bottom:1px solid var(--line)}
+  .ctlbar{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin:4px 2px 2px;flex-wrap:wrap}
+  .ctl{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
+  .ctl input[type=range]{width:104px;accent-color:var(--red);cursor:pointer}
+  .rows{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:12px;padding:6px 0 8px}
+  .row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:13px 15px;border:1px solid var(--line);border-radius:11px;background:#fff}
+  .row:hover{border-color:#cfd4d9;box-shadow:0 2px 12px rgba(6,9,12,.05)}
+  @media(max-width:560px){.rows{grid-template-columns:1fr!important}}
   .row .nm{font:700 15.5px 'Inter'}
   .row .sub{color:var(--sub);font-size:12.5px;margin-top:2px}
   .row .r{text-align:right;white-space:nowrap}
@@ -54,7 +59,7 @@
   .more{display:block;width:100%;margin:14px 0 60px;padding:13px;border:1.5px solid var(--line);border-radius:10px;background:#fff;font:800 13px 'Inter';color:var(--ink);cursor:pointer}
   .more:hover{border-color:var(--red);color:var(--red)}
   .more[disabled]{opacity:.5;cursor:default}
-  .empty{padding:44px 0;text-align:center;color:var(--sub)}
+  .empty{grid-column:1/-1;padding:44px 0;text-align:center;color:var(--sub)}
   .empty h3{font-family:'Playfair Display',serif;font-size:23px;color:var(--ink);margin-bottom:6px}
   .spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--red);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:6px}@keyframes sp{to{transform:rotate(360deg)}}
 </style></head><body>
@@ -99,6 +104,13 @@
     <input id="q" type="search" autocomplete="off" placeholder="Search firms by name or city…">
   </div>
   <div class="meta" id="meta"></div>
+  <!-- Density slider per Steve's "every grid gets sort + density" rule. Sort is intentionally
+       omitted here: /api/firms + /api/brokers proxy to the usre registry (34k firms / 382k brokers,
+       server-paginated) which ignores a ?sort param — a client-side sort would only reorder the
+       loaded page and mislead. A real Sort control needs usre to support server-side ordering. -->
+  <div class="ctlbar">
+    <label class="ctl">Density <input id="dens" type="range" min="1" max="4" step="1" value="2" aria-label="Directory grid density (columns)"></label>
+  </div>
   <section class="rows" id="rows"></section>
   <button class="more" id="more" style="display:none">Load more</button>
 </main>
@@ -114,6 +126,8 @@ $('dx').onclick=close;scrim.onclick=close;document.addEventListener('keydown',e=
 
 const PAGE=25;
 let tab='firms', q='', offset=0, total=0, seq=0;
+let dens=localStorage.getItem('rentv.directory.dens')||'2';
+function applyDens(){ $('rows').style.setProperty('--cols',dens); }
 
 const p=new URLSearchParams(location.search);
 if(p.get('tab')==='brokers')tab='brokers';
@@ -150,6 +164,8 @@ $('more').onclick=()=>{ $('more').disabled=true; $('more').textContent='Loading
 
 $('tabFirms').classList.toggle('on',tab==='firms'); $('tabBrokers').classList.toggle('on',tab==='brokers');
 $('q').placeholder=tab==='firms'?'Search firms by name or city…':'Search brokers by name, city or firm…';
+$('dens').value=dens; applyDens();
+$('dens').oninput=e=>{dens=e.target.value;localStorage.setItem('rentv.directory.dens',dens);applyDens();};
 load(true);
 </script>
 </body></html>

← 07989393 auto-save: 2026-08-05T16:43:55 (7 files) — data/deals-regist · back to Rentv · directory density: Cody gate fixes — hide slider on mobile ( 214a147e →