/* =========================================================================== RADAR FLOW — мобильная адаптация админки (Unfold 0.97). Подключается ПОСЛЕ radar_compact.css (см. UNFOLD["STYLES"] в settings/base.py), поэтому правила здесь имеют приоритет при равной специфичности. Принцип: десктоп НЕ трогаем. Всё внутри @media (max-width: …). Breakpoint'ы: - 768px — «мобилка» (телефоны, основной таргет) - 1024px — «планшет/узкий» (по необходимости) Карта фаз (план мобильной адаптации): • Фаза 0 (этот коммит) — фундамент: safety-net против горизонтального переполнения, перенос тулбара, поиск на всю ширину. • Фаза 1 — card-mode для list-view (отключение force-table из radar_compact.css на мобилке). • Фаза 2 — stats_panel UserProfile (грид вместо width:20%×5). • Фаза 3 — дашборд + insights (грид-брейкпоинты, графики). • Фаза 4 — формы и action-страницы. =========================================================================== */ /* =========================================================================== ФАЗА 0 — ФУНДАМЕНТ Безопасные правила: убрать горизонтальный скролл всей страницы, сделать тулбар/поиск удобными. Card-mode пока НЕ трогаем — это Фаза 1. =========================================================================== */ @media (max-width: 768px) { /* ── 0.1) Safety-net: широкая таблица (10–11 колонок) скроллится ВНУТРИ своего контейнера, а не растягивает всю страницу в горизонталь. До Фазы 1 (card-mode) это спасает от «простыни» и сломанного layout. После Фазы 1 правило станет неактуальным, но вреда не несёт. ───────────── */ #changelist .results, #changelist-form .results { overflow-x: auto !important; -webkit-overflow-scrolling: touch; /* инерционный скролл в iOS Safari */ } /* ── 0.2) Тулбар (Search / Filters / Add) — переносим в столбик, чтобы кнопки не наезжали друг на друга на узком экране. ───────────────── */ #toolbar { flex-wrap: wrap !important; gap: 8px !important; } /* ── 0.3) Поле поиска — на всю ширину строки. ──────────────────────────── */ #toolbar form, #toolbar #searchbar { width: 100% !important; } #toolbar #searchbar { box-sizing: border-box; } /* ── 0.4) Боковые отступы контента чуть меньше — больше места под данные. Unfold ставит px-4 (16px) на обёртке @container; на мобилке 12px хватает. Трогаем только внешнюю обёртку, чтобы не задваивать с #content. ─────────── */ #main > .\@container { padding-left: 12px !important; padding-right: 12px !important; } /* ── 0.5) Глобальная страховка от выхода за вьюпорт у любых элементов с фиксированной шириной (inline style="width:NNNpx" во вложенных HTML). Не трогает таблицы (у них свой скролл-контейнер выше). ────────────────── */ #content img, #content table:not(#result_list) { max-width: 100% !important; height: auto; } } /* =========================================================================== ФАЗА 1 — CARD-MODE radar_compact.css теперь обёрнут в @media (min-width:769px), поэтому на ≤768px force-table отключён и нативный card-mode Unfold включается сам (каждая строка = block-карточка, ячейка = flex с меткой колонки через ::before[data-label]). Здесь — только полировка нативных карточек под наш широкий list_display. =========================================================================== */ @media (max-width: 768px) { /* ── 1.1) Высота ячейки по контенту. Unfold ставит h-[45px] (фикс 45px) — композитные ячейки (иконка+имя+мета, бейджи в две строки) обрезаются. В карточке высота должна тянуться по содержимому. ─────────────────────── */ #result_list tr.data-row > td, #result_list tr.data-row > th { height: auto !important; min-height: 40px; } /* ── 1.2) Длинный текст (сниппеты сообщений, описания) — показываем полностью: метка сверху, текст снизу, перенос строк. Иначе flex-ячейка с overflow-hidden обрежет до одной строки. ──────────────────────────────── */ #result_list td.field-text_snippet, #result_list td.field-snippet, #result_list td.field-message_text, #result_list td.field-text, #result_list td.field-description { flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; overflow: visible !important; white-space: normal !important; word-break: break-word; line-height: 1.4; } /* В колоночной раскладке метка ::before уже сверху — убираем mr-auto, который в row-режиме отжимал её влево. ────────────────────────────────── */ #result_list td.field-text_snippet::before, #result_list td.field-snippet::before, #result_list td.field-message_text::before, #result_list td.field-text::before, #result_list td.field-description::before { margin-right: 0 !important; margin-bottom: 2px; opacity: 0.75; } /* ── 1.3) Зазор между карточками чуть плотнее (Unfold mb-3 = 12px). ──────── */ #result_list tr.data-row { margin-bottom: 8px !important; } /* ── 1.4) Метка колонки (::before) — приглушаем, чтобы значение читалось как основной контент, а метка была подписью. ─────────────────────────── */ #result_list tr.data-row > td::before { font-size: 11px; opacity: 0.7; } } /* =========================================================================== ФАЗА 7 — ПЛОТНОСТЬ СПИСКОВ НА МОБИЛЕ В card-mode каждая строка показывает ВСЕ 9-11 колонок как «метка: значение» — карточки получаются длинные и перегруженные. На телефоне скрываем однозначно второстепенные колонки, оставляя сканируемые: название/имя, юзер, сниппет, регион, статус, баланс, ключевые счётчики. Имена field-* общие между моделями, поэтому скрываем только те, что второстепенны ВЕЗДЕ. =========================================================================== */ @media (max-width: 768px) { #result_list td.field-id, #result_list td.field-created_at, #result_list td.field-created_at_col, #result_list td.field-created_by, #result_list td.field-actions_col, #result_list td.field-sender_col, #result_list td.field-score_col, #result_list td.field-format_label, #result_list td.field-health_col, #result_list td.field-health_status, #result_list td.field-username_col, #result_list td.field-reach_col, #result_list td.field-msg_count_col, #result_list td.field-msg_week_col, #result_list td.field-leads_week_col, #result_list td.field-week_leads_col, #result_list td.field-last_lead_col, #result_list td.field-last_msg_col, #result_list td.field-last_signal_col, #result_list td.field-filters_col, #result_list td.field-length_col, #result_list td.field-triggered_col, #result_list td.field-deficit_col, #result_list td.field-objects_col, #result_list td.field-total_words_col, #result_list td.field-spammer_level_col, #result_list td.field-leads_from_col, #result_list td.field-direction_col, #result_list td.field-category_badge, #result_list td.field-context_link, #result_list td.field-is_admin_only, #result_list td.field-latency_ms, #result_list td.field-tokens_total, #result_list td.field-model, #result_list td.field-target_col { display: none !important; } } /* =========================================================================== ФАЗА 8 — ДАШБОРД АДМИНКИ НА МОБИЛЕ index.html: графики Chart.js заданы инлайн height:280px. На телефоне их 4 — уменьшаем, чтобы меньше скроллить. KPI-сетка уплотнена в шаблоне (2 кол). =========================================================================== */ @media (max-width: 768px) { #content div[style*="height: 280px"] { height: 200px !important; } } /* =========================================================================== ФАЗА 2 — STATS_PANEL (резерв) =========================================================================== */