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

ui: update card grids and details in components

Browse Source
This commit is contained in:
mkelvers
2026-04-21 00:21:32 +02:00
parent 33a7bc7fb1
commit 980469b448
2 changed files with 8 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/components/anime/recommendations.templ
View File

@@ -7,15 +7,14 @@ import (
templ Recommendations(recs []jikan.Anime) { templ Recommendations(recs []jikan.Anime) {
if len(recs) > 0 { if len(recs) > 0 {
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-5"> <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-6">
for _, anime := range recs { for _, anime := range recs {
@ui.AnimeCard(ui.AnimeCardProps{ @ui.AnimeCard(ui.AnimeCardProps{
ID: anime.MalID, ID: anime.MalID,
Title: anime.DisplayTitle(), Title: anime.DisplayTitle(),
ImageURL: anime.ImageURL(), ImageURL: anime.ImageURL(),
Class: "relation-card", Synopsis: anime.Synopsis,
ImgClass: "relation-thumb", Score: int(anime.Score * 10),
TitleClass: "relation-title",
}) })
} }
</div> </div>

9
web/components/anime/relations.templ
View File

@@ -7,15 +7,12 @@ import (
templ RelationsList(relations []jikan.RelationEntry) { templ RelationsList(relations []jikan.RelationEntry) {
if len(relations) > 1 { if len(relations) > 1 {
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-5" id="relations-grid"> <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-6" id="relations-grid">
for _, rel := range relations { for _, rel := range relations {
@ui.AnimeCard(ui.AnimeCardProps{ @ui.AnimeCard(ui.AnimeCardProps{
ID: rel.Anime.MalID, ID: rel.Anime.MalID,
Title: rel.Anime.DisplayTitle(), Title: rel.Anime.DisplayTitle(),
ImageURL: rel.Anime.ImageURL(), ImageURL: rel.Anime.ImageURL(),
Class: relationCardClass(rel),
ImgClass: "relation-thumb",
TitleClass: "relation-title",
CurrentNode: rel.IsCurrent, CurrentNode: rel.IsCurrent,
}) { }) {
if rel.IsCurrent { if rel.IsCurrent {
@@ -32,6 +29,4 @@ templ RelationsList(relations []jikan.RelationEntry) {
} }
} }
func relationCardClass(rel jikan.RelationEntry) string {
return "relation-card min-w-0 flex flex-col bg-transparent text-inherit no-underline"
}