gnezim/flights_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FlightCard schedule grid: match Angular schedule-list-flight-header (80px number, minmax(45,240)px stations)

Browse Source
This commit is contained in:
Anton
2026-04-20 13:52:59 +03:00
parent 3e0b19f633
commit d7a9ae5d79
2 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/schedule/components/DayGroupedFlightList.scss
+3 -2
View File
@@ -9,8 +9,9 @@
&__column-headers {
display: grid;
// Match FlightCard schedule grid column widths so labels align
// with their data columns.
grid-template-columns: 60px 120px 100px minmax(80px, 1fr) 100px 100px minmax(80px, 1fr) 16px;
// with their data columns (see Angular's schedule-list-flight-header).
grid-template-columns:
80px 120px 100px minmax(45px, 240px) 100px 100px minmax(45px, 240px) 10px;
gap: 16px;
padding: 14px 24px;
color: colors.$light-gray;
src/ui/flights/FlightCard.scss
+11 -12
View File
@@ -31,17 +31,13 @@
}
}
// Matches Angular's board-flight-header grid (8 named tracks, no row
// gap, 15px column gap):
// [number] 80px [logo] 120px [dep-time] 100px
// [dep-station] minmax(45px, 145px) [status] minmax(85px, 145px)
// [arr-time] 120px [arr-station] minmax(45px, 145px) [arrow] 10px
// Mirrors Angular `flight-details-row-part-header :host` grid exactly:
// Mirrors Angular `flight-details-row-part-header :host` grid
// (online-board rows):
// [number] 60px [logo] 120px [dep-time] 100px
// [dep-station] 1fr [status] minmax(85px, 145px)
// [arr-time] 120px [arr-station] 1fr
// plus `padding: $space-l $space-xl` (15px / 20px) instead of the
// uniform 20px React was using — makes rows ~10px shorter per card.
// plus `padding: $space-l $space-xl` (15/20px) — matches Angular's
// vertical rhythm on each card.
&__row {
display: grid;
grid-template-columns:
@@ -52,11 +48,14 @@
min-height: 68px;
}
// Schedule mode swaps the central status column for a wider duration
// pill — Angular's grid widens the station/duration tracks to fit.
// Number column stays at 60px to match Angular's row-part-header.
// Schedule mode uses Angular's `schedule-list-flight-header :host`
// grid (ClientApp/src/app/modules/pages/schedule/schedule-list-flight-header):
// [number] 80px [logo] 120px [dep-time] 100px
// [dep-station] minmax(45px, 240px) [duration] 100px
// [arr-time] 100px [arr-station] minmax(45px, 240px) [arrow] 10px
&--schedule .flight-card__row {
grid-template-columns: 60px 120px 100px minmax(80px, 1fr) 100px 100px minmax(80px, 1fr) 16px;
grid-template-columns:
80px 120px 100px minmax(45px, 240px) 100px 100px minmax(45px, 240px) 10px;
gap: 0 vars.$space-l;
}