From f4234334be250638ca99b9d2176f7834135bf993 Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Tue, 25 Feb 2025 10:10:20 +0000
Subject: [PATCH] Merged in feat/SW-1630-implement-mobile-tablet-design (pull
 request #1395)

Feat/SW-1630 implement mobile tablet design

* feat(SW-1630): add mobile and tablet design

* feat(SW-1630): adjust zoom buttons

* feat(SW-1630): css changes

* feat(SW-1630): modify breakpoints


Approved-by: Erik Tiekstra
---
 .../CityMap/HotelList/hotelList.module.css    | 18 +++++++++++-
 .../HotelListItem/hotelListItem.module.css    | 28 ++++++++++++++++++-
 .../CityMap/HotelListItem/index.tsx           |  6 ++--
 .../CityMap/cityMap.module.css                |  5 ++++
 .../DestinationCityPage/CityMap/index.tsx     |  9 +++++-
 .../CountryMap/CityList/cityList.module.css   | 18 +++++++++++-
 .../CityListItem/cityListItem.module.css      | 26 +++++++++++++++++
 .../CountryMap/CityListItem/index.tsx         | 22 +++++++++------
 .../CountryMap/countryMap.module.css          |  5 ++++
 .../CountryMap/index.tsx                      |  9 +++++-
 .../Map/DynamicMap/dynamicMap.module.css      |  3 +-
 .../DestinationPage/Map/DynamicMap/index.tsx  | 12 ++++----
 .../DestinationPage/Map/map.module.css        | 11 ++++++++
 13 files changed, 149 insertions(+), 23 deletions(-)
 create mode 100644 components/ContentType/DestinationPage/DestinationCityPage/CityMap/cityMap.module.css
 create mode 100644 components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/countryMap.module.css

diff --git a/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/hotelList.module.css b/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/hotelList.module.css
index 589b8c717..8c0dfeafd 100644
--- a/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/hotelList.module.css
+++ b/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/hotelList.module.css
@@ -11,7 +11,23 @@
 }
 
 .hotelList {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: var(--Spacing-x3);
   list-style: none;
 }
+
+@media screen and (max-width: 949px) {
+  .hotelListWrapper {
+    overflow-y: scroll;
+  }
+
+  .hotelList {
+    flex-direction: row;
+    align-items: end;
+  }
+
+  .header {
+    display: none;
+  }
+}
diff --git a/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/hotelListItem.module.css b/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/hotelListItem.module.css
index 43e7890ef..3611025f9 100644
--- a/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/hotelListItem.module.css
+++ b/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/hotelListItem.module.css
@@ -1,4 +1,5 @@
 .hotelListItem {
+  display: grid;
   background-color: var(--Base-Surface-Primary-light-Normal);
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Medium);
@@ -6,7 +7,8 @@
 }
 
 .content {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: var(--Spacing-x2);
   padding: var(--Spacing-x2) var(--Spacing-x3);
   align-content: start;
@@ -41,3 +43,27 @@
 .ctaWrapper {
   justify-self: stretch;
 }
+
+@media screen and (max-width: 950px) {
+  .hotelListItem {
+    width: 360px;
+    min-height: 150px;
+    grid-template-columns: 1fr 2fr;
+  }
+
+  .content {
+    padding: var(--Spacing-x-one-and-half);
+    gap: var(--Spacing-x1);
+  }
+
+  .logo,
+  .captions,
+  .amenityItem:nth-child(n + 4),
+  .amenityName {
+    display: none;
+  }
+
+  .ctaWrapper {
+    margin-top: auto;
+  }
+}
diff --git a/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx b/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx
index f47590708..0c58488f5 100644
--- a/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx
+++ b/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx
@@ -38,7 +38,9 @@ export default function HotelListItem({ hotel, url }: HotelListItemProps) {
       />
       <div className={styles.content}>
         <div className={styles.intro}>
-          <HotelLogo hotelId={hotel.operaId} hotelType={hotel.hotelType} />
+          <div className={styles.logo}>
+            <HotelLogo hotelId={hotel.operaId} hotelType={hotel.hotelType} />
+          </div>
           <Subtitle type="one" asChild>
             <h3>{hotel.name}</h3>
           </Subtitle>
@@ -67,7 +69,7 @@ export default function HotelListItem({ hotel, url }: HotelListItemProps) {
                 {IconComponent && (
                   <IconComponent color="grey80" width={20} height={20} />
                 )}
-                {amenity.name}
+                <span className={styles.amenityName}>{amenity.name}</span>
               </li>
             )
           })}
