From b89b1670ecdbc2029e9c8e4fe76eda7e9ef83233 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 12 Jul 2026 20:39:45 -0500 Subject: fix(gallery): one row per option group All four toggle option groups shared one wrapping row, so OFF TEXT read as ambiguous between the chips on either side. Each group now renders as its own labeled row with a fixed label column, and single-group cards keep their shape. --- docs/prototypes/panel-widget-gallery.html | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) (limited to 'docs/prototypes') diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html index a4a4264..42ba252 100644 --- a/docs/prototypes/panel-widget-gallery.html +++ b/docs/prototypes/panel-widget-gallery.html @@ -450,7 +450,8 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1} /* screen-family chips (alt phosphor / tube colors per screen widget) */ .famchips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:1px} -.famchips .lab{color:var(--steel);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;margin-right:2px} +.famchips .lab{color:var(--steel);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase; + margin-right:2px;min-width:64px} .famchips .fc{width:13px;height:13px;border-radius:50%;cursor:pointer; border:1px solid rgba(255,255,255,.22);box-shadow:0 1px 3px rgba(0,0,0,.5)} .famchips .fc.on{outline:2px solid var(--silver);outline-offset:1px} @@ -4260,8 +4261,8 @@ BOOST.forEach(no=>{const rd=document.getElementById('rd-'+no); dark:{dot:'#2c2824',vars:{'--sw-thumb':'radial-gradient(circle at 35% 28%,#4a453e,#16130f)'}}, chrome:{dot:'#9aa2b4',vars:{'--sw-thumb':'radial-gradient(circle at 35% 28%,#dfe6f2,#6d7484)'}}, brass:{dot:'#b8944a',vars:{'--sw-thumb':'radial-gradient(circle at 35% 28%,#e2c47a,#8a6a24)'}}}; - const row=document.createElement('div'); row.className='famchips'; const group=(label,opts,def)=>{ + const row=document.createElement('div'); row.className='famchips'; const lab=document.createElement('span'); lab.className='lab'; lab.textContent=label; row.appendChild(lab); const chips=[]; for(const [name,o] of Object.entries(opts)){ @@ -4270,12 +4271,12 @@ BOOST.forEach(no=>{const rd=document.getElementById('rd-'+no); b.addEventListener('click',()=>{ for(const [k,v] of Object.entries(o.vars)) sw.style.setProperty(k,v); chips.forEach(x=>x.classList.toggle('on',x===b));}); - row.appendChild(b);}}; + row.appendChild(b);} + cardEl.querySelector('.opts').appendChild(row);}; group('on',ON_OPTS,'amber'); group('off',OFF_OPTS,'dark'); group('off text',OFFTXT_OPTS,'white'); - group('thumb',THUMB_OPTS,'light'); - cardEl.querySelector('.opts').appendChild(row);})(); + group('thumb',THUMB_OPTS,'light');})(); -- cgit v1.2.3