condos: sort control is now a visible BAR of all 8 sort-option chips (Newest/Price/$SF/Year/HOA/Project/City) — active highlighted, persists — instead of a hidden dropdown

044dfa406ef35a292afbe2449c0bc158ed626f74 · 2026-08-03 13:00:15 -0700 · Steve Abrams
Files touched

M public/condos.html
Diff

commit 044dfa406ef35a292afbe2449c0bc158ed626f74
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Aug 3 13:00:15 2026 -0700

    condos: sort control is now a visible BAR of all 8 sort-option chips (Newest/Price/$SF/Year/HOA/Project/City) — active highlighted, persists — instead of a hidden dropdown
---
 public/condos.html | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/public/condos.html b/public/condos.html
index d54a979..df6e954 100644
--- a/public/condos.html
+++ b/public/condos.html
@@ -35,6 +35,12 @@
   .topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 24px;border-bottom:1px solid var(--line);position:sticky;top:53px;background:rgba(14,17,22,.95);backdrop-filter:blur(6px);z-index:20;}
   .topbar input[type=text]{min-width:260px;}
   .topbar .dens{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:7px;}
+  /* all sort options as a visible bar of chips (Steve 2026-08-03) */
+  .sortbar{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;}
+  .sortbar .sortlabel{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin-right:2px;}
+  .sortchip{background:var(--card,#141925);color:var(--mut,#8b949e);border:1px solid var(--line,#232a38);border-radius:7px;padding:4px 9px;font-size:12px;cursor:pointer;}
+  .sortchip:hover{color:var(--ink);border-color:var(--mut);}
+  .sortchip.on{border-color:var(--blue,#58a6ff);color:var(--blue,#58a6ff);background:rgba(88,166,255,.12);font-weight:600;}
   .viewseg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
   .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;}
@@ -135,16 +141,17 @@
     <input type="text" id="q" placeholder="search all fields — project, city, zip, address, broker, firm, status… (space = AND)">
     <span class="viewseg" id="viewseg"><button data-view="grid" class="active">▦ Grid</button><button data-view="list">☰ List</button></span>
     <button id="shortbtn" title="Show only your shortlisted (starred) listings — shared with the Explorer & MLS">⭐ Shortlist (0)</button>
-    <select id="csort" title="Sort condos" style="background:var(--card,#141925);color:var(--ink,#E6E8EC);border:1px solid var(--line,#232a38);border-radius:7px;padding:5px 8px;font-size:12px">
-      <option value="">Sort: Newest</option>
-      <option value="price_desc">Sort: Price ↓</option>
-      <option value="price_asc">Sort: Price ↑</option>
-      <option value="pps_desc">Sort: $/SF ↓</option>
-      <option value="year_desc">Sort: Year (newest)</option>
-      <option value="hoa_asc">Sort: HOA ↑</option>
-      <option value="proj_az">Sort: Project A→Z</option>
-      <option value="city_az">Sort: City A→Z</option>
-    </select>
+    <div class="sortbar" id="csort" title="Sort condos" role="group" aria-label="Sort">
+      <span class="sortlabel">Sort</span>
+      <button class="sortchip" data-sort="">Newest</button>
+      <button class="sortchip" data-sort="price_desc">Price ↓</button>
+      <button class="sortchip" data-sort="price_asc">Price ↑</button>
+      <button class="sortchip" data-sort="pps_desc">$/SF ↓</button>
+      <button class="sortchip" data-sort="year_desc">Year ↓</button>
+      <button class="sortchip" data-sort="hoa_asc">HOA ↑</button>
+      <button class="sortchip" data-sort="proj_az">Project A→Z</button>
+      <button class="sortchip" data-sort="city_az">City A→Z</button>
+    </div>
     <label class="dens">Density <input type="range" id="cols" min="1" max="20" step="1" value="3"></label>
     <span class="count" id="count">…</span>
   </div>
@@ -481,7 +488,11 @@ function sortRows(rows){
   }[SORTKEY];
   return cmp?rows.slice().sort(cmp):rows;
 }
-(function(){ const s=$('#csort'); if(s){ s.value=SORTKEY; s.addEventListener('change',()=>{ SORTKEY=s.value; localStorage.setItem('condoSort',SORTKEY); apply(); }); } })();
+(function(){ const bar=$('#csort'); if(!bar) return;
+  const mark=()=>bar.querySelectorAll('.sortchip').forEach(c=>c.classList.toggle('on',(c.dataset.sort||'')===(SORTKEY||'')));
+  bar.addEventListener('click',e=>{ const c=e.target.closest('.sortchip'); if(!c) return; SORTKEY=c.dataset.sort||''; localStorage.setItem('condoSort',SORTKEY); mark(); apply(); });
+  mark();
+})();
 $('#cols').oninput=e=>{ document.documentElement.style.setProperty('--cols',e.target.value); localStorage.setItem('condoCols',e.target.value); };
 const savedCols=localStorage.getItem('condoCols'); if(savedCols){ $('#cols').value=savedCols; document.documentElement.style.setProperty('--cols',savedCols); }
 $$('#viewseg button').forEach(b=>b.classList.toggle('active',b.dataset.view===VIEW));
← d0c5f86 chore: lint (global-search clear-on-error), refactor (SEARCH · back to Commercialrealestate · sort options as a chip bar in the LEFT PANEL (Steve): shared 3bd9201 →