feat(SW-330): layout and some styling fixes for hotel-pages

2024-09-02 15:21:54 +02:00
parent bc3233ff64
commit 70297bec91
10 changed files with 75 additions and 45 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -97,7 +97,9 @@
 }

 :root {
-  --max-width: 113.5rem;
+  --current-max-width: 113.5rem;
+
+  --max-width: 94.5rem;
  --max-width-content: 74.75rem;
  --max-width-text-block: 49.5rem;
  --mobile-site-header-height: 70.047px;
--- a/components/ContentType/HotelPage/IntroSection/introSection.module.css
+++ b/components/ContentType/HotelPage/IntroSection/introSection.module.css
@@ -2,6 +2,7 @@
  display: grid;
  gap: var(--Spacing-x2);
  position: relative;
+  max-width: var(--max-width-text-block);
 }

 .mainContent {
--- a/components/ContentType/HotelPage/PreviewImages/index.tsx
+++ b/components/ContentType/HotelPage/PreviewImages/index.tsx
@@ -20,7 +20,6 @@ export default async function PreviewImages({ images }: PreviewImagesProps) {
            title={image.title}
            width={index === 0 ? 752 : 292}
            height={index === 0 ? 540 : 266}
-            objectFit="cover"
            className={styles.image}
          />
        ))}
--- a/components/ContentType/HotelPage/PreviewImages/previewImages.module.css
+++ b/components/ContentType/HotelPage/PreviewImages/previewImages.module.css
@@ -1,26 +1,17 @@
 .imageWrapper {
  display: grid;
-  grid-template-areas:
-    "main"
-    "main"
-    "main";
  gap: 8px;
  position: relative;
  width: 100%;
-  padding-top: var(--Spacing-x2);
-  background-color: var(--Base-Surface-Subtle-Normal);
+  padding: var(--Spacing-x2) var(--Spacing-x2) 0;
 }

 .image {
  object-fit: cover;
  border-radius: var(--Corner-radius-Medium);
-  display: block;
  width: 100%;
  height: 100%;
-}
-
-.imageWrapper > :first-child {
-  grid-area: main;
+  max-height: 30vh;
 }

 .imageWrapper > :nth-child(2),
@@ -33,20 +24,29 @@
  bottom: var(--Spacing-x2);
  right: var(--Spacing-x4);
  z-index: 1;
-  display: block;
 }

