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

Merged in feat/SW-2039-move-fullview-caption (pull request #2543)

Browse Source 
feat(SW-2039): move fullview image caption from bottom to the top of image

* feat(SW-2039): move fullview image caption to the top


Approved-by: Chuma Mcphoy (We Ahead)
This commit is contained in:
Matilda Landström
2025-07-10 07:42:38 +00:00
parent 233c685e52
commit 5f9af2701e
2 changed files with 16 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/scandic-web/components/Lightbox/FullView/fullView.module.css
View File

@@ -1,7 +1,7 @@
.fullViewContainer { .fullViewContainer {
background-color: var(--UI-Text-High-contrast); background-color: var(--UI-Text-High-contrast);
height: 100%; height: 100%;
padding: var(--Spacing-x3) var(--Spacing-x2); padding: var(--Space-x3) var(--Space-x2);
position: relative; position: relative;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
@@ -9,7 +9,7 @@
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr; grid-template-columns: 1fr;
place-content: center; place-content: center;
gap: var(--Spacing-x5); gap: var(--Space-x5);
} }
.closeButton { .closeButton {
@@ -37,7 +37,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
max-height: 25rem; max-height: 25rem;
margin-bottom: var(--Spacing-x5); margin-top: var(--Space-x5);
} }
.imageWrapper { .imageWrapper {
@@ -52,10 +52,10 @@
object-fit: cover; object-fit: cover;
} }
.footer { .imageCaption {
color: var(--Text-Inverted); color: var(--Text-Inverted);
position: absolute; position: absolute;
bottom: calc(-1 * var(--Spacing-x5)); top: calc(-1 * var(--Space-x5));
} }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
@@ -66,7 +66,7 @@
@media screen and (min-width: 768px) and (max-width: 1366px) { @media screen and (min-width: 768px) and (max-width: 1366px) {
.fullViewContainer { .fullViewContainer {
padding: var(--Spacing-x5); padding: var(--Space-x5);
} }
.imageContainer { .imageContainer {
@@ -78,13 +78,13 @@
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.closeButton { .closeButton {
position: fixed; position: fixed;
top: var(--Spacing-x-one-and-half); top: var(--Space-x15);
right: var(--Spacing-x-half); right: var(--Space-x15);
} }
.fullViewContainer { .fullViewContainer {
margin-top: 0; margin-top: 0;
padding: var(--Spacing-x5); padding: var(--Space-x5);
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -117,10 +117,10 @@
} }
.fullViewNextButton { .fullViewNextButton {
right: var(--Spacing-x5); right: var(--Space-x5);
} }
.fullViewPrevButton { .fullViewPrevButton {
left: var(--Spacing-x5); left: var(--Space-x5);
} }
} }

11
apps/scandic-web/components/Lightbox/FullView/index.tsx
View File

@@ -88,6 +88,11 @@ export default function FullView({
drag="x" drag="x"
onDragEnd={(_e, info) => handleSwipe(info.offset.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 <Image
alt={image.alt} alt={image.alt}
fill fill
@@ -95,12 +100,6 @@ export default function FullView({
src={image.src} src={image.src}
className={styles.image} className={styles.image}
/> />
{image.caption && !hideLabel ? (
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.footer}>{image.caption}</p>
</Typography>
) : null}
</motion.div> </motion.div>
</AnimatePresence> </AnimatePresence>
</div> </div>