← back to Commercialrealestate

CRCP listings: add Full-width toggle (hide rail, span page) + prominent Download CSV button in a results toolbar

df04724ac19219a909ebd1019c3fd1821da97ac8 · 2026-08-17 16:35:11 -0700 · steve

Files touched

• M public/mls.html

Diff

commit df04724ac19219a909ebd1019c3fd1821da97ac8
Author: steve <steve@designerwallcoverings.com>
Date:   Mon Aug 17 16:35:11 2026 -0700

    CRCP listings: add Full-width toggle (hide rail, span page) + prominent Download CSV button in a results toolbar
---
 public/mls.html | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/public/mls.html b/public/mls.html
index 55352df..d6543d2 100644
--- a/public/mls.html
+++ b/public/mls.html
@@ -94,6 +94,12 @@
   .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);}
   .gobtn{background:var(--acc);color:#04110a;border:none;border-radius:7px;padding:7px 18px;font-size:12px;font-weight:700;cursor:pointer;letter-spacing:.3px;} .gobtn:hover{filter:brightness(1.08);} .gobtn:active{transform:translateY(1px);}
   .wrap{flex:1 1 auto;min-width:0;}
+  /* results toolbar (full-width toggle + CSV download) */
+  .tblbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
+  /* full-width mode: reclaim the 260px filter rail + trim side padding so the table spans the page */
+  .shell.fullwidth .rail{display:none;}
+  .shell.fullwidth .wrap{padding-left:14px;padding-right:14px;}
+  .csvbtn.shorton{border-color:var(--acc);color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent);}
   @media(max-width:820px){ .rail{display:none;} }
   .rail .rsec > h4 { cursor:pointer; display:flex; align-items:center; justify-content:space-between; user-select:none; }
   .rail .rsec > h4::after { content:'▾'; color:var(--mut); font-size:11px; margin-left:8px; transition:transform .15s; }
@@ -156,6 +162,10 @@
     <div style="font-size:10px;color:var(--mut);margin-top:6px">Set price / units / year, then hit <b>Go</b> (or press Enter).</div></div>
 </aside>
 <div class="wrap">
+  <div class="tblbar" id="tblbar">
+    <button class="csvbtn" id="fullw" title="Widen the results to the full page width — hides the filter rail (click again to bring it back)">⬌ Full width</button>
+    <button class="csvbtn" id="csv2" title="Download the current filtered rows as a CSV spreadsheet">⬇ Download CSV</button>
+  </div>
   <div class="statsbar" id="statsbar"></div>
   <div id="tableView" class="tblwrap"><table class="mls" data-no-sort><thead id="thead"></thead><tbody id="tbody"></tbody></table></div>
   <div id="gridView" class="grid hide"></div>
@@ -550,6 +560,15 @@ function exportCSV(){ const rows=filtered(); const cols=visCols(); const cv=(r,c
   const csv=cols.map(c=>'"'+c.l+'"').join(',')+'\n'+rows.map(r=>cols.map(c=>cv(r,c)).join(',')).join('\n');
   const a=document.createElement('a'); a.href=URL.createObjectURL(new Blob([csv],{type:'text/csv'})); a.download='cre-mls-'+rows.length+'.csv'; a.click(); URL.revokeObjectURL(a.href); }
 $('#csv').addEventListener('click',exportCSV);
+// second CSV button in the results toolbar (same export as the header one)
+if($('#csv2')) $('#csv2').addEventListener('click',exportCSV);
+// full-width toggle — hide the filter rail + trim padding so the table spans the page; persisted
+(function(){
+  const shell=document.querySelector('.shell'), btn=$('#fullw'), KEY='cre_mls_fullwidth';
+  const apply=on=>{ if(shell) shell.classList.toggle('fullwidth',on); if(btn){ btn.textContent=on?'⬌ Exit full width':'⬌ Full width'; btn.classList.toggle('shorton',on); } };
+  let on=localStorage.getItem(KEY)==='1'; apply(on);
+  if(btn) btn.addEventListener('click',()=>{ on=!on; localStorage.setItem(KEY,on?'1':'0'); apply(on); });
+})();
 $('#shortbtn').addEventListener('click',()=>{ F.shortlist=!F.shortlist; render(); });
 $('#moreWrap').addEventListener('click',e=>{ if(e.target.closest('#showmore')){ _shown=Math.min(_shown+PAGE(), _rows.length); paintBody(); } });
 $('#heat').value=heat; $('#heat').addEventListener('change',()=>{ heat=$('#heat').value; localStorage.setItem('cre_heat_mls',heat); render(); });

← c3832ac auto-data-snapshot: 2026-08-17T16:30:27 (4 data files) — cta  ·  back to Commercialrealestate  ·  CRCP listings: replace full-width/fit-all experiments with a 6d85d99 →