diff --git a/src/features/online-board/components/FlightSchedule/FlightSchedule.scss b/src/features/online-board/components/FlightSchedule/FlightSchedule.scss index 07341ad4..ffab2b17 100644 --- a/src/features/online-board/components/FlightSchedule/FlightSchedule.scss +++ b/src/features/online-board/components/FlightSchedule/FlightSchedule.scss @@ -3,8 +3,32 @@ border-radius: 8px; padding: 0 24px; - .p-accordion-content { - padding: 12px 0 16px; + &__accordion { + border-top: 1px solid #e0e6f0; + } + + &__header { + padding: 16px 0; + cursor: pointer; + font-weight: 500; + font-size: 18px; + color: #222; + display: flex; + justify-content: space-between; + align-items: center; + + &:hover { + color: #2457ff; + } + } + + &__chevron { + font-size: 12px; + color: #222; + } + + &__content { + padding: 4px 0 16px; } &__body { diff --git a/src/features/online-board/components/FlightSchedule/FlightSchedule.tsx b/src/features/online-board/components/FlightSchedule/FlightSchedule.tsx index f31c578e..d5622415 100644 --- a/src/features/online-board/components/FlightSchedule/FlightSchedule.tsx +++ b/src/features/online-board/components/FlightSchedule/FlightSchedule.tsx @@ -1,5 +1,4 @@ -import type { FC } from "react"; -import { Accordion, AccordionTab } from "primereact/accordion"; +import { type FC, useState } from "react"; import { useTranslation } from "@/i18n/provider.js"; import type { ISimpleFlight } from "../../types.js"; import { DaysOfWeekStrip } from "./DaysOfWeekStrip.js"; @@ -32,6 +31,7 @@ function scheduledDurationMinutes(depIso: string, arrIso: string): number { export const FlightSchedule: FC = ({ flight }) => { const { t } = useTranslation(); + const [collapsed, setCollapsed] = useState(false); const firstLeg = flight.routeType === "Direct" ? flight.leg : flight.legs[0]; const lastLeg = @@ -49,55 +49,74 @@ export const FlightSchedule: FC = ({ flight }) => { return (
- - - {/* Angular parity: three side-by-side columns - (Вылет по расписанию | Прилет по расписанию | Время в пути). */} -
-
-
{t("SHARED.DEPARTURE-SCHEDULED")}
-
- {formatLocalTime(depLocal)} - {formatUtcOffset(depLocal) && ( - - {formatUtcOffset(depLocal)} - - )} +
+
setCollapsed((v) => !v)} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + setCollapsed((v) => !v); + } + }} + > + {t("SHARED.SCHEDULE-FLIGHT")} + +
+ {!collapsed && ( +
+ {/* Angular parity: three side-by-side columns + (Вылет по расписанию | Прилет по расписанию | Время в пути). */} +
+
+
{t("SHARED.DEPARTURE-SCHEDULED")}
+
+ {formatLocalTime(depLocal)} + {formatUtcOffset(depLocal) && ( + + {formatUtcOffset(depLocal)} + + )} +
+
+
+
{t("SHARED.ARRIVAL-SCHEDULED")}
+
+ {formatLocalTime(arrLocal)} + {formatUtcOffset(arrLocal) && ( + + {formatUtcOffset(arrLocal)} + + )} +
+
+
+
{t("SHARED.PATH-TIME")}
+
+ {formatDuration( + scheduledDurationMinutes(depLocal, arrLocal), + "ru", + )} +
-
-
{t("SHARED.ARRIVAL-SCHEDULED")}
-
- {formatLocalTime(arrLocal)} - {formatUtcOffset(arrLocal) && ( - - {formatUtcOffset(arrLocal)} - - )} -
-
-
-
{t("SHARED.PATH-TIME")}
-
- {formatDuration( - scheduledDurationMinutes(depLocal, arrLocal), - "ru", - )} -
-
-
-
-
- {t("SHARED.DAYS-EXECUTE-FLIGHT")} -
- -
- {note} +
+
+ {t("SHARED.DAYS-EXECUTE-FLIGHT")} +
+ +
+ {note} +
- - + )} +
); };