refactor(ui): standardize tailwind classes
This commit is contained in:
@@ -9,35 +9,35 @@ templ Discover() {
|
||||
<div class="grid gap-4">
|
||||
<div class="grid gap-4">
|
||||
<h1>Discover</h1>
|
||||
<p class="m-0 text-[0.88rem] text-[var(--text-muted)]">Browse what's airing now and what is coming soon.</p>
|
||||
<p class="m-0 text-sm text-(--text-muted)">Browse what's airing now and what is coming soon.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 max-[680px]:flex-nowrap max-[680px]:overflow-x-auto max-[680px]:pb-1" data-tab-group="discover">
|
||||
<div class="flex flex-wrap gap-2 max-md:flex-nowrap max-md:overflow-x-auto max-md:pb-1" data-tab-group="discover">
|
||||
<button
|
||||
class="tab-trigger shrink-0 whitespace-nowrap bg-[var(--surface-tab-active)] px-[0.45rem] py-[0.24rem] text-[0.76rem] text-[var(--accent)]"
|
||||
class="tab-trigger shrink-0 whitespace-nowrap bg-(--surface-tab-active) px-2 py-1 text-xs text-(--accent)"
|
||||
type="button"
|
||||
hx-get="/api/discover/airing?page=1"
|
||||
hx-target="#discover-content"
|
||||
hx-trigger="click"
|
||||
data-tab-trigger
|
||||
data-tab-active-classes="bg-[var(--surface-tab-active)] text-[var(--accent)]"
|
||||
data-tab-inactive-classes="bg-[var(--panel-soft)] text-[var(--text-muted)]"
|
||||
data-tab-active-classes="bg-(--surface-tab-active) text-(--accent)"
|
||||
data-tab-inactive-classes="bg-(--panel-soft) text-(--text-muted)"
|
||||
>
|
||||
airing now
|
||||
</button>
|
||||
<button
|
||||
class="tab-trigger shrink-0 whitespace-nowrap bg-[var(--panel-soft)] px-[0.45rem] py-[0.24rem] text-[0.76rem] text-[var(--text-muted)] hover:bg-[var(--surface-tab-hover)] hover:text-[var(--text)]"
|
||||
class="tab-trigger shrink-0 whitespace-nowrap bg-(--panel-soft) px-2 py-1 text-xs text-(--text-muted) hover:bg-(--surface-tab-hover) hover:text-(--text)"
|
||||
type="button"
|
||||
hx-get="/api/discover/upcoming?page=1"
|
||||
hx-target="#discover-content"
|
||||
hx-trigger="click"
|
||||
data-tab-trigger
|
||||
data-tab-active-classes="bg-[var(--surface-tab-active)] text-[var(--accent)]"
|
||||
data-tab-inactive-classes="bg-[var(--panel-soft)] text-[var(--text-muted)]"
|
||||
data-tab-active-classes="bg-(--surface-tab-active) text-(--accent)"
|
||||
data-tab-inactive-classes="bg-(--panel-soft) text-(--text-muted)"
|
||||
>
|
||||
upcoming
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-[repeat(auto-fill,minmax(190px,1fr))] gap-4 max-[680px]:grid-cols-2 max-[680px]:gap-3" 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-5" id="discover-content" hx-get="/api/discover/airing?page=1" hx-trigger="load">
|
||||
<div class="col-span-full">
|
||||
@ui.LoadingIndicator("Loading discover")
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user