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

feat(ui): widen block scale range

Browse Source
main
AlexsandrSnytkin 15 hours ago
parent cf4f9b64e7
commit 215f75043b
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File

16
ui_server.py
Unescape Escape View File

@ -1450,9 +1450,9 @@ HTML = """<!doctype html>
.config-canvas > .config-block.settings-group > label { display: grid; } .config-canvas > .config-block.settings-group > label { display: grid; }
.config-canvas > .config-block.settings-group > .control-fields { display: grid !important; } .config-canvas > .config-block.settings-group > .control-fields { display: grid !important; }
.config-canvas > .config-block.settings-group { --block-scale: 1; padding: calc(9px * var(--block-scale)) calc(10px * var(--block-scale)); gap: calc(8px * var(--block-scale)); } .config-canvas > .config-block.settings-group { --block-scale: 1; padding: calc(9px * var(--block-scale)) calc(10px * var(--block-scale)); gap: calc(8px * var(--block-scale)); }
.config-canvas > .config-block.settings-group > summary { padding-bottom: calc(4px * var(--block-scale)); font-size: clamp(10px, calc(11px * var(--block-scale)), 16px); } .config-canvas > .config-block.settings-group > summary { padding-bottom: calc(4px * var(--block-scale)); font-size: clamp(8px, calc(11px * var(--block-scale)), 24px); }
.config-block.settings-group label, .config-block.settings-group .file-picked { gap: calc(2px * var(--block-scale)); font-size: clamp(9px, calc(10px * var(--block-scale)), 15px); } .config-block.settings-group label, .config-block.settings-group .file-picked { gap: calc(2px * var(--block-scale)); font-size: clamp(8px, calc(10px * var(--block-scale)), 22px); }
.config-block.settings-group input:not([type="checkbox"]):not([type="file"]), .config-block.settings-group select, .config-block.settings-group button { min-height: calc(27px * var(--block-scale)); height: calc(27px * var(--block-scale)); padding-left: calc(7px * var(--block-scale)); padding-right: calc(7px * var(--block-scale)); font-size: clamp(10px, calc(12px * var(--block-scale)), 17px); } .config-block.settings-group input:not([type="checkbox"]):not([type="file"]), .config-block.settings-group select, .config-block.settings-group button { min-height: calc(27px * var(--block-scale)); height: calc(27px * var(--block-scale)); padding-left: calc(7px * var(--block-scale)); padding-right: calc(7px * var(--block-scale)); font-size: clamp(8px, calc(12px * var(--block-scale)), 26px); }
.config-block.settings-group .control-fields, .config-block.settings-group .advanced-grid, .config-block.settings-group .packet-grid { gap: calc(6px * var(--block-scale)) calc(8px * var(--block-scale)); } .config-block.settings-group .control-fields, .config-block.settings-group .advanced-grid, .config-block.settings-group .packet-grid { gap: calc(6px * var(--block-scale)) calc(8px * var(--block-scale)); }
@keyframes appearance-in { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes appearance-in { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { @media (max-width: 760px) {
@ -1542,7 +1542,7 @@ HTML = """<!doctype html>
<span class="config-toolbar-title">Блоки конфигурации</span> <span class="config-toolbar-title">Блоки конфигурации</span>
<button id="configResetLayout" type="button">сбросить раскладку</button> <button id="configResetLayout" type="button">сбросить раскладку</button>
<button id="configRestoreToggle" type="button" aria-expanded="false">структура</button> <button id="configRestoreToggle" type="button" aria-expanded="false">структура</button>
<label class="config-scale-control" title="Масштаб элементов и текста выбранного блока"><span id="configScaleLabel">масштаб блока</span><input id="configContentScale" type="range" min="80" max="125" step="5" value="100" aria-label="Масштаб содержимого выбранного блока" disabled><output id="configContentScaleValue">100%</output></label> <label class="config-scale-control" title="Масштаб элементов и текста выбранного блока: 50–200%"><span id="configScaleLabel">масштаб блока</span><input id="configContentScale" type="range" min="50" max="200" step="5" value="100" aria-label="Масштаб содержимого выбранного блока, от 50 до 200 процентов" disabled><output id="configContentScaleValue">100%</output></label>
<span id="configLayoutState" class="config-layout-state">перетаскивайте за заголовок или свободное место</span> <span id="configLayoutState" class="config-layout-state">перетаскивайте за заголовок или свободное место</span>
</div> </div>
<div id="configWorkspace" class="config-workspace"> <div id="configWorkspace" class="config-workspace">
@ -2037,12 +2037,12 @@ HTML = """<!doctype html>
const area = Math.max(.56, Math.min(1.85, (width / 720) * (height / 320))); const area = Math.max(.56, Math.min(1.85, (width / 720) * (height / 320)));
const entry = configLayout[block.dataset.section] || {}; const entry = configLayout[block.dataset.section] || {};
const userScale = Number.isFinite(Number(block._configUserScale)) ? block._configUserScale : (Number(entry.scale) || 100) / 100; const userScale = Number.isFinite(Number(block._configUserScale)) ? block._configUserScale : (Number(entry.scale) || 100) / 100;
block._configUserScale = Math.max(.8, Math.min(1.25, userScale)); block._configUserScale = Math.max(.5, Math.min(2, userScale));
const scale = Math.max(.74, Math.min(1.35, Math.sqrt(area) * block._configUserScale)); const scale = Math.max(.5, Math.min(2, Math.sqrt(area) * block._configUserScale));
block.style.setProperty('--block-scale', scale.toFixed(3)); block.style.setProperty('--block-scale', scale.toFixed(3));
} }
function applyConfigContentScale(value) { function applyConfigContentScale(value) {
configContentScale = Math.max(.8, Math.min(1.25, (Number(value) || 100) / 100)); configContentScale = Math.max(.5, Math.min(2, (Number(value) || 100) / 100));
const block = selectedConfigBlock; const block = selectedConfigBlock;
if (!block || configBlockState(block)) return; if (!block || configBlockState(block)) return;
block._configUserScale = configContentScale; block._configUserScale = configContentScale;
@ -2066,7 +2066,7 @@ HTML = """<!doctype html>
configBlocks.forEach(other => other.classList.toggle('is-selected', other === block)); configBlocks.forEach(other => other.classList.toggle('is-selected', other === block));
const entry = configLayout[block.dataset.section] || {}; const entry = configLayout[block.dataset.section] || {};
const value = Math.round((Number(entry.scale) || 100)); const value = Math.round((Number(entry.scale) || 100));
configContentScale = Math.max(.8, Math.min(1.25, value / 100)); configContentScale = Math.max(.5, Math.min(2, value / 100));
setValue('configContentScale', value); setValue('configContentScale', value);
setText('configContentScaleValue', `${value}%`); setText('configContentScaleValue', `${value}%`);
const control = $('configContentScale'); const control = $('configContentScale');

Write Preview
Loading…
Cancel
Save