/* Мобильная версия KATALEYA CRM. * * Экраны собирались под ноутбук администратора: журнал — горизонтальная * доска из колонок-мастеров, списки — широкие таблицы. На телефоне это * читалось только боковой прокруткой, а журнал — главный экран — не имел * ни одного мобильного правила. * * Здесь всё мобильное в одном файле, а не размазано по десяти страницам: * подключается одной строкой в и правится в одном месте. * * Порог 760px — планшет в книжной ориентации и всё, что уже. Отдельный * порог 420px для тесных телефонов. * * Главное решение — журнал. Пять колонок по 210px на экран 375px не * помещаются никак, поэтому на телефоне показывается ОДИН мастер, а * переключение — лентой с фотографиями сверху, как в мобильном YCLIENTS. * Данные те же, ничего не прячется: меняется только способ добраться. */ :root { /* Трубка для строки телефона в списках (маска, красится currentColor) */ --phone-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); } /* ============================ Общее ============================ */ @media (max-width: 760px) { .page { padding: 14px 12px 24px } /* место под вкладки даёт body в ui.js */ h1 { font-size: 22px } /* Любая сетка «в несколько колонок» становится одной */ .row, .row2, .two, .pies, .tops, .evs, .cards, .grid { grid-template-columns: 1fr !important; flex-direction: column; } /* Панели фильтров: поля во всю ширину, а не по 170px в ряд */ .filters .frow { flex-direction: column; align-items: stretch } .filters .fld { min-width: 0; width: 100% } .found { padding-bottom: 0 } /* Кнопки хватаются пальцем: не меньше 44px по высоте */ button, .btn, input, select { min-height: 40px } .btn { padding: 10px 14px } } /* ---- Модальные окна: лист снизу, а не окошко посередине ---- */ @media (max-width: 760px) { #modal.open, .fill { align-items: flex-end; padding: 0 } #modal .box, .fill .box { width: 100%; max-width: none; max-height: 92vh; border-radius: 16px 16px 0 0; padding: 18px 16px 22px; } #modal .actions, .fill .acts { position: sticky; bottom: 0; background: inherit; padding-top: 10px; margin-bottom: -4px } #modal .actions button, .fill .acts .btn { flex: 1; padding: 12px } .statusbtns { grid-template-columns: 1fr } } /* ---- Боковое меню: во всю ширину, кнопка под большим пальцем ---- */ @media (max-width: 760px) { #knav { width: min(86vw, 300px) } #knavBtn { width: 52px; height: 52px; left: 14px; bottom: 18px; box-shadow: 0 6px 18px rgba(30, 25, 15, .3) } } /* ======================= Журнал записи ========================= */ /* Лента мастеров. На широком экране не нужна: там видны все колонки. */ #empStrip { display: none } @media (max-width: 760px) { /* Шапка в два ряда вместо четырёх: 178px из 812 — это пятая часть экрана до первой записи. Порядок задан явно, иначе перенос строк раскладывает кнопки как придётся. ряд 1: ‹ дата › календарь ряд 2: Сегодня · День/Неделя · выручка */ header { flex-wrap: wrap; gap: 6px; padding: 6px 10px } header > span:first-child { display: none } /* «Журнал записи» и так на виду */ header button { padding: 6px 10px } header #prevBtn { order: 1 } header #dayTitle { order: 2; flex: 1 1 auto; font-size: 14px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } header #nextBtn { order: 3 } header #dayPick { order: 4; flex: 0 0 42px; width: 42px; padding: 6px 4px } header #todayBtn { order: 5 } header #viewSwitch { order: 6; flex: 1 1 auto } header #viewSwitch button { flex: 1 } header #revwrap { order: 7; flex: 0 0 auto } /* Фильтр «Все сотрудники» на телефоне не нужен: его работу делает лента мастеров ниже — там сразу все, кто работает в этот день. */ header #empwrap { display: none } #daySummary { width: min(92vw, 320px); right: 0 } #empStrip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 10px 12px; background: var(--card, #fffdf9); border-bottom: 1px solid var(--line, #eae4d8); position: sticky; top: 0; z-index: 25; -webkit-overflow-scrolling: touch; } #empStrip::-webkit-scrollbar { display: none } #empStrip .chip { flex: 0 0 auto; scroll-snap-align: start; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line, #eae4d8); background: #fff; border-radius: 999px; padding: 5px 14px 5px 5px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; } #empStrip .chip img, #empStrip .chip .ini { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 28px; border: 2px solid var(--gold-soft, #f3e7c8); display: flex; align-items: center; justify-content: center; background: var(--gold-soft, #f3e7c8); color: #a8871f; font-weight: 700; font-size: 11px; } #empStrip .chip.on { background: var(--gold-soft, #f3e7c8); border-color: var(--gold, #c9a227); font-weight: 600; } #empStrip .chip .n { max-width: 8.5em; overflow: hidden; text-overflow: ellipsis } #empStrip .chip .cnt { color: var(--muted, #8d8577); font-size: 11px } #empStrip .chip.on .cnt { color: #8a6d12 } /* Один мастер на экран — остальные достаются лентой */ #board { overflow-x: hidden } #board .col { display: none } #board .col.mob-on { display: block; min-width: 0; flex: 1 1 auto; border-right: none } #board .col.mob-on .colhead { display: none } /* имя уже в ленте */ .timecol { margin-top: 0 } /* Карточка визита: на узкой колонке важны время, услуга и клиент */ .card { font-size: 12px } .card .cli { font-size: 11px } /* Неделя прокручивается внутри себя, а не всей страницей */ #weekBoard { padding: 12px } .wk { overflow-x: auto } .wk table { min-width: 560px } } @media (max-width: 420px) { header #viewSwitch button { padding: 7px 10px } #empStrip .chip .n { max-width: 6em } } /* ==================== Списки и таблицы ========================= */ /* Клиентская база: строка таблицы становится карточкой. Столбцы на 375px нечитаемы, а карточка повторяет то, что показывает мобильный YCLIENTS: имя, телефон, и цифры одной строкой снизу. Обёртка называется .tablewrap — это единственная таблица, которую стоит перестраивать: у остальных столбцы равнозначны и их честнее прокручивать, чем сминать. */ @media (max-width: 760px) { .tablewrap thead { display: none } .tablewrap table, .tablewrap tbody, .tablewrap tr, .tablewrap td { display: block; width: auto; } /* Строка списка как в мобильном YCLIENTS: имя крупно сверху, под ним контакт помельче, цифры справа. Читается сверху вниз одним взглядом, а не разбирается по колонкам. */ .tablewrap { border-radius: 0; border-left: none; border-right: none } .tablewrap tr { padding: 13px 14px; border-bottom: 1px solid #f2eee4; display: grid; grid-template-columns: 1fr auto auto auto; gap: 2px 12px; align-items: baseline; } .tablewrap td:nth-child(1) { font-size: 16px; font-weight: 600; line-height: 1.35 } .tablewrap td { border: none; padding: 0 } .tablewrap td:nth-child(1) { grid-column: 1 / -1 } /* имя и заметка */ .tablewrap td:nth-child(2) { grid-column: 1; color: var(--muted, #8d8577); font-size: 14px; } /* Телефон с трубкой перед ним — как в списке клиентов YCLIENTS */ .tablewrap td:nth-child(2):not(:empty)::before { content: ''; display: inline-block; width: 13px; height: 13px; margin-right: 6px; vertical-align: -1px; opacity: .55; background: currentColor; -webkit-mask: var(--phone-ico) center/contain no-repeat; mask: var(--phone-ico) center/contain no-repeat; } .tablewrap td.hide-sm { display: none } /* Цифры — одной строкой справа от телефона, а не столбиком */ .tablewrap td.num { text-align: right; font-size: 12px; white-space: nowrap; color: var(--muted, #8d8577); } /* Шапки таблицы на телефоне нет, поэтому число визитов подписываем: «3 · 6 500 ₽ · 0 %» иначе не прочитать. Рубль и процент говорят сами за себя. */ .tablewrap td:nth-child(4)::after { content: ' виз.' } .pager { flex-wrap: wrap; gap: 8px; justify-content: center } } /* Остальные таблицы — прокруткой внутри рамки: так ни одна цифра не теряется и не приходится гадать, какой столбец сжали. */ @media (max-width: 760px) { .box, .wrap, .list { overflow-x: auto; -webkit-overflow-scrolling: touch } .box table, .wrap table { min-width: 520px } .box > *:not(table), .list > *:not(table) { min-width: 0 } } /* ==================== График работы =========================== */ @media (max-width: 760px) { .bar { gap: 8px } .mnav b { min-width: 120px; font-size: 14px } .legend { display: none } /* подсказка цветов — не на телефоне */ .wrap { max-height: calc(100vh - 250px) } th.who, td.who { min-width: 132px; padding: 6px 8px } .who img, .who .init { width: 26px; height: 26px; flex: 0 0 26px } .who .n { font-size: 12px } .who .d { display: none } /* специализация не влезает */ thead th { min-width: 34px } td.c { height: 34px } .pop { width: min(94vw, 296px) } } /* ==================== Виджет онлайн-записи ==================== */ @media (max-width: 760px) { .step { padding: 0 4px } .masters, .svc { grid-template-columns: 1fr !important } }