Files

T

gnezim 84e6d265fc Align board search + details with Angular visual parity

Both pages were rendering content directly on the dark-blue page
background, which made the flight list and details card effectively
invisible. Angular wraps the same content in a white card (section.frame)
with drop shadow.

Changes:
- Wrap FlightList in <section class='frame'> on the search page and wrap
  the details body the same way.
- Replace the inline numbered .calendar-day strip on the search page
  with the existing <DayTabs> component — the same one the details page
  already uses (weekday + day + month labels, ‹/› paging).
- Pass onFlightClick through FlightList into FlightCard so whole rows
  are keyboard-accessible buttons, matching Angular's row-level click.
  The off-screen data-testid='flight-link-*' buttons stay for e2e.
- Fix 'Leg NaN' header + the React key warning in FlightLegs when
  the API returns a Direct leg without an index field.
- Update the existing flight-search integration test to target the
  DayTabs testid instead of the old ad-hoc calendar-strip one.

A docs/parity-report-2026-04-17.md file captures the diffs I applied
and a punch list of the remaining parity gaps (operator logo on rows,
delay/day-change glyphs, Share button visibility on board details, the
aircraft panel as a table). Those need per-component work against the
Angular templates and will follow in a separate pass.

2026-04-17 23:14:59 +03:00

4.8 KiB

Raw Permalink Blame History

Visual Parity Report — Angular vs React

Captured 2026-04-17, SVO→LED route, SU 6805 details page, viewport 1440×900.

Screenshots (checked in under / root):

parity-angular-search.png, parity-react-search.png
parity-angular-details.png, parity-react-details.png

Search results (`/ru/onlineboard/route/SVO-LED-20260417`)

Angular	React (pre-fix)	Notes
Flight list sits on a white card with drop shadow (`section.frame`)	Flight rows rendered on the dark-blue page background → text barely readable	fixed: wrap `<FlightList>` in `<section class="frame">`
Calendar strip uses paged weekday tabs: `16 апр.` / `17 апреля` (active, bold) / `18 апр.` … with `‹ ›` arrows	Thin strip of naked numbered buttons wrapping across two rows (`16 17 18 … 1 2 3 …`)	fixed: replace inline `.calendar-day` with existing `<DayTabs>` component
Each row is clickable; hovering highlights the row	Rows are not interactive; navigation to details only via off-screen test-only buttons	fixed: `FlightCard` accepts `onClick` and renders with `role="button"` + hover highlight
Row shows: flight # · operator logo + name · scheduled time (big) · actual time struck-through in orange on delay · city + terminal link · status with plane icon · arrival mirror · expand arrow	Row shows: flight # · scheduled time · city name · status text. Missing operator logo, terminal link, actual-time strike-through, delay arrow glyph, expanded panel	open — operator logo, terminal link, expanded-state layout still pending
Filter sidebar has collapsible Route accordion + time slider inside; "Sheremetyevo" populated in departure input	Filter sidebar shows `SVO` / `LED` codes and sliders; labels don't render the city name	open — filter should pre-populate with the airport display name
Footer note `* Время в системе - МЕСТНОЕ.`	Not rendered	open

Details page (`/ru/onlineboard/SU6805-20260417`)

Angular	React (pre-fix)	Notes
All right-hand content on a single white card	Content directly on dark blue — text invisible	fixed: wrap in `<section class="frame">`
`DayTabs` used at the top of the card (already present in React)	Same component, but on dark bg	fixed by moving into frame
React console warning: `Each child in a list should have a unique "key" prop. Check the render method of FlightLegs`	—	fixed: key now falls back to the array index when `leg.index` is absent
Header shows: flight # · airline name · big `РОССИЯ` logo · share button · last-update timestamp	React header currently shows only flight # + share + last-update	open — needs operator name/logo treatment in `BoardDetailsHeader`
Route row: departure city + plane + status word (`Запланирован`) + arrival city; "+1" day indicator sits above the arrival time	React leg row renders raw station codes, city names, times stacked vertically	open — `FlightLegs` block needs to be rewritten as a horizontal route strip like Angular's `flight-board-details`
Accordion first section (`Детали рейса`) open by default with Регистрация / Посадка rows visible; others (Борт, Питание, Услуги, Деплайнинг) below	5 accordions all rendered, all collapsed by default; no `Детали рейса` wrapper	open — open primary section by default, hide `Share` button (Angular hides it on board view)
`Борт` (aircraft) panel has a table with columns: Название / Количество мест / Эконом / Бизнес / Предыдущий рейс	React's `AircraftPanel` renders the same fields but as a list, not a table	open

Priority fixes shipped in this commit

White card (section.frame) around flight list + details body — the single biggest readability issue.
DayTabs calendar strip replaces the inline number-only strip on the search page.
Clickable FlightCard with keyboard support and hover highlight, so users don't have to use the off-screen test button.
Fixed React key warning in the FlightLegs renderer.

Deferred (not shipped)

Operator logo + airline name on every row and in the details header.
Delay arrow + +1 day-change indicators in Angular's layout.
Inline per-row expansion with Registration/Boarding/Deboarding mini-grid.
Борт aircraft panel as a table.
Pre-populate the filter with the selected city's display name.
Hide Share button on the board details page (Angular only shows it on schedule details).

These need targeted, per-component changes against the Angular HTML templates referenced in ClientApp/src/app/modules/pages/board/ and ClientApp/src/app/modules/pages/details/. They don't affect readability, so they're listed for a follow-up pass.

4.8 KiB Raw Permalink Blame History Unescape Escape