← back to Commercialrealestate

rent-rolls: add density slider (Steve HARD rule: every product grid needs sort + density) — #rolls becomes a --cols-driven card grid, persisted; default 1 = original stacked look

685b2103764a39453b63da44c10bc3bdaafb4e4c · 2026-08-03 10:06:40 -0700 · Steve Abrams

Files touched

• M public/rent-rolls.html

Diff

commit 685b2103764a39453b63da44c10bc3bdaafb4e4c
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Aug 3 10:06:40 2026 -0700

    rent-rolls: add density slider (Steve HARD rule: every product grid needs sort + density) — #rolls becomes a --cols-driven card grid, persisted; default 1 = original stacked look
---
 public/rent-rolls.html | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/public/rent-rolls.html b/public/rent-rolls.html
index 932fdd9..6767bea 100644
--- a/public/rent-rolls.html
+++ b/public/rent-rolls.html
@@ -27,6 +27,12 @@
   .glass{background:var(--glass);border:1px solid var(--glassb);border-radius:20px;backdrop-filter:blur(22px) saturate(1.5);
     box-shadow:0 12px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.16);overflow:hidden;}
   .roll{padding:20px 22px;margin-bottom:18px;}
+  /* Cards-view density (Steve rule: every product grid has sort + density). #rolls becomes an
+     N-column grid driven by --cols; default 1 = the original stacked look, so no regression. */
+  #rolls{display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));gap:18px;}
+  #rolls .roll{margin-bottom:0;}
+  .dens{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;white-space:nowrap;}
+  .dens input[type=range]{accent-color:var(--acc,#4aa3ff);width:96px;}
   .roll h2{font-size:18px;font-weight:700;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
   .badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:9px;background:rgba(251,146,60,.18);color:var(--warn);border:1px solid rgba(251,146,60,.4);}
   .addr{font-size:12.5px;color:var(--muted);margin-top:2px;}
@@ -113,6 +119,7 @@
     <input class="search" id="q" type="text" placeholder="search all fields — address, city, zip, source, units, NOI, rent… (space = AND)">
     <div class="toggle" id="view"><button data-v="table" class="on">▦ Table</button><button data-v="cards">▤ Cards</button></div>
     <select id="sortsel" title="Sort rent rolls"></select>
+    <label class="dens" title="Card density — columns in Cards view">▦ <input type="range" id="cols" min="1" max="5" step="1" value="1"></label>
     <div class="coldrop" id="coldrop">
       <button id="colbtn" title="Show / hide columns">Columns ▾</button>
       <div class="colmenu" id="colmenu"></div>
@@ -352,6 +359,13 @@ $('#thead').addEventListener('click',e=>{const th=e.target.closest('th');if(!th)
 $('#sortsel').addEventListener('change',()=>{sortKey=$('#sortsel').value;const c=COLS.find(x=>x.k===sortKey);
   sortDir=(c&&(c.t==='n'||c.t==='money'||c.t==='pct'||c.t==='dscr'||c.t==='date'))?-1:1;
   localStorage.setItem('rentSortKey',sortKey);localStorage.setItem('rentSortDir',sortDir);render();});
+// density slider (Steve rule: every product grid gets sort + density) — drives the cards-view --cols
+const densEl=$('#cols');
+if(densEl){
+  const applyDens=v=>document.documentElement.style.setProperty('--cols',v);
+  densEl.addEventListener('input',()=>{ applyDens(densEl.value); localStorage.setItem('rentDensity',densEl.value); });
+  const sd=localStorage.getItem('rentDensity'); if(sd){ densEl.value=sd; } applyDens(densEl.value);
+}
 // drag-to-reorder columns
 let dragKey=null;
 $('#thead').addEventListener('dragstart',e=>{ const th=e.target.closest('th'); if(!th) return;

← 864b07c broker-grid: esc() now escapes > too (defensive, Cody follow  ·  back to Commercialrealestate  ·  rent-rolls density: hide slider in Table view (Cody — dead c c5e6497 →