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

feat: add section_action component

Browse Source
This commit is contained in:
mkelvers
2026-06-12 11:01:53 +02:00
parent 15ad54a847
commit b607b091d5
3 changed files with 31 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
templates/index.gohtml
View File

@@ -12,12 +12,9 @@
{{end}}
<section class="w-full">
<div class="mb-4 flex items-end justify-between">
<div class="mb-4 flex items-end justify-between gap-3">
<h2 class="text-base font-normal text-foreground">Currently Airing</h2>
<a href="/browse?status=airing&order_by=popularity&sort=asc" class="group flex items-center gap-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
See more
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-0.5"><path d="m9 18 6-6-6-6"/></svg>
</a>
{{template "section_action" dict "Href" "/browse?status=airing&order_by=popularity&sort=asc" "Label" "View all"}}
</div>
<div hx-get="/api/catalog/airing" hx-trigger="load" hx-swap="outerHTML">
{{template "catalog_skeleton"}}
@@ -25,12 +22,9 @@
</section>
<section class="w-full">
<div class="mb-4 flex items-end justify-between">
<div class="mb-4 flex items-end justify-between gap-3">
<h2 class="text-base font-normal text-foreground">Most Popular</h2>
<a href="/browse?order_by=popularity&sort=asc" class="group flex items-center gap-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
See more
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-0.5"><path d="m9 18 6-6-6-6"/></svg>
</a>
{{template "section_action" dict "Href" "/browse?order_by=popularity&sort=asc" "Label" "View all"}}
</div>
<div hx-get="/api/catalog/popular" hx-trigger="load" hx-swap="outerHTML">
{{template "catalog_skeleton"}}
@@ -45,10 +39,7 @@
<section id="top-pick-for-you-section" class="w-full" data-top-pick-carousel>
<div class="mb-4 flex items-end justify-between gap-3">
<h2 class="min-w-0 text-base font-normal text-foreground">Top Pick for You</h2>
<a href="/discover/top-picks" class="group flex items-center gap-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
Explore more
<svg xmlns="http://www.w3.org/2000/svg" class="size-4 transition-transform group-hover:translate-x-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
</a>
{{template "section_action" dict "Href" "/discover/top-picks" "Label" "View all"}}
</div>
<div class="relative overflow-hidden">
<div data-top-pick-track tabindex="0" class="grid min-w-0 grid-flow-col auto-cols-[calc((100%-0.75rem)/2.18)] gap-3 overflow-x-auto scroll-smooth pb-1 scrollbar-hidden md:auto-cols-[calc((100%-2rem)/3.35)] md:gap-4 lg:auto-cols-[calc((100%-3rem)/4.35)] xl:auto-cols-[calc((100%-4rem)/5.35)] 2xl:auto-cols-[calc((100%-5rem)/6.35)]">