Files
ridebus-board/artifacts/verification-badge-sizing.md
Zakhar Timoshenko bc95d0c122 feat: add verification badge sizing documentation
- Documented the behavior of `RouteBadge` and `NumericText` after animation changes.
- Addressed width issues for numbers `2` and `6` post-animation.
- Updated `ResizeObserver` to monitor number badge resizing.
- Fixed scaling for short numbers and ensured proper transitions.
- Verified functionality across different browser sizes and builds.
2026-10-09 02:55:51 +03:00

2.4 KiB
Raw Permalink Blame History

Размер номера после анимации — 9 октября 2026

Браузерный сценарий воспроизведён на настоящих RouteBadge и NumericText, с сохранением компонентов при смене номера. Проверены переходы 21тк → 2, 16тк → 6 и обратные переходы, повторный цикл, неизменный номер 11.

  • До исправления после завершения анимации метки 2 и 6 имели ширину 22 px, но сохраняли масштаб 0.54023, рассчитанный во время исчезновения предыдущих символов. 11 имел масштаб 1.
  • ResizeObserver теперь наблюдает также за меткой номера: сжатие исчезающих разрядов и изменение шрифта повторно запускают вписывание. CSS-transform самой метки не меняет наблюдаемый размер, поэтому расчёт не образует обратную связь.
  • После исправления короткие 2, 6, 11 используют масштаб 1 при базовом шрифте 35 px. Длинные 21тк, 16тк корректно уменьшаются до масштаба 0.5875 в этом контейнере. Повторные смены возвращают ожидаемый масштаб.
  • Во время смены сохранены анимации digit-down-in и прокрутка разрядов. Смещение центра метки <0,01 px. Браузерных ошибок и предупреждений нет.
  • Проверены широкий браузерный вид и узкий 487×664. Production build и TypeScript проходят.

Снимок board-badge-size-fixed.jpg содержит тестовые карточки после перехода на короткие номера. Сценарий воспроизводится через npm exec vite build -- --config artifacts/badge-preview.config.mts и /__visual-badge/artifacts/badge-preview.html. Кнопка переключает длинные и короткие номера; позиции компонентов сохраняются. Обычный production build не включает этот сценарий.