From 64bfc25db7606849e08c4523485a832fbd38a3e5 Mon Sep 17 00:00:00 2001 From: gnezim Date: Wed, 15 Apr 2026 19:06:45 +0300 Subject: [PATCH] Port Online Board search results and details page styles Added SCSS for OnlineBoardSearchPage (calendar strip, connection badges, day selector) and OnlineBoardDetailsPage (flight legs, station details, status sections). Ported from Angular component styles with Angular- specific selectors removed. --- .../components/OnlineBoardDetailsPage.scss | 137 ++++++++++++++++++ .../components/OnlineBoardDetailsPage.tsx | 1 + .../components/OnlineBoardSearchPage.scss | 81 +++++++++++ .../components/OnlineBoardSearchPage.tsx | 1 + 4 files changed, 220 insertions(+) create mode 100644 src/features/online-board/components/OnlineBoardDetailsPage.scss create mode 100644 src/features/online-board/components/OnlineBoardSearchPage.scss diff --git a/src/features/online-board/components/OnlineBoardDetailsPage.scss b/src/features/online-board/components/OnlineBoardDetailsPage.scss new file mode 100644 index 00000000..f7c3c454 --- /dev/null +++ b/src/features/online-board/components/OnlineBoardDetailsPage.scss @@ -0,0 +1,137 @@ +@use "../../../styles/variables" as vars; +@use "../../../styles/colors" as colors; +@use "../../../styles/fonts" as fonts; +@use "../../../styles/screen" as screen; + +.flight-details { + &--error, + &--not-found { + padding: vars.$space-xl; + text-align: center; + } + + &__status { + padding: vars.$space-m vars.$space-xl; + } + + &__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: vars.$space-xl; + } + + &__flight-number { + font-size: fonts.$font-size-xl2; + margin: 0; + } + + &__overall-status { + font-weight: fonts.$font-medium; + } + + &__operating { + padding: 0 vars.$space-xl vars.$space-xl; + color: colors.$light-gray; + } + + &__flying-time { + padding: vars.$space-xl; + color: colors.$light-gray; + } + + &__legs { + padding: 0 vars.$space-xl; + } + + &__leg { + padding: vars.$space-xl 0; + + &:not(:last-child) { + border-bottom: 1px dashed colors.$border; + } + } + + &__leg-header { + display: flex; + justify-content: space-between; + margin-bottom: vars.$space-m; + } + + &__leg-index { + font-weight: fonts.$font-medium; + } + + &__leg-stations { + display: flex; + justify-content: space-between; + + @include screen.mobile { + flex-direction: column; + gap: vars.$space-xl; + } + } + + &__leg-departure, + &__leg-arrival { + display: flex; + flex-direction: column; + gap: vars.$space-s; + } + + &__leg-duration { + display: flex; + align-items: center; + color: colors.$light-gray; + } + + &__station-code { + font-size: fonts.$font-size-xl; + font-weight: fonts.$font-medium; + } + + &__station-name, + &__station-city { + color: colors.$light-gray; + font-size: fonts.$font-size-s; + } + + &__terminal, + &__gate, + &__bag-belt { + font-size: fonts.$font-size-s; + color: colors.$light-gray; + } + + &__time { + font-size: fonts.$font-size-l; + } + + &__time-actual { + font-size: fonts.$font-size-s; + color: colors.$orange; + } + + &__aircraft { + margin-top: vars.$space-m; + color: colors.$light-gray; + font-size: fonts.$font-size-s; + } + + // Angular overrides ported (without ::ng-deep) + .flight-props-caption { + width: 30%; + } + + .flight-details-section__caption { + width: calc(30% - #{vars.$space-xl}); + } + + .board-details-day-selector { + @include screen.mobile { + display: flex; + flex-direction: column; + padding: vars.$space-xl; + } + } +} diff --git a/src/features/online-board/components/OnlineBoardDetailsPage.tsx b/src/features/online-board/components/OnlineBoardDetailsPage.tsx index a042b80c..68a6208a 100644 --- a/src/features/online-board/components/OnlineBoardDetailsPage.tsx +++ b/src/features/online-board/components/OnlineBoardDetailsPage.tsx @@ -9,6 +9,7 @@ import type { FC } from "react"; import { useTranslation } from "@/i18n/provider.js"; +import "./OnlineBoardDetailsPage.scss"; import { FlightCard } from "@/ui/flights/FlightCard.js"; import { FlightListSkeleton } from "@/ui/flights/FlightListSkeleton.js"; import { SeoHead } from "@/ui/seo/SeoHead.js"; diff --git a/src/features/online-board/components/OnlineBoardSearchPage.scss b/src/features/online-board/components/OnlineBoardSearchPage.scss new file mode 100644 index 00000000..bd2ca8fb --- /dev/null +++ b/src/features/online-board/components/OnlineBoardSearchPage.scss @@ -0,0 +1,81 @@ +@use "../../../styles/variables" as vars; +@use "../../../styles/colors" as colors; +@use "../../../styles/screen" as screen; + +.online-board-search { + &__status { + padding: vars.$space-m vars.$space-xl; + } + + &__calendar { + display: flex; + gap: vars.$space-s; + padding: vars.$space-xl; + overflow-x: auto; + + @include screen.mobile { + flex-direction: column; + padding: vars.$space-xl; + } + } + + &__error { + padding: vars.$space-xl; + color: colors.$red; + } + + &__actions { + display: none; + } +} + +.board-day-selector { + @include screen.mobile { + display: flex; + flex-direction: column; + padding: vars.$space-xl; + } +} + +.calendar-day { + padding: vars.$space-s2 vars.$space-m; + border: 1px solid colors.$border; + border-radius: vars.$border-radius; + background: colors.$white; + cursor: pointer; + white-space: nowrap; + + &:hover { + border-color: colors.$blue-light; + } + + &--active { + background-color: colors.$blue; + color: colors.$white; + border-color: colors.$blue; + } +} + +.connection-badge { + display: inline-flex; + align-items: center; + padding: 2px vars.$space-s2; + border-radius: vars.$border-radius; + font-size: 12px; + font-weight: 500; + + &--live { + background-color: colors.$green; + color: colors.$white; + } + + &--reconnecting { + background-color: colors.$orange; + color: colors.$white; + } + + &--offline { + background-color: colors.$light-gray; + color: colors.$white; + } +} diff --git a/src/features/online-board/components/OnlineBoardSearchPage.tsx b/src/features/online-board/components/OnlineBoardSearchPage.tsx index 589986ab..801f4d59 100644 --- a/src/features/online-board/components/OnlineBoardSearchPage.tsx +++ b/src/features/online-board/components/OnlineBoardSearchPage.tsx @@ -16,6 +16,7 @@ import type { FC } from "react"; import { useCallback } from "react"; import { useNavigate, useParams } from "@modern-js/runtime/router"; import { FlightList } from "@/ui/flights/FlightList.js"; +import "./OnlineBoardSearchPage.scss"; import { JsonLdRenderer } from "@/shared/seo/json-ld.js"; import { useOnlineBoard } from "../hooks/useOnlineBoard.js"; import { useLiveBoardSearch } from "../hooks/useLiveBoardSearch.js";