← back to Costa Rica
costa-rica: sort+density controls on search + vertical grids (standing rule) — search Listings gets client-side sort (Relevance/Name/Verified) + density slider; vertical Featured gets density slider; both persist --cols to localStorage, mirror region.html reference — TK-10346
3eaa493769fea092f1e403f94369fff25eab192c · 2026-08-07 11:41:43 -0700 · Steve
Files touched
M public/search.htmlM public/vertical.html
Diff
commit 3eaa493769fea092f1e403f94369fff25eab192c
Author: Steve <steve@designerwallcoverings.com>
Date: Fri Aug 7 11:41:43 2026 -0700
costa-rica: sort+density controls on search + vertical grids (standing rule) — search Listings gets client-side sort (Relevance/Name/Verified) + density slider; vertical Featured gets density slider; both persist --cols to localStorage, mirror region.html reference — TK-10346
---
public/search.html | 44 ++++++++++++++++++++++++++++++++++++++++----
public/vertical.html | 21 ++++++++++++++++++---
2 files changed, 58 insertions(+), 7 deletions(-)
diff --git a/public/search.html b/public/search.html
index a70c324..b3f77f7 100644
--- a/public/search.html
+++ b/public/search.html
@@ -16,7 +16,7 @@
</script>
<script>(function(){try{var t=localStorage.getItem('cr-theme');if(t)document.documentElement.setAttribute('data-theme',t);}catch(e){}})();</script>
<style>
- :root{--bg:#fafaf7;--fg:#0e1015;--muted:#5a6270;--line:#e3e0d6;--card:#fff;--card-line:#ebe7da;--accent:#0a7a3a;--accent-2:#c2a85a}
+ :root{--bg:#fafaf7;--fg:#0e1015;--muted:#5a6270;--line:#e3e0d6;--card:#fff;--card-line:#ebe7da;--accent:#0a7a3a;--accent-2:#c2a85a;--cols:4}
[data-theme="dark"]{--bg:#0e1015;--fg:#f3f1ea;--muted:#9aa3b2;--line:#23262d;--card:#15181f;--card-line:#262932;--accent:#3ec07a;--accent-2:#d8c074}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif;line-height:1.55}
@@ -40,7 +40,12 @@
.group h2{margin:0 0 12px;font-size:18px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.group .count{color:var(--muted);font-size:13px;font-weight:400}
- .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
+ .pgrid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:12px}
+ @media(max-width:640px){.pgrid{grid-template-columns:repeat(2,1fr)}}
+ .controls{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:4px 0 20px}
+ .controls .ctrl{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
+ .controls select{background:var(--card);color:var(--fg);border:1px solid var(--card-line);border-radius:8px;padding:6px 10px;font-size:13px}
+ .controls input[type=range]{accent-color:var(--accent)}
.pcard{background:var(--card);border:1px solid var(--card-line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease}
.pcard:hover{transform:translateY(-2px)}
.pcard .pi{aspect-ratio:1.4/1;background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, var(--card)), color-mix(in srgb, var(--accent-2) 22%, var(--card)));overflow:hidden}
@@ -85,6 +90,18 @@
<button type="submit">Search</button>
</form>
<p class="qhint">Searches names, addresses, descriptions, regions, and provinces. Type at least 2 characters.</p>
+ <div class="controls" id="controls" hidden>
+ <div class="ctrl"><label for="sort">Sort</label>
+ <select id="sort">
+ <option value="relevance">Relevance</option>
+ <option value="name">Name A→Z</option>
+ <option value="verified">Verified first</option>
+ </select>
+ </div>
+ <div class="ctrl"><label for="cols">Density</label>
+ <input id="cols" type="range" min="2" max="6" step="1" value="4" />
+ </div>
+ </div>
<div id="out"></div>
</main>
@@ -94,18 +111,37 @@
const qInput=document.getElementById('q');
const out=document.getElementById('out');
+ const controls=document.getElementById('controls');
+ const sortSel=document.getElementById('sort');
+ const colsInput=document.getElementById('cols');
const params=new URLSearchParams(location.search);
if(params.get('q')) qInput.value=params.get('q');
+ // Density: restore persisted column count
+ (function(){try{const c=localStorage.getItem('cr-cols');if(c){document.documentElement.style.setProperty('--cols',c);colsInput.value=c;}}catch{}})();
+ colsInput.addEventListener('input',e=>{document.documentElement.style.setProperty('--cols',e.target.value);try{localStorage.setItem('cr-cols',e.target.value);}catch{}});
+
+ let lastData=null,lastQ='';
+ function sortPlaces(places){
+ const arr=places.slice();
+ const s=sortSel.value;
+ if(s==='name') arr.sort((a,b)=>(a.name||'').localeCompare(b.name||''));
+ else if(s==='verified') arr.sort((a,b)=>(b.cedula_juridica?1:0)-(a.cedula_juridica?1:0)||(a.name||'').localeCompare(b.name||''));
+ return arr; // 'relevance' keeps API order
+ }
+ sortSel.addEventListener('change',()=>{if(lastData)render(lastQ,lastData);});
+
let abort;
function run(q){
- if(!q||q.length<2){out.innerHTML='';return;}
+ if(!q||q.length<2){out.innerHTML='';controls.hidden=true;return;}
if(abort) abort.abort();
abort=new AbortController();
out.innerHTML='<div class="skel"></div>';
fetch('/api/search?q='+encodeURIComponent(q),{signal:abort.signal}).then(r=>r.json()).then(d=>render(q,d)).catch(e=>{if(e.name!=='AbortError') out.innerHTML=`<p class="empty">Search failed: ${e.message}</p>`;});
}
function render(q,d){
+ lastData=d;lastQ=q;
+ controls.hidden=!(d.places&&d.places.length);
const sections=[];
if(d.provinces.length){
sections.push(`<section class="group"><h2>Provinces <span class="count">${d.provinces.length}</span></h2>
@@ -122,7 +158,7 @@
if(d.places.length){
const more=d.counts.places>d.places.length?`<a href="/?q=${encodeURIComponent(q)}" style="color:var(--accent);font-weight:600;font-size:13px">see all ${d.counts.places.toLocaleString()} →</a>`:'';
sections.push(`<section class="group"><h2>Listings <span class="count">${d.counts.places.toLocaleString()} match${d.counts.places===1?'':'es'}</span> ${more}</h2>
- <div class="pgrid">${d.places.map(p=>{
+ <div class="pgrid">${sortPlaces(d.places).map(p=>{
const img=p.image_url||p.region_image_url||'';
return `<a class="pcard" href="/p/${p.slug}">
<div class="pi">${img?`<img loading="lazy" alt="${p.name}" src="${img}" />`:''}</div>
diff --git a/public/vertical.html b/public/vertical.html
index 30e2d3c..654e031 100644
--- a/public/vertical.html
+++ b/public/vertical.html
@@ -6,7 +6,7 @@
<title>Loading… — Costa Rica Directory</title>
<script>(function(){try{var t=localStorage.getItem('cr-theme');if(t)document.documentElement.setAttribute('data-theme',t);}catch(e){}})();</script>
<style>
- :root{--bg:#fafaf7;--fg:#0e1015;--muted:#5a6270;--line:#e3e0d6;--card:#fff;--card-line:#ebe7da;--accent:#0a7a3a;--accent-2:#c2a85a}
+ :root{--bg:#fafaf7;--fg:#0e1015;--muted:#5a6270;--line:#e3e0d6;--card:#fff;--card-line:#ebe7da;--accent:#0a7a3a;--accent-2:#c2a85a;--cols:3}
[data-theme="dark"]{--bg:#0e1015;--fg:#f3f1ea;--muted:#9aa3b2;--line:#23262d;--card:#15181f;--card-line:#262932;--accent:#3ec07a;--accent-2:#d8c074}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif;line-height:1.55}
@@ -33,7 +33,12 @@
.panel{background:var(--card);border:1px solid var(--card-line);border-radius:14px;padding:18px}
.panel h2{margin:0 0 12px;font-size:18px;letter-spacing:-.01em}
- .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
+ .pgrid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:10px}
+ @media(max-width:640px){.pgrid{grid-template-columns:repeat(2,1fr)}}
+ .panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
+ .panel-head h2{margin:0}
+ .dens{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
+ .dens input[type=range]{accent-color:var(--accent)}
.pcard{background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease}
.pcard:hover{transform:translateY(-2px)}
.pcard .pi{aspect-ratio:1.4/1;background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, var(--card)), color-mix(in srgb, var(--accent-2) 22%, var(--card)));overflow:hidden}
@@ -129,7 +134,10 @@
</div>
<div class="cols">
<section class="panel">
- <h2>Featured ${label}</h2>
+ <div class="panel-head">
+ <h2>Featured ${label}</h2>
+ ${v.samples&&v.samples.length?`<label class="dens">Density <input id="cols" type="range" min="2" max="5" step="1" value="3" /></label>`:''}
+ </div>
<div class="pgrid">${samplesHtml||'<span style="color:var(--muted);font-size:13px">no listings yet</span>'}</div>
</section>
<aside style="display:flex;flex-direction:column;gap:18px">
@@ -143,6 +151,13 @@
</section>
</aside>
</div>`;
+
+ // Density: restore + wire the Featured-grid column slider
+ const colsInput=document.getElementById('cols');
+ if(colsInput){
+ try{const c=localStorage.getItem('cr-cols');if(c){document.documentElement.style.setProperty('--cols',c);colsInput.value=c;}}catch{}
+ colsInput.addEventListener('input',e=>{document.documentElement.style.setProperty('--cols',e.target.value);try{localStorage.setItem('cr-cols',e.target.value);}catch{}});
+ }
}).catch(e=>{document.getElementById('main').innerHTML=`<p style="color:var(--muted)">Could not load: ${e.message}</p>`;});
</script>
</body>
← 0ed0c3d costa-rica: fix ONVO getCharge declined-status fallthrough (
·
back to Costa Rica
·
costa-rica: money-math coverage — processor-fee host-payout 9a92040 →