13 KiB

Raw Blame History

Спринты: мобильный UI кабинета тестов

Спринт 1 — быстрые исправления

Цель: выровнять кнопки, мета-строку списка, историю версий, назначение и safe-area; без смены контентной модели страниц.

1.1 Панель «Сохранить черновик / К списку»: убрать конфликт inline-actions .btn { width: auto } с btn-primary — колонка на всю ширину (.actions-bar)
1.2 Touch: min-height у .btn--sm (убрать, удалить вопрос, сделать активной…)
1.3 Список тестов: не разбивать «· v1» — хвост в list-row__meta-tail + white-space: nowrap
1.4 «История версий»: вместо <table> — карточки (surface-card + flex)
1.5 «Назначение»: не рендерить пустой .assign-list (убрать «коробку» без людей)
1.6 Сильнее рамка .btn-ghost (согласование с полями)
1.7 padding-bottom у .cabinet-main + env(safe-area-inset-bottom)
1.8 «Публикация»: на узком экране — кнопка на всю ширину (.inline-actions--block-mobile)

Файлы: frontend/src/styles/cabinet-theme.css, frontend/src/pages/TestDetail.jsx, frontend/src/pages/TestsList.jsx.

Спринт 2 — карточки, импорт, вопрос, радио/чек, фикс-футер

2.1 «Прогоны и разбор»: таблица заменена на список карточек (.attempts-card-list)
2.2 «Импорт из файла»: скрытый input + label с .btn (.import-file-input / .import-file-label)
2.3 «Вопрос N» + «Сгенерировать вопрос (ИИ)»: колонка на мобилке, ряд от min-width: 520px (.question-editor-block__header)
2.4 Варианты: type="radio" при одном верном, checkbox при нескольких
2.5 Моб. фикс-футер ≤640px с «Сохранить» / «К списку» + статус черновика; панель в потоке скрыта

Файлы: frontend/src/styles/cabinet-theme.css, frontend/src/pages/TestDetail.jsx.

Спринт 3 — структура «карточки теста», копи, доводка списка и кабинета

Цель: человекочитаемые названия и группировка разделов; согласованные подсказки и тап-зоны; доводка списка тестов, истории, назначения и редактора по замечаниям.

Страница теста (`TestDetail`)

3.1 AccSection: подзаголовок под заголовком (subtitle + стили cabinet-disclosure__summary-*)
3.2 У «тела» аккордеона — верхний внутренний отступ: .cabinet-disclosure__body (контент не «прилипает» к header)
3.3 Переименования: «О тесте», «Вопросы» (вместо мета/содержания); подзаголовки-описания по смыслу
3.4 Импорт встроен в «Вопросы»: подсекция «Документ в вопросы»; отдельного аккордеона «Импорт из файла» нет
3.5 История: одна секция, подпункты «Версии» + «Прохождения»; пустое/ошибочное состояние у прогонов
3.6 Ошибка загрузки прогонов: не в герое страницы, а внутри «Прохождения»
3.7 Показ в каталоге: подсекция «Видимость» + (при assignmentUi) «Кому выдать»; кнопка видимости не на всю ширину (.publication-visibility__actions)
3.8 Панель ИИ-генерации: .test-detail-ai-panel (фон/рамка в духе кабинета, без «лишней» карточки)
3.9 Вопрос: блоки .question-editor-block + первый вопрос без лишнего верхнего бордера (.question-editor-block--first)
3.10 Варианты: удаление — иконка «закрыть» + aria-label (вместо текста «убрать»)
3.11 Одна панель .question-editor__footer: «+ вариант» и «Удалить вопрос»; «+ вопрос» вынесен в .test-detail-add-question над блоком импорта
3.12 Назначение: кнопка «Выбрать всех (N)» по текущему отфильтрованному списку; подсказки в подсекциях
3.13 Стили подсекций: .test-detail-subsection, .test-detail-subsection__title, .test-detail-hint
3.14 Импорт: на мобилке полная ширина кнопки «Выбрать файл» (.import-file-row--block); ровнее отступы у превью
3.15 Классы списка версий: на узком экране у .version-card-list__main flex-grow: 0 в column — без пустой «вытянутой» карточки v1

