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

feat(SW-3152): Respecting image aspect ratio inside image gallery/lightbox

Browse Source 
* feat(SW-3152): Respecting image aspect ratio inside image gallery/lightbox
* feat(BOOK-144): Make image clickable instead of a button to avoid being able to click outside of the image area

Approved-by: Bianca Widstam
Approved-by: Chuma Mcphoy (We Ahead)
This commit is contained in:
Erik Tiekstra
2025-09-15 09:02:48 +00:00
parent 800948bb94
commit b437f8b806
5 changed files with 122 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css
View File

@@ -48,7 +48,7 @@
.address { .address {
color: var(--Text-Secondary); color: var(--Text-Secondary);
gap: var(--Space-x05); gap: var(--Space-x05);
align-items: start; align-items: flex-start;
display: flex; display: flex;
} }

98
packages/design-system/lib/components/Lightbox/FullView/fullView.module.css
View File

@@ -1,12 +1,13 @@
.fullViewContainer { .fullView {
background-color: var(--UI-Text-High-contrast); background-color: var(--UI-Text-High-contrast);
width: 100%;
height: 100%; height: 100%;
padding: var(--Space-x3) var(--Space-x2); padding: var(--Space-x3) var(--Space-x2);
position: relative; position: relative;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
display: grid; display: grid;
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr;
grid-template-columns: 1fr; grid-template-columns: 1fr;
place-content: center; place-content: center;
gap: var(--Space-x5); gap: var(--Space-x5);
@@ -32,31 +33,45 @@
color: var(--Text-Inverted); color: var(--Text-Inverted);
} }
.imageContainer { .content {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
max-height: 25rem; }
margin-top: var(--Space-x5);
/* This container needs to be absolutely positioned because otherwise the animation won't work correctly */
.motionContainer {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
} }
.imageWrapper { .imageWrapper {
position: absolute; position: relative;
width: 100%; display: flex;
height: 100%; flex-direction: column;
gap: var(--Space-x2);
align-items: center;
justify-content: center;
width: min(1454px, 100%);
height: min(1454px, 100%);
} }
.image { .image {
width: 100%; object-fit: contain;
height: 100%;
object-fit: cover;
border-radius: var(--Corner-radius-Medium); border-radius: var(--Corner-radius-Medium);
/* Override Next.js Image styles, we can't set width/height on the image as we don't know the aspect ratio of the image */
width: auto !important;
height: auto !important;
position: relative !important;
max-width: 100%;
max-height: 100%;
} }
.imageCaption { .caption {
color: var(--Text-Inverted); color: var(--Text-Inverted);
position: absolute;
top: calc(-1 * var(--Space-x5));
} }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
@@ -65,63 +80,26 @@
} }
} }
@media screen and (min-width: 768px) and (max-width: 1366px) {
.fullViewContainer {
padding: var(--Space-x5);
}
.imageContainer {
height: 100%;
max-height: 560px;
}
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.closeButton { .fullView {
position: fixed;
top: var(--Space-x15);
right: var(--Space-x15);
}
.fullViewContainer {
margin-top: 0;
padding: var(--Space-x5); padding: var(--Space-x5);
grid-template-rows: auto 1fr auto;
width: 100%;
height: 100%;
} }
.imageContainer { .closeButton {
width: 70%; top: var(--Space-x4);
max-width: 1454px; right: var(--Space-x4);
max-height: 700px;
} }
.navigationButton { .navigationButton {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
background-color: var(--Component-Button-Inverted-Fill-Default);
color: var(--Component-Button-Inverted-On-fill-Default);
border-radius: var(--Corner-radius-rounded);
padding: 10px;
cursor: pointer;
border-width: 0;
display: flex;
z-index: 1;
box-shadow: 0px 0px 8px 1px #0000001a;
&:hover { &.next {
background-color: var(--Component-Button-Inverted-Fill-Hover); right: var(--Space-x5);
color: var(--Component-Button-Inverted-On-fill-Hover); }
&.prev {
left: var(--Space-x5);
} }
} }
.fullViewNextButton {
right: var(--Space-x5);
}
.fullViewPrevButton {
left: var(--Space-x5);
}
} }

64
packages/design-system/lib/components/Lightbox/FullView/index.tsx
View File

