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

feat(SW-189): design changes to static map

Browse Source
This commit is contained in:
Erik Tiekstra
2024-09-27 08:46:35 +02:00
parent b72d2aae3d
commit 92a7fb2883
5 changed files with 27 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/globals.css
View File

@@ -107,6 +107,7 @@
--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;
--hotel-page-map-desktop-width: 23.75rem; --hotel-page-map-desktop-width: 23.75rem;
/* Z-INDEX */ /* Z-INDEX */

10
components/ContentType/HotelPage/Map/MapCard/mapCard.module.css
View File

@@ -1,13 +1,13 @@
.mapCard { .mapCard {
display: grid; display: grid;
position: absolute; position: absolute;
bottom: 15%; bottom: 0;
left: var(--Spacing-x2); left: 0;
right: var(--Spacing-x2); right: 0;
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
padding: var(--Spacing-x2); padding: var(--Spacing-x2);
box-shadow: 0 0 2.5rem 0 rgba(0, 0, 0, 0.12); border-top-left-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-Medium); border-top-right-radius: var(--Corner-radius-Medium);
} }
.ctaButton { .ctaButton {

4
components/ContentType/HotelPage/Map/StaticMap/index.tsx
View File

@@ -18,9 +18,9 @@ export default async function StaticMap({
}: StaticMapProps) { }: StaticMapProps) {
const intl = await getIntl() const intl = await getIntl()
const mapId = env.GOOGLE_STATIC_MAP_ID const mapId = env.GOOGLE_STATIC_MAP_ID
const mapHeight = 785 const mapHeight = 640
const markerHeight = 100 const markerHeight = 100
const mapLatitudeInPx = mapHeight * 0.2 const mapLatitudeInPx = mapHeight * 0.25
const mapCoordinates = { const mapCoordinates = {
lat: calculateLatWithOffset(coordinates.lat, mapLatitudeInPx, zoomLevel), lat: calculateLatWithOffset(coordinates.lat, mapLatitudeInPx, zoomLevel),
lng: coordinates.lng, lng: coordinates.lng,

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

@@ -40,16 +40,28 @@
} }
.mainSection { .mainSection {
grid-area: mainSection; grid-area: mainSection;
padding: var(--Spacing-x6) var(--Spacing-x4) 0; padding: var(--Spacing-x6) var(--Spacing-x4);
} }
.mapContainer { .mapContainer {
display: flex; display: flex;
grid-area: mapContainer; grid-area: mapContainer;
align-self: start; align-self: start;
position: sticky;
top: 0;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%;
background-color: var(--Base-Surface-Primary-light-Normal);
}
.mapWithCard {
position: sticky;
top: 0;
min-height: 500px; /* Fixed min to not cover the marker with the card */
height: calc(
100vh - var(--main-menu-desktop-height) -
var(--booking-widget-desktop-height)
); /* Full height without the header + booking widget */
max-height: 935px; /* Fixed max according to figma */
overflow: hidden;
} }
.pageContainer > nav { .pageContainer > nav {

2
components/ContentType/HotelPage/index.tsx
View File

@@ -124,8 +124,10 @@ export default async function HotelPage() {
{googleMapsApiKey ? ( {googleMapsApiKey ? (
<> <>
<aside className={styles.mapContainer}> <aside className={styles.mapContainer}>
<div className={styles.mapWithCard}>
<StaticMap coordinates={coordinates} hotelName={hotelName} /> <StaticMap coordinates={coordinates} hotelName={hotelName} />
<MapCard hotelName={hotelName} pois={topThreePois} /> <MapCard hotelName={hotelName} pois={topThreePois} />
</div>
</aside> </aside>
<MobileMapToggle /> <MobileMapToggle />
<DynamicMap <DynamicMap