gnezim
35cae21d92
- OperatorLogo: moved &--round after per-carrier width rules so the round variant wins the cascade. Previously .operator-logo--FV (90×15) outranked --round (36×36) for FV flights and the second logo on a multi-leg schedule row spilled across the time column. Also added a tablet-viewport shrink for --round to 30×30. - FlightCard now emits the flight-card--schedule modifier when direction='schedule' so the 80px/120px/100px/... grid actually applies. The default board grid was active on schedule rows, giving a too-narrow flight-number column and misaligned logos. - i18n: replaced single-quoted HTML attributes with double quotes in every common.json. i18next-icu parses single quotes as ICU literal delimiters and silently drops the closing apostrophe in href='…booking'>…, truncating everything after <a ...> inside the rendered innerHTML. The schedule start-page bottom-description lost its 'онлайн-сервисом' link paragraph as a result.
65 lines
2.1 KiB
SCSS
65 lines
2.1 KiB
SCSS
// Mirrors Angular's `_logos.scss` sizing: per-carrier @include scale()
|
||
// with a 120px base width and aspect-ratio-specific height. Most wide
|
||
// logos (SU, F7, KL…) render at ~120×31; FV/Rossiya is narrower, HZ/Aurora
|
||
// tall-square. We bake in the common ratios instead of a one-size-fits-all
|
||
// 90×24 that previously clipped SU's ascender.
|
||
.operator-logo {
|
||
display: inline-block;
|
||
width: 120px;
|
||
height: 31px;
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
background-position: left center;
|
||
flex-shrink: 0;
|
||
|
||
// Large (1.5× scale) used in the details-header badge. Angular keeps
|
||
// round icons the same size even when 'large' is set.
|
||
&--large {
|
||
width: 180px;
|
||
height: 46px;
|
||
|
||
&.operator-logo--round { width: 36px; height: 36px; }
|
||
}
|
||
|
||
// Carrier-specific aspect ratios transcribed from Angular's _logos.scss
|
||
// @include scale($width-base, $ratio) calls.
|
||
&--SU,
|
||
&--F7 { width: 120px; height: 31px; }
|
||
&--HZ { width: 80px; height: 44px; }
|
||
&--FV { width: 90px; height: 15px; }
|
||
&--RO { width: 120px; height: 40px; }
|
||
&--DP { width: 120px; height: 23px; }
|
||
&--KL { width: 120px; height: 53px; }
|
||
&--S7 { width: 120px; height: 40px; }
|
||
&--SN { width: 120px; height: 20px; }
|
||
&--FB { width: 120px; height: 36px; }
|
||
&--CI { width: 120px; height: 19px; }
|
||
&--AF { width: 120px; height: 15px; }
|
||
&--AZ { width: 120px; height: 29px; }
|
||
|
||
// Round variant must override per-carrier widths; placed AFTER the
|
||
// carrier rules so it wins the same-specificity cascade. Without this
|
||
// ordering, e.g. `.operator-logo--FV.operator-logo--round` picked up
|
||
// the 90×15 FV rectangle and two round logos in a schedule row
|
||
// overflowed their 120px column into the time cell.
|
||
&--round {
|
||
width: 36px;
|
||
height: 36px;
|
||
background-size: contain;
|
||
background-position: center;
|
||
}
|
||
|
||
@media (min-width: 641px) and (max-width: 1050px) {
|
||
// Angular's tablets() scale: width & height * 0.75.
|
||
width: 90px;
|
||
height: 23px;
|
||
|
||
&--round { width: 30px; height: 30px; }
|
||
}
|
||
}
|
||
|
||
.details-header-badge__airline .operator-logo {
|
||
width: 180px;
|
||
height: 46px;
|
||
}
|