explorer: density slider 1-10 (was 1-20, clamps saved values) + field toggles restyled as click-on/off cards (:has() keeps existing wiring)

bb116971087153b9f7f7e179078d028b23b2e0cc · 2026-07-07 09:32:29 -0700 · Steve Abrams

Files touched

M public/index.html

Diff

commit bb116971087153b9f7f7e179078d028b23b2e0cc
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Jul 7 09:32:29 2026 -0700

    explorer: density slider 1-10 (was 1-20, clamps saved values) + field toggles restyled as click-on/off cards (:has() keeps existing wiring)
---
 public/index.html | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/public/index.html b/public/index.html
index f5f842a..5944c6e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -139,12 +139,16 @@
   .viewseg button { background:var(--card); color:var(--mut); border:0; border-right:1px solid var(--line); padding:7px 12px; font-size:12px; cursor:pointer; }
   .viewseg button:last-child { border-right:0; }
   .viewseg button.active { background:#1f6feb; color:#fff; }
-  /* ---- field show/hide toggles ---- */
-  .fieldtoggles { display:flex; flex-direction:column; gap:1px; max-height:300px; overflow-y:auto; padding-right:4px; }
-  .ftog { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink); cursor:pointer; padding:3px 5px; border-radius:6px; }
-  .ftog:hover { background:rgba(88,166,255,.06); }
-  .ftog input { accent-color:var(--blue); }
-  .ftog .colbadge { margin-left:auto; color:var(--mut); font-size:11px; }
+  /* ---- field show/hide toggles: one CARD per field, click to toggle on/off ---- */
+  .fieldtoggles { display:flex; flex-wrap:wrap; gap:6px; max-height:360px; overflow-y:auto; padding:2px 4px 2px 0; }
+  .ftog { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--mut); cursor:pointer; padding:5px 9px;
+          border:1px solid var(--line); border-radius:9px; background:var(--card); user-select:none; transition:border-color .12s,color .12s,background .12s; }
+  .ftog input { display:none; }                                   /* card IS the toggle; checkbox drives state via :has() */
+  .ftog::before { content:'○'; font-size:11px; color:var(--mut); }
+  .ftog:hover { border-color:var(--blue); color:var(--ink); }
+  .ftog:has(input:checked) { border-color:var(--blue); color:var(--blue); background:rgba(88,166,255,.10); }
+  .ftog:has(input:checked)::before { content:'●'; color:var(--blue); }
+  .ftog .colbadge { color:var(--mut); font-size:10px; }
   .minibtn { background:var(--card); color:var(--mut); border:1px solid var(--line); border-radius:7px; padding:4px 9px; font-size:11px; cursor:pointer; margin-right:5px; }
   .minibtn:hover { border-color:var(--blue); color:var(--ink); }
   /* ---- list view ---- */
@@ -312,7 +316,7 @@
       <option value="rentRoi">Pro-forma Rent ROI ↓</option>
     </select>
     <div style="margin-top:10px"><label class="small">Cards per row (grid) <span class="rangeval" id="densVal">3</span></label>
-      <input type="range" id="density" min="1" max="20" step="1" value="3"></div>
+      <input type="range" id="density" min="1" max="10" step="1" value="3"></div>
   </div>
   <div class="fsec"><h4>Fields — show / hide</h4>
     <div class="fieldtoggles" id="fFields"></div>
@@ -1447,7 +1451,7 @@ fetch('data/ranked.json').then(r=>r.json()).then(async d=>{
   $('#sortTop').onchange=()=>{ colSort=null; $('#sort').value=$('#sortTop').value; render(); };
   $('#sortTop').value=$('#sort').value;
   // density
-  const dv=localStorage.getItem('cre_density')||'3'; $('#density').value=dv; $('#densVal').textContent=dv; document.documentElement.style.setProperty('--cols',dv);
+  const dv=String(Math.min(10,Math.max(1,+(localStorage.getItem('cre_density')||'3')||3))); $('#density').value=dv; $('#densVal').textContent=dv; document.documentElement.style.setProperty('--cols',dv); localStorage.setItem('cre_density',dv);
   $('#density').oninput=()=>{ document.documentElement.style.setProperty('--cols',$('#density').value); $('#densVal').textContent=$('#density').value; localStorage.setItem('cre_density',$('#density').value); };
 
   // field show/hide toggles + list/grid view

← 79fb395 auto-save: 2026-07-07T09:29:44 (1 files) — data/condos-redfi · back to Commercialrealestate · explorer: Fields section starts expanded (toggle cards visib 0ddd365 →