/* ============================================================ MOLO — Терминал · МОБИЛЬНЫЙ слой (адаптив) Грузится ПОСЛЕ molo.css — переопределяет раскладку под узкий экран. Всё внутри @media (max-width:860px) — десктоп не трогаем. Бизнес-логика/рендер не меняются: 3 панели десктопа на телефоне показываются по одной (нижняя навигация), а широкая таблица ордер-тикета «перетекает» в компактные карточки средствами CSS. Токены и палитра — из molo.css (greige, латунь-акцент). ============================================================ */ /* Мобильные узлы (нижняя навигация, кнопка фильтров, выдвижная панель фильтров) — на десктопе скрыты. #mFiltPanel обязателен ИМЕННО ЗДЕСЬ, вне медиа-запроса: десктопная ветка applyMode() возвращает сами input'ы в .tools, но обёртки .mlf с текстом подписей («Указать длину всех вертикальных профилей») остаются внутри панели. Без этого правила поворот телефона из портрета в ландшафт (932px у iPhone Pro Max, 1024px у iPad) пересекает порог 860px и оставляет на странице две висящие фразы — до перезагрузки. */ #mnav,#mFilt,#mFiltPanel{display:none} /* ВАЖНО: именно «screen and», а не голый «(max-width:...)». Область печати A4 при полях 12мм ≈703 CSS-px, то есть голое условие max-width:860px СОВПАДАЕТ при печати и мобильные правила уезжают на бумагу. Медиа-тип screen в print-медиа не матчится никогда. */ @media screen and (max-width:860px){ /* ---- Каркас: приложение = высота экрана, панели скроллятся внутри ---- */ body{font-size:14px} #app{height:100dvh} /* ---- ВЕРХНЯЯ ЗОНА: максимально ужата, чтобы отдать экран товарам ---- */ /* Шапка: компактная рейка (было 54px) */ #hdr .ar-header{min-height:42px;padding:0 10px;gap:8px} #hdr .ar-logo{width:58px;height:16px} #hdr .ar-header .ar-langsel,#hdr .ar-header .ar-link{padding:5px 8px;font-size:9px} /* ---- КОТИРОВКИ В ШАПКЕ (LME / скидка / EXW) ---- 31.07 котировки переехали из отдельной ленты `.ticker` внутрь шапки, в `.ar-quick`, а мобильный слой продолжал стилизовать `.ticker` — элемента, которого больше НЕТ в разметке. Результат на телефоне: блок `.right` разъезжался на 492px в шапке шириной 390px, LME обрезался, а кнопка «Выход» уезжала за экран целиком и была недоступна. Замерено 02.08: переполнение 112px, правый край кнопки 502px при окне 390px. Лечим так же, как когда-то ленту: котировки — узкая полоса с ГОРИЗОНТАЛЬНОЙ прокруткой, «Выход» приколот к правому краю и не уезжает. Шапка остаётся в одну строку — вертикаль на телефоне дороже. Правила `.ticker` оставлены рядом: офлайн-дистрибутивы прежних сборок ещё содержат ту разметку, и им мобильный вид тоже нужен. */ #hdr .ar-header .right{flex:1 1 auto;min-width:0;gap:6px} .ar-quick,.ticker{flex:1 1 auto;min-width:0;flex-wrap:nowrap; overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; scrollbar-width:none} .ar-quick::-webkit-scrollbar,.ticker::-webkit-scrollbar{height:0;width:0} .ar-quick .t,.ticker .t{flex:0 0 auto;padding:5px 8px;gap:5px} .ar-quick .t.lbl,.ar-quick .disc2 .lbl, .ticker .t.lbl,.ticker .disc2 .lbl{font-size:9px;letter-spacing:.8px} .ar-quick input.q,.ticker input.q{width:52px;padding:3px 6px;font-size:12px} .ar-quick .disc2 input,.ticker .disc2 input{width:34px;padding:3px 5px} .ar-quick .qb,.ticker .qb{padding:3px 7px} .ar-quick .qs,.ticker .qs{font-size:10px} /* «Выход» не участвует в прокрутке — иначе выход с телефона недостижим */ #hdr .ar-header .right .ar-link{flex:0 0 auto} /* Край полосы затушёван — иначе «EXW CH…» просто обрывается на полуслове и выглядит не как «листается дальше», а как вёрстка поехала. Маска, а не наложенный градиент: не зависит от цвета рейки и не перехватывает касания. */ .ar-quick,.ticker{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent)} /* ---- ПОЛОСА ПРОКРУТКИ: на телефоне ни резерва, ни «колпачка» ---- Десктопный ордер-тикет держит место под скроллбар (`scrollbar-gutter:stable`) и красит верх жёлоба в цвет шапки колонок, чтобы полоса начиналась ПОД ней. На телефоне шапки колонок нет вовсе (таблица развёрнута в карточки, `thead{display:none}`), поэтому резерв съедал 9px из 390 впустую, а колпачок рисовал чужеродную полоску сверху. Прокрутка тут нативная, тач-оверлейная — ей место не нужно. */ .pane .body{scrollbar-gutter:auto} .pane.ot .body{--ot-head:0px;scrollbar-width:thin;scrollbar-color:var(--molo-taupe) transparent} .pane.ot .body::-webkit-scrollbar{width:0;background:transparent} .pane.ot .body::-webkit-scrollbar-track{margin-top:0} /* Заголовок панели («Системы»/«Ордер-тикет · СИСТЕМА»/«Заявка») — тонкая шапка */ .pane .ph{position:sticky;top:0;z-index:4;padding:6px 12px;font-size:10px;letter-spacing:1.2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ---- Список систем: крупные тач-строки ---- */ .wl .row{padding:14px 16px;font-size:15px;min-height:48px;align-items:center} .wl .brand{padding:10px 16px} /* ============================================================ ИНСТРУМЕНТЫ: видна только строка поиска + кнопка «фильтры». Длины и цвета скрыты в раскрывающуюся панель (бейдж = сколько фильтров активно) — верхняя зона экономит ~110px. ============================================================ */ .tools{padding:7px 10px;gap:0} .tools .frow{flex-wrap:nowrap;gap:7px;align-items:center} .tools .frow .s{flex:1 1 auto;min-width:0;padding:9px 11px;font-size:14px} #mFilt{display:inline-flex;align-items:center;justify-content:center;position:relative; flex:0 0 auto;width:42px;height:38px;border:1px solid var(--hair-strong);border-radius:var(--radius); background:var(--surface);color:var(--text-2);font-size:16px;line-height:1;cursor:pointer} #mFilt:active{background:var(--hover)} #mFilt.on{background:var(--molo-charcoal);border-color:var(--molo-charcoal);color:var(--text-on-dark)} #mFilt .fbadge{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px; border-radius:9px;background:var(--brass);color:var(--bar);font:700 10px/17px var(--ui); text-align:center;display:none} #mFilt .fbadge.show{display:block} /* сворачиваемая панель фильтров */ #mFiltPanel{display:none;padding:9px 0 2px;border-top:1px solid var(--hair);margin-top:8px} #mFiltPanel.open{display:block} /* длина: подпись (из i18n) над полем — длинный текст переносится, шрифт не «съёживается» */ .mlf{display:flex;align-items:center;gap:8px;margin-bottom:8px} .mlf>span{flex:1;min-width:0;font:400 11px/1.3 var(--ui);color:var(--text-2)} .mlf .lf{flex:0 0 108px;width:108px;padding:9px 10px;font-size:14px!important;text-align:center} .chips{gap:6px} .chip{padding:7px 12px;font-size:13px;min-height:36px} .chip .sw{width:13px;height:13px} /* ============================================================ ОРДЕР-ТИКЕТ: таблица → КОМПАКТНЫЕ карточки (чистый CSS-reflow). Группа = картинка+название один раз (первая строка группы), далее компактные строки-варианты по 2 линии: ① код ② цвет ............ цена ③ [длина] [кол-во] ....... сумма Точечный апдейт значений (renderTicket не пересобирается) работает как есть — меняем только представление. ============================================================ */ .pane .body>table{display:block;min-width:0;width:100%} #ot,.pane .body thead,.pane .body tbody{display:block;width:100%} .pane .body thead{display:none} /* заголовки колонок в карточках не нужны */ /* секция ПРОФИЛЬ / ФУРНИТУРА — тонкий баннер-разделитель */ tr.sec{display:block} tr.sec td{display:block;padding:7px 12px;font-size:10px} /* карточка-вариант */ #ot tr.vrow{display:flex;flex-wrap:wrap;align-items:center;column-gap:7px;row-gap:1px; padding:6px 12px 7px;border:0;border-bottom:1px solid var(--hair-faint)} #ot tr.vrow.grp0{border-top:1px solid var(--group-rule);padding-top:8px} #ot tr.vrow.has{background:var(--hasqty-tint)} #ot tr.vrow td{display:block;padding:0;border:0;text-align:left;white-space:normal} /* ① шапка ГРУППЫ: картинка + название + мета (рендерится только у первой строки группы) */ #ot td.prodimg{order:0;flex:0 0 100%;display:flex!important;align-items:flex-start;gap:9px; padding:0 0 6px!important;margin:0 0 2px;border:0!important;background:transparent!important;width:auto} #ot td.prodimg img{width:50px!important;height:38px!important;margin:0!important;flex:0 0 auto} #ot td.prodimg .noimg{width:50px!important;height:38px!important;margin:0!important;flex:0 0 auto} #ot td.prodimg .pname{margin:0!important;text-align:left!important;max-width:none!important; font-size:13px;font-weight:600;line-height:1.25} #ot td.prodimg .meta{margin-top:2px!important;max-width:none!important;font-size:10px;line-height:1.3} #ot td.prodimg .meta .kv{display:inline;margin-right:8px} #ot tr.ghas td.prodimg{background:transparent!important} .kitwrap{display:inline-block;margin-top:0} /* ② одна линия: цвет · артикул ............ цена (артикул ужимается с многоточием) */ #ot td.nm{order:2;flex:0 1 auto;min-width:0;font-size:13px!important; display:flex;align-items:center;gap:5px;line-height:1.3;white-space:nowrap;overflow:hidden} #ot td.cd{order:3;flex:0 1 auto;min-width:0;font-size:10.5px;line-height:1.3;color:var(--text-3); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #ot td.pr{order:4;flex:0 0 auto;margin-inline-start:auto;padding-inline-start:6px!important; font-size:14px;font-weight:600;text-align:right} #ot td.pr::before{content:"$";opacity:.5;font-weight:400;margin-inline-end:1px} /* ПРИНУДИТЕЛЬНЫЙ разрыв строки после цены: псевдоэлемент строки — тоже flex-элемент. Без него длинное название цвета («Champagne Matt») перекидывало блок «кол-во» на третью линию и высота карточки скакала 83↔135px. Теперь всегда ровно 2 линии. */ #ot tr.vrow::after{content:"";order:5;flex:0 0 100%;height:0;margin:0;padding:0} /* ③ контролы в ОДНУ линию: длина · количество · сумма */ #ot td.len{order:6;flex:0 0 auto;padding-top:4px!important} #ot td.q{order:7;flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:5px; overflow:visible;padding-top:4px!important} /* Селектор с `tr.vrow` обязателен: общее правило `#ot tr.vrow td{text-align:left}` выше специфичнее, чем `#ot td.ls`, и молча перебивало выравнивание — сумма прижималась ВЛЕВО, а её подпись «Line $» (у неё своя, более специфичная пара) оставалась справа. Число и подпись стояли в разных концах карточки (замерено 02.08). */ #ot tr.vrow td.ls{order:8;flex:1 1 auto;align-self:flex-end;padding-top:4px!important; font-size:15px;font-weight:700;text-align:right;color:var(--text-strong)} #ot tr.vrow td.ls:empty{display:none} /* нет количества — нет суммы */ /* микро-подписи над контролами (текст берётся из i18n через data-ml) */ #ot td.len[data-ml]::before,#ot td.q[data-ml]::before,#ot td.ls[data-ml]::before{ content:attr(data-ml);display:block;flex:0 0 100%; font:600 8.5px/1 var(--disp);letter-spacing:.8px;text-transform:uppercase; color:var(--text-3);margin-bottom:3px} #ot td.ls[data-ml]::before{text-align:right} /* подпись «Сумма $» — уже содержит символ валюты */ /* Компактные, но тач-достаточные степперы. «Зона нажатия шире визуала» было записано в комментарии, но НЕ сделано: замерено 02.08 — кнопка 30×32px при рекомендованных 44px. Визуал не трогаем (высота карточки посчитана под него), расширяем только область попадания невидимым псевдоэлементом: 32 + 6 + 6 = 44px по вертикали. */ #ot .qgrp{height:34px} #ot .qgrp .qstep{position:relative} #ot .qgrp .qstep::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px} #ot td.len .qgrp input{width:46px!important;font-size:14px} #ot td.q .qgrp input{width:42px!important;font-size:14px} .qgrp .qstep{width:30px;font-size:17px} /* «округлить до пачки»: неактивную кнопку не показываем (она и так некликабельна) */ #ot td.q .pbtn{display:none} #ot td.q .pbtn.on{display:inline-block;margin:0;padding:6px 9px;font-size:11px;line-height:1.2} #ot td.q .multhint{flex:0 0 100%;margin:0;font-size:9.5px} /* ---- Состав комплекта: на телефоне не поповер у чипа, а БОТТОМ-ШИТ ---- Поповер у чипа уезжал за правый край экрана (чип стоит в правой части карточки, подложка открывалась от него вправо) и вдобавок обрезался прокруткой списка. Фиксированный лист на всю ширину над нижней навигацией — ничего не режется. Закрытие прежнее: повторный тап по чипу или тап мимо (обработчик в index.html). */ .kitchip{padding:4px 10px;font-size:11px;min-height:28px} .kitwrap.open .kitpop{ position:fixed;left:8px;right:8px;top:auto; bottom:calc(51px + env(safe-area-inset-bottom,0px) + 8px); width:auto;max-width:none;max-height:52vh;overflow:auto;z-index:60; margin:0;padding:12px 14px;border-radius:8px; border:1px solid var(--hair-strong);box-shadow:0 8px 28px rgba(0,0,0,.28)} .kitwrap.open .kitpop b{font-size:11px;margin-bottom:7px} .kitwrap.open .kitpop ul{padding-left:18px} .kitwrap.open .kitpop li{font-size:12px;line-height:1.5;padding:2px 0} /* ---- Заявка (блоттер): строки крупнее, итоги и действие внизу ---- */ .bl .bhead>span,.bl .brow>span{padding:9px 10px} .bl .brow,.bl .bhead{grid-template-columns:1fr 44px 84px 34px} /* Наименование переносится на две строки, а не режется многоточием. На телефоне колонка имени — 228px, и в неё не влезало ни название, ни ДЛИНА позиции: «5.4m» уезжала за границу ячейки и клипалась (замерено 02.08 — правый край 436px при экране 390px). Заявка на телефоне — единственное место, где клиент сверяет заказ, и длина в ней обязана быть видна. Вертикали здесь не жалко: строк в заявке немного. */ .bl .brow>span:first-child{white-space:normal;overflow:visible;text-overflow:clip; line-height:1.35;word-break:break-word} .bl .brow{align-items:start} .bl .brow .blen{white-space:nowrap} .bl .brow .x{font-size:16px} .bl .sum{padding:10px 12px} .bl .sum .r{padding:3px 0} .bl .sum .r.big b{font-size:22px} .bl .act{padding:10px 12px} .bl .act .ar-btn{padding:14px;font-size:14px} /* ---- Сетка 3-панелей → одна активная панель на весь экран ---- */ .grid{display:flex;flex-direction:column;gap:0;flex:1;min-height:0} .grid>.rsz{display:none} .grid>.pane{display:none;flex:1 1 auto;min-height:0;width:auto} body.mtab-sys .grid>.pane.wl{display:flex} body.mtab-cat .grid>.pane:not(.wl):not(.bl){display:flex} body.mtab-ord .grid>.pane.bl{display:flex} /* ============================================================ НИЖНЯЯ НАВИГАЦИЯ — угольная рейка, 3 вкладки, латунь-акцент. ============================================================ */ #mnav{display:flex;flex:0 0 auto;background:var(--bar);border-top:1px solid var(--bar-line); padding-bottom:env(safe-area-inset-bottom,0)} #mnav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; background:transparent;border:0;color:var(--text-on-dark-2);padding:7px 4px 6px;min-height:50px; font:600 9.5px/1 var(--disp);letter-spacing:.5px;text-transform:uppercase;position:relative;cursor:pointer} #mnav button .ic{font-size:17px;line-height:1} #mnav button.on{color:var(--text-on-dark)} #mnav button.on::after{content:"";position:absolute;top:0;left:18%;right:18%;height:2px;background:var(--brass)} #mnav button .bdg{position:absolute;top:4px;right:calc(50% - 24px);min-width:17px;height:17px; padding:0 4px;border-radius:9px;background:var(--brass);color:var(--bar); font:700 10px/17px var(--ui);text-align:center;display:none} #mnav button .bdg.show{display:block} } /* Узкий телефон (≤380px) — ещё чуть плотнее */ @media screen and (max-width:380px){ #ot td.prodimg img,#ot td.prodimg .noimg{width:44px!important;height:34px!important} #ot td.len .qgrp input{width:40px!important} #ot td.q .qgrp input{width:38px!important} .qgrp .qstep{width:28px} .mlf .lf{flex:0 0 96px;width:96px} .ticker .t{padding:5px 8px} }