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

fix(SW-2143): Fixed layout issues on destination pages, also fixed background colors

Browse Source 
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-08-26 11:38:15 +00:00
parent 7e9ecdd6c5
commit 4c3ddea5c0
29 changed files with 151 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/campaign_overview_page/[uid]/page.module.css Normal file
View File

@@ -0,0 +1,3 @@
.page {
background-color: var(--Background-Primary);
}

10
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/campaign_overview_page/[uid]/page.tsx
View File

@@ -6,14 +6,18 @@ import { env } from "@/env/server"
import CampaignOverviewPage from "@/components/ContentType/CampaignOverviewPage"
import CampaignOverviewPageSkeleton from "@/components/ContentType/CampaignOverviewPage/CampaignOverviewPageSkeleton"
import styles from "./page.module.css"
export default async function CampaignOverviewPagePage() {
if (!env.CAMPAIGN_PAGES_ENABLED) {
notFound()
}
return (
<Suspense fallback={<CampaignOverviewPageSkeleton />}>
<CampaignOverviewPage />
</Suspense>
<div className={styles.page}>
<Suspense fallback={<CampaignOverviewPageSkeleton />}>
<CampaignOverviewPage />
</Suspense>
</div>
)
}

3
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/campaign_page/[uid]/page.module.css Normal file
View File

@@ -0,0 +1,3 @@
.page {
background-color: var(--Background-Primary);
}

10
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/campaign_page/[uid]/page.tsx
View File

@@ -6,6 +6,8 @@ import { env } from "@/env/server"
import CampaignPage from "@/components/ContentType/CampaignPage"
import CampaignPageSkeleton from "@/components/ContentType/CampaignPage/CampaignPageSkeleton"
import styles from "./page.module.css"
export { generateMetadata } from "@/utils/metadata/generateMetadata"
export default async function CampaignPagePage() {
@@ -14,8 +16,10 @@ export default async function CampaignPagePage() {
}
return (
<Suspense fallback={<CampaignPageSkeleton />}>
<CampaignPage />
</Suspense>
<div className={styles.page}>
<Suspense fallback={<CampaignPageSkeleton />}>
<CampaignPage />
</Suspense>
</div>
)
}

3
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/collection_page/[uid]/page.module.css Normal file
View File

@@ -0,0 +1,3 @@
.page {
background-color: var(--Background-Primary);
}

8
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/collection_page/[uid]/page.tsx
View File

@@ -1,7 +1,13 @@
import CollectionPage from "@/components/ContentType/StaticPages/CollectionPage"
import styles from "./page.module.css"
export { generateMetadata } from "@/utils/metadata/generateMetadata"
export default function CollectionPagePage() {
return <CollectionPage />
return (
<div className={styles.page}>
<CollectionPage />
</div>
)
}

3
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/content_page/[uid]/page.module.css Normal file
View File

@@ -0,0 +1,3 @@
.page {
background-color: var(--Background-Primary);
}

8
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/content_page/[uid]/page.tsx
View File

@@ -8,6 +8,8 @@ import ContentPage from "@/components/ContentType/StaticPages/ContentPage"
import { getLang } from "@/i18n/serverContext"
import { isLoggedInUser } from "@/utils/isLoggedInUser"
import styles from "./page.module.css"
export { generateMetadata } from "@/utils/metadata/generateMetadata"
export default async function ContentPagePage() {
@@ -24,5 +26,9 @@ export default async function ContentPagePage() {
}
}
return <ContentPage />
return (
<div className={styles.page}>
<ContentPage />
</div>
)
}

3
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_city_page/[uid]/page.module.css Normal file
View File

@@ -0,0 +1,3 @@
.page {
background-color: var(--Background-Secondary);
}

16
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_city_page/[uid]/page.tsx
View File

