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

style: reformat watchlist dropdown with multiline attributes

Browse Source
This commit is contained in:
mkelvers
2026-04-20 16:19:45 +02:00
parent b18aba5a22
commit eff3072641
1 changed files with 33 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
web/components/watchlist/dropdown.templ
View File

@@ -2,9 +2,21 @@ package watchlist
import "fmt"
templ WatchlistDropdown(animeID int, animeTitle string, animeTitleEnglish string, animeTitleJapanese string, animeImage string, currentStatus string, airing bool) {
templ WatchlistDropdown(
animeID int,
animeTitle string,
animeTitleEnglish string,
animeTitleJapanese string,
animeImage string,
currentStatus string,
airing bool,
) {
<div class="relative inline-block" id="watchlist-dropdown">
<button class="inline-flex h-8 cursor-pointer items-center gap-2 bg-(--panel-soft) px-2 text-xs text-(--text)" onclick="toggleDropdown()" data-dropdown-trigger>
<button
class="inline-flex h-8 cursor-pointer items-center gap-2 bg-(--panel-soft) px-2 text-xs text-(--text)"
onclick="toggleDropdown()"
data-dropdown-trigger
>
if currentStatus != "" {
{ formatStatus(currentStatus) }
} else {
@@ -12,7 +24,12 @@ templ WatchlistDropdown(animeID int, animeTitle string, animeTitleEnglish string
}
<span class="text-xs">▾</span>
</button>
<div class="invisible absolute left-0 top-full mt-0.5 z-50 min-w-52 bg-(--panel) opacity-0 transition-opacity duration-150" data-dropdown-menu data-dropdown-open-classes="visible opacity-100" data-dropdown-closed-classes="invisible opacity-0">
<div
class="invisible absolute left-0 top-full mt-0.5 z-50 min-w-52 bg-(--panel) opacity-0 transition-opacity duration-150"
data-dropdown-menu
data-dropdown-open-classes="visible opacity-100"
data-dropdown-closed-classes="invisible opacity-0"
>
@StatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "watching", currentStatus, airing)
@StatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "completed", currentStatus, airing)
@StatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "on_hold", currentStatus, airing)
@@ -24,13 +41,24 @@ templ WatchlistDropdown(animeID int, animeTitle string, animeTitleEnglish string
hx-delete={ string(templ.URL(fmt.Sprintf("/api/watchlist/%d", animeID))) }
hx-target="#watchlist-dropdown"
hx-swap="outerHTML swap:150ms"
>Remove from list</button>
>
Remove from list
</button>
}
</div>
</div>
}
templ StatusOption(animeID int, animeTitle string, animeTitleEnglish string, animeTitleJapanese string, animeImage string, status string, currentStatus string, airing bool) {
templ StatusOption(
animeID int,
animeTitle string,
animeTitleEnglish string,
animeTitleJapanese string,
animeImage string,
status string,
currentStatus string,
airing bool,
) {
<button
class={
"flex w-full cursor-pointer items-center justify-between bg-transparent px-2.5 py-2 text-left text-xs text-(--text-muted) hover:bg-(--panel-soft) hover:text-(--text)",