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

feat(SW-828): Moved placeholder image to ImageGallery

Browse Source
This commit is contained in:
Pontus Dreij
2024-11-13 14:18:33 +01:00
parent 16d7f5bf8f
commit 60b6f0457b
8 changed files with 30 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/HotelReservation/HotelCard/index.tsx
View File

@@ -56,12 +56,7 @@ export default function HotelCard({
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
> >
<section className={styles.imageContainer}> <section className={styles.imageContainer}>
{hotelData?.galleryImages && ( <ImageGallery title={hotelData.name} images={hotelData.galleryImages} />
<ImageGallery
title={hotelData.name}
images={hotelData.galleryImages}
/>
)}
<div className={styles.tripAdvisor}> <div className={styles.tripAdvisor}>
<Chip intent="primary" className={styles.tripAdvisor}> <Chip intent="primary" className={styles.tripAdvisor}>
<TripAdvisorIcon color="white" /> <TripAdvisorIcon color="white" />

10
components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
View File

@@ -29,12 +29,10 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
{hotelAttributes && ( {hotelAttributes && (
<section className={styles.wrapper}> <section className={styles.wrapper}>
<div className={styles.imageWrapper}> <div className={styles.imageWrapper}>
{hotelAttributes?.galleryImages && ( <ImageGallery
<ImageGallery title={hotelAttributes.name}
title={hotelAttributes.name} images={hotelAttributes.galleryImages}
images={hotelAttributes.galleryImages} />
/>
)}
{hotelAttributes.ratings?.tripAdvisor && ( {hotelAttributes.ratings?.tripAdvisor && (
<div className={styles.tripAdvisor}> <div className={styles.tripAdvisor}>
<TripAdvisorIcon color="burgundy" /> <TripAdvisorIcon color="burgundy" />

17
components/HotelReservation/SelectRate/ImageGallery/imageGallery.module.css
View File

@@ -15,3 +15,20 @@
.triggerArea { .triggerArea {
cursor: pointer; cursor: pointer;
} }
.imagePlaceholder {
height: 100%;
min-height: 190px;
width: 100%;
background-color: #fff;
background-image: linear-gradient(45deg, #000000 25%, transparent 25%),
linear-gradient(-45deg, #000000 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #000000 75%),
linear-gradient(-45deg, transparent 75%, #000000 75%);
background-size: 160px 160px;
background-position:
0 0,
0 80px,
80px -80px,
-80px 0;
}

3
components/HotelReservation/SelectRate/ImageGallery/index.tsx
View File

@@ -8,6 +8,9 @@ import styles from "./imageGallery.module.css"
import type { ImageGalleryProps } from "@/types/components/hotelReservation/selectRate/imageGallery" import type { ImageGalleryProps } from "@/types/components/hotelReservation/selectRate/imageGallery"
export default function ImageGallery({ images, title }: ImageGalleryProps) { export default function ImageGallery({ images, title }: ImageGalleryProps) {
if (!images || images.length === 0)
return <div className={styles.imagePlaceholder} />
return ( return (
<Lightbox images={images} dialogTitle={title}> <Lightbox images={images} dialogTitle={title}>
<div className={styles.triggerArea} id="lightboxTrigger"> <div className={styles.triggerArea} id="lightboxTrigger">

6
components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
View File

@@ -164,11 +164,7 @@ export default function RoomCard({
</div> </div>
{/*NOTE: images from the test API are hosted on test3.scandichotels.com, {/*NOTE: images from the test API are hosted on test3.scandichotels.com,
which can't be accessed unless on Scandic's Wifi or using Citrix. */} which can't be accessed unless on Scandic's Wifi or using Citrix. */}
{images ? ( <ImageGallery images={images} title={roomConfiguration.roomType} />
<ImageGallery images={images} title={roomConfiguration.roomType} />
) : (
<div className={styles.imagePlaceholder} />
)}
</div> </div>
)} )}
</div> </div>

17
components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
View File

@@ -81,20 +81,3 @@
min-height: 190px; min-height: 190px;
position: relative; position: relative;
} }
.imagePlaceholder {
height: 100%;
min-height: 190px;
width: 100%;
background-color: #fff;
background-image: linear-gradient(45deg, #000000 25%, transparent 25%),
linear-gradient(-45deg, #000000 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #000000 75%),
linear-gradient(-45deg, transparent 75%, #000000 75%);
background-size: 160px 160px;
background-position:
0 0,
0 80px,
80px -80px,
-80px 0;
}

8
components/SidePeeks/RoomSidePeek/index.tsx
View File

@@ -43,11 +43,9 @@ export default function RoomSidePeek({
{ nrOfGuests: occupancy } { nrOfGuests: occupancy }
)} )}
</Body> </Body>
{images && ( <div className={styles.imageContainer}>
<div className={styles.imageContainer}> <ImageGallery images={images} title={room.name} />
<ImageGallery images={images} title={room.name} /> </div>
</div>
)}
<Body color="uiTextHighContrast">{roomDescription}</Body> <Body color="uiTextHighContrast">{roomDescription}</Body>
</div> </div>
<div className={styles.listContainer}> <div className={styles.listContainer}>

2
types/components/hotelReservation/selectRate/imageGallery.ts
View File

@@ -1,3 +1,3 @@
import type { GalleryImage } from "@/types/hotel" import type { GalleryImage } from "@/types/hotel"
export type ImageGalleryProps = { images: GalleryImage[]; title: string } export type ImageGalleryProps = { images?: GalleryImage[]; title: string }