diff --git a/components/ContentType/DestinationPage/DestinationCityPage/CityMap/cityMap.module.css b/components/ContentType/DestinationPage/DestinationCityPage/CityMap/cityMap.module.css
new file mode 100644
index 000000000..586806063
--- /dev/null
+++ b/components/ContentType/DestinationPage/DestinationCityPage/CityMap/cityMap.module.css
@@ -0,0 +1,5 @@
+@media screen and (max-width: 949px) {
+  .title {
+    display: none;
+  }
+}
diff --git a/components/ContentType/DestinationPage/DestinationCityPage/CityMap/index.tsx b/components/ContentType/DestinationPage/DestinationCityPage/CityMap/index.tsx
index f39853815..99fc897bd 100644
--- a/components/ContentType/DestinationPage/DestinationCityPage/CityMap/index.tsx
+++ b/components/ContentType/DestinationPage/DestinationCityPage/CityMap/index.tsx
@@ -7,6 +7,8 @@ import { getIntl } from "@/i18n"
 import Map from "../../Map"
 import HotelList from "./HotelList"
 
+import styles from "./cityMap.module.css"
+
 import type { CityLocation } from "@/types/trpc/routers/hotel/locations"
 
 interface CityMapProps {
@@ -27,7 +29,12 @@ export default async function CityMap({ city, cityIdentifier }: CityMapProps) {
       apiKey={env.GOOGLE_STATIC_MAP_KEY}
       pageType="city"
     >
-      <Title level="h2" as="h3" textTransform="regular">
+      <Title
+        level="h2"
+        as="h3"
+        textTransform="regular"
+        className={styles.title}
+      >
         {intl.formatMessage({ id: `Hotels in {city}` }, { city: city.name })}
       </Title>
       <HotelList hotels={hotels} />
diff --git a/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityList/cityList.module.css b/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityList/cityList.module.css
index fea710da0..f2f98d6e8 100644
--- a/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityList/cityList.module.css
+++ b/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityList/cityList.module.css
@@ -11,7 +11,23 @@
 }
 
 .cityList {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: var(--Spacing-x3);
   list-style: none;
 }
+
+@media screen and (max-width: 949px) {
+  .cityListWrapper {
+    overflow-x: scroll;
+  }
+
+  .cityList {
+    flex-direction: row;
+    align-items: end;
+  }
+
+  .header {
+    display: none;
+  }
+}
diff --git a/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/cityListItem.module.css b/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/cityListItem.module.css
index 47a7f9771..4441ab9b3 100644
--- a/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/cityListItem.module.css
+++ b/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/cityListItem.module.css
@@ -1,4 +1,5 @@
 .cityListItem {
+  display: grid;
   background-color: var(--Base-Surface-Primary-light-Normal);
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Medium);
@@ -20,3 +21,28 @@
   gap: var(--Spacing-x2);
   padding: var(--Spacing-x2) var(--Spacing-x3);
 }
+
+@media screen and (max-width: 949px) {
+  .cityListItem {
+    width: 360px;
+    min-height: 120px;
+    grid-template-columns: 1fr 2fr;
+  }
+
+  .imageWrapper {
+    height: 100%;
+  }
+
+  .content {
+    padding: var(--Spacing-x-one-and-half);
+    gap: var(--Spacing-x1);
+  }
+
+  .experienceList {
+    display: none;
+  }
+
+  .ctaWrapper {
+    margin-top: auto;
+  }
+}
diff --git a/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx b/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx
index d54c84d13..3bae65809 100644
--- a/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx
+++ b/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx
@@ -36,15 +36,19 @@ export default async function CityListItem({ city }: CityListItemProps) {
         <Subtitle asChild>
           <h3>{city.heading}</h3>
         </Subtitle>
-        <ExperienceList experiences={city.experiences} />
-        <Button intent="tertiary" theme="base" size="small" asChild>
-          <Link href={city.url}>
-            {intl.formatMessage(
-              { id: "Explore {city}" },
-              { city: city.cityName }
-            )}
-          </Link>
-        </Button>
+        <div className={styles.experienceList}>
+          <ExperienceList experiences={city.experiences} />
+        </div>
+        <div className={styles.ctaWrapper}>
+          <Button intent="tertiary" theme="base" size="small" asChild>
+            <Link href={city.url}>
+              {intl.formatMessage(
+                { id: "Explore {city}" },
+                { city: city.cityName }
+              )}
+            </Link>
+          </Button>
+        </div>
       </section>
     </article>
   )
