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

Merged in feat/book-566-select-rate-design (pull request #3156)

Browse Source 
feat(BOOK-566): align rates if room title breaks on two rows

* feat(BOOK-566): align rates if room title breaks on two rows


Approved-by: Anton Gunnarsson
This commit is contained in:
Linus Flood
2025-11-13 13:53:36 +00:00
parent 6ed5dd1394
commit 0a513fce9c
2 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/index.tsx
View File

@@ -38,16 +38,17 @@ export function RoomListItem({
return ( return (
<li className={classNames}> <li className={classNames}>
<RoomImage <div className={styles.imageAndDetails}>
roomType={room.roomType} <RoomImage
roomTypeCode={room.roomTypeCode} roomType={room.roomType}
roomsLeft={room.roomsLeft} roomTypeCode={room.roomTypeCode}
selectedPackages={selectedPackages.map((pkg) => pkg.code)} roomsLeft={room.roomsLeft}
images={room.roomInfo.images ?? []} selectedPackages={selectedPackages.map((pkg) => pkg.code)}
hotelId={hotelId} images={room.roomInfo.images ?? []}
/> hotelId={hotelId}
<Details roomInfo={room.roomInfo} /> />
<Details roomInfo={room.roomInfo} />
</div>
<div className={styles.container}> <div className={styles.container}>
{room.status === AvailabilityEnum.NotAvailable ? ( {room.status === AvailabilityEnum.NotAvailable ? (
<RoomNotAvailable /> <RoomNotAvailable />

11
packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/roomListItem.module.css
View File

@@ -3,13 +3,19 @@
background-color: #fff; background-color: #fff;
border: 1px solid var(--Base-Border-Subtle); border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-radius-lg);
display: grid; display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 14px; font-size: 14px;
gap: var(--Space-x15);
padding: 0 var(--Space-x2) var(--Space-x2); padding: 0 var(--Space-x2) var(--Space-x2);
position: relative; position: relative;
} }
.imageAndDetails {
display: grid;
gap: var(--Space-x15);
}
div[data-multiroom="true"] .listItem { div[data-multiroom="true"] .listItem {
border: none; border: none;
padding: 0; padding: 0;
@@ -17,6 +23,7 @@ div[data-multiroom="true"] .listItem {
.listItem.noAvailability { .listItem.noAvailability {
opacity: 0.6; opacity: 0.6;
justify-content: flex-start;
} }
.container { .container {