From 68af4698e399f6216cb63facf0973e26bb902b4e Mon Sep 17 00:00:00 2001 From: Pigway Date: Thu, 8 Oct 2026 20:41:54 +0800 Subject: [PATCH] Widen image viewer and place name and controls in footer --- pigway_frame_flow/web/app.js | 8 ++++++-- pigway_frame_flow/web/style.css | 11 ++++++++--- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/pigway_frame_flow/web/app.js b/pigway_frame_flow/web/app.js index 49b01d7..53fbe91 100644 --- a/pigway_frame_flow/web/app.js +++ b/pigway_frame_flow/web/app.js @@ -47,9 +47,13 @@ function showModal(html){ const image=content.querySelector('img');dialog.classList.toggle('image-viewer',!!image);document.body.classList.toggle('image-viewer-open',!!image);dialog.onclose=()=>document.body.classList.remove('image-viewer-open'); if(image){ const viewport=document.createElement('div');viewport.className='image-viewer-viewport';image.before(viewport);viewport.append(image); - const toolbar=document.createElement('div');toolbar.className='actions image-viewer-toolbar'; const fit=document.createElement('button'),original=document.createElement('button');fit.textContent=t('fitScreen');original.textContent=t('actualSize'); - fit.type=original.type='button';fit.setAttribute('aria-pressed','true');original.setAttribute('aria-pressed','false');toolbar.append(fit,original);viewport.before(toolbar); + fit.type=original.type='button';fit.setAttribute('aria-pressed','true');original.setAttribute('aria-pressed','false'); + const footer=document.createElement('div');footer.className='image-viewer-footer'; + const title=content.querySelector('h2');if(title){title.classList.add('image-viewer-name');footer.append(title);} + const actions=content.querySelector('.modal-actions')||document.createElement('div');actions.classList.add('modal-actions','image-viewer-actions'); + const cancel=actions.querySelector('#modal-cancel');if(cancel){cancel.before(fit,original);actions.append(cancel);}else{actions.append(fit,original);} + footer.append(actions);content.append(footer); const setSize=actual=>{viewport.classList.toggle('actual-size',actual);fit.setAttribute('aria-pressed',String(!actual));original.setAttribute('aria-pressed',String(actual));}; fit.onclick=()=>setSize(false);original.onclick=()=>setSize(true); } diff --git a/pigway_frame_flow/web/style.css b/pigway_frame_flow/web/style.css index a039691..82b3900 100644 --- a/pigway_frame_flow/web/style.css +++ b/pigway_frame_flow/web/style.css @@ -57,15 +57,20 @@ input[type="file"]::file-selector-button{margin-inline-end:12px} /* Reserve actual header/footer space rather than guessing image height. */ body.image-viewer-open{overflow:hidden} -dialog.image-viewer{width:calc(100vw - 32px);max-width:1600px;height:calc(100dvh - 32px);max-height:calc(100dvh - 32px);padding:20px;overflow:hidden} +dialog.image-viewer{width:calc(100vw - 24px);max-width:calc(100vw - 24px);height:calc(100dvh - 32px);max-height:calc(100dvh - 32px);padding:16px;overflow:hidden} dialog.image-viewer[open]{display:flex} dialog.image-viewer #modal-content{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0} dialog.image-viewer #modal-content> :not(.image-viewer-viewport){flex-shrink:0} dialog.image-viewer h2{margin:0;overflow-wrap:anywhere} -.image-viewer-toolbar{margin:12px 0} -.image-viewer-toolbar button[aria-pressed="true"]{background:var(--accent);color:var(--panel)} +.image-viewer-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;min-width:0} +dialog.image-viewer h2.image-viewer-name{font-size:16px;min-width:0;flex:1} +.image-viewer-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0} +.image-viewer-actions button{white-space:nowrap} +.image-viewer-actions button[aria-pressed="true"]{background:var(--accent);color:var(--panel)} .image-viewer-viewport{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;min-width:0;overflow:hidden;background:var(--soft);border-radius:12px} .image-viewer-viewport img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;margin:0} .image-viewer-viewport.actual-size{display:block;overflow:auto} .image-viewer-viewport.actual-size img{width:auto;height:auto;max-width:none;max-height:none;margin:0} @media(max-width:600px){dialog.image-viewer{width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);padding:12px}} + +@media(max-width:600px){.image-viewer-footer{flex-wrap:wrap;gap:8px}.image-viewer-name{flex-basis:100%!important}.image-viewer-actions{width:100%;justify-content:flex-end;gap:6px}.image-viewer-actions button{padding:8px 10px}}