2 Commits

Author SHA1 Message Date
904db83450 docs: уточнить в CHANGELOG поведение топбара комнаты на мобильном
Some checks failed
CI / backend (push) Has been cancelled
CI / frontend (push) Has been cancelled
В записи 0.0.3 было описано обратное: скрывается не инвайт-чип, а название
конференции со строкой статуса — чип «№ … / Пригласить» остаётся.
2026-07-26 12:11:50 +03:00
525d6dde1b fix(room): топбар и тулбар на мобильном не применялись + не тот блок скрывался
Some checks failed
CI / backend (push) Has been cancelled
CI / frontend (push) Has been cancelled
Правки для узких экранов стояли в середине room.css, а `.tb-btn`/
`.room-toolbar` объявлены ниже — при равной специфичности побеждает порядок
в исходнике, поэтому тулбар на мобильном не менялся вовсе (скрылся только
инвайт-чип, объявленный выше блока). Блок перенесён в конец файла.

В топбаре теперь скрываются название конференции и статус (слева), а чип
«№ … / Пригласить» остаётся — с телефона он нужнее (скопировать ссылку и
позвать участника). Тулбару добавлены flex-wrap и min-width: 0, чтобы он не
вылезал за ширину окна ни при каких подписях кнопок.
2026-07-26 12:01:35 +03:00
2 changed files with 36 additions and 21 deletions

View File

@@ -18,7 +18,8 @@
возможности до них докрутить). На мобильном тулбар сокращён до возможности до них докрутить). На мобильном тулбар сокращён до
микрофона/камеры/устройств/чата/выхода (демонстрация экрана, микрофона/камеры/устройств/чата/выхода (демонстрация экрана,
полноэкранный режим и мини-окно скрыты — редко нужны с телефона), в топбаре полноэкранный режим и мини-окно скрыты — редко нужны с телефона), в топбаре
скрыт инвайт-чип, остаются только название конференции и статус. скрыты название конференции и строка статуса, а чип «№ … / Пригласить»
оставлен — с телефона он нужнее.
- Админка: заголовок и 4 вкладки раздела не помещались в ширину (вкладки - Админка: заголовок и 4 вкладки раздела не помещались в ширину (вкладки
переносятся в 2 ряда, поясняющий текст под заголовком скрыт на мобильном); переносятся в 2 ряда, поясняющий текст под заголовком скрыт на мобильном);
таблицы «Конференции» и «Пользователи» обрезались вбок — на мобильном в них таблицы «Конференции» и «Пользователи» обрезались вбок — на мобильном в них

View File

@@ -115,26 +115,6 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
@media (max-width: 600px) { @media (max-width: 600px) {
.stage-tiles.lk-focus-layout { grid-template-columns: 1fr; } .stage-tiles.lk-focus-layout { grid-template-columns: 1fr; }
.stage { padding: var(--space-3) var(--space-4); gap: var(--space-3); } .stage { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
/* Топбар: инвайт-чип (номер + копирование ссылки) убираем — на узком
экране это не помещалось рядом с названием (см. аудит мобильной версии),
сверху остаётся только название конференции и статус «активна». */
.room-topbar { padding: var(--space-3) var(--space-4); }
.room-invite-chip { display: none; }
/* Тулбар: демонстрация/полноэкранный режим/мини-окно скрыты на мобильном
(редко нужны с телефона, а тулбар со всеми 8 кнопками физически не
помещается в ширину экрана) — из оставшихся 5 кнопок собираем более
компактный вариант, чтобы они уместились без переноса и горизонтального
скролла. */
.tb-btn--screenshare,
.tb-btn--fullscreen,
.tb-btn--pip {
display: none;
}
.room-toolbar { padding: var(--space-3) var(--space-2); gap: 2px; }
.tb-btn { min-width: 0; padding: 6px 8px; }
.tb-btn .icon-shell { width: 40px; height: 40px; }
} }
/* /*
@@ -500,3 +480,37 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
--lk-grid-gap: var(--space-4); --lk-grid-gap: var(--space-4);
--lk-control-bar-height: 0px; --lk-control-bar-height: 0px;
} }
/* ---------- Узкие экраны: топбар и тулбар комнаты ----------
ВАЖНО: этот блок обязан идти строго ПОСЛЕДНИМ в файле. Селекторы ниже
(`.tb-btn`, `.room-toolbar`) имеют ту же специфичность, что и безусловные
правила выше, а при равной специфичности побеждает порядок в исходнике, а
не факт совпадения media query — тот же грабли уже ловили в
auth.css/calendar.css/lobby.css (см. комментарии там). Первая версия этого
блока стояла в середине файла: `.room-invite-chip` (объявлен ВЫШЕ) скрылся,
а `.tb-btn`/`.room-toolbar` (объявлены НИЖЕ) продолжали побеждать — тулбар
на мобильном не менялся вовсе.
Топбар: скрываем название конференции и строку статуса — они и так есть
в самой конференции, а вот чип «№ … / Пригласить» с телефона нужен чаще
(скопировать ссылку и позвать участника), поэтому он остаётся.
Тулбар: демонстрация экрана, полноэкранный режим и мини-окно с телефона
практически не нужны, а все 8 кнопок в ширину экрана физически не
помещаются — скрываем их и уплотняем оставшиеся пять
(микрофон/камера/устройства/чат/выход). `flex-wrap` + `min-width: 0` —
страховка на совсем узких экранах, чтобы футер ни при каких подписях не
вылезал за ширину окна. */
@media (max-width: 600px) {
.room-topbar { padding: var(--space-3) var(--space-4); justify-content: flex-end; }
.room-title-block { display: none; }
.tb-btn--screenshare,
.tb-btn--fullscreen,
.tb-btn--pip { display: none; }
.room-toolbar { padding: var(--space-3) var(--space-2); gap: 2px; flex-wrap: wrap; }
.tb-btn { min-width: 0; padding: 6px 6px; }
.tb-btn .icon-shell { width: 40px; height: 40px; }
.tb-btn span.label { font-size: 11px; }
}