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

10
components/CardView.vue
View File

@ -1,9 +1,11 @@
<template>
<div class="flex min-h-screen flex-col items-center justify-center">
<div class="grid place-items-center">
<motion.img
v-if="currentCard"
:src="currentCard?.image"
draggable="false"
class="h-[60cqh] max-h-[800px] w-[400px] origin-bottom rounded-lg object-cover hover:cursor-grab active:cursor-grabbing md:w-[600px]"
class="h-auto max-h-screen w-[400px] origin-bottom rounded-lg object-cover hover:cursor-grab active:cursor-grabbing md:w-[600px]"
:style="{
gridRow: 1,
gridColumn: 1,
@ -19,9 +21,10 @@
:drag-constraints="{ left: 0, right: 0 }"
:on-drag-end="handleDragEnd"
/>
<h1 class="h-2 text-5xl">{{ currentCard?.name }}</h1>
</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 -->
<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"
@ -42,6 +45,7 @@
<span class="text-base font-semibold">Smash</span>
</button>
</div>
</div>
</template>
<script setup lang="ts">

4
pages/game.vue
View File

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