azcomputerguru/claudetools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dataforth/testdatadb UI: collapse inspector until a record is selected

Browse Source 
Results pane now fills the full width on load (the empty ~500px inspector no longer
reserves space). Inspector column expands when a record opens; Esc closes it back to
full-width results. Same behavior at the 1180px breakpoint.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Mike Swanson
2026-06-18 15:48:11 -07:00
parent 8783b7ebd8
commit 0d22704f65
1 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
projects/dataforth-dos/testdatadb-fix/public/index.redesign.html
View File

@@ -59,7 +59,9 @@
.pop .lt{display:flex;justify-content:space-between;font-size:12px;padding:3px 0;border-top:1px solid var(--border);font-family:var(--mono)} .pop .lt{display:flex;justify-content:space-between;font-size:12px;padding:3px 0;border-top:1px solid var(--border);font-family:var(--mono)}
.pop .lt:first-of-type{border-top:0;margin-top:8px} .pop .lt:first-of-type{border-top:0;margin-top:8px}
/* ---------- layout ---------- */ /* ---------- layout ---------- */
main{display:grid;grid-template-columns:236px 1fr var(--insp);min-height:0;height:100%} main{display:grid;grid-template-columns:236px 1fr 0;min-height:0;height:100%}
body.insp-open main{grid-template-columns:236px 1fr var(--insp)}
body:not(.insp-open) .insp{display:none}
.pane{min-height:0;overflow:auto} .pane{min-height:0;overflow:auto}
/* ---------- filter rail ---------- */ /* ---------- filter rail ---------- */
.rail{border-right:1px solid var(--border);background:var(--surface);padding:14px;overflow-y:auto} .rail{border-right:1px solid var(--border);background:var(--surface);padding:14px;overflow-y:auto}
@@ -150,7 +152,8 @@
kbd{font-family:var(--mono);font-size:11px;background:#f1f5f9;border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:4px;padding:0 5px;color:var(--ink-2)} kbd{font-family:var(--mono);font-size:11px;background:#f1f5f9;border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:4px;padding:0 5px;color:var(--ink-2)}
/* ---------- responsive ---------- */ /* ---------- responsive ---------- */
@media (max-width:1180px){ @media (max-width:1180px){
main{grid-template-columns:1fr var(--insp)} main{grid-template-columns:1fr 0}
body.insp-open main{grid-template-columns:1fr var(--insp)}
.rail{position:absolute;top:50px;bottom:0;left:0;width:250px;z-index:20;box-shadow:6px 0 20px rgba(15,23,42,.12);transform:translateX(-104%);transition:transform .18s} .rail{position:absolute;top:50px;bottom:0;left:0;width:250px;z-index:20;box-shadow:6px 0 20px rgba(15,23,42,.12);transform:translateX(-104%);transition:transform .18s}
body.rail-open .rail{transform:none} body.rail-open .rail{transform:none}
.menubtn{display:inline-flex;align-items:center;justify-content:center} .menubtn{display:inline-flex;align-items:center;justify-content:center}
@@ -334,7 +337,7 @@ function select(id,auto){
<a href="${ds}?format=txt" download="${esc(r.serial_number)}.txt">TXT</a> <a href="${ds}?format=txt" download="${esc(r.serial_number)}.txt">TXT</a>
<a href="${ds}?format=html" download="${esc(r.serial_number)}.html">HTML</a> <a href="${ds}?format=html" download="${esc(r.serial_number)}.html">HTML</a>
<button onclick="pushWeb('${id}',this)" title="Publish / re-publish this cert to the public website">Push to Web ▴</button>`; <button onclick="pushWeb('${id}',this)" title="Publish / re-publish this cert to the public website">Push to Web ▴</button>`;
$('insp').classList.add('open'); $('insp').classList.add('open'); document.body.classList.add('insp-open');
// lazy-load the certificate so fast arrow/typing stays snappy // lazy-load the certificate so fast arrow/typing stays snappy
$('viewer').innerHTML='<div class="state"><div class="skel" style="width:60%"></div></div>'; $('viewer').innerHTML='<div class="state"><div class="skel" style="width:60%"></div></div>';
clearTimeout(certTimer); clearTimeout(certTimer);
@@ -485,7 +488,7 @@ document.addEventListener('click',e=>{ if(!$('statsPop').contains(e.target)&&e.t
document.addEventListener('keydown',e=>{ document.addEventListener('keydown',e=>{
if(e.key==='/'&&document.activeElement!==$('omni')){e.preventDefault();$('omni').focus();$('omni').select();return;} if(e.key==='/'&&document.activeElement!==$('omni')){e.preventDefault();$('omni').focus();$('omni').select();return;}
if(e.key==='Escape'){ if($('statsPop').classList.contains('show')){$('statsPop').classList.remove('show');return;} if(e.key==='Escape'){ if($('statsPop').classList.contains('show')){$('statsPop').classList.remove('show');return;}
if($('insp').classList.contains('open')&&window.innerWidth<=820){$('insp').classList.remove('open');return;} if($('insp').classList.contains('open')){$('insp').classList.remove('open');document.body.classList.remove('insp-open');state.selected=null;[...$('rows').children].forEach(t=>t.classList.remove('sel'));syncUrl();return;}
if(document.activeElement===$('omni')&&$('omni').value){$('omni').value='';routeOmni('');debouncedSearch();}else $('omni').focus(); return;} if(document.activeElement===$('omni')&&$('omni').value){$('omni').value='';routeOmni('');debouncedSearch();}else $('omni').focus(); return;}
if((e.key==='ArrowDown'||e.key==='ArrowUp')&&state.rows.length){ if((e.key==='ArrowDown'||e.key==='ArrowUp')&&state.rows.length){
e.preventDefault(); let i=state.rows.findIndex(r=>r.id==state.selected); e.preventDefault(); let i=state.rows.findIndex(r=>r.id==state.selected);