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

feat/SW-604-select-hotel-page-UI (pull request #905)

Browse Source 
Feat/SW-604 select hotel page UI

* feat(SW-604): update header, scandic logo, and map text

* feat(SW-604): fix map button

* feat(SW-604): fix align header

* feat(SW-604): hide filter for mobile

* feat(SW-604): fix padding

* feat(SW-604): fix padding again

* feat(SW-604): fix mobile design

* feat(SW-604): fix padding


Approved-by: Pontus Dreij
This commit is contained in:
Bianca Widstam
2024-11-15 10:15:26 +00:00
parent 06da80c9f0
commit ef2ef3c9a8
12 changed files with 82 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css
View File

@@ -1,21 +1,23 @@
.main {
display: flex;
gap: var(--Spacing-x3);
padding: var(--Spacing-x4) var(--Spacing-x4) 0 var(--Spacing-x4);
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);
margin: 0 auto;
}
.header {
display: flex;
margin: 0 auto;
padding: var(--Spacing-x4) var(--Spacing-x5) var(--Spacing-x3)
var(--Spacing-x5);
justify-content: space-between;
max-width: var(--max-width);
flex-direction: column;
gap: var(--Spacing-x2);
padding: var(--Spacing-x3) var(--Spacing-x2) 0 var(--Spacing-x2);
}
.cityInformation {
display: flex;
flex-wrap: wrap;
gap: var(--Spacing-x1);
}
.sideBar {
@@ -46,6 +48,23 @@
}
@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);
}
.title {
margin: 0 auto;
display: flex;
max-width: var(--max-width-navigation);
align-items: center;
justify-content: space-between;
}
.link {
display: flex;
padding-bottom: var(--Spacing-x6);
@@ -57,13 +76,6 @@
border-radius: var(--Corner-radius-Medium);
border: 1px solid var(--Base-Border-Subtle);
}
.mapLinkText {
display: flex;
align-items: center;
justify-content: center;
gap: var(--Spacing-x-half);
padding: var(--Spacing-x-one-and-half) var(--Spacing-x0);
}
.main {
flex-direction: row;
gap: var(--Spacing-x5);