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

fix: make entire anime card clickable with proper pointer events

Browse Source
This commit is contained in:
mkelvers
2026-04-21 00:54:17 +02:00
parent ce97d59ebd
commit 5cd1ca3f32
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/components/anime_card.templ
View File

@@ -40,7 +40,7 @@ templ AnimeCard(props AnimeCardProps) {
</div>
} else {
<div class={ defaultString(props.Class, "group relative min-w-0") }>
<a href={ templ.URL(cardHref(props)) } class="absolute inset-0 z-0"></a>
<a href={ templ.URL(cardHref(props)) } class="absolute inset-0 z-10"></a>
@animeCardPoster(props)
if !props.HideTitle {
<div class={ defaultString(props.TitleClass, "relative z-10 mt-2 line-clamp-2 text-sm leading-snug text-(--text)") }>
@@ -61,7 +61,7 @@ func cardHref(props AnimeCardProps) string {
}
templ animeCardPoster(props AnimeCardProps) {
<div class="relative w-full aspect-2/3 overflow-hidden">
<div class="pointer-events-none relative w-full aspect-2/3 overflow-hidden">
<div class="block h-full w-full">
if props.ImageURL != "" {
<img src={ props.ImageURL } alt={ props.Title } class={ defaultString(props.ImgClass, "block h-full w-full object-cover object-center") } loading="lazy"/>
@@ -69,17 +69,17 @@ templ animeCardPoster(props AnimeCardProps) {
<div class="flex h-full w-full justify-center overflow-hidden text-transparent">No image</div>
}
</div>
<div class="absolute inset-0 bg-black/0 transition-colors duration-200 group-hover:bg-black/40"></div>
<div class="pointer-events-none absolute inset-0 bg-black/0 transition-colors duration-200 group-hover:bg-black/40"></div>
if props.Synopsis != "" {
<div class="absolute inset-0 flex flex-col justify-between p-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
<div class="pointer-events-none absolute inset-0 flex flex-col justify-between p-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
<div>
<div class="mb-1 text-[11px] font-semibold text-white/90">{ props.Title }</div>
<p class="line-clamp-3 text-[11px] leading-relaxed text-white/90">{ props.Synopsis }</p>
</div>
</div>
}
if props.PlayHref != "" || !props.CurrentNode {
<div class="absolute bottom-2 left-2 z-10 flex gap-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
if props.PlayHref != "" || !props.CurrentNode && !props.DisableWatchlist {
<div class="pointer-events-auto absolute bottom-2 left-2 z-20 flex gap-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
if props.PlayHref != "" {
<a
href={ templ.URL(props.PlayHref) }