Right-align 'Прибыл' + place plane marker at end for finished legs

Angular anchors the status label ('Прибыл') above the right end of the
progress bar and parks the green plane icon at 100%. React was keeping
both centered even after the flight landed; move the plane marker to
the bar's end (100%) for finished as well as in-flight, and make the
status text flex-end so it lines up with the arrival column.
This commit is contained in:
2026-04-18 18:35:27 +03:00
parent 512f22bf1b
commit 3838ab691c
2 changed files with 10 additions and 7 deletions
@@ -88,8 +88,13 @@
}
&__center--finished {
.leg-route__status-text { color: #6da244; }
.leg-route__status-text {
color: #6da244;
text-align: right;
align-self: flex-end;
}
.leg-route__bar-inner { background: #6da244; }
.leg-route__plane-marker { color: #6da244; }
}
&__center--in-flight {
@@ -174,18 +174,16 @@ function LegRoute({
? "100%"
: isInFlight
? `${flightPercent}%`
: isCancelled
? "0%"
: "0%",
: "0%",
}}
/>
{isInFlight && (
{(isInFlight || isFinished) && (
<span
className="leg-route__plane-marker"
style={{ left: `${flightPercent}%` }}
style={{ left: isFinished ? "100%" : `${flightPercent}%` }}
aria-hidden="true"
>
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true">
<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true">
<path d="M21 16v-2l-8-5V3.5a1.5 1.5 0 1 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5L21 16z" />
</svg>
</span>