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

ui: standardize 6-column grid and fix tab colors

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

2
web/shared/ui.go
View File

@@ -4,7 +4,7 @@ package shared
func TabClass(active bool) string { func TabClass(active bool) string {
base := "shrink-0 whitespace-nowrap bg-(--panel-soft) px-2 py-1 text-xs text-(--text-muted) no-underline hover:bg-(--surface-tab-hover) hover:text-(--text) hover:no-underline" base := "shrink-0 whitespace-nowrap bg-(--panel-soft) px-2 py-1 text-xs text-(--text-muted) no-underline hover:bg-(--surface-tab-hover) hover:text-(--text) hover:no-underline"
if active { if active {
return "shrink-0 whitespace-nowrap bg-(--surface-tab-active) px-2 py-1 text-xs text-(--accent) no-underline hover:no-underline" return "shrink-0 whitespace-nowrap bg-(--surface-tab-active) px-2 py-1 text-xs text-(--text-tab-active) no-underline hover:no-underline"
} }
return base return base
} }

2
web/templates/catalog.templ
View File

@@ -7,7 +7,7 @@ import "mal/web/shared/layout"
templ Catalog() { templ Catalog() {
@layout.Layout("mal - catalog", true) { @layout.Layout("mal - catalog", true) {
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-5" id="catalog-content"> <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-6" id="catalog-content">
<div class="col-span-full" hx-get="/api/catalog?page=1" hx-trigger="load" hx-swap="outerHTML"> <div class="col-span-full" hx-get="/api/catalog?page=1" hx-trigger="load" hx-swap="outerHTML">
@ui.LoadingIndicator("Loading catalog") @ui.LoadingIndicator("Loading catalog")
</div> </div>

6
web/templates/discovery.templ
View File

@@ -20,7 +20,7 @@ templ Discover() {
hx-target="#discover-content" hx-target="#discover-content"
hx-trigger="click" hx-trigger="click"
data-tab-trigger data-tab-trigger
data-tab-active-classes="bg-(--surface-tab-active) text-(--accent)" data-tab-active-classes="bg-(--surface-tab-active) text-(--text-tab-active)"
data-tab-inactive-classes="bg-(--panel-soft) text-(--text-muted)" data-tab-inactive-classes="bg-(--panel-soft) text-(--text-muted)"
> >
airing now airing now
@@ -32,13 +32,13 @@ templ Discover() {
hx-target="#discover-content" hx-target="#discover-content"
hx-trigger="click" hx-trigger="click"
data-tab-trigger data-tab-trigger
data-tab-active-classes="bg-(--surface-tab-active) text-(--accent)" data-tab-active-classes="bg-(--surface-tab-active) text-(--text-tab-active)"
data-tab-inactive-classes="bg-(--panel-soft) text-(--text-muted)" data-tab-inactive-classes="bg-(--panel-soft) text-(--text-muted)"
> >
upcoming upcoming
</button> </button>
</div> </div>
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-5" id="discover-content" hx-get="/api/discover/airing?page=1" hx-trigger="load"> <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-6" id="discover-content" hx-get="/api/discover/airing?page=1" hx-trigger="load">
<div class="col-span-full"> <div class="col-span-full">
@ui.LoadingIndicator("Loading discover") @ui.LoadingIndicator("Loading discover")
</div> </div>

2
web/templates/studio.templ
View File

@@ -41,7 +41,7 @@ templ StudioDetails(producer jikan.ProducerResponse, animes []jikan.Anime, hasNe
</div> </div>
<div> <div>
<h2 class="mb-3 text-lg font-semibold">Anime</h2> <h2 class="mb-3 text-lg font-semibold">Anime</h2>
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-5" id="studio-anime-content"> <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-6" id="studio-anime-content">
for _, anime := range animes { for _, anime := range animes {
<div class="min-w-0" data-id={ fmt.Sprintf("%d", anime.MalID) }> <div class="min-w-0" data-id={ fmt.Sprintf("%d", anime.MalID) }>
@components.AnimeCard(components.AnimeCardProps{ @components.AnimeCard(components.AnimeCardProps{