Style PhysicalSample card and dialog #45 #54

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

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>