Zakhar Timoshenko
f4ea47f2ae
- Created `verification-layout-themes.md` to document layout and theme verification results. - Introduced `AlertCard` component for displaying alerts with appropriate icons and metadata. - Added `RouteCloud` component to manage and display route information dynamically. - Implemented tests for QR code generation and decoding to ensure functionality across multiple city and platform links.
5.6 KiB
Макет, темы и информационные карточки — 9 октября 2026
Проверено в браузере на production-сборке. Основное табло использовало реальные маршруты и расписание Швейной фабрики. Уведомления проверены отдельно на явно отмеченных тестовых данных: во время проверки активных уведомлений для остановки не было.
npm run build: TypeScript и Vite проходят.npm test: 45/45, включая контраст светлых палитр, границы часового ожидания, миграцию настроек и декодирование округлённого QR для трёх разных ссылок.- 879×593, 6 рейсов: страницы по 3, минимальный промежуток между названием и ожиданием 16 px. Последняя строка заканчивается на y=520, нижняя панель начинается на y=532.
- 855×723, 4 рейса, светлая тема: все четыре видны, промежуток 16 px. Последняя строка y≈649, панель y=662. Фон
rgb(255,255,255), акцент#154a9c. Разница нижних границ чисел и «ч/мин» — 0 px; шрифт единиц в строках — 18 px. Отступ под ближайшим отправлением ≈18,8 px. - Центры числовых меток и рамок совпадают: горизонтальная разница 0, вертикальная <0,01 px. Длинные «12тк», «16тк», «29тк» также проверялись при разработке.
- После бездействия ширина управления 0, правая граница статуса совпадает с правой границей панели: x≈829,35 при ширине 855.
- 390×667, 6 рейсов: страницы по три, последний рейс заканчивается на y≈602, панель на y=614. Промежуток между колонками 10 px. Отступ ближайшего отправления 18 px.
- Времена следующего дня проверены на реальном маршруте «29тк» при 1280×900:
08:38 завтраи10:23 завтрапоказаны однократно, ожидание отдельно в часах/минутах (board-next-day-times.jpg). - 1280×900: три карточки, каждая
clientHeight = scrollHeight = 497. Маршруты показаны вертикальными карточками, следующий час — 23 px, без подписи «Рейс». При смене названий в DOM есть предыдущий текст иdestination-up-in/out. - 879×593 и 1079×591: широкая карточка маршрутов имеет две дорожки с направлениями
normal/reverse. Минимальный вертикальный зазор после наклона ≈25 px; названия и времена не переполняют своих контейнеров. Время в маленьких дорожках 21 px. - Погода на 879×593 и 1079×591: текущие условия и почасовой прогноз занимают отдельные заполненные панели. Карточки не имеют внутреннего переполнения. Иконки будущих часов 36 px на коротком экране, 40 px в трёх карточках, до 64 px в широком высоком блоке.
- Погода на 390×667:
clientHeight = scrollHeight = 320, погодное содержимое помещается. Вертикальные маршруты показываются без горизонтального обрезания. - Уведомления проверены в обеих темах на 1280×900 и на 390×667: ширина текстового содержимого совпадает с его scrollWidth, исходный текст сохранён. Несколько длинных уведомлений допускают вертикальную прокрутку информационной сцены.
- Браузерных ошибок и предупреждений при итоговой проверке основного табло и примеров уведомлений нет.
Примеры уведомлений воспроизводятся командой npm exec vite build -- --config artifacts/alert-preview.config.mts, после чего доступны локально по /__visual/artifacts/alert-preview.html и ?theme=light. Эта сборка отдельная: обычный npm run build не включает примеры в табло и удаляет временную папку из dist.
Снимки: board-dark-879x593.jpg, board-light-855x723.jpg, board-info-three-cards.jpg, board-routes-lanes-1079x591.jpg, board-weather-1079x591.jpg, board-alerts-dark.jpg, board-alerts-light.jpg.
Физический дисплей и читаемость с конкретного расстояния не проверялись. Docker runtime ранее проверен импортом из изолированной структуры образа; полный Docker build локально не выполнялся из-за недоступного daemon.