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

refactor(ui): standardize tailwind classes

Browse Source
This commit is contained in:
mkelvers
2026-04-15 01:19:31 +02:00
parent 2a7361f133
commit c9d3ca5cc6
14 changed files with 228 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
internal/shared/ui/anime_card.templ
View File

@@ -17,7 +17,7 @@ templ AnimeCard(props AnimeCardProps) {
if props.CurrentNode {
<div class={ defaultString(props.Class, "min-w-0") }>
@animeCardPoster(props.ImageURL, props.Title, props.ImgClass)
<div class={ defaultString(props.TitleClass, "mt-2 line-clamp-2 text-[0.86rem] leading-[1.3] text-[var(--text)]") }>
<div class={ defaultString(props.TitleClass, "mt-2 line-clamp-2 text-sm leading-snug text-(--text)") }>
{ props.Title }
</div>
{ children... }
@@ -27,7 +27,7 @@ templ AnimeCard(props AnimeCardProps) {
@animeCardPoster(props.ImageURL, props.Title, props.ImgClass)
if props.Class != "notification-card" && props.Class != "schedule-card" {
<div class={ defaultString(props.TitleClass, "mt-2 line-clamp-2 text-[0.86rem] leading-[1.3] text-[var(--text)]") }>
<div class={ defaultString(props.TitleClass, "mt-2 line-clamp-2 text-sm leading-snug text-(--text)") }>
{ props.Title }
</div>
}
@@ -37,11 +37,11 @@ templ AnimeCard(props AnimeCardProps) {
}
templ animeCardPoster(imageURL, title, imgClass string) {
<div class="flex h-full w-full aspect-[2/3] max-h-[var(--poster-max-height)] justify-center overflow-hidden">
<div class="flex h-full w-full aspect-2/3 max-h-(--poster-max-height) justify-center overflow-hidden">
if imageURL != "" {
<img src={ imageURL } alt={ title } class={ defaultString(imgClass, "block h-full w-full object-cover object-center") } loading="lazy"/>
} else {
<div class="flex h-full w-full justify-center overflow-hidden text-[0] text-transparent">No image</div>
<div class="flex h-full w-full justify-center overflow-hidden text-transparent">No image</div>
}
</div>
}

2
internal/shared/ui/empty_state.templ
View File

@@ -3,7 +3,7 @@ package ui
templ EmptyState(title string) {
<div class="py-4">
<div class="mb-2 text-base">{ title }</div>
<div class="text-sm text-[var(--text-muted)]">
<div class="text-sm text-(--text-muted)">
{ children... }
</div>
</div>

8
internal/shared/ui/loading.templ
View File

@@ -1,10 +1,10 @@
package ui
templ LoadingIndicator(text string) {
<div class="inline-flex items-center gap-2 text-sm text-[var(--text-muted)]">
<div class="h-1.5 w-1.5 rounded-full bg-[var(--text-faint)]"></div>
<div class="h-1.5 w-1.5 rounded-full bg-[var(--text-faint)]"></div>
<div class="h-1.5 w-1.5 rounded-full bg-[var(--text-faint)]"></div>
<div class="inline-flex items-center gap-2 text-sm text-(--text-muted)">
<div class="h-1.5 w-1.5 rounded-full bg-(--text-faint)"></div>
<div class="h-1.5 w-1.5 rounded-full bg-(--text-faint)"></div>
<div class="h-1.5 w-1.5 rounded-full bg-(--text-faint)"></div>
<span>{ text }</span>
</div>
}

10
internal/shared/ui/sort_filter.templ
View File

@@ -8,17 +8,17 @@ type SortFilterOptions struct {
}
templ SortFilter(opts SortFilterOptions) {
<div class="mb-4 flex flex-wrap items-center gap-3 bg-[var(--panel)] p-3 max-[860px]:flex-col max-[860px]:items-start max-[860px]:gap-2">
<div class="mb-4 flex flex-wrap items-center gap-3 bg-(--panel) p-3 max-lg:flex-col max-lg:items-start max-lg:gap-2">
<div class="flex items-center gap-2">
<label for="sort-select" class="text-[0.78rem] text-[var(--text-muted)]">Sort by</label>
<select id="sort-select" class="h-[30px] bg-[var(--surface-select)] px-2 text-[0.78rem] text-[var(--text)]" onchange="document.getElementById('sort-input').value = this.value; document.getElementById('sort-form').submit()">
<label for="sort-select" class="text-xs text-(--text-muted)">Sort by</label>
<select id="sort-select" class="h-8 bg-(--surface-select) px-2 text-xs text-(--text)" onchange="document.getElementById('sort-input').value = this.value; document.getElementById('sort-form').submit()">
<option value="date" selected?={ opts.Sort == "date" }>Date added</option>
<option value="title" selected?={ opts.Sort == "title" }>Title</option>
</select>
</div>
<div class="flex items-center gap-2">
<label for="order-select" class="text-[0.78rem] text-[var(--text-muted)]">Order</label>
<select id="order-select" class="h-[30px] bg-[var(--surface-select)] px-2 text-[0.78rem] text-[var(--text)]" onchange="document.getElementById('order-input').value = this.value; document.getElementById('sort-form').submit()">
<label for="order-select" class="text-xs text-(--text-muted)">Order</label>
<select id="order-select" class="h-8 bg-(--surface-select) px-2 text-xs text-(--text)" onchange="document.getElementById('order-input').value = this.value; document.getElementById('sort-form').submit()">
<option value="desc" selected?={ opts.Order == "desc" }>Descending</option>
<option value="asc" selected?={ opts.Order == "asc" }>Ascending</option>
</select>