/** * DS-02 — AppShell (opt-in каркас унификации). * Источник истины: docs/dashboard_ui_audit_and_tz_2026-07-16.md §6.2–6.4. * * Активация: экран объявляет {% set ds_layout = 'overview'|'workspace'|'console' %} * ДО extends — _base_dashboard.html вешает на классы * `ds-shell ds-layout-`. Без ds_layout ни одно правило отсюда не * применяется — немигрированные экраны не меняются. * * Каркас (ТЗ §6.3, workspace): * rail 56 | header 56 | left 288 | canvas minmax(0,1fr) | inspector 360. * Раскрытая навигация — ВСЕГДА overlay (не двигает контент). * Breakpoints (§6.4): ≥1680 полный; 1024–1679 inspector=drawer; * 768–1023 обе панели drawer; <768 header 48, мобильный режим базы. * * Файл грузится ПОСЛЕ dashboard-base.css — равная специфичность * перекрывается порядком, !important не используется без необходимости. */ /* ======================================================================== 1. Навигация: постоянный рельс 56px, раскрытие — overlay 272px ======================================================================== */ body.ds-shell { /* Header 56 (48 на mobile ниже). dashboard-base читает --header-height. */ --header-height: var(--ds-header-h); --nav-sidebar-collapsed-width: var(--ds-nav-rail-w); /* Панели каркаса: перекрываем legacy 320px. */ --sidebar-left-width: var(--ds-panel-left-w); --sidebar-right-width: var(--ds-panel-right-w); } /* Рельс: nav position:fixed (база). Раскрытая ширина — 272 overlay. */ body.ds-shell .nav-sidebar { width: var(--ds-nav-overlay-w); box-shadow: var(--shadow-xl); } body.ds-shell .nav-sidebar.collapsed { width: var(--ds-nav-rail-w); box-shadow: none; } /* Контент НЕ двигается при раскрытии: отступ всегда = рельс. */ body.ds-shell .dashboard-shell, html.nav-sidebar-is-expanded body.ds-shell .dashboard-shell, html.nav-sidebar-is-collapsed body.ds-shell .dashboard-shell { margin-left: var(--ds-nav-rail-w); } /* ======================================================================== 2. Хедер: 56px desktop / 48px mobile, типографика §6.5 ======================================================================== */ body.ds-shell .dashboard-header .header-left h1 { font: var(--ds-font-card-title); /* 16/24·600 — компактный заголовок шапки */ } body.ds-shell .dashboard-header { height: var(--ds-header-h); padding: 0 var(--ds-space-4); } /* ======================================================================== 3. Компоновка OVERVIEW — центр ≤1440px, без постоянной правой панели ======================================================================== */ body.ds-shell.ds-layout-overview .dashboard-content { max-width: var(--ds-content-max); margin-left: auto; margin-right: auto; width: 100%; padding: var(--ds-space-5); } /* Правая панель в overview постоянной быть не может (ТЗ §6.3). Если легаси-разметка её отдала — рендерим как узкую секцию ПОД контентом, а не съедаем центр. */ body.ds-shell.ds-layout-overview .dashboard-main { flex-wrap: wrap; } body.ds-shell.ds-layout-overview .dashboard-sidebar-right { width: 100%; max-height: 40vh; border-left: none; border-top: 1px solid var(--border); order: 10; } /* ======================================================================== 4. Компоновки WORKSPACE и CONSOLE — панели 288/360, canvas растёт (семантика различается контентом; каркас одинаковый) ======================================================================== */ body.ds-shell.ds-layout-workspace .dashboard-sidebar-left, body.ds-shell.ds-layout-console .dashboard-sidebar-left { width: var(--ds-panel-left-w); } body.ds-shell.ds-layout-workspace .dashboard-sidebar-right, body.ds-shell.ds-layout-console .dashboard-sidebar-right { width: var(--ds-panel-right-w); max-width: var(--ds-inspector-max-w); } /* Canvas: центр не сжимается ниже нуля и забирает всё остальное. */ body.ds-shell.ds-layout-workspace .dashboard-content, body.ds-shell.ds-layout-console .dashboard-content { flex: 1 1 auto; min-width: 0; } /* ======================================================================== 5. Breakpoints (ТЗ §6.4) ======================================================================== */ /* 1024–1679: inspector (правая панель) — drawer. Открытие: .open (тот же контракт, что мобильный режим базы) либо ручка sidebar-collapse. */ @media (min-width: 1024px) and (max-width: 1679px) { body.ds-shell.ds-layout-workspace .dashboard-sidebar-right, body.ds-shell.ds-layout-console .dashboard-sidebar-right { position: fixed; top: var(--ds-header-h); right: 0; height: calc(100vh - var(--ds-header-h)); transform: translateX(100%); transition: transform 0.25s ease; z-index: var(--z-fixed); box-shadow: var(--shadow-lg); } body.ds-shell.ds-layout-workspace .dashboard-sidebar-right.open, body.ds-shell.ds-layout-console .dashboard-sidebar-right.open { transform: translateX(0); } } /* 768–1023: обе панели — drawer, контент в один столбец. (Перекрывает базовый max-width:1200 column-режим, который панели складывал стопкой и съедал 60vh высоты.) */ @media (min-width: 768px) and (max-width: 1023px) { body.ds-shell.ds-layout-workspace .dashboard-main, body.ds-shell.ds-layout-console .dashboard-main { flex-direction: row; /* контент во всю ширину, панели off-canvas */ } body.ds-shell.ds-layout-workspace .dashboard-sidebar-left, body.ds-shell.ds-layout-console .dashboard-sidebar-left, body.ds-shell.ds-layout-workspace .dashboard-sidebar-right, body.ds-shell.ds-layout-console .dashboard-sidebar-right { position: fixed; top: var(--ds-header-h); height: calc(100vh - var(--ds-header-h)); width: min(var(--ds-panel-right-w), 85vw); max-height: none; border: none; transition: transform 0.25s ease; z-index: var(--z-fixed); box-shadow: var(--shadow-lg); } body.ds-shell.ds-layout-workspace .dashboard-sidebar-left, body.ds-shell.ds-layout-console .dashboard-sidebar-left { left: 0; transform: translateX(-100%); } body.ds-shell.ds-layout-workspace .dashboard-sidebar-right, body.ds-shell.ds-layout-console .dashboard-sidebar-right { right: 0; transform: translateX(100%); } body.ds-shell .dashboard-sidebar-left.open { transform: translateX(0); } body.ds-shell .dashboard-sidebar-right.open { transform: translateX(0); } } /* ── Edge-переключатели drawer-панелей (static/js/shared/ds-shell.js). Скрыты по умолчанию; показываются ТОЛЬКО в диапазонах, где панель — drawer (иначе она была бы недоступна — редукция). ── */ .ds-drawer-toggle { display: none; position: fixed; top: 50%; transform: translateY(-50%); z-index: calc(var(--z-fixed) + 1); width: 22px; height: 64px; border: 1px solid var(--border); background: var(--bg-primary); color: var(--text-muted); cursor: pointer; align-items: center; justify-content: center; font-size: 13px; box-shadow: var(--shadow-md); transition: right 0.25s ease, left 0.25s ease, background 0.15s; } .ds-drawer-toggle:hover { background: var(--bg-secondary); color: var(--text-primary); } .ds-drawer-toggle--left { left: 0; border-radius: 0 8px 8px 0; border-left: none; } .ds-drawer-toggle--right { right: 0; border-radius: 8px 0 0 8px; border-right: none; } /* Открытый drawer сдвигает свою кнопку к внутреннему краю панели. */ body.ds-shell.ds-drawer-open-left .ds-drawer-toggle--left { left: min(var(--ds-panel-right-w), 85vw); } body.ds-shell.ds-drawer-open-right .ds-drawer-toggle--right { right: min(var(--ds-panel-right-w), 85vw); } /* Правая панель — drawer на 768–1679 → кнопка видима. */ @media (min-width: 768px) and (max-width: 1679px) { body.ds-shell.ds-layout-workspace .ds-drawer-toggle--right, body.ds-shell.ds-layout-console .ds-drawer-toggle--right { display: flex; } } /* Левая панель — drawer только на 768–1023. */ @media (min-width: 768px) and (max-width: 1023px) { body.ds-shell.ds-layout-workspace .ds-drawer-toggle--left, body.ds-shell.ds-layout-console .ds-drawer-toggle--left { display: flex; } } /* СИСТЕМНЫЙ ФИКС (аудит мобилок 2026-07-18): на <768 ОБЕ панели off-canvas (dashboard-base.css:770 left/right:-100%, .open → 0), НО раньше кнопки- переключатели тут были display:none — панели становились НЕДОСТИЖИМЫ на телефоне. Именно поэтому канонические analyst/producer «ломались» на смартфоне (сайдбары есть, открыть нечем). Показываем оба тоггла и на телефоне — ds-shell.js их уже создал и подвязал (.open сдвигает панель). */ @media (max-width: 767px) { body.ds-shell.ds-layout-workspace .ds-drawer-toggle--left, body.ds-shell.ds-layout-console .ds-drawer-toggle--left, body.ds-shell.ds-layout-workspace .ds-drawer-toggle--right, body.ds-shell.ds-layout-console .ds-drawer-toggle--right { display: flex; } } /* <768: header 48; рельс скрыт (мобильный hamburger из базы работает как есть). */ @media (max-width: 767px) { body.ds-shell { --header-height: var(--ds-header-h-mobile); } body.ds-shell .dashboard-header { height: var(--ds-header-h-mobile); } body.ds-shell .dashboard-shell, html.nav-sidebar-is-expanded body.ds-shell .dashboard-shell, html.nav-sidebar-is-collapsed body.ds-shell .dashboard-shell { margin-left: 0; } /* Контролы — touch-высота (ТЗ §6.4). */ body.ds-shell .dashboard-header .header-actions .btn, body.ds-shell .dashboard-header .header-actions button { min-height: var(--ds-control-touch); } }