deals-log: change-history opens as a LEFT drawer, not a centered modal — Steve inline/left-panel directive

8d2c596e105c1ce0c9cd170051e4957c8b715f3b · 2026-08-05 14:53:06 -0700 · Steve Abrams

Row click now slides the per-deal change timeline in from the LEFT (table stays visible,
shifts right), matching the re-search inline/left-panel pattern. No centered modal overlay.
Verified via real Chrome: left drawer + history timeline PASS.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files touched

M public/deals-log.html

Diff

commit 8d2c596e105c1ce0c9cd170051e4957c8b715f3b
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Wed Aug 5 14:53:06 2026 -0700

    deals-log: change-history opens as a LEFT drawer, not a centered modal — Steve inline/left-panel directive
    
    Row click now slides the per-deal change timeline in from the LEFT (table stays visible,
    shifts right), matching the re-search inline/left-panel pattern. No centered modal overlay.
    Verified via real Chrome: left drawer + history timeline PASS.
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 public/deals-log.html | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/public/deals-log.html b/public/deals-log.html
index 820e3be1..927c57f7 100644
--- a/public/deals-log.html
+++ b/public/deals-log.html
@@ -32,9 +32,12 @@
   .when{font-size:11px;color:var(--sub);white-space:nowrap}
   .drill{color:var(--a);text-decoration:underline dotted;text-underline-offset:2px}
   .empty{padding:60px;text-align:center;color:var(--sub)}
-  #ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60;align-items:flex-start;justify-content:center;padding:40px 14px;overflow-y:auto}
-  #ov.on{display:flex}
-  #modal{width:min(720px,96vw);background:var(--bg);border-radius:12px;padding:20px 22px;position:relative}
+  /* LEFT detail drawer (no centered modal) — row click slides the change-history in from the left */
+  #ov{position:fixed;top:0;left:0;width:420px;height:100vh;z-index:60;transform:translateX(-100%);transition:transform .2s;overflow-y:auto;pointer-events:none}
+  #ov.on{transform:translateX(0);pointer-events:auto}
+  body.panel-open .wrap{margin-left:440px}
+  @media(max-width:900px){ body.panel-open .wrap{margin-left:0} #ov{width:90vw} }
+  #modal{width:100%;min-height:100vh;background:var(--bg);border-right:2px solid var(--a);box-shadow:4px 0 24px rgba(0,0,0,.12);padding:20px 22px;position:relative}
   #modal h3{margin:0 0 3px;font:700 18px/1.25 'Playfair Display',Georgia,serif}
   #modal .maddr{color:var(--sub);font-size:12px;margin-bottom:12px}
   #modal .x{position:absolute;top:12px;right:14px;background:none;border:0;font-size:22px;cursor:pointer;color:var(--sub)}
@@ -127,7 +130,7 @@ function render(){
 
 // ── change-history drill-down (Steve: every datum drills to deeper data) ──
 async function openHistory(id){
-  const ov=$('#ov'), mb=$('#mbody'); ov.classList.add('on'); mb.innerHTML='<p class="empty">loading history…</p>';
+  const ov=$('#ov'), mb=$('#mbody'); ov.classList.add('on'); document.body.classList.add('panel-open'); mb.innerHTML='<p class="empty">loading history…</p>';
   let h; try{ h=await (await fetch('/api/deals/'+encodeURIComponent(id)+'/history')).json(); }catch(e){ mb.innerHTML='<p class="empty">could not load history</p>'; return; }
   if(h.error){ mb.innerHTML='<p class="empty">'+esc(h.error)+'</p>'; return; }
   const c=h.current||{};
@@ -141,7 +144,7 @@ async function openHistory(id){
     <div class="when" style="margin-bottom:10px">First found ${esc(fmtDT(h.first_seen))} · last found ${esc(fmtDT(h.last_seen))} · seen ${h.seen_count}× · ${h.revisions} revision(s)</div>
     <div class="tl">${evs||'<p class="empty">no history</p>'}</div>`;
 }
-function closeOv(){ $('#ov').classList.remove('on'); }
+function closeOv(){ $('#ov').classList.remove('on'); document.body.classList.remove('panel-open'); }
 $('#ov').addEventListener('click',e=>{ if(e.target.id==='ov') closeOv(); });
 document.addEventListener('keydown',e=>{ if(e.key==='Escape') closeOv(); });

← caa3fa7c re-search: click items expand INLINE + left detail panel (no · back to Rentv 2026 · Deal Desk: /find now defaults to a $0 corpus path (723 real 6a4fdee5 →