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

Merged in feat/SW-1443-carousel-destination-overview-page (pull request #1289)

Browse Source 
feat(SW-1443): added carousel block on hotel overview page

* feat(SW-1443): added carousel block on hotel overview page


Approved-by: Fredrik Thorsson
Approved-by: Matilda Landström
Approved-by: Chuma Mcphoy (We Ahead)
This commit is contained in:
Erik Tiekstra
2025-02-11 06:56:38 +00:00
parent a86f0f3993
commit f021c60c2a
11 changed files with 177 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
components/ContentType/DestinationOverviewPage/HotelsSection/hotelsSection.module.css
View File

@@ -1,12 +1,11 @@
.container {
display: grid;
gap: var(--Spacing-x4);
padding: var(--Spacing-x5) var(--Spacing-x2) var(--Spacing-x7);
padding: var(--Spacing-x5) 0 var(--Spacing-x7);
}
@media screen and (min-width: 768px) {
.container {
gap: var(--Spacing-x7);
padding: var(--Spacing-x5) 9.625rem var(--Spacing-x9) 9.625rem;
}
}

26
components/ContentType/DestinationOverviewPage/destinationOverviewPage.module.css
View File

@@ -1,12 +1,28 @@
.pageContainer {
.mapContainer {
position: relative;
display: grid;
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.pageContainer {
margin: 0 auto;
}
.main {
display: grid;
gap: var(--Spacing-x9);
padding: var(--Spacing-x7) 0 var(--Spacing-x9);
background-color: var(--Base-Surface-Primary-light-Normal);
}
.blocks {
display: grid;
gap: var(--Spacing-x9);
width: 100%;
max-width: var(--max-width-content);
margin: 0 auto;
}
.hotelsAccordions {
width: 100%;
max-width: var(--max-width-content);
margin: 0 auto;
}

20
components/ContentType/DestinationOverviewPage/index.tsx
View File

@@ -6,6 +6,7 @@ import {
getDestinationsList,
} from "@/lib/trpc/memoizedRequests"
import Blocks from "@/components/Blocks"
import TrackingSDK from "@/components/TrackingSDK"
import HotelsSection from "./HotelsSection"
@@ -30,12 +31,21 @@ export default async function DestinationOverviewPage() {
return (
<>
<div className={styles.pageContainer}>
{googleMapsApiKey ? (
{googleMapsApiKey ? (
<div className={styles.mapContainer}>
<OverviewMapContainer apiKey={googleMapsApiKey} mapId={googleMapId} />
) : null}
{destinationsData && <HotelsSection destinations={destinationsData} />}
</div>
</div>
) : null}
<main className={styles.main}>
<div className={styles.blocks}>
<Blocks blocks={destinationOverviewPage.blocks} />
</div>
</main>
{destinationsData && (
<aside className={styles.hotelsAccordions}>
<HotelsSection destinations={destinationsData} />
</aside>
)}
<Suspense fallback={null}>
<TrackingSDK pageData={tracking} />
</Suspense>