melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make anime poster fully clickable

Browse Source
This commit is contained in:
mkelvers
2026-04-21 12:23:17 +02:00
parent 0b2957d68c
commit 4eae5d55be
1 changed files with 18 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
web/components/anime_card.templ
View File

@@ -11,20 +11,18 @@ type AnimeCardProps struct {
Title string Title string
ImageURL string ImageURL string
Href string Href string
// Options to customize the card behavior Class string
Class string // override default wrapper class ImgClass string
ImgClass string // override default image class TitleClass string
TitleClass string // override default title class HideTitle bool
HideTitle bool // if true, do not render the default title block CurrentNode bool
CurrentNode bool // if true, renders a div instead of an anchor tag (useful for graph nodes) Synopsis string
Synopsis string // optional synopsis for hover detail PlayHref string
PlayHref string // optional play button href (anchored to poster)
// Watchlist integration
TitleEnglish string TitleEnglish string
TitleJapanese string TitleJapanese string
Airing bool Airing bool
WatchlistStatus string // empty if not in watchlist WatchlistStatus string
DisableWatchlist bool // if true, don't render the watchlist button DisableWatchlist bool
} }
templ AnimeCard(props AnimeCardProps) { templ AnimeCard(props AnimeCardProps) {
@@ -55,20 +53,11 @@ func cardHref(props AnimeCardProps) string {
} }
templ animeCardPoster(props AnimeCardProps) { templ animeCardPoster(props AnimeCardProps) {
<div class="grid w-full aspect-2/3 overflow-hidden"> <div class="relative grid w-full aspect-2/3 overflow-hidden">
<!-- Base image layer --> <div class="col-start-1 row-start-1 h-full w-full">
if !props.CurrentNode { @animeCardImage(props)
<a href={ templ.URL(cardHref(props)) } class="col-start-1 row-start-1 block h-full w-full"> </div>
@animeCardImage(props)
</a>
} else {
<div class="col-start-1 row-start-1 h-full w-full">
@animeCardImage(props)
</div>
}
<!-- Hover darken overlay -->
<div class="pointer-events-none col-start-1 row-start-1 bg-black/0 transition-colors duration-200 group-hover:bg-black/40"></div> <div class="pointer-events-none col-start-1 row-start-1 bg-black/0 transition-colors duration-200 group-hover:bg-black/40"></div>
<!-- Synopsis overlay -->
if props.Synopsis != "" { if props.Synopsis != "" {
<div class="pointer-events-none col-start-1 row-start-1 flex flex-col justify-between p-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100"> <div class="pointer-events-none col-start-1 row-start-1 flex flex-col justify-between p-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
<div> <div>
@@ -77,10 +66,12 @@ templ animeCardPoster(props AnimeCardProps) {
</div> </div>
</div> </div>
} }
<!-- Actions layer --> if !props.CurrentNode {
<a href={ templ.URL(cardHref(props)) } class="absolute inset-0 z-10" aria-label={ props.Title }></a>
}
if props.PlayHref != "" || !props.CurrentNode && !props.DisableWatchlist { if props.PlayHref != "" || !props.CurrentNode && !props.DisableWatchlist {
<div class="col-start-1 row-start-1 flex items-end justify-start p-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100"> <div class="pointer-events-none col-start-1 row-start-1 z-20 flex items-end justify-start p-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
<div class="flex gap-2"> <div class="pointer-events-auto flex gap-2">
if props.PlayHref != "" { if props.PlayHref != "" {
<a <a
href={ templ.URL(props.PlayHref) } href={ templ.URL(props.PlayHref) }