TDLaouer/sop-nuxt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix css

Browse Source
This commit is contained in:
TDLaouer 2025-07-14 14:23:56 +02:00
parent c692ab8b73
commit 527d4b0bfb
2 changed files with 45 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
components/CardView.vue
View File

@ -1,46 +1,50 @@
<template> <template>
<motion.img <div class="flex min-h-screen flex-col items-center justify-center">
v-if="currentCard" <div class="grid place-items-center">
:src="currentCard?.image" <motion.img
draggable="false" v-if="currentCard"
class="h-[60cqh] max-h-[800px] w-[400px] origin-bottom rounded-lg object-cover hover:cursor-grab active:cursor-grabbing md:w-[600px]" :src="currentCard?.image"
:style="{ draggable="false"
gridRow: 1, class="h-auto max-h-screen w-[400px] origin-bottom rounded-lg object-cover hover:cursor-grab active:cursor-grabbing md:w-[600px]"
gridColumn: 1, :style="{
transition: '0.125s transform', gridRow: 1,
x, gridColumn: 1,
opacity, transition: '0.125s transform',
rotate, x,
boxShadow: opacity,
'0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5)', rotate,
}" boxShadow:
:alt="currentCard?.name" '0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5)',
drag="x" }"
:drag-constraints="{ left: 0, right: 0 }" :alt="currentCard?.name"
:on-drag-end="handleDragEnd" drag="x"
/> :drag-constraints="{ left: 0, right: 0 }"
<h1 class="h-2 text-5xl">{{ currentCard?.name }}</h1> :on-drag-end="handleDragEnd"
/>
</div>
<h1 class="my-5 text-5xl">{{ currentCard?.name }}</h1>
<div v-if="currentCard" class="flex justify-between"> <div v-if="currentCard" class="my-5 flex justify-between">
<!-- Pass Button --> <!-- Pass Button -->
<button <button
class="mx-12 flex h-24 w-42 flex-col items-center justify-center rounded-xl bg-violet-500 text-4xl text-white shadow-lg transition-colors duration-150 hover:bg-violet-600 focus:ring-4 focus:ring-violet-300 focus:outline-none" class="mx-12 flex h-24 w-42 flex-col items-center justify-center rounded-xl bg-violet-500 text-4xl text-white shadow-lg transition-colors duration-150 hover:bg-violet-600 focus:ring-4 focus:ring-violet-300 focus:outline-none"
aria-label="Pass" aria-label="Pass"
type="button" type="button"
@click="swipeLeft" @click="swipeLeft"
> >
<span class="text-base font-semibold">Pass</span> <span class="text-base font-semibold">Pass</span>
</button> </button>
<!-- Smash Button --> <!-- Smash Button -->
<button <button
class="mx-12 flex h-24 w-42 flex-col items-center justify-center rounded-xl bg-teal-500 text-4xl text-white shadow-lg transition-colors duration-150 hover:bg-teal-600 focus:ring-4 focus:ring-teal-300 focus:outline-none" class="mx-12 flex h-24 w-42 flex-col items-center justify-center rounded-xl bg-teal-500 text-4xl text-white shadow-lg transition-colors duration-150 hover:bg-teal-600 focus:ring-4 focus:ring-teal-300 focus:outline-none"
aria-label="Smash" aria-label="Smash"
type="button" type="button"
@click="swipeRight" @click="swipeRight"
> >
<span class="text-base font-semibold">Smash</span> <span class="text-base font-semibold">Smash</span>
</button> </button>
</div>
</div> </div>
</template> </template>

4
pages/game.vue
View File

@ -1,8 +1,6 @@
<template> <template>
<div v-if="loading">Loading...</div> <div v-if="loading">Loading...</div>
<div v-else class="grid min-h-screen place-items-center"> <CardView v-else :cards="cardStore.cards" @empty-list="showResults" />
<CardView :cards="cardStore.cards" @empty-list="showResults" />
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">