anyame/anyame-frontend-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Final touches in anime page

Browse Source
This commit is contained in:
bivashy
2026-01-26 20:24:46 +05:00
parent 7390c631d5
commit 0b61402be5
3 changed files with 53 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
app/pages/anime/[id].vue
View File

@ -25,47 +25,53 @@ He is seen seeking out a PK (Player Killer) known as Tri-Edge, whose victims sup
status: "Finished",
release: "Mar 25, 2008",
season: "Spring 2008",
translations: ["Anilibria", "Soviet Romantica", "AniDUB", "AniStar"],
genres: ["Action", "Fantasy", "Sci-Fi"],
average: 67,
mean: 67,
popularity: 5481,
favorites: 36,
producers: ["Bandai Visual", "CyberConnect2", "Hanabee Entartainment", "Funimation"],
source: "Video Game",
genres: ["Action", "Fantasy", "Sci-Fi"],
romaji: ".hack//G.U. Trilogy",
native: ".hack//G.U. Trilogy",
relations: [
{
url: "/example/relation1.png",
type: "Prequel",
name: ".hack//Roots"
},
{
url: "/example/relation2.jpg",
type: "Sequel",
name: ".hack//G.U. Returner"
},
{
url: "/example/relation3.jpg",
type: "Alternative",
name: ".hack//G.U."
},
{
url: "/example/relation4.jpg",
type: "Alternative",
name: ".hack//G.U.+"
},
{
url: "/example/relation5.jpg",
type: "Side Story",
name: ".hack//G.U. Returner Trilogy"
},
{
url: "/example/relation6.jpg",
type: "Summary",
name: "Daitai 3-pun de Wakaru .hack History "
},
]
}
</script>
<template>
<div
class="flex flex-col lg:flex-row gap-4 lg:gap-8 xl:gap-16 bg-muted p-4 sm:p-6 md:p-8 lg:p-12 xl:min-h-3/4 xl:max-h-3/4">
<div class="flex flex-col items-center lg:items-start gap-4 lg:gap-6 lg:w-auto lg:min-w-72 xl:min-w-96 ">
<div class="flex flex-col lg:flex-row gap-4 lg:gap-8 xl:gap-16 bg-muted p-4 sm:p-6 md:p-8 lg:p-12 xl:max-h-3/4">
<div class="flex flex-col items-center lg:items-start gap-4 lg:gap-6 lg:min-w-72 xl:min-w-96 ">
<div class="max-w-xs lg:max-w-sm xl:max-w-md">
<NuxtImg :src="data.poster" class="w-full object-cover aspect-3/4 rounded-lg shadow-lg"
sizes="sm:100vw md:50vw lg:448px xl:512px" />
@ -118,9 +124,14 @@ He is seen seeking out a PK (Player Killer) known as Tri-Edge, whose victims sup
<p class="font-bold">Season</p>
{{ data.season }}
</div>
<div>
<p class="font-bold">Translations</p>
<Badge v-for="translation in data.translations" class="mx-2">{{ translation }}
</Badge>
</div>
<div>
<p class="font-bold">Genres</p>
<Badge v-for="genre in data.genres" class="mx-2">{{ genre }}</Badge>
<Badge variant="secondary" v-for="genre in data.genres" class="mx-2">{{ genre }}</Badge>
</div>
<div>
<p class="font-bold">Average Score</p>
@ -169,23 +180,41 @@ He is seen seeking out a PK (Player Killer) known as Tri-Edge, whose victims sup
</TabsList>
<TabsContent value="overview">
<span class="text-xl font-semibold">Relations</span>
<HoverableImage src="/example/jigokuraku.jpg" alt="Description" title="Image Title" size="md"
variant="default">
<TooltipContent side="right" align="center" :side-offset="8" class="max-w-sm z-50"
tooltipColor="muted" :includeArrow="false">
<div class="space-y-2">
<h4 class="font-semibold text-sm">
{{ data.title }}
</h4>
<div class="flex flex-wrap gap-4 w-full">
<HoverableImage v-for="relation in data.relations" :src="relation.url" :alt="relation.name"
:title="relation.type" size="xsm" variant="default">
<TooltipContent side="right" align="center" :side-offset="8" class="z-50" tooltipColor="muted"
:includeArrow="false">
<div class="space-y-2">
<h4 class="font-semibold text-xl">
{{ relation.name }}
</h4>
<div class="text-xs text-muted-foreground">
<slot>
<p>Hover over the image for more details</p>
</slot>
<div class="text-lg text-muted-foreground">
<p>{{ relation.type }}</p>
</div>
</div>
</div>
</TooltipContent>
</HoverableImage>
</TooltipContent>
</HoverableImage>
</div>
<span class="text-xl font-semibold">Characters</span>
<div class="flex flex-wrap gap-4 w-full">
<HoverableImage v-for="relation in data.relations" :src="relation.url" :alt="relation.name"
:title="relation.type" size="xsm" variant="default">
<TooltipContent side="right" align="center" :side-offset="8" class="z-50" tooltipColor="muted"
:includeArrow="false">
<div class="space-y-2">
<h4 class="font-semibold text-xl">
{{ relation.name }}
</h4>
<div class="text-lg text-muted-foreground">
<p>{{ relation.type }}</p>
</div>
</div>
</TooltipContent>
</HoverableImage>
</div>
</TabsContent>
<TabsContent value="characters">