studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Fix card__images display when multiple images

Browse source
This commit is contained in:
Timothée Goguely 2024-11-20 16:02:20 +01:00
parent 5da3da90a0
commit 3d62eb029e
2 changed files with 14 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/assets/css/src/2.blocks.card.css
View file

@ -45,7 +45,7 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 0; z-index: 0;
} }
.card__images[data-count] { .card__images[data-count]:not([data-count="1"]) {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 50%); grid-template-rows: repeat(2, 50%);
gap: 4px; gap: 4px;
@ -53,12 +53,19 @@
.card__images[data-count] > :first-child { .card__images[data-count] > :first-child {
grid-row-end: span 2; grid-row-end: span 2;
} }
.card__images[data-count="2"] > :last-child {
grid-row-end: span 2;
}
.card__images > img { .card__images > img {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.card__images[data-count]::after { .card__images > img[src$='.svg'],
content: '+'attr(data-count); .card__images > img[src$='.png'] {
background-color: var(--color-white);
}
.card__images[data-plus]::after {
content: '+'attr(data-plus);
position: absolute; position: absolute;
bottom: var(--space-8); bottom: var(--space-8);
right: var(--space-8); right: var(--space-8);

10
src/components/project/ProjectStep.vue
View file

@ -24,9 +24,8 @@
<figure <figure
v-if="step.id.includes('Brief') && step.files[0]?.type === 'image'" v-if="step.id.includes('Brief') && step.files[0]?.type === 'image'"
class="card__images" class="card__images"
:data-count=" :data-count="step.files.dynamic.length"
step.files.length > 3 ? step.files.length - 3 : undefined :data-plus="step.files.dynamic.length > 3 ? step.files.dynamic.length - 3 : undefined"
"
> >
<img <img
v-for="image in step.files.dynamic.slice(0, 3)" v-for="image in step.files.dynamic.slice(0, 3)"
@ -38,9 +37,8 @@
<figure <figure
v-if="step.id === 'virtualSample'" v-if="step.id === 'virtualSample'"
class="card__images" class="card__images"
:data-count=" :data-count="step.files.dynamic.length"
step.files.dynamic.length > 3 ? step.files.dynamic.length - 3 : 0 :data-plus="step.files.dynamic.length > 3 ? step.files.dynamic.length - 3 : undefined"
"
> >
<img <img
v-for="track in step.files.dynamic" v-for="track in step.files.dynamic"