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

refactor(ui): unify anime poster wrapper

Browse Source
This commit is contained in:
mkelvers
2026-04-15 01:04:31 +02:00
parent b9dad0f574
commit 7e03a90504
1 changed files with 12 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
internal/shared/ui/anime_card.templ
View File

@@ -16,11 +16,7 @@ type AnimeCardProps struct {
templ AnimeCard(props AnimeCardProps) {
if props.CurrentNode {
<div class={ defaultString(props.Class, "min-w-0") }>
if props.ImageURL != "" {
<img src={ props.ImageURL } alt={ props.Title } class={ defaultString(props.ImgClass, "block aspect-[2/3] max-h-[var(--poster-max-height)] w-full object-cover object-center") } loading="lazy"/>
} else {
<div class="flex aspect-[2/3] max-h-[var(--poster-max-height)] w-full items-end justify-center overflow-hidden text-[0] text-transparent">No image</div>
}
@animeCardPoster(props.ImageURL, props.Title, props.ImgClass)
<div class={ defaultString(props.TitleClass, "mt-2 line-clamp-2 text-[0.86rem] leading-[1.3] text-[var(--text)]") }>
{ props.Title }
</div>
@@ -28,21 +24,7 @@ templ AnimeCard(props AnimeCardProps) {
</div>
} else {
<a href={ templ.URL(fmt.Sprintf("/anime/%d", props.ID)) } class={ defaultString(props.Class, "flex flex-col bg-transparent text-inherit no-underline") }>
if props.Class == "notification-card" || props.Class == "schedule-card" {
<div class={ defaultString(props.ImgClass, "flex aspect-[2/3] max-h-[var(--poster-max-height)] w-full items-end justify-center overflow-hidden") }>
if props.ImageURL != "" {
<img src={ props.ImageURL } alt={ props.Title } class="block h-full w-full object-cover object-center" loading="lazy"/>
} else {
<div class="flex aspect-[2/3] max-h-[var(--poster-max-height)] w-full items-end justify-center overflow-hidden text-[0] text-transparent">No image</div>
}
</div>
} else {
if props.ImageURL != "" {
<img src={ props.ImageURL } alt={ props.Title } class={ defaultString(props.ImgClass, "block aspect-[2/3] max-h-[var(--poster-max-height)] w-full object-cover object-center") } loading="lazy"/>
} else {
<div class="flex aspect-[2/3] max-h-[var(--poster-max-height)] w-full items-end justify-center overflow-hidden text-[0] text-transparent">No image</div>
}
}
@animeCardPoster(props.ImageURL, props.Title, props.ImgClass)
if props.Class != "notification-card" && props.Class != "schedule-card" {
<div class={ defaultString(props.TitleClass, "mt-2 line-clamp-2 text-[0.86rem] leading-[1.3] text-[var(--text)]") }>
@@ -54,6 +36,16 @@ templ AnimeCard(props AnimeCardProps) {
}
}
templ animeCardPoster(imageURL, title, imgClass string) {
<div class="flex h-full w-full aspect-[2/3] max-h-[var(--poster-max-height)] justify-center overflow-hidden">
if imageURL != "" {
<img src={ imageURL } alt={ title } class={ defaultString(imgClass, "block h-full w-full object-cover object-center") } loading="lazy"/>
} else {
<div class="flex h-full w-full justify-center overflow-hidden text-[0] text-transparent">No image</div>
}
</div>
}
func defaultString(val, fallback string) string {
if val == "" {
return fallback