valere/evilspins
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

add card verso
Some checks failed
Deploy App / build (push) Failing after 1m18s
Details
Deploy App / deploy (push) Has been skipped
Details

Browse Source
This commit is contained in:
valere
2025-09-30 12:37:24 +02:00
parent c028fda489
commit bd5ed09d5e
1 changed files with 23 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/components/molecule/card.vue
View File

@@ -1,18 +1,28 @@
<template> <template>
<article <article class="relative">
class="backdrop-blur-sm -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden"> <main
<!-- Cover --> class="absolute top-0 backdrop-blur-sm z-40 -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
<figure class="flex-1 overflow-hidden rounded-t-xl"> <!-- Cover -->
<img :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" /> <figure class="flex-1 overflow-hidden rounded-t-xl">
</figure> <img :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" />
</figure>
<!-- Body --> <!-- Body -->
<div class="p-3 text-center bg-white rounded-b-xl"> <div class="p-3 text-center bg-white rounded-b-xl">
<h2 class="text-base text-neutral-800 font-bold truncate">{{ props.track.title }}</h2> <h2 class="text-base text-neutral-800 font-bold truncate">{{ props.track.title }}</h2>
<p class="text-sm text-neutral-500 truncate"> <p class="text-sm text-neutral-500 truncate">
{{ props.track.artist.name }} {{ props.track.artist.name }}
</p> </p>
</div> </div>
</main>
<footer
class="absolute top-0 ml-32 backdrop-blur-sm -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
<!-- Back -->
<div class="h-full flex p-16 text-center bg-slate-800 rounded-xl">
<img src="/favicon.svg" />
</div>
</footer>
</article> </article>
</template> </template>