From 211cd5270ba4bf661d6dac1c3359eaec46b2fc71 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Wed, 14 May 2025 12:06:41 +0000 Subject: [PATCH] Fix/SW-2682 map fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(SW-2682): Added overflow-y: hidden to body on destination and hotel map pages * fix(SW-2682): Added scroll to top functionality on map components with reason why Approved-by: Matilda Landström --- .../components/BookingWidget/Client.tsx | 7 +++- .../ContentType/DestinationPage/Map/index.tsx | 35 +++++++++++++------ .../ContentType/HotelMapPage/Client.tsx | 27 ++++++++++++-- .../HotelMapPage/Sidebar/sidebar.module.css | 29 ++++++++------- .../HotelPage/Map/MobileMapToggle/index.tsx | 1 - 5 files changed, 71 insertions(+), 28 deletions(-) diff --git a/apps/scandic-web/components/BookingWidget/Client.tsx b/apps/scandic-web/components/BookingWidget/Client.tsx index b7c83a723..84f9e798d 100644 --- a/apps/scandic-web/components/BookingWidget/Client.tsx +++ b/apps/scandic-web/components/BookingWidget/Client.tsx @@ -46,6 +46,9 @@ export default function BookingWidgetClient({ const [isOpen, setIsOpen] = useState(false) const bookingWidgetRef = useRef(null) const lang = useLang() + const [originalOverflowY, setOriginalOverflowY] = useState( + null + ) const params = convertSearchParamsToObj( bookingWidgetSearchParams @@ -147,11 +150,13 @@ export default function BookingWidgetClient({ function closeMobileSearch() { setIsOpen(false) - document.body.style.overflowY = "visible" + const overflowY = originalOverflowY ?? "visible" + document.body.style.overflowY = overflowY } function openMobileSearch() { setIsOpen(true) + setOriginalOverflowY(document.body.style.overflowY) document.body.style.overflowY = "hidden" } diff --git a/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx index d22b19ad8..271286261 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx @@ -5,6 +5,7 @@ import { type PropsWithChildren, useCallback, useEffect, + useLayoutEffect, useRef, useState, } from "react" @@ -80,8 +81,30 @@ export default function Map({ // 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)`) + setMapHeight(`calc(100dvh - ${topPosition}px)`) + }, []) + + function handleClose() { + const url = new URL(window.location.href) + url.searchParams.delete("view") + router.push(url.toString()) + setActiveMarker(null) + } + + useLayoutEffect(() => { + const originalOverflowY = document.body.style.overflowY + + document.body.style.overflowY = "hidden" + + // 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. + // Reason for this is that we're using the hash property on pages which we preserve + // when navigating between pages. + window.scrollTo({ top: 0, behavior: "instant" }) + + return () => { + document.body.style.overflowY = originalOverflowY + } }, []) useEffect(() => { @@ -90,7 +113,6 @@ export default function Map({ }) const observer = new ResizeObserver(debouncedResizeHandler) - observer.observe(document.documentElement) return () => { @@ -100,13 +122,6 @@ export default function Map({ } }, [rootDiv, handleMapHeight]) - function handleClose() { - const url = new URL(window.location.href) - url.searchParams.delete("view") - router.push(url.toString()) - setActiveMarker(null) - } - return (
{ const topPosition = rootDiv.current?.getBoundingClientRect().top ?? 0 - const scrollY = window.scrollY - setMapHeight(`calc(100dvh - ${topPosition + scrollY}px)`) + setMapHeight(`calc(100dvh - ${topPosition}px)`) }, []) function handleClose() { @@ -51,6 +56,22 @@ export default function HotelMapPageClient({ router.push(url.toString()) } + useLayoutEffect(() => { + const originalOverflowY = document.body.style.overflowY + + document.body.style.overflowY = "hidden" + + // 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. + // Reason for this is that we're using the hash property on pages which we preserve + // when navigating between pages. + window.scrollTo({ top: 0, behavior: "instant" }) + + return () => { + document.body.style.overflowY = originalOverflowY + } + }, []) + useEffect(() => { const debouncedResizeHandler = debounce(function () { handleMapHeight() diff --git a/apps/scandic-web/components/ContentType/HotelMapPage/Sidebar/sidebar.module.css b/apps/scandic-web/components/ContentType/HotelMapPage/Sidebar/sidebar.module.css index fd188b116..5e4baac99 100644 --- a/apps/scandic-web/components/ContentType/HotelMapPage/Sidebar/sidebar.module.css +++ b/apps/scandic-web/components/ContentType/HotelMapPage/Sidebar/sidebar.module.css @@ -56,19 +56,16 @@ @media screen and (max-width: 767px) { .sidebar { - --sidebar-mobile-toggle-height: 84px; - --sidebar-mobile-top-space: 40px; + --sidebar-mobile-toggle-height: 88px; + --sidebar-mobile-empty-space: 32px; --sidebar-mobile-content-height: calc( var(--hotel-map-height) - var(--sidebar-mobile-toggle-height) - - var(--sidebar-mobile-top-space) + var(--sidebar-mobile-empty-space) ); position: absolute; - bottom: calc(-1 * var(--sidebar-mobile-content-height)); + bottom: 0; width: 100%; - transition: - bottom 0.3s, - top 0.3s; border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0; } @@ -82,32 +79,38 @@ z-index: 1; } - .sidebar.fullscreen { - bottom: 0; - } - .sidebarToggle { position: relative; color: var(--Text-Secondary); background-color: var(--Base-Surface-Primary-light-Normal); border-width: 0; - margin-top: var(--Space-x4); + margin: var(--Space-x2) 0; padding: var(--Space-x2); + width: 100%; } .sidebarToggle::before { content: ""; position: absolute; display: block; - top: -0.5rem; + top: 0; + left: 50%; + transform: translateX(-50%); width: 46px; height: 3px; background-color: var(--Icon-Interactive-Disabled); } + .sidebar:not(.fullscreen) .sidebarContent { + height: 0; + padding-top: 0; + padding-bottom: 0; + } + .sidebarContent { padding: var(--Space-x3) var(--Space-x2); height: var(--sidebar-mobile-content-height); + transition: height 0.3s ease-in-out; } } diff --git a/apps/scandic-web/components/ContentType/HotelPage/Map/MobileMapToggle/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/Map/MobileMapToggle/index.tsx index 2a97cde47..3240b977e 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/Map/MobileMapToggle/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/Map/MobileMapToggle/index.tsx @@ -54,7 +54,6 @@ export default function MobileMapToggle() {