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
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/destinationCityPage.module.css
+13 -15
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);
}
}
apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/destinationCountryPage.module.css
+17 -12
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);
}
}
apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/sidebarContentWrapper.module.css
+4 -2
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);
}
}
apps/scandic-web/components/ContentType/DestinationPage/StaticMap/index.tsx
+1 -1
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}
apps/scandic-web/components/ContentType/DestinationPage/StaticMap/staticMap.module.css
-3
View File
@@ -5,9 +5,6 @@
display: flex;
justify-content: center;
align-items: center;
}
.mapWrapper {
border-radius: var(--Corner-radius-md);
overflow: hidden;
}
apps/scandic-web/components/ContentType/StartPage/index.tsx
+2 -2
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>
</>
)
}
apps/scandic-web/components/ContentType/StartPage/startPage.module.css
-35
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 {