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);

26
app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
View File

@@ -18,7 +18,10 @@ import {
import { ChevronRightIcon } from "@/components/Icons"
import StaticMap from "@/components/Maps/StaticMap"
import Alert from "@/components/TempDesignSystem/Alert"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Preamble from "@/components/TempDesignSystem/Text/Preamble"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import { setLang } from "@/i18n/serverContext"
@@ -66,8 +69,14 @@ export default async function SelectHotelPage({
return (
<>
<header className={styles.header}>
<div>{city.name}</div>
<HotelSorter />
<div className={styles.title}>
<div className={styles.cityInformation}>
<Subtitle>{city.name}</Subtitle>
<Preamble>{hotels.length} hotels</Preamble>
</div>
<HotelSorter />
</div>
<MobileMapButtonContainer city={searchParams.city} />
</header>
<main className={styles.main}>
<div className={styles.sideBar}>
@@ -87,10 +96,14 @@ export default async function SelectHotelPage({
mapType="roadmap"
altText={`Map of ${searchParams.city} city center`}
/>
<div className={styles.mapLinkText}>
{intl.formatMessage({ id: "Show map" })}
<ChevronRightIcon color="burgundy" width={20} height={20} />
</div>
<Button wrapping size="medium" intent="text" theme="base">
{intl.formatMessage({ id: "See map" })}
<ChevronRightIcon
color="baseButtonTextOnFillNormal"
width={20}
height={20}
/>
</Button>
</div>
</Link>
) : (
@@ -105,7 +118,6 @@ export default async function SelectHotelPage({
/>
</div>
)}
<MobileMapButtonContainer city={searchParams.city} />
<HotelFilter filters={filterList} />
</div>
<div className={styles.hotelList}>

6
components/HotelReservation/ReadMore/index.tsx
View File

@@ -23,7 +23,11 @@ export default function ReadMore({ label, hotelId, showCTA }: ReadMoreProps) {
className={styles.detailsButton}
>
{label}
<ChevronRightIcon color="burgundy" height={20} width={20} />
<ChevronRightIcon
color="baseButtonTextOnFillNormal"
height={20}
width={20}
/>
</Button>
)
}

6
components/HotelReservation/SelectHotel/HotelSorter/hotelSorter.module.css
View File

@@ -1,3 +1,9 @@
.container {
width: 339px;
}
@media (max-width: 768px) {
.container {
display: none;
}
}

2
components/HotelReservation/SelectHotel/HotelSorter/index.tsx
View File

@@ -40,7 +40,7 @@ export default function HotelSorter() {
)
const sortItems: SortItem[] = [
{
label: intl.formatMessage({ id: "Distance to city center" }),
label: intl.formatMessage({ id: "Distance to city centre" }),
value: SortOrder.Distance,
},
{ label: intl.formatMessage({ id: "Name" }), value: SortOrder.Name },

36
components/Icons/Logos/ScandicLogo.tsx
View File

@@ -11,52 +11,52 @@ export default function ScandicLogoIcon({
return (
<svg
className={classNames}
xmlns="http://www.w3.org/2000/svg"
width="56"
height="12"
viewBox="0 0 56 12"
width="58"
height="14"
viewBox="0 0 58 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16.2989 11.7377C15.5103 11.9344 14.7216 12 13.9329 12C11.1068 12 9.2666 10.6886 9.2666 7.60673C9.2666 4.65601 11.1726 3.41016 13.8672 3.41016C14.6559 3.41016 15.4445 3.47573 16.2332 3.60687V5.04944C15.6417 4.98387 15.1816 4.9183 14.6559 4.9183C12.487 4.9183 11.4354 5.57401 11.4354 7.73787C11.4354 9.77058 12.4213 10.4919 14.6559 10.4919C15.2474 10.4919 15.7074 10.4263 16.2332 10.3607V11.7377H16.2989Z"
fill="#CD092F"
d="M16.9227 12.9571C16.1038 13.1614 15.285 13.2295 14.4661 13.2295C11.532 13.2295 9.62134 11.8679 9.62134 8.66813C9.62134 5.60455 11.6002 4.31104 14.3979 4.31104C15.2167 4.31104 16.0356 4.37911 16.8544 4.51527V6.01303C16.2403 5.94495 15.7626 5.87687 15.2167 5.87687C12.9649 5.87687 11.8731 6.55766 11.8731 8.80429C11.8731 10.9148 12.8967 11.6636 15.2167 11.6636C15.8309 11.6636 16.3085 11.5956 16.8544 11.5275V12.9571H16.9227Z"
fill="#CD0921"
/>
<path
d="M45.4126 11.8029H47.5157V3.54086H45.4126V11.8029ZM45.4126 1.90157H47.5157V0H45.4126V1.90157Z"
fill="#CD092F"
d="M47.1499 13.0248H49.3335V4.44681H47.1499V13.0248ZM47.1499 2.74482H49.3335V0.770508H47.1499V2.74482Z"
fill="#CD0921"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M43.7049 11.6061C43.3105 11.6717 41.8646 11.934 40.4187 11.934C37.7241 11.934 35.7524 10.6881 35.7524 7.67186C35.7524 4.78672 37.527 3.34414 40.2216 3.34414C40.6159 3.34414 41.2731 3.40971 41.6018 3.40971V0H43.7049C43.7049 0.393429 43.7049 11.4094 43.7049 11.6061ZM41.6675 10.3603V4.98343C41.4046 4.98343 40.9445 4.91786 40.4845 4.91786C38.5785 4.91786 37.8556 5.83586 37.8556 7.73743C37.8556 9.44229 38.5128 10.4914 40.4187 10.4914C40.8131 10.4914 41.2074 10.4259 41.6675 10.3603Z"
fill="#CD092F"
d="M45.3765 12.8206C44.9671 12.8887 43.4659 13.161 41.9647 13.161C39.167 13.161 37.1199 11.8675 37.1199 8.73583C37.1199 5.74032 38.9623 4.24257 41.76 4.24257C42.1694 4.24257 42.8518 4.31065 43.1929 4.31065V0.770508H45.3765C45.3765 1.17899 45.3765 12.6164 45.3765 12.8206ZM43.2612 11.5271V5.94456C42.9882 5.94456 42.5106 5.87648 42.0329 5.87648C40.054 5.87648 39.3034 6.8296 39.3034 8.80391C39.3034 10.574 39.9858 11.6633 41.9647 11.6633C42.3741 11.6633 42.7835 11.5952 43.2612 11.5271Z"
fill="#CD0921"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M34.3727 11.8033H32.3353V6.36087C32.3353 5.44287 31.9409 4.9183 30.6265 4.9183C29.7063 4.9183 28.7205 5.11501 28.7205 5.11501V11.8033H26.6831V3.80359C26.8146 3.80359 29.4435 3.41016 30.9551 3.41016C32.7953 3.41016 34.4384 3.73801 34.4384 6.22973V11.8033H34.3727Z"
fill="#CD092F"
d="M35.6873 13.0252H33.572V7.37462C33.572 6.4215 33.1625 5.87687 31.7978 5.87687C30.8425 5.87687 29.819 6.08111 29.819 6.08111V13.0252H27.7036V4.71951C27.8401 4.71951 30.5696 4.31104 32.139 4.31104C34.0496 4.31104 35.7555 4.65143 35.7555 7.23846V13.0252H35.6873Z"
fill="#CD0921"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M24.9744 11.8025C23.5285 11.9336 22.4112 11.9992 21.1625 11.9992C19.0594 11.9992 17.3506 11.6713 17.3506 9.31075C17.3506 7.01575 19.4537 6.88461 21.3597 6.81904C21.8197 6.81904 22.3455 6.81904 22.8713 6.81904C22.8713 5.37646 22.8056 4.85189 20.7024 4.85189C19.6509 4.85189 18.5336 5.04861 17.8764 5.17975V3.67161C18.665 3.47489 19.9138 3.40932 20.8339 3.34375C23.1999 3.34375 24.9744 3.60604 24.9744 6.09775V11.8025ZM22.8713 10.5566V8.19604C22.477 8.19604 21.754 8.19604 21.4911 8.19604C20.2424 8.19604 19.4537 8.26161 19.4537 9.44189C19.4537 10.6222 20.4396 10.6877 21.4254 10.6877C22.0169 10.6222 22.3455 10.6222 22.8713 10.5566Z"
fill="#CD092F"
d="M25.9296 13.0245C24.4284 13.1606 23.2684 13.2287 21.9719 13.2287C19.7883 13.2287 18.0142 12.8883 18.0142 10.4374C18.0142 8.05465 20.1977 7.91849 22.1766 7.85041C22.6543 7.85041 23.2001 7.85041 23.746 7.85041C23.746 6.35266 23.6778 5.80802 21.4942 5.80802C20.4024 5.80802 19.2424 6.01226 18.5601 6.14842V4.58259C19.3789 4.37835 20.6754 4.31027 21.6307 4.24219C24.0872 4.24219 25.9296 4.51451 25.9296 7.10153V13.0245ZM23.746 11.7309V9.28008C23.3366 9.28008 22.586 9.28008 22.3131 9.28008C21.0166 9.28008 20.1977 9.34816 20.1977 10.5736C20.1977 11.799 21.2213 11.8671 22.2448 11.8671C22.859 11.799 23.2001 11.799 23.746 11.7309Z"
fill="#CD0921"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M55.8629 11.7377C55.0742 11.9344 54.2855 12 53.4969 12C50.6708 12 48.8306 10.6886 48.8306 7.60673C48.8306 4.65601 50.7365 3.41016 53.4312 3.41016C54.2198 3.41016 55.0085 3.47573 55.7972 3.60687V5.04944C55.2057 4.98387 54.7456 4.9183 54.2198 4.9183C52.051 4.9183 50.9994 5.57401 50.9994 7.73787C50.9994 9.77058 51.9853 10.4919 54.2198 10.4919C54.8113 10.4919 55.2714 10.4263 55.7972 10.3607V11.7377H55.8629Z"
fill="#CD092F"
d="M58.0001 12.9571C57.1812 13.1614 56.3624 13.2295 55.5435 13.2295C52.6094 13.2295 50.6987 11.8679 50.6987 8.66813C50.6987 5.60455 52.6776 4.31104 55.4753 4.31104C56.2941 4.31104 57.113 4.37911 57.9318 4.51527V6.01303C57.3177 5.94495 56.84 5.87687 56.2941 5.87687C54.0423 5.87687 52.9505 6.55766 52.9505 8.80429C52.9505 10.9148 53.9741 11.6636 56.2941 11.6636C56.9083 11.6636 57.3859 11.5956 57.9318 11.5275V12.9571H58.0001Z"
fill="#CD0921"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8.21534 8.52287C8.21534 10.949 6.30938 11.9982 3.4833 11.9982C1.64307 11.9982 0.328613 11.6703 0.131445 11.6047V9.89987C0.788672 10.031 2.16885 10.3589 3.35186 10.3589C4.53487 10.3589 6.04649 10.0966 6.04649 8.78515C6.04649 7.93272 5.38926 7.60487 4.20625 7.27701C3.74619 7.14587 3.28613 7.01472 2.82608 6.88358C1.24873 6.42458 0 5.76887 0 3.93287C0 1.31001 2.10313 0.654297 4.53487 0.654297C5.98076 0.654297 7.16377 0.916583 7.36094 0.982154V2.55587C7.09805 2.4903 5.98076 2.22801 4.73203 2.22801C3.54903 2.22801 2.16885 2.35915 2.16885 3.67058C2.16885 4.65415 2.95752 4.91644 4.07481 5.17873C4.60059 5.37544 5.12637 5.44101 5.65215 5.63773C7.03233 6.03115 8.21534 6.68687 8.21534 8.52287Z"
fill="#CD092F"
d="M8.52959 9.61951C8.52959 12.1385 6.55072 13.2277 3.61655 13.2277C1.70592 13.2277 0.341184 12.8873 0.136473 12.8193V11.0492C0.81884 11.1853 2.25181 11.5257 3.48007 11.5257C4.70833 11.5257 6.27778 11.2534 6.27778 9.89183C6.27778 9.00679 5.59541 8.6664 4.36715 8.326C3.88949 8.18984 3.41184 8.05368 2.93418 7.91752C1.2965 7.44096 0 6.76016 0 4.85393C0 2.13075 2.18357 1.44995 4.70833 1.44995C6.20954 1.44995 7.4378 1.72227 7.64251 1.79035V3.42426C7.36956 3.35618 6.20954 3.08386 4.91304 3.08386C3.68478 3.08386 2.25181 3.22002 2.25181 4.58162C2.25181 5.60281 3.07065 5.87513 4.23068 6.14745C4.77657 6.35169 5.32246 6.41977 5.86836 6.62401C7.30133 7.03248 8.52959 7.71328 8.52959 9.61951Z"
fill="#CD0921"
/>
</svg>
)

2
i18n/dictionaries/da.json
View File

@@ -297,6 +297,7 @@
"See details": "Se detaljer",
"See hotel details": "Se hoteloplysninger",
"See less FAQ": "Se mindre FAQ",
"See map": "Vis kort",
"See on map": "Se på kort",
"See room details": "Se værelsesdetaljer",
"See rooms": "Se værelser",
@@ -314,7 +315,6 @@
"Show all amenities": "Vis alle faciliteter",
"Show less": "Vis mindre",
"Show less rooms": "Vise færre rum",
"Show map": "Vis kort",
"Show more": "Vis mere",
"Show more rooms": "Vise flere rum",
"Sign up bonus": "Velkomstbonus",

2
i18n/dictionaries/de.json
View File

@@ -296,6 +296,7 @@
"See details": "Siehe Einzelheiten",
"See hotel details": "Hotelinformationen ansehen",
"See less FAQ": "Weniger anzeigen FAQ",
"See map": "Karte anzeigen",
"See on map": "Karte ansehen",
"See room details": "Zimmerdetails ansehen",
"See rooms": "Zimmer ansehen",
@@ -313,7 +314,6 @@
"Show all amenities": "Alle Annehmlichkeiten anzeigen",
"Show less": "Weniger anzeigen",
"Show less rooms": "Weniger Zimmer anzeigen",
"Show map": "Karte anzeigen",
"Show more": "Mehr anzeigen",
"Show more rooms": "Weitere Räume anzeigen",
"Sign up bonus": "Anmelde-Bonus",

2
i18n/dictionaries/en.json
View File

@@ -325,6 +325,7 @@
"See details": "See details",
"See hotel details": "See hotel details",
"See less FAQ": "See less FAQ",
"See map": "See map",
"See on map": "See on map",
"See room details": "See room details",
"See rooms": "See rooms",
@@ -343,7 +344,6 @@
"Show all amenities": "Show all amenities",
"Show less": "Show less",
"Show less rooms": "Show less rooms",
"Show map": "Show map",
"Show more": "Show more",
"Show more rooms": "Show more rooms",
"Sign up bonus": "Sign up bonus",

2
i18n/dictionaries/fi.json
View File

@@ -298,6 +298,7 @@
"See details": "Katso tiedot",
"See hotel details": "Katso hotellin tiedot",
"See less FAQ": "Katso vähemmän UKK",
"See map": "Näytä kartta",
"See on map": "Näytä kartalla",
"See room details": "Katso huoneen tiedot",
"See rooms": "Katso huoneet",
@@ -315,7 +316,6 @@
"Show all amenities": "Näytä kaikki mukavuudet",
"Show less": "Näytä vähemmän",
"Show less rooms": "Näytä vähemmän huoneita",
"Show map": "Näytä kartta",
"Show more": "Näytä lisää",
"Show more rooms": "Näytä lisää huoneita",
"Sign up bonus": "Liittymisbonus",

2
i18n/dictionaries/no.json
View File

@@ -295,6 +295,7 @@
"See details": "Se detaljer",
"See hotel details": "Se hotellinformasjon",
"See less FAQ": "Se mindre FAQ",
"See map": "Vis kart",
"See on map": "Se på kart",
"See room details": "Se detaljer om rommet",
"See rooms": "Se rom",
@@ -312,7 +313,6 @@
"Show all amenities": "Vis alle fasiliteter",
"Show less": "Vis mindre",
"Show less rooms": "Vise færre rom",
"Show map": "Vis kart",
"Show more": "Vis mer",
"Show more rooms": "Vise flere rom",
"Sign up bonus": "Velkomstbonus",

2
i18n/dictionaries/sv.json
View File

@@ -295,6 +295,7 @@
"See details": "Se detaljer",
"See hotel details": "Se hotellinformation",
"See less FAQ": "See färre FAQ",
"See map": "Visa karta",
"See on map": "Se på karta",
"See room details": "Se rumsdetaljer",
"See rooms": "Se rum",
@@ -312,7 +313,6 @@
"Show all amenities": "Visa alla bekvämligheter",
"Show less": "Visa mindre",
"Show less rooms": "Visa färre rum",
"Show map": "Visa karta",
"Show more": "Visa mer",
"Show more rooms": "Visa fler rum",
"Sign up bonus": "Välkomstbonus",