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

feat: SW-641 Updated UI mobile view

Browse Source
This commit is contained in:
Hrishikesh Vaipurkar
2024-10-17 14:25:23 +02:00
parent fe5256fa1e
commit 5f00b50fe5
5 changed files with 67 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/BookingWidget/bookingWidget.module.css
View File

@@ -42,7 +42,7 @@
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
position: sticky;
top: 0;
z-index: 9;
z-index: 10;
background-color: var(--Base-Surface-Primary-light-Normal);
}

2
components/GuestsRoomsPicker/ChildSelector/index.tsx
View File

@@ -70,7 +70,7 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
roomIndex={roomIndex}
index={index}
child={child}
key={index}
key={"child_" + index}
/>
))}
</>

65
components/GuestsRoomsPicker/GuestsRoomsPicker.tsx
View File

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
import { useGuestsRoomsStore } from "@/stores/guests-rooms"
import { CloseLargeIcon, PlusCircleIcon } from "../Icons"
import { CloseLargeIcon, PlusCircleIcon, PlusIcon } from "../Icons"
import Button from "../TempDesignSystem/Button"
import Divider from "../TempDesignSystem/Divider"
import Subtitle from "../TempDesignSystem/Text/Subtitle"
@@ -65,28 +65,51 @@ export default function GuestsRoomsPicker({
<Divider color="primaryLightSubtle" />
</div>
))}
<div className={styles.addRoomMobileContainer}>
<Tooltip
heading={disabledBookingOptionsHeader}
text={disabledBookingOptionsText}
position="top"
arrow="left"
>
{rooms.length < 4 ? (
<Button
intent="text"
variant="icon"
wrapping
disabled
theme="base"
fullWidth
>
<PlusIcon />
{addRoomLabel}
</Button>
) : null}
</Tooltip>
</div>
</div>
<footer className={styles.footer}>
<Tooltip
heading={disabledBookingOptionsHeader}
text={disabledBookingOptionsText}
position="bottom"
arrow="left"
>
{rooms.length < 4 ? (
<Button
intent="text"
variant="icon"
wrapping
disabled
theme="base"
className={styles.addRoom}
>
<PlusCircleIcon />
{addRoomLabel}
</Button>
) : null}
</Tooltip>
<div className={styles.hideOnMobile}>
<Tooltip
heading={disabledBookingOptionsHeader}
text={disabledBookingOptionsText}
position="top"
arrow="left"
>
{rooms.length < 4 ? (
<Button
intent="text"
variant="icon"
wrapping
disabled
theme="base"
>
<PlusCircleIcon />
{addRoomLabel}
</Button>
) : null}
</Tooltip>
</div>
<Button
onClick={closePicker}
disabled={getFieldState("rooms").invalid}

25
components/GuestsRoomsPicker/guests-rooms-picker.module.css
View File

@@ -34,12 +34,13 @@
.footer {
display: grid;
gap: var(--Spacing-x1);
grid-template-columns: auto auto;
grid-template-columns: auto;
margin-top: var(--Spacing-x2);
}
@media screen and (max-width: 1366px) {
.hideWrapper {
border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
bottom: 0;
left: 0;
position: fixed;
@@ -47,10 +48,10 @@
top: 100%;
transition: top 300ms ease;
z-index: 10002;
overflow: hidden;
}
.container[data-isopen="true"] .hideWrapper {
border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
top: 20px;
}
@@ -106,16 +107,15 @@
z-index: 10;
}
.footer button {
width: 100%;
}
.footer .hideOnMobile {
display: none;
}
.footer .addRoom {
justify-content: start;
.addRoomMobileContainer {
display: grid;
width: 150px;
margin: 0 auto;
padding-bottom: calc(var(--sticky-button-height) + 20px);
}
}
@@ -129,13 +129,20 @@
position: absolute;
top: calc(100% + var(--Spacing-x2) + 1px + var(--Spacing-x4));
width: 360px;
max-height: calc(100dvh - 77px - var(--Spacing-x6));
overflow-y: auto;
}
.header {
display: none;
}
.footer .hideOnDesktop {
.footer {
grid-template-columns: auto auto;
}
.footer .hideOnDesktop,
.addRoomMobileContainer {
display: none;
}
}

9
i18n/dictionaries/en.json
View File

@@ -6,20 +6,21 @@
"About meetings & conferences": "About meetings & conferences",
"About the hotel": "About the hotel",
"Activities": "Activities",
"Add Room": "Add room",
"Add code": "Add code",
"Add new card": "Add new card",
"Address": "Address",
"Airport": "Airport",
"Adults": "Adults",
"Age": "Age",
"Airport": "Airport",
"All our breakfast buffets offer gluten free, vegan, and allergy-friendly options.": "All our breakfast buffets offer gluten free, vegan, and allergy-friendly options.",
"Already a friend?": "Already a friend?",
"Amenities": "Amenities",
"Amusement park": "Amusement park",
"An error occurred. Please try again.": "An error occurred. Please try again.",
"An error occurred trying to manage your preferences, please try again later.": "An error occurred trying to manage your preferences, please try again later.",
"An error occurred when adding a credit card, please try again later.": "An error occurred when adding a credit card, please try again later.",
"An error occurred when trying to update profile.": "An error occurred when trying to update profile.",
"An error occurred. Please try again.": "An error occurred. Please try again.",
"Any changes you've made will be lost.": "Any changes you've made will be lost.",
"Approx.": "Approx.",
"Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?",
@@ -49,8 +50,8 @@
"Check in": "Check in",
"Check out": "Check out",
"Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.",
"Children": "Children",
"Child age is required": "Child age is required",
"Children": "Children",
"Choose room": "Choose room",
"Cities": "Cities",
"City": "City",
@@ -236,9 +237,9 @@
"Restaurant & Bar": "Restaurant & Bar",
"Restaurants & Bars": "Restaurants & Bars",
"Retype new password": "Retype new password",
"Room": "Room",
"Room & Terms": "Room & Terms",
"Room facilities": "Room facilities",
"Room": "Room",
"Rooms": "Rooms",
"Rooms & Guests": "Rooms & Guests",
"Sauna and gym": "Sauna and gym",