@@ -3,6 +3,8 @@ import { Suspense } from "react"
import DestinationCityPage from "@/components/ContentType/DestinationPage/DestinationCityPage"
import DestinationCityPageSkeleton from "@/components/ContentType/DestinationPage/DestinationCityPage/DestinationCityPageSkeleton"
import styles from "./page.module.css"
import type { PageArgs } from "@/types/params"
export { generateMetadata } from "@/utils/metadata/generateMetadata"
@@ -12,11 +14,13 @@ export default async function DestinationCityPagePage(
) {
const searchParams = await props.searchParams
return (
<Suspense fallback={<DestinationCityPageSkeleton />}>
<DestinationCityPage
isMapView={searchParams.view === "map"}
filterFromUrl={searchParams.filterFromUrl}
/>
</Suspense>
<div className={styles.page}>
<Suspense fallback={<DestinationCityPageSkeleton />}>
<DestinationCityPage
isMapView={searchParams.view === "map"}
filterFromUrl={searchParams.filterFromUrl}
/>
</Suspense>
</div>
)
}

3
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_country_page/[uid]/page.module.css Normal file
View File

@@ -0,0 +1,3 @@
.page {
background-color: var(--Background-Secondary);
}

22
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_country_page/[uid]/page.tsx
View File

@@ -3,21 +3,25 @@ import { Suspense } from "react"
import DestinationCountryPage from "@/components/ContentType/DestinationPage/DestinationCountryPage"
import DestinationCountryPageSkeleton from "@/components/ContentType/DestinationPage/DestinationCountryPage/DestinationCountryPageSkeleton"
import type { LangParams, PageArgs } from "@/types/params"
import styles from "./page.module.css"
import type { PageArgs } from "@/types/params"
export { generateMetadata } from "@/utils/metadata/generateMetadata"
export default async function DestinationCountryPagePage(
props: PageArgs<LangParams, { view?: "map"; filterFromUrl?: string }>
props: PageArgs<{}, { view?: "map"; filterFromUrl?: string }>
) {
const searchParams = await props.searchParams
return (
<Suspense fallback={<DestinationCountryPageSkeleton />}>
<DestinationCountryPage
// isMapView={searchParams.view === "map"} // Disabled until further notice
filterFromUrl={searchParams.filterFromUrl}
isMapView={false}
/>
</Suspense>
<div className={styles.page}>
<Suspense fallback={<DestinationCountryPageSkeleton />}>
<DestinationCountryPage
// isMapView={searchParams.view === "map"} // Disabled until further notice
filterFromUrl={searchParams.filterFromUrl}
isMapView={false}
/>
</Suspense>
</div>
)
}

3
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_overview_page/[uid]/page.module.css Normal file
View File

@@ -0,0 +1,3 @@
.page {
background-color: var(--Background-Secondary);
}

10
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_overview_page/[uid]/page.tsx
View File

@@ -1,9 +1,13 @@
import DestinationOverviewPage from "@/components/ContentType/DestinationPage/DestinationOverviewPage"
import type { LangParams, PageArgs } from "@/types/params"
import styles from "./page.module.css"
export { generateMetadata } from "@/utils/metadata/generateMetadata"
export default function DestinationOverviewPagePage({}: PageArgs<LangParams>) {
return <DestinationOverviewPage />
export default function DestinationOverviewPagePage() {
return (
<div className={styles.page}>
<DestinationOverviewPage />
</div>
)
}

3
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/hotel_page/[uid]/page.module.css Normal file
View File

@@ -0,0 +1,3 @@
.page {
background-color: var(--Background-Primary);
}

8
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/hotel_page/[uid]/page.tsx
View File

@@ -6,6 +6,8 @@ import HotelMapPage from "@/components/ContentType/HotelMapPage"
import HotelPage from "@/components/ContentType/HotelPage"
import HotelSubpage from "@/components/ContentType/HotelSubpage"
import styles from "./page.module.css"
import type { PageArgs } from "@/types/params"
export { generateMetadata } from "@/utils/metadata/generateMetadata"
@@ -31,5 +33,9 @@ export default async function HotelPagePage(
if (searchParams.view === "map") {
return <HotelMapPage hotelId={hotelPageData.hotel_page_id} />
}
return <HotelPage hotelId={hotelPageData.hotel_page_id} />
return (
<div className={styles.page}>
<HotelPage hotelId={hotelPageData.hotel_page_id} />
</div>
)
}

4
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/layout.module.css
View File

@@ -4,7 +4,3 @@
grid-template-rows: auto 1fr;
position: relative;
}
.container {
background-color: var(--Background-Primary);
}

