Merge pull request #20 from AdenMGB/develop

Fresh animations & scaled Games Grid view properly

components/AddLibraryButton.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="inline-flex">
+  <div class="inline-flex group hover:scale-105 transition-all duration-200">
     <LoadingButton
       :loading="isLibraryLoading"
       @click="() => toggleLibrary()"
       :style="'none'"
-      class="transition w-48 inline-flex items-center justify-center gap-x-2 rounded-l-md bg-white/10 hover:bg-white/15 text-zinc-100 backdrop-blur px-5 py-3"
+      class="transition w-48 inline-flex items-center justify-center gap-x-2 rounded-l-md bg-white/10 group-hover:bg-white/15 text-zinc-100 backdrop-blur px-5 py-3 active:scale-95"
     >
       {{ inLibrary ? "In Library" : "Add to Library" }}
       <CheckIcon v-if="inLibrary" class="-mr-0.5 h-5 w-5" aria-hidden="true" />
@@ -15,7 +15,7 @@
     <Menu as="div" class="relative">
       <MenuButton
         as="div"
-        class="transition cursor-pointer inline-flex items-center rounded-r-md h-full ml-[2px] bg-white/10 hover:bg-white/30 backdrop-blur py-3.5 px-2 justify-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/20"
+        class="transition cursor-pointer inline-flex items-center rounded-r-md h-full ml-[2px] bg-white/10 group-hover:bg-white/15 backdrop-blur py-3.5 px-2 justify-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/20"
       >
         <ChevronDownIcon class="h-5 w-5 text-white" aria-hidden="true" />
       </MenuButton>

components/GamePanel.vue

@@ -2,24 +2,28 @@
   <NuxtLink
     v-if="game"
     :href="props.href ?? `/store/${game.id}`"
-    class="rounded overflow-hidden w-48 h-64 group relative transition-all duration-300 text-left"
+    class="group relative w-48 h-64 rounded-lg overflow-hidden transition-all duration-300 text-left hover:scale-[1.02] hover:shadow-lg hover:-translate-y-0.5"
   >
-    <img :src="useObject(game.mCoverId)" class="w-full h-full object-cover" />
-    <div
-      class="absolute inset-0 bg-gradient-to-b from-transparent to-[100%] to-zinc-950/50"
-    />
-    <div class="absolute bottom-0 left-0 px-2 py-1.5">
-      <h1 class="text-zinc-100 text-sm font-bold font-display">
+   <div class="absolute inset-0 transition-all duration-300 group-hover:scale-110">
+      <img 
+        :src="useObject(game.mCoverId)" 
+        class="w-full h-full object-cover brightness-[90%]" 
+      />
+      <div class="absolute inset-0 bg-gradient-to-t from-zinc-950/80 via-zinc-950/20 to-transparent" />
+    </div>
+
+   <div class="absolute bottom-0 left-0 w-full p-3">
+      <h1 class="text-zinc-100 text-sm font-bold font-display group-hover:text-white transition-colors">
         {{ game.mName }}
       </h1>
-      <p class="text-zinc-400 text-xs line-clamp-2">
+      <p class="text-zinc-400 text-xs line-clamp-2 group-hover:text-zinc-300 transition-colors">
         {{ game.mShortDescription }}
       </p>
     </div>
   </NuxtLink>
   <div
     v-else
-    class="rounded w-48 h-64 bg-zinc-800 flex items-center justify-center"
+    class="rounded-lg w-48 h-64 bg-zinc-800/50 flex items-center justify-center transition-all duration-300 hover:bg-zinc-800"
   >
     <p class="text-zinc-700 text-sm font-semibold font-display uppercase">
       no game
@@ -40,3 +44,4 @@ const props = defineProps<{
   href?: string;
 }>();
 </script>
+

pages/library/collection/[id]/index.vue

@@ -4,7 +4,7 @@
       <div class="flex items-center gap-x-3 mb-4">
         <NuxtLink
           to="/library"
-          class="transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center"
+          class="transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
         >
           <ArrowLeftIcon class="h-4 w-4" aria-hidden="true" />
           Back to Collections
@@ -20,7 +20,7 @@
 
     <!-- Games grid -->
     <div
