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

Merged in fix/BOOK-429-image-meeting-card (pull request #3364)

Browse Source 
fix(BOOK-429): adjust image layout for meeting room cards

* fix(BOOK-429): adjust image layout for meeting room cards


Approved-by: Matilda Haneling
Approved-by: Anton Gunnarsson
Approved-by: Matilda Landström
This commit is contained in:
Bianca Widstam
2025-12-17 13:05:49 +00:00
parent 6ee262ad89
commit 42197b5ad2
2 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/hotelListingItem.module.css
View File

@@ -8,8 +8,14 @@
.image { .image {
width: 100%; width: 100%;
height: 200px; height: 100%;
object-fit: cover; object-fit: cover;
border-radius: inherit;
}
.imageWrapper {
position: relative;
height: 200px;
} }
.content { .content {
@@ -41,7 +47,7 @@
grid-template-columns: minmax(250px, 350px) auto; grid-template-columns: minmax(250px, 350px) auto;
} }
.image { .imageWrapper {
height: 100%; height: 100%;
} }

26
apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx
View File

@@ -43,18 +43,20 @@ export default async function HotelListingItem({
return ( return (
<article className={styles.container}> <article className={styles.container}>
{image?.src ? ( <div className={styles.imageWrapper}>
<Image {image?.src ? (
src={image.src} <Image
alt={image.altText || image.altText_En} src={image.src}
width={400} alt={image.altText || image.altText_En}
height={300} fill
sizes="(min-width: 768px) 400px, 100vw" sizes="(min-width: 768px) 700px, 100vw"
className={styles.image} className={styles.image}
/> />
) : ( ) : (
<ImageFallback className={styles.image} /> <ImageFallback className={styles.image} />
)} )}
</div>
<section className={styles.content}> <section className={styles.content}>
<div className={styles.intro}> <div className={styles.intro}>
<HotelLogoIcon hotelId={id} hotelType={hotelType} /> <HotelLogoIcon hotelId={id} hotelType={hotelType} />