Компоненты
6 каналов19 пустых мест2 в буфере
4 дела ждут тебя
.statement — синий платформы, до ~200 px: Кабинет и пустые состояния. Белая кнопка заменяет главную кнопку в шапке.
РазобратьЧто работает
2 поста не вышли вовремя
.statement.alarm.compact — красный Ритма: сломалось, буфер. Кнопка — главная кнопка экрана.
Решить
3 человека ждут оператора
.statement.wait — янтарный, только компактный: ждёт человека.
Ответить
1. Строка списка .list › .li: .dot · .li-m(.li-t, .li-s) · .li-v
@citynews · Город Nпн–пт 10:00 14:30 19:00 · RU · папка «Новости»
41в плане
@shop_es · Tiendaкак @shop_moscow · ES, перевод
7−3 за неделю
@coffee_msk · Кофейнябота убрали из канала — посты не выходят
ОткрытьТочки: .dot.err — сломалось (светится), .dot.wait — ждёт человека (светится), .dot — событие (серая, без света).
2. Полоса 7 дней .days7 › .d7.full / .part / .none, .on — выбран
пн13
вт14
ср15
чт16
пт17
сб18
вс19
3. Свободные места .slots › span + em
свободно14:3019:00
5. Баннер a.alert, a.alert.wait — тонкая строка, если панель-заявление на экране уже есть
В буфере 2 — не вышли вовремя4. Раскрывающийся блок details.fold › summary(.fold-t, .fold-s.ok / .warn / .err) · .fold-b
Расписание каналапн–пт, 3 выхода в день
понедельник10:0014:3019:00
Буфер опоздавших2 ждут решения
…
Бот в каналеправа есть
…
7. Панель-заявление и рейка как ставить
Панель-заявлениеshell(..., statement=dict(t='4 дела ждут тебя', p='…', btn='Разобрать', kind='' | 'alarm' | 'wait', compact=True))
Когда ставитьодна на экран и только по состоянию; большая — Кабинет и пустые состояния, остальное — compact
Рейкакнопка «Свернуть» внизу панели или клавиша [ ; запоминается; kit.html?rail=1 — показать сразу
Счётчики у разделовURGENT в gen.py: {'smm': ('2', 'err'), 'ops': ('3', 'wait')}
8. Движение и поведение — хуки для экранов один скрипт каркаса, window.ui
data-toast · ok
data-toast · err
data-toast · wait
ui.loading(…)
ui.toast(text, kind)тост снизу справа; kind: '' · 'ok' · 'err' · 'wait'. Без JS — data-toast="текст" и data-toast-kind на кнопке
ui.sheet(title, actions)лист действий; «!» в начале — опасное (красным). Без JS — .btn.more с data-actions="А|Б|!Удалить" и data-sheet-title. Esc и клик мимо закрывают
.skel · ui.loading(el | селектор, мс)скелетон на .li и .kpi: текст прячется под полосами, по ним проходит блик
data-tip="подсказка"подсказка справа от элемента; у пунктов меню — только на рейке
Числа плиток.kpi b и .fstep b докручиваются от 0 за 600 мс при первом открытии экрана; data-nocount — не крутить, data-count — крутить любое число
Появлениезаголовок и блоки .body снизу вверх по порядку, шаг 36 мс; .no-rise — блок без появления
Баннер · панель · раскрытиеa.alert тихо «дышит» (.calm — без этого); details.fold раскрывается плавно; переходы между экранами — view transition, меню и полоса не моргают
ui.rail() · клавиша [ · ?static=1рейка; ?static=1 (и headless Chrome) — без движения, для снимков PNG; prefers-reduced-motion — тоже без движения