@media screen and (min-width: 1367px) {
  .imageWrapper {
-    grid-template-columns: 72fr 28fr;
+    grid-template-columns: 70% 30%;
+    grid-template-rows: repeat(2, 16.625rem);
    grid-template-areas:
      "main side1"
      "main side2";
+    padding: var(--Spacing-x2) var(--Spacing-x5) 0;
+  }
+
+  .image {
+    max-height: none;
+  }
+
+  .imageWrapper > :first-child {
+    grid-area: main;
  }

  .imageWrapper > :nth-child(2),
  .imageWrapper > :nth-child(3) {
-    display: block;
+    display: initial;
  }

  .imageWrapper > :nth-child(2) {
@@ -56,4 +56,8 @@
  .desktopGrid > :nth-child(3) {
    grid-area: side2;
  }
+
+  .seeAllButton {
+    right: var(--Spacing-x7);
+  }
 }
--- a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
@@ -2,9 +2,9 @@

 import { useIntl } from "react-intl"

-import { ImageIcon } from "@/components/Icons"
+import { ChevronRightIcon, ImageIcon } from "@/components/Icons"
 import Image from "@/components/Image"
-import Link from "@/components/TempDesignSystem/Link"
+import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"

@@ -62,14 +62,10 @@ export function RoomCard({
          </Title>
          <Body color="grey">{subtitle}</Body>
        </div>
-        <Link
-          href="#"
-          color="peach80"
-          variant="underscored"
-          onClick={handleRoomCtaClick}
-        >
+        <Button variant="icon" intent="tertiary" onClick={handleRoomCtaClick}>
          {intl.formatMessage({ id: "See room details" })}
-        </Link>
+          <ChevronRightIcon className={styles.chevron} />
+        </Button>
      </div>
    </article>
  )
--- a/components/ContentType/HotelPage/Rooms/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/index.tsx
@@ -80,7 +80,7 @@ export function Rooms({ rooms }: RoomsProps) {
      <div className={styles.ctaContainer}>
        <Button
          onClick={handleToggleShowMore}
-          intent="text"
+          intent="tertiary"
          variant="icon"
          className={`${styles.showMoreButton} ${allRoomsVisible ? styles.showLess : ""}`}
        >
--- a/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
+++ b/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
@@ -3,9 +3,14 @@
  overflow-x: auto;
  white-space: nowrap;
  gap: var(--Spacing-x4);
-  background: var(--Base-Surface-Subtle-Normal);
  justify-content: flex-start;
-  padding-left: var(--Spacing-x4);
-  padding-right: var(--Spacing-x3);
-  border-bottom: 1px solid var(--Base-Border-Subtle);
+  padding: 0 var(--Spacing-x2);
+  max-width: 100vw;
+  width: 100%;
+}
+
+@media screen and (min-width: 1367px) {
+  .tabsContainer {
+    padding: 0 var(--Spacing-x5);
+  }
 }
--- a/components/ContentType/HotelPage/hotelPage.module.css
+++ b/components/ContentType/HotelPage/hotelPage.module.css
@@ -1,27 +1,46 @@
 .pageContainer {
-  overflow-x: auto;
+  display: grid;
+  max-width: var(--max-width);
+  margin: 0 auto;
 }

-.pageContainer > * {
-  padding-left: var(--Spacing-x4);
-  padding-right: var(--Spacing-x3);
+.topSection {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  border-bottom: 1px solid var(--Base-Border-Subtle);
 }

 .mainSection {
  display: grid;
  gap: var(--Spacing-x9);
-  padding: var(--Spacing-x5) var(--Spacing-x3) var(--Spacing-x4);
+  padding: var(--Spacing-x4) var(--Spacing-x2);
+}
+
+.mapContainer {
+  display: none;
 }

 .introContainer {
  display: grid;
-  grid-template-columns: 1fr;
  gap: var(--Spacing-x4);
 }

@media screen and (min-width: 1367px) {
+  .pageContainer {
+    grid-template-areas:
+      "topSection mapContainer"
+      "mainSection mapContainer";
+    grid-template-columns: 1fr 23.75rem;
+  }
+  .topSection {
+    grid-area: topSection;
+  }
  .mainSection {
-    padding: var(--Spacing-x9) var(--Spacing-x5);
+    grid-area: mainSection;
+    padding: var(--Spacing-x6) var(--Spacing-x5);
+  }
+  .mapContainer {
+    grid-area: mapContainer;
+    display: block;
  }

  .pageContainer > nav {
@@ -29,9 +48,9 @@
    padding-right: var(--Spacing-x5);
  }
  .introContainer {
-    display: grid;
-    /* use justify-content: space between once we have the map component*/
-    gap: var(--Spacing-x9);
-    grid-template-columns: 607px 340px;
+    grid-template-columns: 38rem minmax(max-content, 16rem);
+    justify-content: space-between;
+    gap: var(--Spacing-x2);
+    align-items: end;
  }
 }
--- a/components/ContentType/HotelPage/index.tsx
+++ b/components/ContentType/HotelPage/index.tsx
@@ -18,6 +18,7 @@ export default async function HotelPage() {
  if (!hotelData) {
    return null
  }
+
  const {
    hotelName,
    hotelDescription,
@@ -31,8 +32,10 @@ export default async function HotelPage() {

  return (
    <div className={styles.pageContainer}>
-      <PreviewImages images={hotelImages} />
-      <TabNavigation />
+      <div className={styles.topSection}>
+        <PreviewImages images={hotelImages} />
+        <TabNavigation />
+      </div>
      <main className={styles.mainSection}>
        <div className={styles.introContainer}>
          <IntroSection
@@ -42,12 +45,13 @@ export default async function HotelPage() {
            address={hotelAddress}
            tripAdvisor={hotelRatings?.tripAdvisor}
          />
-          <SidePeeks />
          <AmenitiesList detailedFacilities={hotelDetailedFacilities} />
        </div>
        <Rooms rooms={roomCategories} />
        <Facilities facilities={MOCK_FACILITIES} />
      </main>
+      <aside className={styles.mapContainer}></aside>
+      <SidePeeks />
    </div>
  )
 }
--- a/components/MaxWidth/maxWidth.module.css
+++ b/components/MaxWidth/maxWidth.module.css
@@ -1,4 +1,4 @@
 .container {
-  max-width: var(--max-width, 1140px);
+  max-width: var(--current-max-width, 1140px);
  position: relative;
 }