diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/OverviewMapContainer/ActiveMapCard/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/OverviewMapContainer/ActiveMapCard/index.tsx index 402eff0b8..f7f44d477 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/OverviewMapContainer/ActiveMapCard/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/OverviewMapContainer/ActiveMapCard/index.tsx @@ -36,7 +36,6 @@ export default function ActiveMapCard({ markers }: ActiveMapCardProps) { hotelName={activeHotel.name} image={activeHotel.image} url={activeHotel.url} - type="article" /> ) } diff --git a/apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/hotelCardCarousel.module.css b/apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/hotelCardCarousel.module.css index 29a39602a..4ca25c2ff 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/hotelCardCarousel.module.css +++ b/apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/hotelCardCarousel.module.css @@ -14,14 +14,6 @@ } } -.carouselContent .item:first-child:not(:only-child) { - padding-left: var(--Spacing-x2); -} - -.carouselContent .item:last-child:not(:only-child) { - padding-right: var(--Spacing-x2); -} - @media screen and (max-width: 500px) { .carouselContent { grid-auto-columns: 90%; diff --git a/apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/index.tsx index e102ae0d2..e6420058d 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/index.tsx @@ -54,7 +54,6 @@ export default function HotelCardCarousel({ url={url} image={getImage(hotel)} amenities={hotel.detailedFacilities.slice(0, 3)} - type="article" /> ))} diff --git a/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/hotelMapCard.module.css b/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/hotelMapCard.module.css index 9b8327249..b5eb3e4fe 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/hotelMapCard.module.css +++ b/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/hotelMapCard.module.css @@ -1,8 +1,4 @@ -.dialog { - display: none; -} - -.dialogContent { +.wrapper { background: var(--Base-Surface-Primary-light-Normal); border: 1px solid var(--Base-Border-Subtle); border-radius: var(--Corner-radius-Medium); @@ -12,25 +8,6 @@ position: relative; } -.dialog .dialogContent { - min-width: 402px; -} - -.dialog .dialogContent::after { - content: ""; - display: block; - position: absolute; - bottom: 0; - left: 50%; - width: 0; - height: 0; - border: 20px solid transparent; - border-top-color: var(--Base-Surface-Primary-light-Normal); - border-bottom: 0; - margin-left: -10px; - margin-bottom: -10px; -} - .name { height: 48px; max-width: 180px; @@ -83,16 +60,11 @@ } @media (min-width: 950px) { - .iconFootnote { - display: block; + .wrapper { + border: none; } - .dialog { - bottom: 0; - left: 50%; - transform: translateX(-50%); - border: none; - background: transparent; + .iconFootnote { display: block; } diff --git a/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/index.tsx index 2731a3087..8856f465c 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/index.tsx @@ -1,5 +1,4 @@ "use client" -import { cx } from "class-variance-authority" import Link from "next/link" import { useState } from "react" import { useIntl } from "react-intl" @@ -21,24 +20,20 @@ import type { GalleryImage } from "@/types/components/imageGallery" import type { Amenities } from "@/types/hotel" interface HotelMapCardProps { - isActive?: boolean amenities: Amenities tripadvisorRating: number | undefined hotelName: string image: GalleryImage | null url: string - type?: "dialog" | "article" className?: string } export default function HotelMapCard({ - isActive = false, amenities, tripadvisorRating, hotelName, image, url, - type = "dialog", className, }: HotelMapCardProps) { const intl = useIntl() @@ -50,25 +45,9 @@ export default function HotelMapCard({ setActiveMarker(null) } - function Wrapper({ children }: React.PropsWithChildren) { - if (type === "dialog") { - return ( - - {children} - - ) - } - return
{children}
- } - return ( - -
+
+
- +
) } diff --git a/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/dynamicMap.module.css b/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/dynamicMap.module.css index dae107a06..6a0528d72 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/dynamicMap.module.css +++ b/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/dynamicMap.module.css @@ -70,4 +70,14 @@ box-shadow: var(--button-box-shadow); gap: var(--Spacing-x-half); } + + /* Overriding Google maps infoWindow styles */ + .mapWrapper :global(.gm-style .gm-style-iw-c) { + padding: 0 !important; + } + + .mapWrapper :global(.gm-style .gm-style-iw-d) { + padding: 0 !important; + overflow: hidden !important; + } } diff --git a/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/Marker/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/Marker/index.tsx index d711fdfac..7694078a6 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/Marker/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/Marker/index.tsx @@ -3,8 +3,10 @@ import { AdvancedMarker, AdvancedMarkerAnchorPoint, + InfoWindow, useAdvancedMarkerRef, } from "@vis.gl/react-google-maps" +import { useMediaQuery } from "usehooks-ts" import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map" @@ -26,6 +28,8 @@ export default function Marker({ position, properties }: MarkerProps) { const { setHoveredMarker, setActiveMarker, hoveredMarker, activeMarker } = useDestinationPageHotelsMapStore() + const isDesktop = useMediaQuery("(min-width: 950px)") + function handleMarkerClick() { setActiveMarker(properties.id) trackMapClick(properties.name) @@ -58,14 +62,22 @@ export default function Marker({ position, properties }: MarkerProps) { hotelType={properties.type} /> - + {isActive && isDesktop && ( + + + + )} ) }