12
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/layout.tsx
View File

@@ -13,12 +13,10 @@ export default function ContentTypeLayout({
}
>) {
return (
<div className={styles.container}>
<section className={styles.layout}>
{preview}
{breadcrumbs}
{children}
</section>
</div>
<section className={styles.layout}>
{preview}
{breadcrumbs}
{children}
</section>
)
}

3
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/loyalty_page/[uid]/page.module.css Normal file
View File

@@ -0,0 +1,3 @@
.page {
background-color: var(--Background-Primary);
}

8
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/loyalty_page/[uid]/page.tsx
View File

@@ -1,7 +1,13 @@
import LoyaltyPage from "@/components/ContentType/LoyaltyPage"
import styles from "./page.module.css"
export { generateMetadata } from "@/utils/metadata/generateMetadata"
export default function LoyaltyPagePage() {
return <LoyaltyPage />
return (
<div className={styles.page}>
<LoyaltyPage />
</div>
)
}

3
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/start_page/[uid]/page.module.css Normal file
View File

@@ -0,0 +1,3 @@
.page {
background-color: var(--Background-Secondary);
}

8
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/start_page/[uid]/page.tsx
View File

@@ -2,6 +2,8 @@ import { parseBookingWidgetSearchParams } from "@scandic-hotels/booking-flow/uti
import StartPage from "@/components/ContentType/StartPage"
import styles from "./page.module.css"
import type { NextSearchParams, PageArgs } from "@/types/params"
export { generateMetadata } from "@/utils/metadata/generateMetadata"
@@ -12,5 +14,9 @@ export default async function StartPagePage(
const searchParams = await props.searchParams
const booking = parseBookingWidgetSearchParams(searchParams)
return <StartPage booking={booking} />
return (
<div className={styles.page}>
<StartPage booking={booking} />
</div>
)
}

28
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/destinationCityPage.module.css
View File

@@ -6,19 +6,22 @@
"sidebar"
"mainContent";
width: 100%;
gap: var(--Spacing-x4);
margin: 0 auto;
max-width: var(--max-width);
}
.header {
grid-area: header;
background-color: var(--Surface-Secondary-Default);
padding-bottom: var(--Space-x3);
}
.mainContent {
grid-area: mainContent;
display: grid;
gap: var(--Spacing-x6);
padding-bottom: var(--Spacing-x7);
gap: var(--Space-x6);
padding-top: var(--Space-x4);
padding-bottom: var(--Space-x7);
max-width: var(--max-width-page);
width: 100%;
margin: 0 auto;
@@ -28,37 +31,32 @@
grid-area: sidebar;
width: 100%;
height: 100%;
background-color: var(--Base-Surface-Subtle-Normal);
background-color: var(--Surface-Secondary-Default);
}
.experienceList {
list-style: none;
display: flex;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
.pageContainer {
margin: 0 auto;
gap: var(--Spacing-x4);
}
}
@media screen and (min-width: 1367px) {
.pageContainer {
grid-template-areas:
"header sidebar"
"mainContent sidebar";
grid-template-columns: 1fr var(--map-desktop-width);
row-gap: var(--Space-x4);
}
.header {
padding-left: var(--max-width-single-spacing);
padding: 0 var(--max-width-single-spacing) var(--Space-x4);
background-color: var(--Background-Primary);
}
.mainContent {
gap: var(--Spacing-x9);
padding-left: var(--max-width-single-spacing);
gap: var(--Space-x9);
padding: 0 var(--max-width-single-spacing) var(--Space-x7);
}
}

29
apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/destinationCountryPage.module.css
View File

