Xtimms/ridebus-board
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add new QR card layout documentation and updates

Browse Source 
- Introduced new QR card layout as of October 9, 2026.
- Updated `PassengerQr.tsx` and QR styles, including camera/phone icons.
- Confirmed successful TypeScript and Vite builds; tests for QR decoding passed.
- Detailed specifications for various display resolutions and configurations.
- Included animations and accessibility considerations for reduced motion preferences.
- Added example images for visual reference.
This commit is contained in:
Zakhar Timoshenko
2026-10-09 03:21:59 +03:00
parent bc95d0c122
commit 1e3a911055
9 changed files with 107 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
artifacts/board-qr-light.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

BIN
artifacts/board-qr-three-cards.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 111 KiB

BIN
artifacts/board-qr-ticket-portrait.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
artifacts/board-qr-wide.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

14
artifacts/verification-qr-layout.md Normal file
View File

@@ -0,0 +1,14 @@
# Новая QR-карточка — 9 октября 2026
Изменены `PassengerQr.tsx`, иконки камеры/телефона VK и стили QR. Данные остановки, генератор QR и публичная ссылка сохранены.
- `npm run build`: TypeScript и Vite проходят. `node --test test/qr.test.mjs`: декодирование трёх ссылок и свободное поле 4 модуля проходят.
- 1000×900, отдельная карточка: QR-панель и информация заполняют доступную высоту. Рамка QR 380×380 px, карточка 520 px по высоте. В обеих темах `scrollHeight = clientHeight`, горизонтального переполнения нет.
- 1280×900, три карточки: QR-панель расположена над остановкой, шагами и ссылкой. Высота карточки 497 px, QR 182×182 px, внутреннего переполнения нет.
- 855×723: широкий QR 260×260 px, высота карточки 375 px, все элементы видны без прокрутки.
- 879×593: QR 200×200 px, карточка 314 px; краткие шаги помещаются рядом с кодом.
- 390×667: код сверху, подсказка и ссылка в одной строке снизу. QR 167×167 px, карточка 320 px, внутреннего и горизонтального переполнения нет. Код увеличен относительно варианта с боковым текстом.
- Фоновая линия имеет анимацию `qr-route-flow`; сам QR не движется. При `prefers-reduced-motion` декоративная анимация явно отключена в CSS.
- Дополнительно `jsQR` декодировал код с настоящего снимка светлой страницы 1000×900, тёмного снимка 390×667 и компоновки 1280×900. Во всех случаях результат — `https://pwa.ridebus.by/?city=1&stop=1`. Это проверка пикселей страницы, а не испытание физической камеры или уличного дисплея.
Снимки: `board-qr-wide.jpg`, `board-qr-light.jpg`, `board-qr-three-cards.jpg`, `board-qr-ticket-portrait.jpg`.