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

fix: refactor breadcrumbs to take page type variants to better match margins

Browse Source
This commit is contained in:
Christel Westerberg
2025-01-03 11:39:24 +01:00
parent 053ef4a1c9
commit 5901cab440
46 changed files with 286 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css
View File

@@ -37,7 +37,8 @@
.listingContainer {
background-color: var(--Base-Surface-Secondary-light-Normal);
padding: var(--Spacing-x3) var(--Spacing-x4);
padding: var(--Spacing-x3) var(--Spacing-x4) var(--Spacing-x3)
var(--Layout-Tablet-Margin-Margin-min);
overflow-y: auto;
min-width: 420px;
width: 420px;
@@ -59,3 +60,10 @@
gap: var(--Spacing-x2);
}
}
@media (min-width: 1367px) {
.listingContainer {
padding: var(--Spacing-x3) var(--Spacing-x4) var(--Spacing-x3)
var(--Layout-Desktop-Margin-Margin-min);
}
}

19
components/HotelReservation/SelectHotel/SelectHotelSkeleton.tsx
View File

@@ -12,15 +12,18 @@ export function SelectHotelSkeleton({ count = 4 }: Props) {
return (
<div className={styles.skeletonContainer}>
<header className={styles.header}>
<div className={styles.breadcrumbs}>
<SkeletonShimmer height={"25px"} width={"300px"} />
</div>
<div className={styles.title}>
<div className={styles.cityInformation}>
<SkeletonShimmer height={"25px"} width={"200px"} />
<div className={styles.headerContent}>
<div className={styles.breadcrumbs}>
<SkeletonShimmer height={"25px"} width={"300px"} />
</div>
<div className={styles.sorter}>
<SkeletonShimmer height={"60px"} width={"100%"} />
<div className={styles.title}>
<div className={styles.cityInformation}>
<SkeletonShimmer height={"25px"} width={"200px"} />
</div>
<div className={styles.sorter}>
<SkeletonShimmer height={"60px"} width={"100%"} />
</div>
</div>
</div>
</header>

20
components/HotelReservation/SelectHotel/index.tsx
View File

@@ -133,17 +133,19 @@ export default async function SelectHotel({
return (
<>
<header className={styles.header}>
<Breadcrumbs breadcrumbs={breadcrumbs} />
<div className={styles.title}>
<div className={styles.cityInformation}>
<Subtitle>{city.name}</Subtitle>
<HotelCount />
</div>
<div className={styles.sorter}>
<HotelSorter discreet />
<div className={styles.headerContent}>
<Breadcrumbs breadcrumbs={breadcrumbs} />
<div className={styles.title}>
<div className={styles.cityInformation}>
<Subtitle>{city.name}</Subtitle>
<HotelCount />
</div>
<div className={styles.sorter}>
<HotelSorter discreet />
</div>
</div>
<MobileMapButtonContainer filters={filterList} />
</div>
<MobileMapButtonContainer filters={filterList} />
</header>
<main className={styles.main}>
<div className={styles.sideBar}>

30
components/HotelReservation/SelectHotel/selectHotel.module.css
View File

@@ -1,21 +1,25 @@
.main {
display: flex;
padding: 0 var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x2);
background-color: var(--Scandic-Brand-Warm-White);
min-height: 100dvh;
flex-direction: column;
max-width: var(--max-width);
max-width: var(--max-width-page);
margin: 0 auto;
}
.header {
padding: var(--Spacing-x3) 0 var(--Spacing-x2);
}
.headerContent {
max-width: var(--max-width-page);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
padding: var(--Spacing-x3) var(--Spacing-x2) 0 var(--Spacing-x2);
}
.header nav {
.headerContent nav {
display: none;
}
@@ -70,16 +74,18 @@
@media (min-width: 768px) {
.main {
padding: var(--Spacing-x5);
}
.header {
display: block;
background-color: var(--Base-Surface-Subtle-Normal);
padding: var(--Spacing-x4) var(--Spacing-x5) var(--Spacing-x3)
var(--Spacing-x5);
padding: var(--Spacing-x5) 0;
}
.header nav {
.headerContent {
display: block;
}
.header {
background-color: var(--Base-Surface-Subtle-Normal);
padding: var(--Spacing-x4) 0 var(--Spacing-x3);
}
.headerContent nav {
display: block;
max-width: var(--max-width-navigation);
padding: 0;