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:
@@ -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;
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user