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

feat(SW-828): Added placeholder image

Browse Source
This commit is contained in:
Pontus Dreij
2024-11-13 11:59:55 +01:00
parent f782b69c33
commit d5efda747a
2 changed files with 21 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,6 @@ import { RateDefinition } from "@/server/routers/hotels/output"
import ToggleSidePeek from "@/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek"
import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -165,8 +164,10 @@ export default function RoomCard({
</div>
{/*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. */}
{images && (
{images ? (
<ImageGallery images={images} title={roomConfiguration.roomType} />
) : (
<div className={styles.imagePlaceholder} />
)}
</div>
)}

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

@@ -78,6 +78,23 @@
}
.imageContainer {
min-height: 185px;
min-height: 190px;
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;
}