Список тестов и шапка

3.16 Список: на ≤640px карточка в колонку (заголовок на ширину экрана, «Пройти» снизу на всю ширину; без пустой полосы)
3.17 hover у строк списка — только при @media (hover: hover) and (pointer: fine); лёгкий :active на ссылке (тач-фидбек)
3.18 Шапка cabinet-header__inner: учёт safe-area сверху и по бокам
3.19 Назначение (кабинет): у .assign-list — выше область прокрутки на мобилке; у строк — линия раздела чуть заметнее; центр чекбокса + line-clamp у мета; accent-color у чекбокса
3.20 Ритм аккордеонов на test-detail-page — чуть больше margin между cabinet-brick; нижний отступ у страницы под фикс-футер увеличен
3.21 Поле поиска в назначении: более «строчный» вид (min/max height + padding у .assign-toolbar__search)

Файлы: frontend/src/styles/cabinet-theme.css, frontend/src/pages/TestDetail.jsx, frontend/src/pages/TestsList.jsx (только косвенно через стили, разметка списка ранее).

Спринт 4 — памятка для врачей/заведующих (без IT-сленга)

Цель: в этом же файле в конце — краткая инструкция, как пользоваться кабинетом тестов; иллюстрации к разделу; никакой отдельной «саги» про дизайн-токены.

4.1 Блок «Как пользоваться» простым языком, по смыслу блоков интерфейса
4.2 Папка docs/images/cabinet-ui/: схемы-заглушки (SVG); при необходимости замените их своими скриншотами с тем же именем файла или поправьте пути внизу документа
4.3 Отдельный спринт про design tokens убран — при желании вынесите в issue/другой документ

Файлы: docs/СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md (блок внизу), docs/images/cabinet-ui/*.

Как пользоваться: коротко и по делу

Если картинки не открываются — проверьте, что рядом с этим файлом лежат файлы в images/cabinet-ui/. Схемы можно заменить на настоящие скриншоты из мини-приложения (PNG) — с теми же названиями.

1. Список тестов

Тут — все доступные вам тесты. Название (или область слева) ведёт в редактирование, кнопка «Пройти» — сдать тест, если вы в роли сотрудника, а не автора. Не путайте: редактировать могут не все.

2. О тесте

Название, описание для коллег, порог зачёта (процент). Это «паспорт» теста: заполните так, чтобы было понятно, что проверяете и с какой планкой «зачёт/незачёт».

3. Вопросы

Здесь вы пишете сами вопросы и варианты ответов. Кружок/квадратик слева от варианта — отметьте верные. Один верный = как контрольный; несколько = можно включить «Несколько верных ответов».

+ вопрос / + вариант — добавить.
Крестик у варианта — убрать лишний ответ.
Документ в вопросы — подгрузить файл (PDF, Word, текст) и по подсказкам вставить в черновик; не обязателен, если вы всё ввели руками.
ИИ (если есть) — помощь, а не готовый клинический протокол: всё равно прочитайте и исправьте перед публикацией.

4. Сохранить

Кнопка «Сохранить черновик» (часто закреплена внизу экрана на телефоне) — обязательно, если не хотите потерять правки. «К списку» — выйти без паники: если уже нажимали «Сохранить» до этого, черновик сохранён.

5. История

Версии — когда менялся тест. Актуальная помечена. Редко нужно «Сделать активной» другую версию — обычно по согласованию с IT/методистом.
Прохождения — кто уже сдавал; «Разбор» — посмотреть ответы (если вам открыт доступ). Для обычного заведения теста смотрите редко; для разбора ситуации — полезно.

6. Показ в каталоге

Видимость — показать тест всех в списке или скрыть (тест не удаляется, просто не мешается в ленте). Скрытие не отменяет уже выданные ссылки, если кто-то ими поделился.
Кому выдать (если раздел есть) — кому из сотрудников назначить тест. Сначала поиск/фильтр, галочки, при необходимости «Выбрать всех» по текущему списку, затем «Назначить выбранных». Это про людей, не про текст вопросов.

В одном предложении

Написали вопросы → нажали «Сохранить» → при необходимости показали в списке / кому-то выдали. Всё остальное — по ситуации.

13 KiB Raw Blame History