feat(SW-3152): Respecting image aspect ratio inside image gallery/lightbox
* 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
@@ -1,12 +1,13 @@
|
||||
.fullViewContainer {
|
||||
.fullView {
|
||||
background-color: var(--UI-Text-High-contrast);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: var(--Space-x3) var(--Space-x2);
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
place-content: center;
|
||||
gap: var(--Space-x5);
|
||||
@@ -32,31 +33,45 @@
|
||||
color: var(--Text-Inverted);
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
.content {
|
||||
position: relative;
|
||||
width: 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 {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Space-x2);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: min(1454px, 100%);
|
||||
height: min(1454px, 100%);
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
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%;
|
||||
}
|
||||
|
||||
.imageCaption {
|
||||
.caption {
|
||||
color: var(--Text-Inverted);
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--Space-x5));
|
||||
}
|
||||
|
||||
@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) {
|
||||
.closeButton {
|
||||
position: fixed;
|
||||
top: var(--Space-x15);
|
||||
right: var(--Space-x15);
|
||||
}
|
||||
|
||||
.fullViewContainer {
|
||||
margin-top: 0;
|
||||
.fullView {
|
||||
padding: var(--Space-x5);
|
||||
grid-template-rows: auto 1fr auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
width: 70%;
|
||||
max-width: 1454px;
|
||||
max-height: 700px;
|
||||
.closeButton {
|
||||
top: var(--Space-x4);
|
||||
right: var(--Space-x4);
|
||||
}
|
||||
|
||||
.navigationButton {
|
||||
position: absolute;
|
||||
top: 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 {
|
||||
background-color: var(--Component-Button-Inverted-Fill-Hover);
|
||||
color: var(--Component-Button-Inverted-On-fill-Hover);
|
||||
&.next {
|
||||
right: var(--Space-x5);
|
||||
}
|
||||
&.prev {
|
||||
left: var(--Space-x5);
|
||||
}
|
||||
}
|
||||
|
||||
.fullViewNextButton {
|
||||
right: var(--Space-x5);
|
||||
}
|
||||
|
||||
.fullViewPrevButton {
|
||||
left: var(--Space-x5);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,8 +10,8 @@ import { IconButton } from '../../IconButton'
|
||||
import { MaterialIcon } from '../../Icons/MaterialIcon'
|
||||
import { Typography } from '../../Typography'
|
||||
|
||||
import styles from './fullView.module.css'
|
||||
import { LightboxImage } from '../index'
|
||||
import styles from './fullView.module.css'
|
||||
|
||||
type FullViewProps = {
|
||||
image: LightboxImage
|
||||
@@ -36,8 +36,14 @@ export default function FullView({
|
||||
const [animateLeft, setAnimateLeft] = useState(true)
|
||||
|
||||
function handleSwipe(offset: number) {
|
||||
if (offset > 30) onPrev()
|
||||
if (offset < -30) onNext()
|
||||
if (offset > 30) {
|
||||
setAnimateLeft(false)
|
||||
onPrev()
|
||||
}
|
||||
if (offset < -30) {
|
||||
setAnimateLeft(true)
|
||||
onNext()
|
||||
}
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
@@ -79,7 +85,7 @@ export default function FullView({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.fullViewContainer}>
|
||||
<div className={styles.fullView}>
|
||||
<IconButton
|
||||
theme="Inverted"
|
||||
style="Muted"
|
||||
@@ -99,7 +105,7 @@ export default function FullView({
|
||||
</span>
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={styles.imageContainer}>
|
||||
<div className={styles.content}>
|
||||
<AnimatePresence initial={false} custom={animateLeft}>
|
||||
<motion.div
|
||||
key={image.src}
|
||||
@@ -109,42 +115,42 @@ export default function FullView({
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
transition={{ duration: 0.3 }}
|
||||
className={styles.imageWrapper}
|
||||
className={styles.motionContainer}
|
||||
drag="x"
|
||||
onDragEnd={(_e, info) => handleSwipe(info.offset.x)}
|
||||
>
|
||||
{image.caption && !hideLabel ? (
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p className={styles.imageCaption}>{image.caption}</p>
|
||||
</Typography>
|
||||
) : null}
|
||||
<Image
|
||||
alt={image.alt}
|
||||
fill
|
||||
sizes="(min-width: 1500px) 1500px, 100vw"
|
||||
src={image.src}
|
||||
className={styles.image}
|
||||
/>
|
||||
<div className={styles.imageWrapper}>
|
||||
<Image
|
||||
alt={image.alt}
|
||||
fill
|
||||
sizes="90vw"
|
||||
src={image.src}
|
||||
className={styles.image}
|
||||
/>
|
||||
{image.caption && !hideLabel ? (
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p className={styles.caption}>{image.caption}</p>
|
||||
</Typography>
|
||||
) : null}
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<motion.button
|
||||
className={`${styles.navigationButton} ${styles.fullViewPrevButton}`}
|
||||
<IconButton
|
||||
theme="Inverted"
|
||||
className={`${styles.navigationButton} ${styles.prev}`}
|
||||
onClick={handlePrev}
|
||||
>
|
||||
<MaterialIcon
|
||||
icon="arrow_back"
|
||||
color="CurrentColor"
|
||||
className={styles.leftTransformIcon}
|
||||
/>
|
||||
</motion.button>
|
||||
<motion.button
|
||||
className={`${styles.navigationButton} ${styles.fullViewNextButton}`}
|
||||
<MaterialIcon icon="arrow_back" color="CurrentColor" />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
theme="Inverted"
|
||||
className={`${styles.navigationButton} ${styles.next}`}
|
||||
onClick={handleNext}
|
||||
>
|
||||
<MaterialIcon icon="arrow_forward" color="CurrentColor" />
|
||||
</motion.button>
|
||||
</IconButton>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user