Ryan/drop
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop.git synced 2025-11-12 07:42:40 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: account pages framework & updates to library

Browse Source
This commit is contained in:
DecDuck
2025-04-01 18:28:34 +11:00
parent d7297707d7
commit 17372a9c06
15 changed files with 298 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/library/collection/[id]/index.vue
View File

@ -7,7 +7,7 @@
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
Back to Library
</NuxtLink>
</div>
<h2 class="text-2xl font-bold font-display text-zinc-100">

18
pages/library/game/[id]/index.vue
View File

@ -3,13 +3,13 @@
class="mx-auto w-full relative flex flex-col justify-center pt-72 overflow-hidden"
>
<!-- Banner background with gradient overlays -->
<div class="absolute inset-0 z-0">
<div class="absolute inset-0 z-0 rounded-xl overflow-hidden">
<img
:src="useObject(game.mBannerId)"
class="w-full h-[24rem] object-cover blur-sm scale-105"
/>
<div
class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-zinc-900/80 to-transparent opacity-90"
class="absolute inset-0 bg-gradient-to-t from-zinc-900 to-transparent opacity-90"
/>
<div
class="absolute inset-0 bg-gradient-to-r from-zinc-900/95 via-zinc-900/80 to-transparent opacity-90"
@ -17,28 +17,28 @@
</div>
<div class="relative z-10">
<div class="px-8 pb-4">
<div class="px-4 sm:px-8pb-4">
<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 duration-200 hover:scale-105"
>
<ArrowLeftIcon class="h-4 w-4" aria-hidden="true" />
Back to Collections
Back to Library
</NuxtLink>
</div>
<!-- Game title and description -->
<h1
class="text-5xl text-zinc-100 font-bold font-display drop-shadow-lg"
class="text-3xl sm:text-5xl text-zinc-100 font-bold font-display drop-shadow-lg"
>
{{ game.mName }}
</h1>
<p class="mt-4 mb-8 text-lg text-zinc-400 max-w-3xl">
<p class="mt-4 mb-8 text-sm sm:text-lg text-zinc-400 max-w-3xl">
{{ game.mShortDescription }}
</p>
<div class="flex flex-col lg:flex-row gap-3">
<div class="flex items-stretch flex-col lg:flex-row gap-3">
<button
type="button"
class="inline-flex items-center justify-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-base font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-blue-500/25 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
@ -63,8 +63,8 @@
</div>
<!-- Main content -->
<div class="w-full bg-zinc-900 px-8 py-6">
<div class="mt-8 flex flex-col gap-10">
<div class="w-full bg-zinc-900 px-4 sm:px-8 py-3 sm:py-6">
<div class="mt-8 flex flex-col gap-5 sm:gap-10">
<div class="col-start-1 lg:col-start-2 space-y-6">
<div class="bg-zinc-800/50 rounded-xl p-6 backdrop-blur-sm">
<h2 class="text-xl font-display font-semibold text-zinc-100 mb-4">

34
pages/library/index.vue
View File

@ -1,11 +1,10 @@
<template>
<div class="flex flex-col">
<div class="flex flex-col gap-y-8">
<div class="max-w-2xl">
<h2 class="text-2xl font-bold font-display text-zinc-100">
Your Collections
</h2>
<h2 class="text-2xl font-bold font-display text-zinc-100">Library</h2>
<p class="mt-2 text-zinc-400">
Organize your games into collections for easy access.
Organize your games into collections for easy access, and access all
your games.
</p>
</div>
@ -13,16 +12,16 @@
<TransitionGroup
name="collection-list"
tag="div"
class="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
>
<!-- Collection buttons (wrap each in a div for grid layout) -->
<div
v-for="collection in collections"
:key="collection.id"
class="flex flex-row rounded-lg overflow-hidden transition-all duration-200 text-left w-full hover:scale-105"
class="flex flex-row rounded-lg overflow-hidden transition-all duration-200 text-left w-full hover:scale-105 focus:scale-105"
>
<NuxtLink
class="grow p-4 bg-zinc-800/50 hover:bg-zinc-800"
class="grow p-4 bg-zinc-800/50 hover:bg-zinc-800 focus:bg-zinc-800 focus:outline-none"
:href="`/library/collection/${collection.id}`"
>
<h3 class="text-lg font-semibold text-zinc-100">
@ -36,7 +35,7 @@
<!-- Delete button (only show for non-default collections) -->
<button
@click="() => (currentlyDeleting = collection)"
class="group px-3 ml-[2px] bg-zinc-800/50 hover:bg-zinc-800 group"
class="group px-3 ml-[2px] bg-zinc-800/50 hover:bg-zinc-800 group focus:bg-zinc-800 focus:outline-none"
>
<TrashIcon
class="transition-all size-5 text-zinc-400 group-hover:text-red-400 group-hover:rotate-[8deg]"
@ -70,6 +69,20 @@
</button>
</div>
</TransitionGroup>
<!-- game library grid -->
<div>
<h1 class="text-zinc-100 text-xl font-bold font-display">
All Games
</h1>
<div class="mt-4 flex flex-row flex-wrap justify-left gap-4">
<GamePanel
v-for="game in games"
:game="game"
:href="`/library/game/${game?.id}`"
/>
</div>
</div>
</div>
<CreateCollectionModal v-model="collectionCreateOpen" />
@ -91,6 +104,9 @@ const collectionCreateOpen = ref(false);
const currentlyDeleting = ref<Collection | undefined>();
const library = await useLibrary();
const games = library.value.entries.map((e) => e.game);
useHead({
title: "Home",
});