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

Project view > Kanban + project card clickable

Browse source
This commit is contained in:
isUnknown 2024-11-05 14:14:40 +01:00
parent ac48b4166a
commit 4d1811830c
5 changed files with 77 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/project/Project.vue
View file

@ -1,19 +1,23 @@
<template>
<article class="project-item | flex | rounded-2xl | px-32 py-32">
<hgroup>
<h3>{{ project.title }}</h3>
<p>
Dernière mise à jour le
<time :datetime="project.modified">{{ frenchFormattedModified }}</time>
</p>
</hgroup>
<img :src="project.logo" alt="Logo" class="project-logo | rounded-sm" />
<ol class="project-steps" data-steps="1">
<li class="project-step" data-status="in-progress">
<span class="pill" data-icon="search">Votre Brief</span>
</li>
</ol>
</article>
<router-link :to="project.uri">
<article class="project-item | flex | rounded-2xl | px-32 py-32">
<hgroup>
<h3>{{ project.title }}</h3>
<p>
Dernière mise à jour le
<time :datetime="project.modified">{{
frenchFormattedModified
}}</time>
</p>
</hgroup>
<img :src="project.logo" alt="Logo" class="project-logo | rounded-sm" />
<ol class="project-steps" data-steps="1">
<li class="project-step" data-status="in-progress">
<span class="pill" data-icon="search">Votre Brief</span>
</li>
</ol>
</article>
</router-link>
</template>
<script setup>

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

@ -11,17 +11,14 @@
>
<template #header>
<div class="dialog__tabs">
<button
class="btn btn--transparent | font-serif"
<button
class="btn btn--transparent | font-serif"
data-icon="cursor"
aria-pressed="true"
>
<span>Vue Dynamique</span>
</button>
<button
class="btn btn--transparent | font-serif"
data-icon="image"
>
<button class="btn btn--transparent | font-serif" data-icon="image">
<span>Vue statique</span>
</button>
</div>
@ -30,38 +27,40 @@
<div class="dialog__inner">
<header class="flex">
<div class="options-selector">
<button
<button
class="btn btn--image"
aria-pressed="true"
style="--btn-image: url('https://images.unsplash.com/photo-1708486855543-6010a133280f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHBhcmZ1bWUlMjBib3R0bGV8ZW58MHx8MHx8fDA%3D')"
style="
--btn-image: url('https://images.unsplash.com/photo-1708486855543-6010a133280f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHBhcmZ1bWUlMjBib3R0bGV8ZW58MHx8MHx8fDA%3D');
"
>
<span>Piste 1</span>
</button>
<button
<button
class="btn btn--image"
style="--btn-image: url('https://images.unsplash.com/photo-1680607622631-1e243ddd6782?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8cGFyZnVtZSUyMGJvdHRsZXxlbnwwfHwwfHx8MA%3D%3D')"
style="
--btn-image: url('https://images.unsplash.com/photo-1680607622631-1e243ddd6782?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8cGFyZnVtZSUyMGJvdHRsZXxlbnwwfHwwfHx8MA%3D%3D');
"
>
<span>Piste 2</span>
</button>
</div>
<button
class="btn | ml-auto"
>
<button class="btn | ml-auto">
<span>Comparer les pistes</span>
</button>
</header>
</div>
<template #footer>
<button
<button
id="download-image"
class="btn btn--white-10"
class="btn btn--white-10"
data-icon="download"
>
<span>Sauvegarder l’image</span>
</button>
<button
<button
id="loop-animation"
class="btn btn--transparent btn--outline"
class="btn btn--transparent btn--outline"
data-icon="loop"
>
<span>Animation en boucle</span>