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

flippable cards

Browse Source
This commit is contained in:
valere
2025-10-03 09:44:30 +02:00
parent 43b1a11027
commit fef1a8c234
5 changed files with 82 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,34 +1,36 @@
<template>
<article class="relative">
<main
class="backdrop-blur-sm border-2 -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-40 hover:bg-opacity-80 hover:shadow-xl transition-all bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
<!-- Cover -->
<figure @click="playerStore.playTrack(props.track)" class="flex-1 overflow-hidden rounded-t-xl cursor-pointer">
<img :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" />
</figure>
<article class="flip-card w-56 h-80" :data-flipped="props.isflipped">
<div class="flip-inner">
<main
class="flip-front backdrop-blur-sm border-2 -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-40 hover:bg-opacity-80 hover:shadow-xl transition-all bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
<!-- Cover -->
<figure @click="playerStore.playTrack(props.track)" class="flex-1 overflow-hidden rounded-t-xl cursor-pointer">
<img :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" />
</figure>
<!-- Body -->
<div class="p-3 text-center bg-white rounded-b-xl">
<div class="label">
{{ props.track.order }}
<!-- Body -->
<div class="p-3 text-center bg-white rounded-b-xl">
<div class="label">
{{ props.track.order }}
</div>
<h2 class="text-base text-neutral-800 font-bold truncate">{{ props.track.title }}</h2>
<p class="text-sm text-neutral-500 truncate">
{{ props.track.artist.name }}
</p>
</div>
<h2 class="text-base text-neutral-800 font-bold truncate">{{ props.track.title }}</h2>
<p class="text-sm text-neutral-500 truncate">
{{ props.track.artist.name }}
</p>
</div>
</main>
</main>
<footer
class="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>
<div class="label">
{{ props.track.id }}
</div>
</footer>
<footer
class="flip-back 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 class="label label--id">
{{ props.track.order }}
</div>
</div>
</footer>
</div>
</article>
</template>
@@ -37,7 +39,7 @@
import type { Track } from '~~/types/types'
import { usePlayerStore } from '~/store/player'
const props = defineProps<{ track: Track }>()
const props = defineProps<{ track: Track, isflipped: false }>()
const playerStore = usePlayerStore()
const coverUrl = props.track.coverId.startsWith('http')
? props.track.coverId
@@ -50,4 +52,38 @@ const coverUrl = props.track.coverId.startsWith('http')
font-weight: bold;
text-align: center;
}
/* Flip effect */
.flip-card {
perspective: 1000px;
}
.flip-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card[data-flipped=false] .flip-inner {
transform: rotateY(180deg);
}
.flip-front,
.flip-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
will-change: transform;
}
.flip-front {
transform: rotateY(0deg);
}
.flip-back {
transform: rotateY(180deg);
}
</style>