@@ -10,8 +10,8 @@ import { IconButton } from '../../IconButton'
import { MaterialIcon } from '../../Icons/MaterialIcon' import { MaterialIcon } from '../../Icons/MaterialIcon'
import { Typography } from '../../Typography' import { Typography } from '../../Typography'
import styles from './fullView.module.css'
import { LightboxImage } from '../index' import { LightboxImage } from '../index'
import styles from './fullView.module.css'
type FullViewProps = { type FullViewProps = {
image: LightboxImage image: LightboxImage
@@ -36,8 +36,14 @@ export default function FullView({
const [animateLeft, setAnimateLeft] = useState(true) const [animateLeft, setAnimateLeft] = useState(true)
function handleSwipe(offset: number) { function handleSwipe(offset: number) {
if (offset > 30) onPrev() if (offset > 30) {
if (offset < -30) onNext() setAnimateLeft(false)
onPrev()
}
if (offset < -30) {
setAnimateLeft(true)
onNext()
}
} }
function handleNext() { function handleNext() {
@@ -79,7 +85,7 @@ export default function FullView({
} }
return ( return (
<div className={styles.fullViewContainer}> <div className={styles.fullView}>
<IconButton <IconButton
theme="Inverted" theme="Inverted"
style="Muted" style="Muted"
@@ -99,7 +105,7 @@ export default function FullView({
</span> </span>
</Typography> </Typography>
</div> </div>
<div className={styles.imageContainer}> <div className={styles.content}>
<AnimatePresence initial={false} custom={animateLeft}> <AnimatePresence initial={false} custom={animateLeft}>
<motion.div <motion.div
key={image.src} key={image.src}
@@ -109,42 +115,42 @@ export default function FullView({
animate="animate" animate="animate"
exit="exit" exit="exit"
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
className={styles.imageWrapper} className={styles.motionContainer}
drag="x" drag="x"
onDragEnd={(_e, info) => handleSwipe(info.offset.x)} onDragEnd={(_e, info) => handleSwipe(info.offset.x)}
> >
{image.caption && !hideLabel ? ( <div className={styles.imageWrapper}>
<Typography variant="Body/Paragraph/mdRegular"> <Image
<p className={styles.imageCaption}>{image.caption}</p> alt={image.alt}
</Typography> fill
) : null} sizes="90vw"
<Image src={image.src}
alt={image.alt} className={styles.image}
fill />
sizes="(min-width: 1500px) 1500px, 100vw" {image.caption && !hideLabel ? (
src={image.src} <Typography variant="Body/Paragraph/mdRegular">
className={styles.image} <p className={styles.caption}>{image.caption}</p>
/> </Typography>
) : null}
</div>
</motion.div> </motion.div>
</AnimatePresence> </AnimatePresence>
</div> </div>
<motion.button <IconButton
className={`${styles.navigationButton} ${styles.fullViewPrevButton}`} theme="Inverted"
className={`${styles.navigationButton} ${styles.prev}`}
onClick={handlePrev} onClick={handlePrev}
> >
<MaterialIcon <MaterialIcon icon="arrow_back" color="CurrentColor" />
icon="arrow_back" </IconButton>
color="CurrentColor" <IconButton
className={styles.leftTransformIcon} theme="Inverted"
/> className={`${styles.navigationButton} ${styles.next}`}
</motion.button>
<motion.button
className={`${styles.navigationButton} ${styles.fullViewNextButton}`}
onClick={handleNext} onClick={handleNext}
> >
<MaterialIcon icon="arrow_forward" color="CurrentColor" /> <MaterialIcon icon="arrow_forward" color="CurrentColor" />
</motion.button> </IconButton>
</div> </div>
) )
} }

52
packages/design-system/lib/components/Lightbox/Gallery/gallery.module.css
View File

@@ -1,4 +1,4 @@
.galleryContainer { .gallery {
display: grid; display: grid;
gap: var(--Space-x2); gap: var(--Space-x2);
padding: var(--Space-x2); padding: var(--Space-x2);
@@ -32,7 +32,6 @@
border-width: 0; border-width: 0;
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
border-radius: var(--Corner-radius-md);
overflow: hidden; overflow: hidden;
z-index: 0; z-index: 0;
@@ -45,6 +44,7 @@
transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
object-fit: cover; object-fit: cover;
z-index: -1; z-index: -1;
border-radius: var(--Corner-radius-md);
} }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
@@ -53,7 +53,7 @@
display: none; display: none;
} }
.galleryContainer { .gallery {
align-content: start; align-content: start;
} }
@@ -68,8 +68,8 @@
display: none; display: none;
} }
.galleryContainer { .gallery {
padding: var(--Spacing-x5) var(--Spacing-x6); padding: var(--Space-x5) var(--Space-x6);
} }
.closeButton { .closeButton {
@@ -81,42 +81,56 @@
.desktopGallery { .desktopGallery {
display: grid; display: grid;
grid-template-rows: 28px 1fr 7.8125rem; grid-template-rows: 28px 1fr 125px;
row-gap: var(--Spacing-x-one-and-half); row-gap: var(--Space-x15);
background-color: var(--Background-Primary); background-color: var(--Background-Primary);
height: 100%; height: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.galleryHeader { .header {
display: flex; display: flex;
align-items: center; justify-content: center;
} }
.imageCaption { .caption {
background-color: var(--Base-Surface-Subtle-Normal); background-color: var(--Base-Surface-Subtle-Normal);
padding: var(--Spacing-x-half) var(--Spacing-x1); padding: var(--Space-x05) var(--Space-x1);
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-radius-sm);
color: var(--Text-Secondary); color: var(--Text-Secondary);
} }
.mainImageWrapper { .content {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%;
} }
.mainImageContainer { .motionContainer {
width: 100%;
height: 100%;
will-change: transform;
position: absolute; position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.mainImage {
object-fit: contain;
border-radius: var(--Corner-radius-Medium);
/* Override Next.js Image styles, we can't set width/height on the image as we don't know the aspect ratio of the image */
width: auto !important;
height: auto !important;
position: relative !important;
max-width: 100%;
max-height: 100%;
cursor: pointer;
} }
.desktopThumbnailGrid { .desktopThumbnailGrid {
display: grid; display: grid;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);
gap: var(--Spacing-x1); gap: var(--Space-x1);
max-height: 7.8125rem; max-height: 7.8125rem;
overflow: hidden; overflow: hidden;
} }
@@ -155,10 +169,10 @@
} }
.galleryPrevButton { .galleryPrevButton {
left: var(--Spacing-x2); left: var(--Space-x2);
} }
.galleryNextButton { .galleryNextButton {
right: var(--Spacing-x2); right: var(--Space-x2);
} }
} }

32
packages/design-system/lib/components/Lightbox/Gallery/index.tsx
View File

@@ -85,7 +85,7 @@ export default function Gallery({
} }
return ( return (
<div className={styles.galleryContainer}> <div className={styles.gallery}>
<IconButton <IconButton
theme="Black" theme="Black"
style="Muted" style="Muted"
@@ -112,17 +112,17 @@ export default function Gallery({
{/* Desktop Gallery */} {/* Desktop Gallery */}
<div className={styles.desktopGallery}> <div className={styles.desktopGallery}>
<Typography variant="Body/Supporting text (caption)/smRegular"> <Typography variant="Body/Supporting text (caption)/smRegular">
<p className={styles.galleryHeader}> <p className={styles.header}>
{mainImage.caption && !hideLabel && ( {mainImage.caption && !hideLabel && (
<span className={styles.imageCaption}>{mainImage.caption}</span> <span className={styles.caption}>{mainImage.caption}</span>
)} )}
</p> </p>
</Typography> </Typography>
<div className={styles.mainImageWrapper}> <div className={styles.content}>
<AnimatePresence initial={false} custom={animateLeft}> <AnimatePresence initial={false} custom={animateLeft}>
<motion.div <motion.div
key={mainImage.src} key={mainImage.src}
className={styles.mainImageContainer} className={styles.motionContainer}
custom={animateLeft} custom={animateLeft}
variants={variants} variants={variants}
initial="initial" initial="initial"
@@ -130,21 +130,19 @@ export default function Gallery({
exit="exit" exit="exit"
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
> >
<ButtonRAC <Image
onPress={onImageClick} src={mainImage.src}
className={styles.imageButton} alt={mainImage.alt}
fill
sizes="(min-width: 1000px) 1000px, 100vw"
className={styles.mainImage}
onClick={onImageClick}
tabIndex={0}
aria-label={intl.formatMessage({ aria-label={intl.formatMessage({
defaultMessage: 'Open image', defaultMessage: 'Open image',
})} })}
> role="button"
<Image />
src={mainImage.src}
alt={mainImage.alt}
fill
sizes="(min-width: 1000px) 1000px, 100vw"
className={styles.image}
/>
</ButtonRAC>
</motion.div> </motion.div>
</AnimatePresence> </AnimatePresence>
<motion.button <motion.button