Improve mobile web remote layout

This commit is contained in:
2026-05-14 21:17:54 +03:00
parent bf9f1f86e0
commit 4164097893
+28 -15
View File
@@ -98,34 +98,47 @@ begin
'.sbar{flex:0 0 16px;display:flex;align-items:center;padding:0 6px;gap:10px;background:#0e0e0e;border-top:1px solid #222;font-size:10px;color:#555}' +
'#latEl{margin-left:auto}' +
'@media screen and (max-width:640px){' +
// Тулбар 1: горизонтальный скролл вместо переноса
'.tbar:not(.row2){overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}' +
'.tbar:not(.row2)::-webkit-scrollbar{display:none;}' +
'body{overflow:auto;height:auto;min-height:100vh;}' +
'.wrap{height:auto;min-height:100vh;padding:3px;}' +
// Тулбар 1: переносим группы по строкам, чтобы не было скрытых контролов
'.tbar:not(.row2){height:auto;min-height:32px;flex-wrap:wrap;align-items:center;overflow:visible;padding:4px;gap:4px;}' +
'.tbar:not(.row2)>*{flex-shrink:0;}' +
'.tbar:not(.row2) .tsep,.tbar:not(.row2) .sl-sep{display:none;}' +
'.sl-g{height:30px;}' +
'.sl-val{min-width:2.8em;}' +
// Крупнее зоны касания
'button{height:30px;}select{height:30px;}' +
// VFO-строка: стекаем smeter / vfo-mid / right-g каждый на своей строке
'.row2{height:auto;flex-wrap:wrap;padding:3px;gap:3px;}' +
'.row2{height:auto;flex-wrap:wrap;padding:4px;gap:4px;}' +
'#smeter{width:100%;height:40px;}' +
'.vfo-mid{width:100%;gap:2px;justify-content:flex-start;}' +
'.vfo-ro{font-size:20px;height:34px;padding:0 2px;padding-top:6px;}' +
'.vfo-ro .dg,.vfo-ro .sp{font-size:20px;}' +
'.vfo-hz .dg{font-size:10px;}' +
'.vbtn{width:26px;height:26px;font-size:10px;}' +
'.swap-g button{height:22px;padding:0 4px;font-size:9px;}' +
'.vfo-mid{width:100%;display:grid;grid-template-columns:24px minmax(0,1fr) auto 24px minmax(0,1fr);gap:3px;align-items:center;}' +
'#vBtnA{grid-column:1;grid-row:1;}#vDispA{grid-column:2;grid-row:1;}' +
'.swap-g{grid-column:3;grid-row:1;justify-content:center;gap:2px;}' +
'#vBtnB{grid-column:4;grid-row:1;}#vDispB{grid-column:5;grid-row:1;}' +
'.vfo-ro{width:100%;font-size:16px;height:30px;padding:0 1px;padding-top:6px;justify-content:flex-start;}' +
'.vfo-ro .dg,.vfo-ro .sp{font-size:16px;}' +
'.vfo-hz .dg{font-size:8px;}' +
'.vbtn{width:24px;height:24px;font-size:10px;}' +
'.swap-g button{height:22px;padding:0 3px;font-size:8px;min-width:30px;}' +
'.vfo-sp{display:none;}' +
'.right-g{width:100%;margin-left:0;}' +
'.right-g button,.right-g select{height:28px;font-size:11px;}' +
'.right-g{width:100%;margin-left:0;display:grid;grid-template-columns:58px minmax(0,1fr) 52px;gap:4px;}' +
'.right-g button,.right-g select{height:30px;font-size:11px;width:100%;min-width:0;}' +
'#bandSel{min-width:0;}' +
'.span-ov{right:4px;overflow-x:auto;scrollbar-width:none;}' +
'.span-ov::-webkit-scrollbar{display:none;}' +
'.sp-btn{flex:0 0 auto;height:22px;padding:0 6px;}' +
'.spec-area{min-height:130px;flex:0 0 30vh;}' +
'.ruler-area{flex:0 0 22px;}' +
// Водопад короче на телефоне
'.wf-area{flex:0 0 180px;}' +
'.wf-area{flex:0 0 32vh;min-height:150px;}' +
// Слайдеры чуть уже
'input[type=range]{width:55px;}' +
'input[type=range]{width:64px;}' +
// TX+MOX пинним в начало тулбара чтобы были видны без скролла
'#toneBtn{order:-3;}' +
'.tx-g{order:-2;}' +
'#moxBtn{order:-1;min-width:52px;height:30px;font-weight:bold;}' +
// iOS Safari: 100vh включает адресную строку — используем реальную высоту
'body,.wrap{height:-webkit-fill-available;}' +
'body,.wrap{min-height:-webkit-fill-available;}' +
'}' +
'</style></head>' +