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

fix(SW-608): fixed positioning of dynamic map

Browse Source
This commit is contained in:
Erik Tiekstra
2024-10-24 09:32:47 +02:00
parent 86b085b8f1
commit 3b75231eee
8 changed files with 201 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx
+65 -59
View File
@@ -78,66 +78,72 @@ export default function Sidebar({
} }
return ( return (
<aside <>
className={`${styles.sidebar} ${ <aside
isFullScreenSidebar ? styles.fullscreen : "" className={`${styles.sidebar} ${
}`} isFullScreenSidebar ? styles.fullscreen : ""
> }`}
<Button
theme="base"
intent="text"
className={styles.sidebarToggle}
onClick={toggleFullScreenSidebar}
> >
<Body textTransform="bold" color="textMediumContrast" asChild> <Button
<span> theme="base"
{intl.formatMessage({ intent="text"
id: isFullScreenSidebar ? "View as map" : "View as list", fullWidth
})} className={styles.sidebarToggle}
</span> onClick={toggleFullScreenSidebar}
</Body> >
</Button> <Body textTransform="bold" color="textMediumContrast" asChild>
<div className={styles.sidebarContent}> <span>
<Title as="h4" level="h2" textTransform="regular"> {intl.formatMessage({
{intl.formatMessage( id: isFullScreenSidebar ? "View as map" : "View as list",
{ id: "Things nearby HOTEL_NAME" }, })}
{ hotelName } </span>
)} </Body>
</Title> </Button>
<div className={styles.sidebarContent}>
<Title as="h4" level="h2" textTransform="regular">
{intl.formatMessage(
{ id: "Things nearby HOTEL_NAME" },
{ hotelName }
)}
</Title>
{poisInGroups.map(({ group, pois }) => {poisInGroups.map(({ group, pois }) =>
pois.length ? ( pois.length ? (
<div key={group} className={styles.poiGroup}> <div key={group} className={styles.poiGroup}>
<Body <Body
color="black" color="black"
textTransform="bold" textTransform="bold"
className={styles.poiHeading} className={styles.poiHeading}
asChild asChild
> >
<h3> <h3>
<PoiMarker group={group} /> <PoiMarker group={group} />
{intl.formatMessage({ id: group })} {intl.formatMessage({ id: group })}
</h3> </h3>
</Body> </Body>
<ul className={styles.poiList}> <ul className={styles.poiList}>
{pois.map((poi) => ( {pois.map((poi) => (
<li key={poi.name} className={styles.poiItem}> <li key={poi.name} className={styles.poiItem}>
<button <button
className={`${styles.poiButton} ${activePoi === poi.name ? styles.active : ""}`} className={`${styles.poiButton} ${activePoi === poi.name ? styles.active : ""}`}
onMouseEnter={() => handleMouseEnter(poi.name)} onMouseEnter={() => handleMouseEnter(poi.name)}
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
onClick={() => handlePoiClick(poi.name, poi.coordinates)} onClick={() =>
> handlePoiClick(poi.name, poi.coordinates)
<span>{poi.name}</span> }
<span>{poi.distance} km</span> >
</button> <span>{poi.name}</span>
</li> <span>{poi.distance} km</span>
))} </button>
</ul> </li>
</div> ))}
) : null </ul>
)} </div>
</div> ) : null
</aside> )}
</div>
</aside>
<div className={styles.backdrop} onClick={toggleFullScreenSidebar} />
</>
) )
} }
components/ContentType/HotelPage/Map/DynamicMap/Sidebar/sidebar.module.css
+55 -40
View File
@@ -1,50 +1,12 @@
.sidebar { .sidebar {
--sidebar-max-width: 26.25rem;
--sidebar-mobile-toggle-height: 91px;
--sidebar-mobile-fullscreen-height: calc(
100vh - var(--main-menu-mobile-height) - var(--sidebar-mobile-toggle-height)
);
position: absolute;
top: var(--sidebar-mobile-fullscreen-height);
height: 100%;
right: 0;
left: 0;
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
z-index: 1; z-index: 2;
transition: top 0.3s;
}
.sidebar:not(.fullscreen) {
border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
}
.sidebar.fullscreen {
top: 0;
}
.sidebarToggle {
position: relative;
margin: var(--Spacing-x4) 0 var(--Spacing-x2);
width: 100%;
}
.sidebarToggle::before {
content: "";
position: absolute;
display: block;
top: -0.5rem;
width: 100px;
height: 3px;
background-color: var(--UI-Text-High-contrast);
} }
.sidebarContent { .sidebarContent {
display: grid; display: grid;
gap: var(--Spacing-x5); gap: var(--Spacing-x5);
align-content: start; align-content: start;
padding: var(--Spacing-x3) var(--Spacing-x2);
height: var(--sidebar-mobile-fullscreen-height);
overflow-y: auto; overflow-y: auto;
} }
@@ -90,12 +52,65 @@
background-color: var(--Base-Surface-Primary-light-Hover); background-color: var(--Base-Surface-Primary-light-Hover);
} }
@media screen and (max-width: 767px) {
.sidebar {
--sidebar-mobile-toggle-height: 84px;
--sidebar-mobile-top-space: 40px;
--sidebar-mobile-content-height: calc(
var(--hotel-map-height) - var(--sidebar-mobile-toggle-height) -
var(--sidebar-mobile-top-space)
);
position: absolute;
bottom: calc(-1 * var(--sidebar-mobile-content-height));
width: 100%;
transition:
bottom 0.3s,
top 0.3s;
border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
}
.sidebar.fullscreen + .backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.sidebar.fullscreen {
bottom: 0;
}
.sidebarToggle {
position: relative;
margin-top: var(--Spacing-x4);
}
.sidebarToggle::before {
content: "";
position: absolute;
display: block;
top: -0.5rem;
width: 100px;
height: 3px;
background-color: var(--UI-Text-High-contrast);
}
.sidebarContent {
padding: var(--Spacing-x3) var(--Spacing-x2);
height: var(--sidebar-mobile-content-height);
}
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.sidebar { .sidebar {
position: static; position: static;
width: 40vw; width: 40vw;
min-width: 10rem; min-width: 10rem;
max-width: var(--sidebar-max-width); max-width: 26.25rem;
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
} }
components/ContentType/HotelPage/Map/DynamicMap/dynamicMap.module.css
+11 -10
View File
@@ -1,18 +1,19 @@
.dynamicMap { .dynamicMap {
position: fixed; --hotel-map-height: 100dvh;
top: var(--main-menu-mobile-height);
right: 0; position: absolute;
bottom: 0; top: 0;
left: 0; left: 0;
z-index: var(--dialog-z-index); height: var(--hotel-map-height);
width: 100dvw;
z-index: var(--hotel-dynamic-map-z-index);
display: flex; display: flex;
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
} }
.wrapper {
@media screen and (min-width: 768px) { position: absolute;
.dynamicMap { top: 0;
top: var(--main-menu-desktop-height); left: 0;
}
} }
.closeButton { .closeButton {
components/ContentType/HotelPage/Map/DynamicMap/index.tsx
+63 -31
View File
@@ -1,6 +1,6 @@
"use client" "use client"
import { APIProvider } from "@vis.gl/react-google-maps" import { APIProvider } from "@vis.gl/react-google-maps"
import { useEffect, useRef, useState } from "react" import { useCallback, useEffect, useRef, useState } from "react"
import { Dialog, Modal } from "react-aria-components" import { Dialog, Modal } from "react-aria-components"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
@@ -10,6 +10,7 @@ import CloseLargeIcon from "@/components/Icons/CloseLarge"
import InteractiveMap from "@/components/Maps/InteractiveMap" import InteractiveMap from "@/components/Maps/InteractiveMap"
import Button from "@/components/TempDesignSystem/Button" import Button from "@/components/TempDesignSystem/Button"
import { useHandleKeyUp } from "@/hooks/useHandleKeyUp" import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
import { debounce } from "@/utils/debounce"
import Sidebar from "./Sidebar" import Sidebar from "./Sidebar"
@@ -25,9 +26,10 @@ export default function DynamicMap({
mapId, mapId,
}: DynamicMapProps) { }: DynamicMapProps) {
const intl = useIntl() const intl = useIntl()
const rootDiv = useRef<HTMLDivElement | null>(null)
const [mapHeight, setMapHeight] = useState("0px")
const { isDynamicMapOpen, closeDynamicMap } = useHotelPageStore() const { isDynamicMapOpen, closeDynamicMap } = useHotelPageStore()
const [scrollHeightWhenOpened, setScrollHeightWhenOpened] = useState(0) const [scrollHeightWhenOpened, setScrollHeightWhenOpened] = useState(0)
const hasMounted = useRef(false)
const [activePoi, setActivePoi] = useState<string | null>(null) const [activePoi, setActivePoi] = useState<string | null>(null)
useHandleKeyUp((event: KeyboardEvent) => { useHandleKeyUp((event: KeyboardEvent) => {
@@ -36,23 +38,47 @@ export default function DynamicMap({
} }
}) })
// Making sure the map is always opened at the top of the page, just below the header. // Calculate the height of the map based on the viewport height from the start-point (below the header and booking widget)
const handleMapHeight = useCallback(() => {
const topPosition = rootDiv.current?.getBoundingClientRect().top ?? 0
const scrollY = window.scrollY
setMapHeight(`calc(100dvh - ${topPosition + scrollY}px)`)
}, [])
// Making sure the map is always opened at the top of the page,
// just below the header and booking widget as these should stay visible.
// When closing, the page should scroll back to the position it was before opening the map. // When closing, the page should scroll back to the position it was before opening the map.
useEffect(() => { useEffect(() => {
// Skip the first render // Skip the first render
if (!hasMounted.current) { if (!rootDiv.current) {
hasMounted.current = true
return return
} }
if (isDynamicMapOpen && scrollHeightWhenOpened === 0) { if (isDynamicMapOpen && scrollHeightWhenOpened === 0) {
setScrollHeightWhenOpened(window.scrollY) const scrollY = window.scrollY
setScrollHeightWhenOpened(scrollY)
window.scrollTo({ top: 0, behavior: "instant" }) window.scrollTo({ top: 0, behavior: "instant" })
} else if (!isDynamicMapOpen && scrollHeightWhenOpened !== 0) { } else if (!isDynamicMapOpen && scrollHeightWhenOpened !== 0) {
window.scrollTo({ top: scrollHeightWhenOpened, behavior: "instant" }) window.scrollTo({ top: scrollHeightWhenOpened, behavior: "instant" })
setScrollHeightWhenOpened(0) setScrollHeightWhenOpened(0)
} }
}, [isDynamicMapOpen, scrollHeightWhenOpened]) }, [isDynamicMapOpen, scrollHeightWhenOpened, rootDiv])
useEffect(() => {
const debouncedResizeHandler = debounce(function () {
handleMapHeight()
})
const observer = new ResizeObserver(debouncedResizeHandler)
observer.observe(document.documentElement)
return () => {
if (observer) {
observer.unobserve(document.documentElement)
}
}
}, [rootDiv, isDynamicMapOpen, handleMapHeight])
const closeButton = ( const closeButton = (
<Button <Button
@@ -70,31 +96,37 @@ export default function DynamicMap({
return ( return (
<APIProvider apiKey={apiKey}> <APIProvider apiKey={apiKey}>
<Modal isOpen={isDynamicMapOpen}> <div className={styles.wrapper} ref={rootDiv}>
<Dialog <Modal
className={styles.dynamicMap} isOpen={isDynamicMapOpen}
aria-label={intl.formatMessage( UNSTABLE_portalContainer={rootDiv.current || undefined}
{ id: "Things nearby HOTEL_NAME" },
{ hotelName }
)}
> >
<Sidebar <Dialog
activePoi={activePoi} className={styles.dynamicMap}
hotelName={hotelName} style={{ "--hotel-map-height": mapHeight } as React.CSSProperties}
pointsOfInterest={pointsOfInterest} aria-label={intl.formatMessage(
onActivePoiChange={setActivePoi} { id: "Things nearby HOTEL_NAME" },
coordinates={coordinates} { hotelName }
/> )}
<InteractiveMap >
closeButton={closeButton} <Sidebar
coordinates={coordinates} activePoi={activePoi}
pointsOfInterest={pointsOfInterest} hotelName={hotelName}
activePoi={activePoi} pointsOfInterest={pointsOfInterest}
onActivePoiChange={setActivePoi} onActivePoiChange={setActivePoi}
mapId={mapId} coordinates={coordinates}
/> />
</Dialog> <InteractiveMap
</Modal> closeButton={closeButton}
coordinates={coordinates}
pointsOfInterest={pointsOfInterest}
activePoi={activePoi}
onActivePoiChange={setActivePoi}
mapId={mapId}
/>
</Dialog>
</Modal>
</div>
</APIProvider> </APIProvider>
) )
} }
components/ContentType/HotelPage/Map/MobileMapToggle/mobileToggle.module.css
+1 -1
View File
@@ -1,7 +1,7 @@
.mobileToggle { .mobileToggle {
position: sticky; position: sticky;
bottom: var(--Spacing-x5); bottom: var(--Spacing-x5);
z-index: 1; z-index: var(--hotel-mobile-map-toggle-button-z-index);
margin: 0 auto; margin: 0 auto;
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
components/ContentType/HotelPage/PreviewImages/previewImages.module.css
+1
View File
@@ -4,6 +4,7 @@
position: relative; position: relative;
width: 100%; width: 100%;
padding: var(--Spacing-x2) var(--Spacing-x2) 0; padding: var(--Spacing-x2) var(--Spacing-x2) 0;
z-index: 0;
} }
.image { .image {
components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
+1 -1
View File
@@ -1,7 +1,7 @@
.stickyWrapper { .stickyWrapper {
position: sticky; position: sticky;
top: var(--booking-widget-mobile-height); top: var(--booking-widget-mobile-height);
z-index: 2; z-index: var(--hotel-tab-navigation-z-index);
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);
overflow-x: auto; overflow-x: auto;
components/ContentType/HotelPage/hotelPage.module.css
+4
View File
@@ -1,4 +1,8 @@
.pageContainer { .pageContainer {
--hotel-tab-navigation-z-index: 2;
--hotel-mobile-map-toggle-button-z-index: 1;
--hotel-dynamic-map-z-index: 2;
--hotel-page-navigation-height: 59px; --hotel-page-navigation-height: 59px;
--hotel-page-scroll-margin-top: calc( --hotel-page-scroll-margin-top: calc(
var(--hotel-page-navigation-height) + var(--Spacing-x2) var(--hotel-page-navigation-height) + var(--Spacing-x2)