Align header actions/last-update right; hide duration on finished legs
- Restructure BoardDetailsHeader so the Share icon sits top-right next to the flight-number badge, and 'Последнее обновление' sits on its own row below, right-aligned, matching Angular's flight-details header layout. - FlightEvents badges only render when changeRoute/reroute are actually set, avoiding an empty row on normal flights. - Hide the leg.flyingTime under the route-status bar once the flight is Arrived/Landed/Cancelled — Angular leaves that slot blank in those states since the in-flight 'В пути / До прилета' split no longer applies.
This commit is contained in:
@@ -2,22 +2,36 @@
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 24px;
|
||||
gap: 8px 16px;
|
||||
padding: 24px 24px 12px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
|
||||
&__badge { grid-column: 1; }
|
||||
&__actions-row { grid-column: 2; display: flex; justify-content: flex-end; }
|
||||
&__badge { grid-column: 1; grid-row: 1; }
|
||||
|
||||
&__actions-row {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
&__events-row {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
&__last-update-row {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: 1fr auto;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,18 +29,22 @@ export const BoardDetailsHeader: FC<BoardDetailsHeaderProps> = ({ flight, locale
|
||||
<div className="board-details-header__badge">
|
||||
<DetailsHeaderBadge flight={flight} locale={locale} large />
|
||||
</div>
|
||||
{/* Angular surfaces a Share icon next to the flight-number header;
|
||||
Print stays off on the board view. */}
|
||||
<div className="board-details-header__actions-row">
|
||||
{/* Angular hides share/print on the board details view — only the
|
||||
schedule view toggles them on. Match that default. */}
|
||||
<FlightActions
|
||||
flight={flight}
|
||||
locale={locale}
|
||||
showShare={false}
|
||||
showShare
|
||||
showPrint={false}
|
||||
/>
|
||||
</div>
|
||||
<div className="board-details-header__events-row">
|
||||
<FlightEvents changeRoute={changeRoute} reroute={reroute} showDescription />
|
||||
{(changeRoute || reroute) && (
|
||||
<div className="board-details-header__events-row">
|
||||
<FlightEvents changeRoute={changeRoute} reroute={reroute} showDescription />
|
||||
</div>
|
||||
)}
|
||||
<div className="board-details-header__last-update-row">
|
||||
<LastUpdate flight={flight} locale={locale} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -206,7 +206,7 @@ function LegRoute({
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
) : isFinished || isCancelled ? null : (
|
||||
<div className="leg-route__duration">
|
||||
{humanizeFlyingTime(leg.flyingTime, "ru")}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user