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

Match Angular route-strip grid proportions + dotted hairlines

Browse Source 
Measured track Angular uses for .flight-route:
  grid-template-columns: [depart-at] 97 [depart-to] 233
                         [status]   472 [arrive-at] 97
                         [arrive-to] 107
  padding: 50px 20px 0;

React was rendering a symmetric 5-column grid
(1fr for every non-time column), which cut the progress/status column
to ~25% of the strip instead of ~40%. Visually the effect was a
cramped 'Прибыл' label with barely any room for the green progress
bar. Retune to an asymmetric grid with `minmax(300px, 2.5fr)` on the
status column and lift the top padding to 40px.

Also switch the route→details and accordion-row hairlines from
#e0e6f0 / dashed to Angular's measured 1.3px dotted #D1DCEA for a
softer, identical visual.
This commit is contained in:
Anton
2026-04-19 10:04:26 +03:00
parent 3c7dad5fd7
commit 2ae25e630a
2 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/online-board/components/OnlineBoardDetailsPage.scss
+12 -3
View File
@@ -8,11 +8,18 @@
// ---------------------------------------------------------------------------
.leg-route {
padding: vars.$space-xl;
// Angular gives the route strip a tall top padding so the status text
// ('Прибыл', 'Вылетел') has room above the progress bar, and a smaller
// bottom padding leading into the time-details block.
padding: 40px vars.$space-xl 0;
// Asymmetric grid (matches Angular's flight-route):
// depart-time depart-station status/progress arrive-time arrive-station
// The center 'status' column takes ~40% of the row so the progress
// bar has visual weight; both time columns stay narrow.
&__main {
display: grid;
grid-template-columns: auto 1fr 1fr auto 1fr;
grid-template-columns: auto minmax(180px, 1fr) minmax(300px, 2.5fr) auto minmax(120px, 1fr);
gap: 24px;
align-items: center;
}
@@ -170,7 +177,9 @@
gap: 40px;
margin-top: vars.$space-xl;
padding-top: vars.$space-xl;
border-top: 1px dashed #e0e6f0;
// Angular uses a 1.3px dotted hairline (#D1DCEA) between the route
// strip and the time-details block.
border-top: 1.3px dotted #d1dcea;
}
&__details-side {
src/features/online-board/components/details-panels/FlightDetailsAccordion.scss
+2 -1
View File
@@ -56,8 +56,9 @@
padding: 20px 0;
position: relative;
// Angular draws the row separator as a 1.3px dotted hairline (#D1DCEA).
& + .details-row {
border-top: 1.3px dotted #e0e6f0;
border-top: 1.3px dotted #d1dcea;
}
&__header {