CRCP listings: replace full-width/fit-all experiments with a draggable vertical divider (resize filters↔records, double-click to collapse; records widen to the screen edge)

6d85d99f9c2c2e956668f4d725697fe9a0c081a9 · 2026-08-17 16:48:41 -0700 · steve
Files touched

M public/mls.html
Diff

commit 6d85d99f9c2c2e956668f4d725697fe9a0c081a9
Author: steve <steve@designerwallcoverings.com>
Date:   Mon Aug 17 16:48:41 2026 -0700

    CRCP listings: replace full-width/fit-all experiments with a draggable vertical divider (resize filters↔records, double-click to collapse; records widen to the screen edge)
---
 public/mls.html | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/public/mls.html b/public/mls.html
index d6543d2..dd7743c 100644
--- a/public/mls.html
+++ b/public/mls.html
@@ -75,7 +75,12 @@
   .ph-item{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid var(--line);font-size:13px;} .ph-mut{color:var(--mut);font-size:12.5px;}
   /* ---- Amazon-style left rail ---- */
   .shell{display:flex;align-items:flex-start;}
-  .rail{flex:0 0 260px;background:var(--bg2);border-right:1px solid var(--line);align-self:stretch;position:sticky;top:53px;height:calc(100vh - 53px);overflow-y:auto;padding:0 0 40px;}
+  .rail{flex:0 0 var(--rail-w,260px);width:var(--rail-w,260px);min-width:0;background:var(--bg2);border-right:1px solid var(--line);align-self:stretch;position:sticky;top:53px;height:calc(100vh - 53px);overflow-y:auto;overflow-x:hidden;padding:0 0 40px;}
+  /* draggable divider between the filter rail and the records — drag to resize, double-click to collapse */
+  .raildiv{flex:0 0 7px;align-self:stretch;position:sticky;top:53px;height:calc(100vh - 53px);background:var(--line);cursor:col-resize;z-index:6;transition:background .12s;}
+  .raildiv:hover,.raildiv.dragging{background:var(--acc);}
+  body.raildrag{cursor:col-resize;user-select:none;}
+  @media(max-width:820px){ .raildiv{display:none;} }
   .rail .rsec{padding:13px 16px;border-bottom:1px solid var(--line);}
   .rail h4{margin:0 0 9px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--mut);}
   .chips{display:flex;flex-wrap:wrap;gap:6px;}
@@ -94,12 +99,8 @@
   .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) */
+  /* results toolbar (CSV download + hint) */
   .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; }
@@ -161,10 +162,11 @@
     <div style="display:flex;gap:8px;align-items:center;margin-top:10px"><button class="gobtn" id="applyBtn" title="Apply the price / units / year values (or press Enter)">▶ Go</button><button class="minibtn" id="clearNum" title="Clear price / units / year">Clear</button><span id="stagedFlag" style="font-size:10px;color:var(--warn);display:none">● unapplied</span></div>
     <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="raildiv" id="raildiv" title="Drag to resize the filters / records · double-click to collapse or restore"></div>
 <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>
+    <span class="mut" style="font-size:11px">Drag the vertical bar between the filters and the records to widen the table → · double-click it to collapse/restore the filters.</span>
   </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>
@@ -562,12 +564,18 @@ function exportCSV(){ const rows=filtered(); const cols=visCols(); const cv=(r,c
 $('#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
+// ── draggable divider: drag to resize the filter rail; drag left to widen the records to the screen edge ──
 (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); });
+  const shell=document.querySelector('.shell'), div=$('#raildiv'); if(!shell||!div) return;
+  const KEY='cre_mls_railw', DEF=260, MIN=0, MAX=560;
+  const setW=w=>{ w=Math.max(MIN,Math.min(MAX,Math.round(w))); shell.style.setProperty('--rail-w',w+'px'); return w; };
+  const cur=()=>{ const n=parseInt(getComputedStyle(shell).getPropertyValue('--rail-w')); return isNaN(n)?DEF:n; };
+  const saved=parseInt(localStorage.getItem(KEY)); if(!isNaN(saved)) setW(saved);
+  let dragging=false, startX=0, startW=DEF, lastW=DEF;
+  div.addEventListener('mousedown',e=>{ dragging=true; startX=e.clientX; startW=cur(); div.classList.add('dragging'); document.body.classList.add('raildrag'); e.preventDefault(); });
+  window.addEventListener('mousemove',e=>{ if(dragging) setW(startW+(e.clientX-startX)); });
+  window.addEventListener('mouseup',()=>{ if(!dragging) return; dragging=false; div.classList.remove('dragging'); document.body.classList.remove('raildrag'); try{localStorage.setItem(KEY,String(cur()));}catch(e){} });
+  div.addEventListener('dblclick',()=>{ const c=cur(); if(c>10){ lastW=c; setW(0); } else setW(lastW>10?lastW:DEF); try{localStorage.setItem(KEY,String(cur()));}catch(e){} });
 })();
 $('#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(); } });
← df04724 CRCP listings: add Full-width toggle (hide rail, span page) · back to Commercialrealestate · CRCP listings: records body now fills to the right screen ed 6b78658 →