Flush DayTabs against flight list + mask viewport top on scroll
Drop the 8px margin below the day-tabs strip so the sticky card touches the results frame, matching Angular's layout. Add page-layout__scroll-overlay — a fixed 25px dark-blue strip across the top of the viewport — so flight rows scrolling past the 20px-sticky date row don't peek through the gap above it. Realign DayTabs range to match Angular's boardSearchFrom=1 / boardSearchTo=7 defaults (today-1 through today+7). Previous 2/14 window left today off-center in the 7-tab page.
This commit is contained in:
@@ -3,7 +3,9 @@
|
||||
// text; siblings have light-blue bg + brand link-blue label.
|
||||
|
||||
.day-tabs-wrap {
|
||||
margin-bottom: 8px;
|
||||
// Angular keeps day-tabs flush against the flight list; the sticky
|
||||
// card and the results frame touch.
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.day-tabs {
|
||||
|
||||
@@ -401,8 +401,8 @@ export const OnlineBoardSearchPage: FC<OnlineBoardSearchPageProps> = ({
|
||||
<DayTabs
|
||||
selectedDate={params.date}
|
||||
availableDates={calendarDays}
|
||||
daysBefore={2}
|
||||
daysAfter={14}
|
||||
daysBefore={1}
|
||||
daysAfter={7}
|
||||
locale={lang}
|
||||
onNavigate={handleDateChange}
|
||||
/>
|
||||
|
||||
@@ -136,4 +136,23 @@
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Angular paints a fixed strip across the top 25px of the viewport so
|
||||
// flight rows scrolling past the sticky date strip don't peek through
|
||||
// the 20px gap. Matches the .page-layout__scroll-overlay rule.
|
||||
&__scroll-overlay {
|
||||
@include screen.gt-mobile {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc(100% - 20px);
|
||||
height: 25px;
|
||||
background-color: #022040;
|
||||
background-image: url("/assets/img/background.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100vw;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -37,6 +37,7 @@ export const PageLayout: FC<PageLayoutProps> = ({
|
||||
}) => {
|
||||
return (
|
||||
<div className="page-layout">
|
||||
{stickyContent && <div className="page-layout__scroll-overlay" aria-hidden="true" />}
|
||||
<div className="page-layout__row page-layout__header">
|
||||
<aside className="page-layout__column-left page-layout__header-left">
|
||||
{headerLeft}
|
||||
|
||||
Reference in New Issue
Block a user