scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-441): Updated sticky position of tabnavigation and map

Browse Source
This commit is contained in:
Erik Tiekstra
2024-10-08 15:48:38 +02:00
parent 4212f5c97b
commit 353ae5ec80
3 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/globals.css
View File

@@ -107,7 +107,8 @@
--main-menu-mobile-height: 75px; --main-menu-mobile-height: 75px;
--main-menu-desktop-height: 118px; --main-menu-desktop-height: 118px;
--booking-widget-desktop-height: 95px; --booking-widget-mobile-height: 75px;
--booking-widget-desktop-height: 77px;
--hotel-page-map-desktop-width: 23.75rem; --hotel-page-map-desktop-width: 23.75rem;
/* Z-INDEX */ /* Z-INDEX */

8
components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
View File

@@ -1,6 +1,6 @@
.stickyWrapper { .stickyWrapper {
position: sticky; position: sticky;
top: 0; top: var(--booking-widget-mobile-height);
z-index: 1; z-index: 1;
background-color: var(--Base-Surface-Subtle-Normal); background-color: var(--Base-Surface-Subtle-Normal);
border-bottom: 1px solid var(--Base-Border-Subtle); border-bottom: 1px solid var(--Base-Border-Subtle);
@@ -16,6 +16,12 @@
width: 100%; width: 100%;
} }
@media screen and (min-width: 768px) {
.stickyWrapper {
top: var(--booking-widget-desktop-height);
}
}
@media screen and (min-width: 1367px) { @media screen and (min-width: 1367px) {
.tabsContainer { .tabsContainer {
padding: 0 var(--Spacing-x5); padding: 0 var(--Spacing-x5);

2
components/ContentType/HotelPage/hotelPage.module.css
View File

@@ -57,7 +57,7 @@
.mapWithCard { .mapWithCard {
position: sticky; position: sticky;
top: 0; top: var(--booking-widget-desktop-height);
min-height: 500px; /* Fixed min to not cover the marker with the card */ min-height: 500px; /* Fixed min to not cover the marker with the card */
height: calc( height: calc(
100vh - var(--main-menu-desktop-height) - 100vh - var(--main-menu-desktop-height) -