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

Style PhysicalSample card and dialog #45 #54

Browse source
This commit is contained in:
Timothée Goguely 2024-12-11 16:00:00 +01:00
parent ab2740c08a
commit a9761a8232
3 changed files with 82 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/project/PhysicalSample.vue
View file

@ -7,10 +7,18 @@
dismissableMask="true"
class="dialog"
:closeOnEscape="true"
:style="'--cover: url('+physicalSample.cover+')'"
>
<header>
<h2>Titre de la modal</h2>
</header>
<template #header>
<h2 class="text-lg font-serif">{{ physicalSample.title }}</h2>
<time class="font-medium text-sm py-8" :datetime="physicalSample.date">{{ physicalSample.date }}</time>
<p>{{ physicalSample.description }}</p>
</template>
<div class="masonry flow mt-32">
<template v-for="(item, index) in physicalSample.files" :key="item.id">
<img class="rounded-xl" :src="item.url" :alt="item.alt" :data-id="item.id" />
</template>
</div>
</Dialog>
</template>
@ -29,7 +37,5 @@ watch(isOpen, (newValue) => {
router.push({ name: route.name });
});
const { page } = usePageStore();
const step = page.steps[page.steps.length - 1];
const physicalSample = page.steps[page.steps.length - 1];
</script>
<style></style>

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

@ -155,14 +155,16 @@
</template>
<template v-if="step.id === 'physicalSample'">
<header>
<h3>
<router-link :to="'/' + step.uri">{{ step.title }}</router-link>
</h3>
<time :datetime="step.date">{{ step.date }}</time>
<p>{{ step.description }}</p>
</header>
<img :src="step.files[0].url" alt="" loading="lazy">
<div class="card | physical-sample">
<header class="text-center rounded-lg py-32" :style="'--cover: url('+step.cover+')'">
<h3 class="text-lg font-serif">
<router-link :to="'/' + step.uri" class="link-full">{{ step.title }}</router-link>
</h3>
<time class="font-medium text-sm py-8" :datetime="step.date">{{ step.date }}</time>
<p>{{ step.description }}</p>
</header>
<img :src="step.files[0].url" alt="" loading="lazy">
</div>
</template>
<template v-else></template>
</div>
@ -200,3 +202,18 @@ const mergedFiles = computed(() => {
return [...staticFiles, ...dynamicFiles];
});
</script>
<style scoped>
.physical-sample header {
color: var(--color-white);
background: linear-gradient(90deg, hsla(0, 0%, 10%, .5) 0%, hsla(0, 0%, 10%, .9) 50%, hsla(0, 0%, 10%, .9) 100%), var(--cover), var(--color-black);
background-repeat: no-repeat;
background-size: cover;
}
.physical-sample header > * {
padding-inline: var(--space-16);
}
.physical-sample header h3 {
position: initial;
}
</style>