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