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

Release v0.1.5: unify image loading and mobile layouts on port 6005 [skip ci]

Browse Source
This commit is contained in:
渡口浪人
2026-10-16 16:25:42 +08:00
parent a843d4de9b
commit d3f40cfea3
36 changed files with 341 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pigway_frame_flow/web/style.css
+42
View File
@@ -104,3 +104,45 @@ form>.modal-actions{margin-top:8px}
.auto-collage{margin-bottom:24px}.auto-collage h2{margin-bottom:12px}.auto-collage>p{margin-bottom:20px}.auto-collage #collage-preview:not(:empty){margin-top:20px}.auto-collage>.actions{margin-top:16px}.manual-collage>summary{cursor:pointer;font-weight:600}.manual-collage[open]>summary{margin-bottom:24px}
.source-identity{overflow-wrap:anywhere}
.image-loading{isolation:isolate;position:relative;display:grid;place-items:center;width:100%;min-height:160px;background:var(--soft);border-radius:12px;overflow:hidden}
.image-loading>img{visibility:hidden;grid-area:1/1;min-width:0}
.image-loading-thumb{min-height:0;aspect-ratio:3/4;border-radius:10px}
.image-loading-fill{height:100%;min-height:0;border-radius:0}
.image-loading-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;color:var(--muted);font-size:13px}
.image-loading-status .spinner{margin:0;flex-shrink:0}
@media(prefers-reduced-motion:reduce){.image-loading-status .spinner{animation:none}}
/* Keep the horizontally scrollable navigation labels on one line. */
@media(max-width:720px){
.sidebar{height:76px;padding:0 6px}
nav{min-width:max-content;gap:2px}
nav button{flex:0 0 auto;min-width:76px;height:70px;padding:8px;gap:4px;white-space:nowrap}
.workspace{padding-bottom:92px}
#toast{bottom:96px}
}
@media(max-width:480px){
header{flex-wrap:wrap;gap:14px}
header>div:first-child{flex-basis:100%}
header .toolbar{width:100%}
header .toolbar select{flex:1;max-width:none}
}
/* Short landscape viewports must keep every navigation item reachable. */
@media(min-width:721px) and (max-height:700px){
.sidebar{overflow-y:auto}
.sidebar>.brand,.sidebar>nav,.sidebar>.sidebar-bottom{flex-shrink:0}
.sidebar-bottom{margin-top:24px}
}
@media(max-width:720px){
.sidebar{height:calc(76px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
.workspace{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
#toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}
/* Region geometry belongs to the editor, independent of image load state. */
.studio-region{position:absolute;border:2px solid var(--accent);cursor:move;touch-action:none;overflow:hidden}
.studio-canvas .studio-region img{position:static;display:block;width:100%;height:100%;object-fit:cover;border:0;pointer-events:none}
.studio-region>.image-loading{height:100%;min-height:0;border-radius:0}