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

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

Browse Source
This commit is contained in:
Erik Tiekstra
2024-09-02 15:21:54 +02:00
parent bc3233ff64
commit 70297bec91
10 changed files with 75 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/globals.css
View File

@@ -97,7 +97,9 @@
} }
:root { :root {
--max-width: 113.5rem; --current-max-width: 113.5rem;
--max-width: 94.5rem;
--max-width-content: 74.75rem; --max-width-content: 74.75rem;
--max-width-text-block: 49.5rem; --max-width-text-block: 49.5rem;
--mobile-site-header-height: 70.047px; --mobile-site-header-height: 70.047px;

1
components/ContentType/HotelPage/IntroSection/introSection.module.css
View File

@@ -2,6 +2,7 @@
display: grid; display: grid;
gap: var(--Spacing-x2); gap: var(--Spacing-x2);
position: relative; position: relative;
max-width: var(--max-width-text-block);
} }
.mainContent { .mainContent {

1
components/ContentType/HotelPage/PreviewImages/index.tsx
View File

@@ -20,7 +20,6 @@ export default async function PreviewImages({ images }: PreviewImagesProps) {
title={image.title} title={image.title}
width={index === 0 ? 752 : 292} width={index === 0 ? 752 : 292}
height={index === 0 ? 540 : 266} height={index === 0 ? 540 : 266}
objectFit="cover"
className={styles.image} className={styles.image}
/> />
))} ))}

32
components/ContentType/HotelPage/PreviewImages/previewImages.module.css
View File

