ui: standardize 6-column grid and fix tab colors
This commit is contained in:
@@ -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
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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{
|
||||
|
||||
Reference in New Issue
Block a user