YaroslavKartashov
/
MAI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ui): reflow resized config blocks

Browse Source
main
AlexsandrSnytkin 18 hours ago
parent 5bd377e16f
commit 682416be7d
1 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File

19
ui_server.py
Unescape Escape View File

@ -1299,7 +1299,7 @@ HTML = """<!doctype html>
.config-item-actions { display: inline-flex; gap: 3px; } .config-item-actions { display: inline-flex; gap: 3px; }
.config-restore-panel[hidden], .config-trash[hidden] { display: none !important; } .config-restore-panel[hidden], .config-trash[hidden] { display: none !important; }
.config-canvas { position: relative; display: block; min-height: 760px; padding: 8px 6px 18px; overflow: auto; overscroll-behavior: contain; } .config-canvas { position: relative; display: block; min-height: 760px; padding: 8px 6px 18px; overflow: auto; overscroll-behavior: contain; }
.config-canvas > .config-block { position: absolute; box-sizing: border-box; margin: 0; min-width: 240px; min-height: 110px; border: 1px solid var(--ui-border) !important; border-radius: 10px; background: var(--ui-panel) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .1); overflow: auto; transition: border-color .2s ease, box-shadow .2s ease, opacity .2s ease; } .config-canvas > .config-block { position: absolute; box-sizing: border-box; container: config-block / inline-size; margin: 0; min-width: 240px; min-height: 110px; border: 1px solid var(--ui-border) !important; border-radius: 10px; background: var(--ui-panel) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .1); overflow: auto; transition: border-color .2s ease, box-shadow .2s ease, opacity .2s ease; }
.config-canvas > .config-block:hover { border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border)) !important; } .config-canvas > .config-block:hover { border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border)) !important; }
.config-canvas > .config-block.is-dragging, .config-canvas > .config-block.is-resizing { z-index: 5; border-color: var(--ui-accent) !important; box-shadow: 0 10px 28px color-mix(in srgb, var(--ui-accent) 16%, transparent); transition: none; } .config-canvas > .config-block.is-dragging, .config-canvas > .config-block.is-resizing { z-index: 5; border-color: var(--ui-accent) !important; box-shadow: 0 10px 28px color-mix(in srgb, var(--ui-accent) 16%, transparent); transition: none; }
.config-canvas > .config-custom-block { border-style: dashed !important; } .config-canvas > .config-custom-block { border-style: dashed !important; }
@ -1308,6 +1308,23 @@ HTML = """<!doctype html>
.config-block > summary { cursor: grab; touch-action: none; } .config-block > summary { cursor: grab; touch-action: none; }
.config-block > summary:active, .config-block.is-dragging > summary { cursor: grabbing; } .config-block > summary:active, .config-block.is-dragging > summary { cursor: grabbing; }
.config-block.is-dragging, .config-block.is-resizing { user-select: none; } .config-block.is-dragging, .config-block.is-resizing { user-select: none; }
.config-block label, .config-block input, .config-block select, .config-block button, .config-block pre { min-width: 0; max-width: 100%; box-sizing: border-box; }
.config-block .control-fields, .config-block .advanced-grid, .config-block .packet-grid, .config-block .packet-field-list { min-width: 0; }
@container config-block (max-width: 620px) {
.config-block.settings-group { grid-template-columns: minmax(0, 1fr); }
.config-block.settings-group > summary { grid-column: 1; }
.config-block .advanced-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.config-block .packet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.config-block .packet-field-row { grid-template-columns: 54px minmax(0, 1fr) 66px 28px; }
.config-block .packet-field-row .packet-role { grid-column: 2 / -1; }
}
@container config-block (max-width: 420px) {
.config-block .advanced-grid, .config-block .packet-grid { grid-template-columns: minmax(0, 1fr); }
.config-block .packet-builder-toolbar { flex-wrap: wrap; }
.config-block .packet-builder-toolbar .packet-layout-status { flex-basis: 100%; order: 3; }
.config-block .packet-field-row { grid-template-columns: 52px minmax(0, 1fr) 28px; }
.config-block .packet-field-row .packet-field-range { grid-column: 1 / 3; }
}
.config-trash { position: fixed; left: 50%; bottom: 16px; z-index: 1200; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border)); border-radius: 12px; background: color-mix(in srgb, var(--ui-panel) 94%, var(--ui-accent)); color: var(--ui-muted); box-shadow: 0 8px 24px rgba(0, 0, 0, .16); font-size: 11px; opacity: .96; transform: translate(-50%, 12px) scale(.96); animation: trash-in .18s ease both; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; pointer-events: auto; } .config-trash { position: fixed; left: 50%; bottom: 16px; z-index: 1200; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border)); border-radius: 12px; background: color-mix(in srgb, var(--ui-panel) 94%, var(--ui-accent)); color: var(--ui-muted); box-shadow: 0 8px 24px rgba(0, 0, 0, .16); font-size: 11px; opacity: .96; transform: translate(-50%, 12px) scale(.96); animation: trash-in .18s ease both; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; pointer-events: auto; }
.config-trash.is-over { color: #fff; border-color: #ff6b81; background: #b52d4c; box-shadow: 0 10px 28px rgba(181, 45, 76, .28); transform: translate(-50%, 0) scale(1.03); } .config-trash.is-over { color: #fff; border-color: #ff6b81; background: #b52d4c; box-shadow: 0 10px 28px rgba(181, 45, 76, .28); transform: translate(-50%, 0) scale(1.03); }
.config-trash-icon { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 7px; font-size: 15px; line-height: 1; } .config-trash-icon { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 7px; font-size: 15px; line-height: 1; }

Write Preview
Loading…
Cancel
Save