Inline Купить + Статус рейса buttons on schedule cards

Match Angular's flight-actions layout — schedule rows now show the
orange Buy and outlined Status рейса buttons inline at the right edge
of the row instead of inside the expanded panel.
This commit is contained in:
2026-04-19 22:22:05 +03:00
parent 8005356db5
commit b2abde9210
2 changed files with 45 additions and 13 deletions
+21
View File
@@ -95,6 +95,12 @@
}
}
&__inline-actions {
display: flex;
align-items: center;
gap: vars.$space-s;
}
&__expanded {
padding: 0 vars.$space-xl vars.$space-xl;
display: flex;
@@ -199,6 +205,21 @@
}
}
&__status-btn {
background: transparent;
color: colors.$blue;
border: 1px solid colors.$blue;
border-radius: 4px;
padding: 9px 22px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: background-color 150ms ease;
&:hover { background: rgba(46, 87, 255, 0.06); }
}
&__buy-btn {
background: #ff9000;
color: #fff;
+24 -13
View File
@@ -1,6 +1,8 @@
import { useState, type FC, type KeyboardEvent } from "react";
import { Link } from "@modern-js/runtime/router";
import { useTranslation } from "@/i18n/provider.js";
import { useLocale } from "@/i18n/useLocale.js";
import { languageToLocale } from "@/i18n/resolver.js";
import type { ISimpleFlight, IFlightLeg } from "@/features/online-board/types.js";
import { operatingCarrier } from "@/features/online-board/types.js";
import {
@@ -229,7 +231,28 @@ export const FlightCard: FC<FlightCardProps> = ({
/>
</div>
{expandable && (
{direction === "schedule" ? (
<div className="flight-card__inline-actions">
<a
className="flight-card__buy-btn"
data-testid="flight-buy-button"
href="https://www.aeroflot.ru/sb/app/ru-ru"
target="_blank"
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
>
{t("SHARED.BUY-TICKET") || "Купить"}
</a>
<Link
className="flight-card__status-btn"
data-testid="flight-status-button"
to={`/${languageToLocale(language)}/onlineboard/${flight.flightId.carrier}${flight.flightId.flightNumber}-${flight.flightId.date.replace(/-/g, "")}`}
onClick={(e) => e.stopPropagation()}
>
{t("SHARED.DETAILS")}
</Link>
</div>
) : expandable && (
<div
className={`flight-card__chevron${expanded ? " flight-card__chevron--open" : ""}`}
aria-hidden="true"
@@ -344,18 +367,6 @@ export const FlightCard: FC<FlightCardProps> = ({
>
<img src="/assets/img/share.svg" alt="" aria-hidden="true" />
</button>
{direction === "schedule" && (
<a
className="flight-card__buy-btn"
data-testid="flight-buy-button"
href="https://www.aeroflot.ru/sb/app/ru-ru"
target="_blank"
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
>
{t("SHARED.BUY-TICKET") || "Купить"}
</a>
)}
<button
type="button"
className="flight-card__details-btn"