Drop-OSS/drop
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop.git synced 2026-01-31 15:37:09 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: sleak transition from store page to item

Browse Source
This commit is contained in:
Huskydog9988
2025-04-07 16:17:55 -04:00
parent 657fd50702
commit 106b3f66a4
4 changed files with 66 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
components/GamePanel.vue
View File

@@ -3,20 +3,31 @@
v-if="game"
:href="props.href ?? `/store/${game.id}`"
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"
@click.native="active = game.id"
>
<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 transition-all duration-300 group-hover:scale-110"
>
<img
:src="useObject(game.mCoverId)"
class="w-full h-full object-cover brightness-[90%]"
:class="{ active: active === game.id }"
:alt="game.mName"
/>
<div
class="absolute inset-0 bg-gradient-to-t from-zinc-950/80 via-zinc-950/20 to-transparent"
/>
<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">
<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 group-hover:text-zinc-300 transition-colors">
<p
class="text-zinc-400 text-xs line-clamp-2 group-hover:text-zinc-300 transition-colors"
>
{{ game.mShortDescription }}
</p>
</div>
@@ -35,13 +46,23 @@
import type { SerializeObject } from "nitropack";
const props = defineProps<{
game: SerializeObject<{
id: string;
mCoverId: string;
mName: string;
mShortDescription: string;
}> | undefined;
game:
| SerializeObject<{
id: string;
mCoverId: string;
mName: string;
mShortDescription: string;
}>
| undefined;
href?: string;
}>();
const active = useState();
</script>
<style scoped>
img.active {
view-transition-name: selected-game;
contain: layout;
}
</style>