xeno/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: contain project media layouts

Browse Source
This commit is contained in:
LucaP
2026-09-04 21:48:51 +03:00
parent 9cec17e139
commit 8f358c2e0d
5 changed files with 117 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/ProjectMediaGallery.vue
View File

@@ -11,11 +11,15 @@ withDefaults(defineProps<{
<template>
<div v-if="media.length > 0" class="project-media-gallery" :data-media-layout="layout">
<ProjectMedia
<div
v-for="presentation in media"
:key="`${presentation.kind}-${presentation.assetId}`"
:presentation="presentation"
:allow-automatic-video="allowAutomaticVideo"
/>
class="project-media-gallery__item"
>
<ProjectMedia
:presentation="presentation"
:allow-automatic-video="allowAutomaticVideo"
/>
</div>
</div>
</template>

39
src/styles/components.css
View File

@@ -682,13 +682,14 @@
overflow: visible;
}
.project-media-gallery__item,
.project-media-gallery .project-media {
position: relative;
min-inline-size: 0;
overflow: visible;
}
.project-media-gallery .project-media:focus-within {
.project-media-gallery__item:focus-within {
z-index: 1;
}
@@ -704,15 +705,15 @@
padding-inline: 0.5rem;
}
.project-media-gallery[data-media-layout="portrait-strip"] > .project-media + .project-media {
.project-media-gallery[data-media-layout="portrait-strip"] > .project-media-gallery__item + .project-media-gallery__item {
margin-inline-start: -0.75rem;
}
.project-media-gallery[data-media-layout="portrait-strip"] > .project-media:nth-child(even) {
.project-media-gallery[data-media-layout="portrait-strip"] > .project-media-gallery__item:nth-child(even) {
margin-block-start: 1rem;
}
.project-media-gallery[data-media-layout="portrait-strip"] > .project-media:nth-child(3n) {
.project-media-gallery[data-media-layout="portrait-strip"] > .project-media-gallery__item:nth-child(3n) {
margin-block-start: 0.5rem;
}
@@ -720,6 +721,32 @@
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.project-media-gallery[data-media-layout="chart-pair"] > .project-media-gallery__item > .project-media {
display: grid;
grid-template-rows: clamp(12rem, 24vw, 22rem) auto;
position: relative;
align-content: start;
}
.project-media-gallery[data-media-layout="chart-pair"] > .project-media-gallery__item > .project-media > :is(img, video) {
position: absolute;
inset: 0 0 auto;
inline-size: 100% !important;
max-inline-size: 100% !important;
block-size: clamp(12rem, 24vw, 22rem) !important;
max-block-size: clamp(12rem, 24vw, 22rem) !important;
object-fit: contain;
object-position: center;
}
.project-media-gallery[data-media-layout="chart-pair"] > .project-media-gallery__item > .project-media > figcaption {
grid-row: 2;
}
.project-media-gallery[data-media-layout="chart-pair"] > .project-media-gallery__item > .project-media > :not(:is(img, video, figcaption)) {
grid-row: 3;
}
}
.project-media img,
@@ -894,8 +921,8 @@
padding-inline: 0;
}
.project-media-gallery[data-media-layout="portrait-strip"] > .project-media,
.project-media-gallery[data-media-layout="portrait-strip"] > .project-media + .project-media {
.project-media-gallery[data-media-layout="portrait-strip"] > .project-media-gallery__item,
.project-media-gallery[data-media-layout="portrait-strip"] > .project-media-gallery__item + .project-media-gallery__item {
margin-block-start: 0;
margin-inline-start: 0;
}

4
src/styles/print.css
View File

@@ -117,7 +117,11 @@
.project-media-gallery img,
.project-media-gallery video {
max-inline-size: 100%;
max-block-size: min(9in, calc(100vh - 6rem));
inline-size: auto;
block-size: auto;
margin-inline: auto;
object-fit: contain;
}
a {