/* ============================================================ Кабинет на телефоне: оболочка «как в приложении». Файл подключается после style.css и работает только ниже 768px — десктопная вёрстка не затрагивается. ============================================================ */ /* ============================================================ Скелетоны на время загрузки (js/loading-skeleton.js). Работают на любой ширине: списки приходят из SDK асинхронно, и без заглушки страница подпрыгивает в момент отрисовки карточек. ============================================================ */ .skl-host { gap: 15px; } .skl { position: relative; overflow: hidden; padding: 20px; border-radius: 20px; background: #fff; } .skl__line, .skl__avatar { display: block; border-radius: 8px; background: #edeef9; } .skl__avatar { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; } .skl__line { height: 12px; margin-bottom: 10px; } .skl__line--title { height: 16px; width: 62%; margin-left: auto; margin-right: auto; } .skl__line--sub { width: 38%; margin-left: auto; margin-right: auto; margin-bottom: 18px; } .skl__line--short { width: 45%; } .skl__rows .skl__line:last-child { margin-bottom: 0; } .skl--row .skl__line--title { width: 55%; margin-left: 0; } /* блик, пробегающий по заглушке */ .skl::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.75) 50%, transparent 100%); animation: skl-shine 1.25s infinite; } @keyframes skl-shine { 100% { transform: translateX(100%); } } /* уважение к системной настройке «меньше движения» */ @media (prefers-reduced-motion: reduce) { .skl::after { animation: none; } } @media (max-width: 768px) { /* ---------- База ---------- */ html, body { /* содержимое кабинета шире экрана давало горизонтальный сдвиг */ overflow-x: hidden; background: #f4f5fb; -webkit-text-size-adjust: 100%; } /* высота нижней панели + вырез снизу у iPhone */ :root { --tabbar-h: 62px; --sheet-bar-h: 56px; /* Базовый style.css вешает на оболочку кабинета zoom: 0.85 — всё внутри #dashboard рисуется на 15% мельче заданного. Панель вкладок и шапка окна лежат в вне зума и остаются в настоящих пикселях, поэтому отступы под них считаем с делением: 62px внутри зума — это 53px на экране, и нижние карточки уезжали под панель. */ --zoom: 0.85; } #dashboard { padding-bottom: calc((var(--tabbar-h) + env(safe-area-inset-bottom, 0px)) / var(--zoom) + 8px); } #dashboard .container { width: 100%; max-width: none; padding-left: 16px; padding-right: 16px; } /* ---------- Шапка: липкая, как в приложении ---------- */ #dashboard .header { position: sticky; top: 0; z-index: 40; background: #fff; padding-top: env(safe-area-inset-top, 0px); box-shadow: 0 1px 0 rgba(28, 34, 88, 0.08); } /* в базовых стилях шапка на телефоне переносится (flex-wrap) — логотип оказывался в одной строке, кнопки под ним. Возвращаем один ряд. */ #dashboard .header .container { flex-wrap: nowrap; align-items: center; min-height: 66px; gap: 12px; } #dashboard .header_logo img { height: 28px; width: auto; } #dashboard .header_right { gap: 10px; } /* Кнопки-иконки. Селектор с тегом (a.header_right_link) намеренно: базовое правило `#dashboard .header_right a` весит больше простого класса, из-за чего кнопки оставались 60px и распирали шапку от края до края. */ #dashboard .header_right a.header_right_link { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: #fff; border: 1px solid #edeef9; } #dashboard .header_right a.header_right_link img { width: 22px; height: 22px; } /* точка непрочитанного посчитана под кнопку 60px — пересаживаем на 48px */ #dashboard .header_right a.header_right_link .notfication_number { top: 11px; right: 11px; } /* ---------- Контент ---------- */ #dashboard main { padding-top: 12px; } /* в столбик складываем только ряд «меню + контент» самого макета. Класс .flex.between висит и на шапке, и на внутренних рядах страниц — без прямых потомков правило разворачивало их все. */ #dashboard main > .container > .flex.between { flex-direction: column; gap: 0; } #dashboard .contents { width: 100%; } /* ---------- Боковое меню ---------- Разделы уехали в нижнюю панель, поэтому выдвижная шторка с бургером больше не нужна: от бокового блока остаются только действия — «Записаться снова» и «Выйти». Они всегда видны строкой под шапкой. */ #dashboard .sidebar { width: 100%; margin-bottom: 14px; } #dashboard .sidebar_hamburger, #dashboard .sidebar_links { display: none; } /* шторку разворачиваем в обычный блок в потоке */ #dashboard .sidebar_content, #dashboard .sidebar_content.active { position: static; left: auto; top: auto; width: 100%; height: auto; padding: 0; background: none; backdrop-filter: none; display: flex; /* stretch, а не center: обе кнопки должны быть одной высоты и стоять ровно — при center кнопку с внешним отступом сносило вниз */ align-items: stretch; gap: 10px; } /* у кнопки в базовых стилях margin-top: 24px — в ряду он сдвигал её относительно «Выйти» на десяток пикселей */ #dashboard .sidebar .button { flex: 1 1 auto; width: auto; margin: 0; min-height: 52px; display: flex; align-items: center; justify-content: center; font-size: 16px; padding: 0 16px; border-radius: 14px; } #dashboard .sidebar .exity { flex: none; width: 52px; height: auto; min-height: 52px; margin: 0; display: flex; align-items: center; justify-content: center; border: 1px solid #edeef9; border-radius: 14px; background: #fff; } /* подпись «Выйти» в квадратную кнопку не влезает — оставляем только иконку */ #dashboard .sidebar .exity span { display: none; } #dashboard .sidebar .exity svg { width: 20px; height: 22px; } /* ---------- Нижняя панель вкладок ---------- */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: stretch; background: #fff; border-top: 1px solid #e7e9f6; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -6px 18px rgba(28, 34, 88, 0.06); } .tabbar__item { flex: 1 1 0; min-width: 0; height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: #9093ae; /* серая вспышка при тапе выглядит инородно в приложении */ -webkit-tap-highlight-color: transparent; transition: color 0.15s; } .tabbar__icon { position: relative; display: block; width: 24px; height: 24px; } .tabbar__icon svg { width: 24px; height: 24px; display: block; } .tabbar__label { font-family: "Raleway", system-ui, sans-serif; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; } .tabbar__item.is-active { color: #ad272b; } /* тонкая черта над активной вкладкой — как в нативных таб-барах */ .tabbar__item.is-active::before { content: ""; position: absolute; top: 0; width: 34px; height: 3px; border-radius: 0 0 3px 3px; background: #ad272b; } .tabbar__item { position: relative; } /* счётчик непрочитанных на вкладке чата */ .tabbar__badge { position: absolute; top: -4px; /* у крайней правой вкладки отрицательный отступ уводил счётчик за экран */ left: 14px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ff4b55; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } .tabbar__badge[hidden] { display: none; } /* ---------- Общая «аппная» подгонка страниц ---------- */ /* карточки разделов — во всю ширину, с крупным радиусом */ #dashboard .tab_content_item, #dashboard .my_record_tab_content, #dashboard .range-block { border-radius: 18px; } /* заголовок раздела на телефоне занимал три строки кеглем с десктопа */ #dashboard .section_title { font-size: 22px; line-height: 1.2; } /* ряды «в строку» на узком экране складываем в столбик */ #dashboard .my_order_top, #dashboard .tab_content_item_top { flex-direction: column; align-items: flex-start; gap: 8px; } /* поля и кнопки — крупнее, палец должен попадать без прицеливания */ #dashboard input:not([type="checkbox"]):not([type="radio"]), #dashboard select, #dashboard textarea { min-height: 48px; font-size: 16px; /* меньше 16px — iOS зумит страницу при фокусе */ border-radius: 12px; } #dashboard .button, #dashboard button:not(.sidebar_hamburger) { min-height: 48px; } /* ---------- Подробности — модальным окном ---------- Правая колонка макета (запись, заказ анализов, чат с доктором) на телефоне выезжает поверх экрана: иначе после тапа по карточке содержимое менялось где-то внизу страницы и перемена оставалась незамеченной. Управляет классами js/mobile-sheet.js. */ /* у панелей в базовых стилях свои width/height/top (#dashboard .my_order, .my_record_profile) — здесь их гасим, иначе окно вышло бы куском экрана */ #dashboard .m-sheet { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90; width: auto !important; max-width: none; height: auto !important; max-height: none; margin: 0; border-radius: 0; background: #f4f5fb; /* шапка окна живёт вне зума и настоящая её высота — 56px; внутри #dashboard столько же «весит» 47px, поэтому делим на коэффициент и добавляем воздух */ padding: calc((var(--sheet-bar-h) + env(safe-area-inset-top, 0px)) / var(--zoom) + 18px) 16px calc(28px + env(safe-area-inset-bottom, 0px) / var(--zoom)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transform: translateY(100%); transition: transform 0.28s ease; } #dashboard .m-sheet.is-open { transform: none; } .m-sheet-backdrop { position: fixed; inset: 0; z-index: 85; background: rgba(28, 34, 88, 0.35); } .m-sheet-backdrop[hidden] { display: none; } /* верхняя полоса окна: «назад» и заголовок карточки */ .m-sheet-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 95; display: flex; align-items: center; gap: 10px; height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 12px 0; background: #fff; box-shadow: 0 1px 0 rgba(28, 34, 88, 0.08); } .m-sheet-bar[hidden] { display: none; } .m-sheet-back { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 12px; background: #edeef9; color: #1c2258; } .m-sheet-back svg { width: 20px; height: 20px; } .m-sheet-title { font-family: "Raleway", system-ui, sans-serif; font-size: 16px; font-weight: 700; color: #1c2258; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Заголовок карточки уже стоит в шапке окна — в содержимом он повторялся («Заказ №…» дважды подряд). Помечает его js/mobile-sheet.js, и только когда это отдельная строка-заголовок, а не подпись внутри карточки. */ #dashboard .m-sheet .m-sheet-dup { display: none; } /* карточка врача в окне: аватар в разметке зашит инлайном на 150px и выдавливал имя в три строки */ #dashboard .m-sheet .my_record_profile_top { align-items: center; gap: 14px; margin-bottom: 18px; } #dashboard .m-sheet .my_record_profile_top .doc-grad-avatar { width: 84px !important; height: 84px !important; flex: none; } /* строки «иконка — значение» шли впритык к краям окна */ #dashboard .m-sheet .my_record_profile_information_lists, #dashboard .m-sheet .my_order_information_lists { gap: 14px; } /* пока окно открыто, страница под ним не должна прокручиваться */ body.m-sheet-open { overflow: hidden; } /* панель вкладок прячем: в окне своя навигация — кнопка «назад» */ body.m-sheet-open .tabbar { display: none; } /* чат в окне занимает всю высоту: шапка врача сверху, лента растягивается, поле ввода прижато к низу — как в мессенджере */ #dashboard .online_priem_chat.m-sheet { display: flex; flex-direction: column; padding-left: 0; padding-right: 0; /* поле ввода само прижато к низу и учитывает вырез — общий нижний отступ окна оставлял под ним полосу пустоты */ padding-bottom: 0; } /* скрипт чата ставит контейнеру инлайновый display:block — в окне возвращаем колонку, иначе поле ввода не прижимается к низу экрана */ #dashboard .online_priem_chat.m-sheet .online_priem_chat_display { display: flex !important; flex-direction: column; flex: 1 1 auto; height: auto; min-height: 0; margin: 0; padding: 0; border-radius: 0; } /* лента сообщений занимает всё свободное место (в разметке жёсткие 400px) */ #dashboard .online_priem_chat.m-sheet .online_priem_chat_items { flex: 1 1 auto; max-height: none !important; min-height: 0; padding: 0 16px; overflow-y: auto; } #dashboard .online_priem_chat.m-sheet .online_priem_chat_header { padding: 12px 16px; } #dashboard .online_priem_chat.m-sheet .doc-grad-avatar { width: 48px !important; height: 48px !important; } #dashboard .online_priem_chat.m-sheet .my_chat_form { position: sticky; bottom: 0; margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px) / var(--zoom)); background: #fff; box-shadow: 0 -2px 12px rgba(28, 34, 88, 0.06); } /* ---------- Бот-помощник ---------- Экран свёрстан на всю высоту окна (min-height: 100vh - 80px), поэтому нижнее поле страницы под панель вкладок ему не помогало — поле ввода уходило под панель. Вычитаем её высоту из самого экрана. */ #dashboard .ai_chat_page { min-height: 0; padding-bottom: 0; } #dashboard .ai_chat_page .modal-row { height: calc((100vh - var(--tabbar-h)) / var(--zoom) - 166px); min-height: 380px; } /* ---------- Платежи: строка истории ---------- Ряд свёрстан сеткой из шести колонок — на 375px каждая ужималась до одной буквы. Разворачиваем в список «подпись — значение». */ #dashboard .history_row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; } #dashboard .history_row span { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; } #dashboard .history_row b { padding-right: 0; color: #9093ae; white-space: nowrap; } #dashboard .history_row .item_service { flex-direction: column; align-items: flex-start; gap: 2px; } /* картинки не должны раздвигать экран */ #dashboard img { max-width: 100%; } /* длинные слова (адреса, названия услуг) рвём, иначе тянут страницу вбок */ #dashboard p, #dashboard span, #dashboard li, #dashboard td { overflow-wrap: anywhere; } /* таблицы на узком экране прокручиваем внутри блока, а не всей страницей */ #dashboard table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* модалки и оверлеи не должны прятаться под панелью вкладок */ #dashboard .modal, #dashboard .popup { padding-bottom: calc((var(--tabbar-h) + env(safe-area-inset-bottom, 0px)) / var(--zoom)); } } /* Планшет в портрете тоже показывает панель — иначе разделы недоступны: боковое меню там уже свёрнуто в бургер */ @media (min-width: 769px) { .tabbar { display: none; } }