way/pigway-frame-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 29 Wiki Activity

Widen image viewer and place name and controls in footer

Browse Source
This commit is contained in:
Pigway
2026-10-08 20:41:54 +08:00
parent cb9f1cd44a
commit 68af4698e3
2 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pigway_frame_flow/web/style.css
+8 -3
View File
@@ -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}}