diff --git a/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/countryMap.module.css b/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/countryMap.module.css
new file mode 100644
index 000000000..586806063
--- /dev/null
+++ b/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/countryMap.module.css
@@ -0,0 +1,5 @@
+@media screen and (max-width: 949px) {
+  .title {
+    display: none;
+  }
+}
diff --git a/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/index.tsx b/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/index.tsx
index 85332530c..14402cad6 100644
--- a/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/index.tsx
+++ b/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/index.tsx
@@ -10,6 +10,8 @@ import { getIntl } from "@/i18n"
 import Map from "../../Map"
 import CityList from "./CityList"
 
+import styles from "./countryMap.module.css"
+
 import type { Country } from "@/types/enums/country"
 
 interface CountryMapProps {
@@ -34,7 +36,12 @@ export default async function CountryMap({ country }: CountryMapProps) {
       apiKey={env.GOOGLE_STATIC_MAP_KEY}
       pageType="country"
     >
-      <Title level="h2" as="h3" textTransform="regular">
+      <Title
+        level="h2"
+        as="h3"
+        textTransform="regular"
+        className={styles.title}
+      >
         {intl.formatMessage({ id: `Destinations in {country}` }, { country })}
       </Title>
       <CityList cities={cities} />
diff --git a/components/ContentType/DestinationPage/Map/DynamicMap/dynamicMap.module.css b/components/ContentType/DestinationPage/Map/DynamicMap/dynamicMap.module.css
index 5e40f1fb0..48f49af1f 100644
--- a/components/ContentType/DestinationPage/Map/DynamicMap/dynamicMap.module.css
+++ b/components/ContentType/DestinationPage/Map/DynamicMap/dynamicMap.module.css
@@ -53,7 +53,7 @@
   box-shadow: var(--button-box-shadow);
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 950px) {
   .ctaButtons {
     top: var(--Spacing-x4);
     right: var(--Spacing-x4);
@@ -63,5 +63,6 @@
 
   .zoomButtons {
     display: flex;
+    flex-direction: row-reverse;
   }
 }
diff --git a/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx b/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx
index 3c048237c..6a800adc4 100644
--- a/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx
+++ b/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx
@@ -100,10 +100,10 @@ export default function DynamicMap({
             variant="icon"
             size="small"
             className={styles.zoomButton}
-            onClick={zoomOut}
-            aria-label={intl.formatMessage({ id: "Zoom in" })}
+            onClick={zoomIn}
+            aria-label={intl.formatMessage({ id: "Zoom out" })}
           >
-            <MinusIcon color="burgundy" width={20} height={20} />
+            <PlusIcon color="burgundy" width={20} height={20} />
           </Button>
           <Button
             theme="base"
@@ -111,10 +111,10 @@ export default function DynamicMap({
             variant="icon"
             size="small"
             className={styles.zoomButton}
-            onClick={zoomIn}
-            aria-label={intl.formatMessage({ id: "Zoom out" })}
+            onClick={zoomOut}
+            aria-label={intl.formatMessage({ id: "Zoom in" })}
           >
-            <PlusIcon color="burgundy" width={20} height={20} />
+            <MinusIcon color="burgundy" width={20} height={20} />
           </Button>
         </div>
       </div>
diff --git a/components/ContentType/DestinationPage/Map/map.module.css b/components/ContentType/DestinationPage/Map/map.module.css
index b0bde35a3..b808a8ff1 100644
--- a/components/ContentType/DestinationPage/Map/map.module.css
+++ b/components/ContentType/DestinationPage/Map/map.module.css
@@ -33,3 +33,14 @@
   box-shadow: var(--button-box-shadow);
   gap: var(--Spacing-x-half);
 }
+
+@media screen and (max-width: 949px) {
+  .sidebar {
+    position: absolute;
+    max-width: none;
+    padding: 0 var(--Spacing-x2) var(--Spacing-x3);
+    overflow: hidden;
+    bottom: 0;
+    z-index: 3;
+  }
+}