Ryan/drop
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop.git synced 2026-07-20 23:12:51 +10:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #20 from AdenMGB/develop

Browse Source 
Fresh animations & scaled Games Grid view properly
This commit is contained in:
DecDuck
2025-01-30 19:30:21 +11:00
committed by GitHub
parent 1a2aca9999 09fd01d9b5
commit 97b9b6dc11
7 changed files with 35 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/AddLibraryButton.vue
+3 -3
View File
@@ -1,10 +1,10 @@
<template> <template>
<div class="inline-flex"> <div class="inline-flex group hover:scale-105 transition-all duration-200">
<LoadingButton <LoadingButton
:loading="isLibraryLoading" :loading="isLibraryLoading"
@click="() => toggleLibrary()" @click="() => toggleLibrary()"
:style="'none'" :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" }} {{ inLibrary ? "In Library" : "Add to Library" }}
<CheckIcon v-if="inLibrary" class="-mr-0.5 h-5 w-5" aria-hidden="true" /> <CheckIcon v-if="inLibrary" class="-mr-0.5 h-5 w-5" aria-hidden="true" />
@@ -15,7 +15,7 @@
<Menu as="div" class="relative"> <Menu as="div" class="relative">
<MenuButton <MenuButton
as="div" 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" /> <ChevronDownIcon class="h-5 w-5 text-white" aria-hidden="true" />
</MenuButton> </MenuButton>
components/GamePanel.vue
+14 -9
View File
@@ -2,24 +2,28 @@
<NuxtLink <NuxtLink
v-if="game" v-if="game"
:href="props.href ?? `/store/${game.id}`" :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 transition-all duration-300 group-hover:scale-110">
<div <img
class="absolute inset-0 bg-gradient-to-b from-transparent to-[100%] to-zinc-950/50" :src="useObject(game.mCoverId)"
/> class="w-full h-full object-cover brightness-[90%]"
<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 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 }} {{ game.mName }}
</h1> </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 }} {{ game.mShortDescription }}
</p> </p>
</div> </div>
</NuxtLink> </NuxtLink>
<div <div
v-else 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"> <p class="text-zinc-700 text-sm font-semibold font-display uppercase">
no game no game
@@ -40,3 +44,4 @@ const props = defineProps<{
href?: string; href?: string;
}>(); }>();
</script> </script>
pages/library/collection/[id]/index.vue
+2 -2
View File
@@ -4,7 +4,7 @@
<div class="flex items-center gap-x-3 mb-4"> <div class="flex items-center gap-x-3 mb-4">
<NuxtLink <NuxtLink
to="/library" 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" /> <ArrowLeftIcon class="h-4 w-4" aria-hidden="true" />
Back to Collections Back to Collections
@@ -20,7 +20,7 @@
<!-- Games grid --> <!-- Games grid -->
<div <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 <GamePanel
v-for="entry in collection?.entries" v-for="entry in collection?.entries"
pages/library/game/[id]/index.vue
+3 -11
View File
@@ -2,21 +2,13 @@
<div v-if="game"> <div v-if="game">
<!-- header --> <!-- header -->
<div class="relative"> <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 --> <!-- Content -->
<div class="p-4 relative"> <div class="p-4">
<!-- Back button --> <!-- Back button -->
<div class="flex items-center gap-x-3 mb-4"> <div class="flex items-center gap-x-3 mb-4">
<NuxtLink <NuxtLink
to="/library" 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" /> <ArrowLeftIcon class="h-4 w-4" aria-hidden="true" />
Back to Collections Back to Collections
@@ -24,7 +16,7 @@
</div> </div>
<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 <img
:src="useObject(game.mCoverId)" :src="useObject(game.mCoverId)"
pages/library/index.vue
+11 -13
View File
@@ -46,21 +46,19 @@
<div> <div>
<button <button
@click="collectionCreateOpen = true" @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"> <div class="grow p-4 bg-zinc-800/50 hover:bg-zinc-800 border-2 border-dashed border-zinc-700">
<PlusIcon class="h-5 w-5 text-zinc-400 group-hover:text-zinc-300" /> <div class="flex items-center gap-3">
<h3 <PlusIcon class="h-5 w-5 text-zinc-400 group-hover:text-zinc-300 transition-all duration-300 group-hover:rotate-90" />
class="transition text-lg font-semibold text-zinc-400 group-hover:text-zinc-300" <h3 class="text-lg font-semibold text-zinc-400 group-hover:text-zinc-300">
> Create Collection
Create Collection </h3>
</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> </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> </button>
</div> </div>
</TransitionGroup> </TransitionGroup>
pages/store/[id]/index.vue
+1 -1
View File
@@ -37,7 +37,7 @@
v-if="user?.admin" v-if="user?.admin"
:href="`/admin/library/${game.id}`" :href="`/admin/library/${game.id}`"
type="button" 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 Open in Admin Dashboard
<ArrowTopRightOnSquareIcon <ArrowTopRightOnSquareIcon
pages/store/index.vue
+1 -1
View File
@@ -38,7 +38,7 @@
<div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-4 w-fit mx-auto"> <div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-4 w-fit mx-auto">
<NuxtLink <NuxtLink
:href="`/store/${game.id}`" :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 >Check it out</NuxtLink
> >
<AddLibraryButton :gameId="game.id" /> <AddLibraryButton :gameId="game.id" />