@@ -1,26 +1,17 @@
.imageWrapper { .imageWrapper {
display: grid; display: grid;
grid-template-areas:
"main"
"main"
"main";
gap: 8px; gap: 8px;
position: relative; position: relative;
width: 100%; width: 100%;
padding-top: var(--Spacing-x2); padding: var(--Spacing-x2) var(--Spacing-x2) 0;
background-color: var(--Base-Surface-Subtle-Normal);
} }
.image { .image {
object-fit: cover; object-fit: cover;
border-radius: var(--Corner-radius-Medium); border-radius: var(--Corner-radius-Medium);
display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
} max-height: 30vh;
.imageWrapper > :first-child {
grid-area: main;
} }
.imageWrapper > :nth-child(2), .imageWrapper > :nth-child(2),
@@ -33,20 +24,29 @@
bottom: var(--Spacing-x2); bottom: var(--Spacing-x2);
right: var(--Spacing-x4); right: var(--Spacing-x4);
z-index: 1; z-index: 1;
display: block;
} }
@media screen and (min-width: 1367px) { @media screen and (min-width: 1367px) {
.imageWrapper { .imageWrapper {
grid-template-columns: 72fr 28fr; grid-template-columns: 70% 30%;
grid-template-rows: repeat(2, 16.625rem);
grid-template-areas: grid-template-areas:
"main side1" "main side1"
"main side2"; "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(2),
.imageWrapper > :nth-child(3) { .imageWrapper > :nth-child(3) {
display: block; display: initial;
} }
.imageWrapper > :nth-child(2) { .imageWrapper > :nth-child(2) {
@@ -56,4 +56,8 @@
.desktopGrid > :nth-child(3) { .desktopGrid > :nth-child(3) {
grid-area: side2; grid-area: side2;
} }
.seeAllButton {
right: var(--Spacing-x7);
}
} }

14
components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
View File

@@ -2,9 +2,9 @@
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { ImageIcon } from "@/components/Icons" import { ChevronRightIcon, ImageIcon } from "@/components/Icons"
import Image from "@/components/Image" 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 Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title" import Title from "@/components/TempDesignSystem/Text/Title"
@@ -62,14 +62,10 @@ export function RoomCard({
</Title> </Title>
<Body color="grey">{subtitle}</Body> <Body color="grey">{subtitle}</Body>
</div> </div>
<Link <Button variant="icon" intent="tertiary" onClick={handleRoomCtaClick}>
href="#"
color="peach80"
variant="underscored"
onClick={handleRoomCtaClick}
>
{intl.formatMessage({ id: "See room details" })} {intl.formatMessage({ id: "See room details" })}
</Link> <ChevronRightIcon className={styles.chevron} />
</Button>
</div> </div>
</article> </article>
) )

2
components/ContentType/HotelPage/Rooms/index.tsx
View File

@@ -80,7 +80,7 @@ export function Rooms({ rooms }: RoomsProps) {
<div className={styles.ctaContainer}> <div className={styles.ctaContainer}>
<Button <Button
onClick={handleToggleShowMore} onClick={handleToggleShowMore}
intent="text" intent="tertiary"
variant="icon" variant="icon"
className={`${styles.showMoreButton} ${allRoomsVisible ? styles.showLess : ""}`} className={`${styles.showMoreButton} ${allRoomsVisible ? styles.showLess : ""}`}
> >

13
components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
View File

@@ -3,9 +3,14 @@
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
gap: var(--Spacing-x4); gap: var(--Spacing-x4);
background: var(--Base-Surface-Subtle-Normal);
justify-content: flex-start; justify-content: flex-start;
padding-left: var(--Spacing-x4); padding: 0 var(--Spacing-x2);
padding-right: var(--Spacing-x3); max-width: 100vw;
border-bottom: 1px solid var(--Base-Border-Subtle); width: 100%;
}
@media screen and (min-width: 1367px) {
.tabsContainer {
padding: 0 var(--Spacing-x5);
}
} }

41
components/ContentType/HotelPage/hotelPage.module.css
View File

@@ -1,27 +1,46 @@
.pageContainer { .pageContainer {
overflow-x: auto; display: grid;
max-width: var(--max-width);
margin: 0 auto;
} }
.pageContainer > * { .topSection {
padding-left: var(--Spacing-x4); background-color: var(--Base-Surface-Subtle-Normal);
padding-right: var(--Spacing-x3); border-bottom: 1px solid var(--Base-Border-Subtle);
} }
.mainSection { .mainSection {
display: grid; display: grid;
gap: var(--Spacing-x9); 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 { .introContainer {
display: grid; display: grid;
grid-template-columns: 1fr;
gap: var(--Spacing-x4); gap: var(--Spacing-x4);
} }
@media screen and (min-width: 1367px) { @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 { .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 { .pageContainer > nav {
@@ -29,9 +48,9 @@
padding-right: var(--Spacing-x5); padding-right: var(--Spacing-x5);
} }
.introContainer { .introContainer {
display: grid; grid-template-columns: 38rem minmax(max-content, 16rem);
/* use justify-content: space between once we have the map component*/ justify-content: space-between;
gap: var(--Spacing-x9); gap: var(--Spacing-x2);
grid-template-columns: 607px 340px; align-items: end;
} }
} }

10
components/ContentType/HotelPage/index.tsx
View File

@@ -18,6 +18,7 @@ export default async function HotelPage() {
if (!hotelData) { if (!hotelData) {
return null return null
} }
const { const {
hotelName, hotelName,
hotelDescription, hotelDescription,
@@ -31,8 +32,10 @@ export default async function HotelPage() {
return ( return (
<div className={styles.pageContainer}> <div className={styles.pageContainer}>
<PreviewImages images={hotelImages} /> <div className={styles.topSection}>
<TabNavigation /> <PreviewImages images={hotelImages} />
<TabNavigation />
</div>
<main className={styles.mainSection}> <main className={styles.mainSection}>
<div className={styles.introContainer}> <div className={styles.introContainer}>
<IntroSection <IntroSection
@@ -42,12 +45,13 @@ export default async function HotelPage() {
address={hotelAddress} address={hotelAddress}
tripAdvisor={hotelRatings?.tripAdvisor} tripAdvisor={hotelRatings?.tripAdvisor}
/> />
<SidePeeks />
<AmenitiesList detailedFacilities={hotelDetailedFacilities} /> <AmenitiesList detailedFacilities={hotelDetailedFacilities} />
</div> </div>
<Rooms rooms={roomCategories} /> <Rooms rooms={roomCategories} />
<Facilities facilities={MOCK_FACILITIES} /> <Facilities facilities={MOCK_FACILITIES} />
</main> </main>
<aside className={styles.mapContainer}></aside>
<SidePeeks />
</div> </div>
) )
} }

2
components/MaxWidth/maxWidth.module.css
View File

@@ -1,4 +1,4 @@
.container { .container {
max-width: var(--max-width, 1140px); max-width: var(--current-max-width, 1140px);
position: relative; position: relative;
} }