@@ -6,19 +6,22 @@
"sidebar"
"mainContent";
width: 100%;
gap: var(--Spacing-x4);
margin: 0 auto;
max-width: var(--max-width);
}
.header {
grid-area: header;
background-color: var(--Surface-Secondary-Default);
padding-bottom: var(--Space-x3);
}
.mainContent {
grid-area: mainContent;
display: grid;
gap: var(--Spacing-x6);
padding-bottom: var(--Spacing-x7);
gap: var(--Space-x6);
padding-top: var(--Space-x4);
padding-bottom: var(--Space-x7);
max-width: var(--max-width-page);
width: 100%;
margin: 0 auto;
@@ -28,14 +31,14 @@
grid-area: sidebar;
width: 100%;
height: 100%;
background-color: var(--Base-Surface-Subtle-Normal);
background-color: var(--Surface-Secondary-Default);
}
@media screen and (min-width: 768px) {
.pageContainer {
margin: 0 auto;
gap: var(--Spacing-x4);
}
.experienceList {
list-style: none;
display: flex;
gap: var(--Space-x1);
flex-wrap: wrap;
}
@media screen and (min-width: 1367px) {
@@ -44,14 +47,16 @@
"header sidebar"
"mainContent sidebar";
grid-template-columns: 1fr var(--map-desktop-width);
row-gap: var(--Space-x4);
}
.header {
padding-left: var(--max-width-single-spacing);
padding: 0 var(--max-width-single-spacing) var(--Space-x4);
background-color: var(--Background-Primary);
}
.mainContent {
gap: var(--Spacing-x9);
padding-left: var(--max-width-single-spacing);
gap: var(--Space-x9);
padding: 0 var(--max-width-single-spacing) var(--Space-x7);
}
}

6
apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/sidebarContentWrapper.module.css
View File

@@ -1,8 +1,8 @@
.sidebarContent {
display: grid;
align-content: start;
gap: var(--Spacing-x2);
padding: var(--Spacing-x4);
gap: var(--Space-x2);
padding: 0 var(--max-width-single-spacing) var(--Space-x3);
}
.heading {
@@ -13,10 +13,12 @@
.text {
color: var(--Text-Default);
max-width: var(--max-width-text-block);
}
@media screen and (min-width: 1367px) {
.sidebarContent {
position: sticky;
padding: var(--Space-x4) var(--Space-x3);
}
}

2
apps/scandic-web/components/ContentType/DestinationPage/StaticMap/index.tsx
View File

@@ -48,7 +48,7 @@ export default async function DestinationStaticMap({
country={country}
city={city}
coordinates={coordinates}
width={320}
width={332}
height={200}
zoomLevel={getZoomLevel(location?.default_zoom, !!country)}
altText={altText}

3
apps/scandic-web/components/ContentType/DestinationPage/StaticMap/staticMap.module.css
View File

@@ -5,9 +5,6 @@
display: flex;
justify-content: center;
align-items: center;
}
.mapWrapper {
border-radius: var(--Corner-radius-md);
overflow: hidden;
}

4
apps/scandic-web/components/ContentType/StartPage/index.tsx
View File

@@ -28,7 +28,7 @@ export default async function StartPage({
const lang = await getLang()
return (
<div className={styles.background}>
<>
<header className={styles.header}>
<div className={styles.headerContent}>
{header.heading.length ? (
@@ -72,6 +72,6 @@ export default async function StartPage({
})}
</main>
<TrackingSDK pageData={content.tracking} />
</div>
</>
)
}

35
apps/scandic-web/components/ContentType/StartPage/startPage.module.css
View File

@@ -1,7 +1,3 @@
.background {
background-color: var(--Base-Surface-Primary-light-Normal);
}
.header {
height: 560px;
position: relative;
@@ -42,41 +38,10 @@
max-width: 100%;
}
.fauxBookingWidget {
height: 84px;
width: 100%;
}
.floatingBookingWidgetContainer {
height: 0px;
width: 100vw;
display: flex;
justify-content: center;
background-color: green;
}
.floatingBookingWidget {
background: pink;
transform: translateY(-155px);
height: fit-content;
width: 100%;
display: flex;
justify-content: center;
&[data-intersecting="true"] {
background: white;
}
& > * {
max-width: 100%;
}
}
.main {
display: grid;
gap: var(--Spacing-x6);
padding: calc(var(--Spacing-x5) * 2) 0 calc(var(--Spacing-x5) * 4);
background-color: var(--Base-Surface-Primary-light-Normal);
}
.section:empty {