ui: standardize 6-column grid and fix tab colors

This commit is contained in:
2026-04-21 00:21:33 +02:00
parent 980469b448
commit 8a887f23fe
4 changed files with 6 additions and 6 deletions

View File

@@ -4,7 +4,7 @@ package shared
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"
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
}

View File

@@ -7,7 +7,7 @@ import "mal/web/shared/layout"
templ Catalog() {
@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">
@ui.LoadingIndicator("Loading catalog")
</div>

View File

@@ -20,7 +20,7 @@ templ Discover() {
hx-target="#discover-content"
hx-trigger="click"
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)"
>
airing now
@@ -32,13 +32,13 @@ templ Discover() {
hx-target="#discover-content"
hx-trigger="click"
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)"
>
upcoming
</button>
</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">
@ui.LoadingIndicator("Loading discover")
</div>

View File

@@ -41,7 +41,7 @@ templ StudioDetails(producer jikan.ProducerResponse, animes []jikan.Anime, hasNe
</div>
<div>
<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 {
<div class="min-w-0" data-id={ fmt.Sprintf("%d", anime.MalID) }>
@components.AnimeCard(components.AnimeCardProps{