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

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>