-      class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4"
+      class="mt-4 flex flex-row gap-4 flex-wrap justify-center sm:justify-start"
     >
       <GamePanel
         v-for="entry in collection?.entries"

pages/library/game/[id]/index.vue

@@ -2,21 +2,13 @@
   <div v-if="game">
     <!-- header -->
     <div class="relative">
-      <!-- Banner image -->
-      <div class="absolute top-0 inset-0 w-full rounded overflow-hidden">
-        <img
-          :src="useObject(game.mBannerId)"
-          class="w-full h-full object-cover blur-sm"
-        />
-      </div>
-
       <!-- Content -->
-      <div class="p-4 relative">
+      <div class="p-4">
         <!-- Back button -->
         <div class="flex items-center gap-x-3 mb-4">
           <NuxtLink
             to="/library"
-            class="px-2 py-1 rounded bg-zinc-900 transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center"
+            class="px-2 py-1 rounded bg-zinc-900 transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
           >
             <ArrowLeftIcon class="h-4 w-4" aria-hidden="true" />
             Back to Collections
@@ -24,7 +16,7 @@
         </div>
 
         <div
-          class="flex flex-col lg:flex-row items-center lg:items-start gap-6 w-full lg:w-fit bg-zinc-900 bg-backdrop-blur p-4 rounded-xl"
+          class="flex flex-col lg:flex-row items-center lg:items-start gap-6 w-full lg:w-fit bg-zinc-900 p-4 rounded-xl"
         >
           <img
             :src="useObject(game.mCoverId)"

pages/library/index.vue

@@ -46,21 +46,19 @@
       <div>
         <button
           @click="collectionCreateOpen = true"
-          class="transition-all group relative rounded-lg border-2 border-dashed border-zinc-800 p-4 hover:border-zinc-700 hover:bg-zinc-900/30 transition-all duration-200 text-left w-full"
+          class="group flex flex-row rounded-lg overflow-hidden transition-all duration-200 text-left w-full hover:scale-105"
         >
-          <div class="flex items-center gap-3">
-            <PlusIcon class="h-5 w-5 text-zinc-400 group-hover:text-zinc-300" />
-            <h3
-              class="transition text-lg font-semibold text-zinc-400 group-hover:text-zinc-300"
-            >
-              Create Collection
-            </h3>
+          <div class="grow p-4 bg-zinc-800/50 hover:bg-zinc-800 border-2 border-dashed border-zinc-700">
+            <div class="flex items-center gap-3">
+              <PlusIcon class="h-5 w-5 text-zinc-400 group-hover:text-zinc-300 transition-all duration-300 group-hover:rotate-90" />
+              <h3 class="text-lg font-semibold text-zinc-400 group-hover:text-zinc-300">
+                Create Collection
+              </h3>
+            </div>
+            <p class="mt-1 text-sm text-zinc-500 group-hover:text-zinc-400">
+              Add a new collection to organize your games
+            </p>
           </div>
-          <p
-            class="transition mt-1 text-sm text-zinc-500 group-hover:text-zinc-400"
-          >
-            Add a new collection to organize your games
-          </p>
         </button>
       </div>
     </TransitionGroup>

pages/store/[id]/index.vue

@@ -37,7 +37,7 @@
             v-if="user?.admin"
             :href="`/admin/library/${game.id}`"
             type="button"
-            class="inline-flex items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+            class="inline-flex items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 duration-200 hover:scale-105 active:scale-95"
           >
             Open in Admin Dashboard
             <ArrowTopRightOnSquareIcon

pages/store/index.vue

@@ -38,7 +38,7 @@
                 <div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-4 w-fit mx-auto">
                   <NuxtLink
                     :href="`/store/${game.id}`"
-                    class="block w-full rounded-md border border-transparent bg-white px-8 py-3 text-base font-medium text-gray-900 hover:bg-gray-100 sm:w-auto"
+                    class="block w-full rounded-md border border-transparent bg-white px-8 py-3 text-base font-medium text-gray-900 hover:bg-gray-100 sm:w-auto duration-200 hover:scale-105"
                     >Check it out</NuxtLink
                   >
                   <AddLibraryButton :gameId="game.id" />