Match Angular H1 size, accordion icon grey, and full month on active tab
Three visible gaps after the SEO/title pass:
1. The page H1 ('Информация о рейсе: …') rendered at 22px/regular —
a fourth of the size Angular shows. Angular inherits the global
h1 rule (font-size-xxxl = 42px) and clamps to 36px on tablet /
22px on mobile. The .flight-details__flight-number override was
pinning it at font-size-xl2. Restore 42px with the same tablet/
mobile clamps.
2. Accordion row icons (Регистрация / Посадка / Высадка / Борт /
Питание / Услуги) used the brand blue. Angular's sprite stroke
is #657282 (neutral grey), which lets the red 'Закончена' status
next to it read as the dominant color. Switch details-row__icon
to #657282.
3. DayTabs abbreviated every tab's month to 'апр.'; Angular spells
the selected tab out in full ('18 апреля') and keeps siblings
short. DayTabButton now picks `month: 'long'` when isActive.
This commit is contained in:
@@ -20,7 +20,11 @@ export const DayTabButton: FC<DayTabButtonProps> = ({
|
||||
const d = parseYyyymmdd(date);
|
||||
const weekday = new Intl.DateTimeFormat(locale, { weekday: "short" }).format(d);
|
||||
const day = new Intl.DateTimeFormat(locale, { day: "numeric" }).format(d);
|
||||
const month = new Intl.DateTimeFormat(locale, { month: "short" }).format(d);
|
||||
// Angular shows the selected tab with the full month name ('18 апреля'),
|
||||
// siblings with the abbreviated form ('19 апр.'). Mirror that.
|
||||
const month = new Intl.DateTimeFormat(locale, {
|
||||
month: isActive ? "long" : "short",
|
||||
}).format(d);
|
||||
|
||||
const classes = [
|
||||
"day-tab",
|
||||
|
||||
@@ -244,9 +244,21 @@
|
||||
padding: vars.$space-xl;
|
||||
}
|
||||
|
||||
// Page H1. Angular applies the global h1 rule (42px regular) — match it
|
||||
// here and clamp down on narrower viewports like Angular does.
|
||||
&__flight-number {
|
||||
font-size: fonts.$font-size-xl2;
|
||||
font-size: fonts.$font-size-xxxl;
|
||||
font-weight: fonts.$font-regular;
|
||||
color: colors.$white;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
|
||||
@include screen.smTablet {
|
||||
font-size: fonts.$font-size-xxxl--tablet;
|
||||
}
|
||||
@include screen.mobile {
|
||||
font-size: fonts.$font-size-xxxl--mobile;
|
||||
}
|
||||
}
|
||||
|
||||
&__overall-status {
|
||||
|
||||
@@ -70,7 +70,10 @@
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: #2457ff;
|
||||
// Angular renders the transition/aircraft icons in a neutral grey
|
||||
// (sprite stroke = #657282). Match it so the row doesn't overpower
|
||||
// the red 'Закончена' status next to it.
|
||||
color: #657282;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user