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

make discover page responsive

Browse Source
This commit is contained in:
mkelvers
2026-05-04 12:03:19 +02:00
parent 6fc3d55c8d
commit 1df318c07c
1 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
templates/discover.gohtml
View File

@@ -56,7 +56,7 @@
<h2 class="text-xl font-semibold text-white">Trending This Season</h2>
<a href="/browse?order_by=popularity&sort=desc" class="text-accent text-sm hover:underline">View all</a>
</div>
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8">
<div class="discover-grid">
{{range $i, $anime := .Trending}}
<div>
{{template "anime_card" dict "Anime" $anime "WithActions" true "IsWatchlist" (index $.WatchlistMap $anime.MalID)}}
@@ -70,7 +70,7 @@
<h2 class="text-xl font-semibold text-white">Highly Anticipated</h2>
<a href="/browse?status=upcoming&order_by=members&sort=desc" class="text-accent text-sm hover:underline">View all</a>
</div>
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8">
<div class="discover-grid">
{{range $i, $anime := .Upcoming}}
<div>
{{template "anime_card" dict "Anime" $anime "WithActions" true "IsWatchlist" (index $.WatchlistMap $anime.MalID)}}
@@ -84,7 +84,7 @@
<h2 class="text-xl font-semibold text-white">All-Time Greats</h2>
<a href="/browse?order_by=score&sort=desc" class="text-accent text-sm hover:underline">View all</a>
</div>
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8">
<div class="discover-grid">
{{range $i, $anime := .Top}}
<div>
{{template "anime_card" dict "Anime" $anime "WithActions" true "IsWatchlist" (index $.WatchlistMap $anime.MalID)}}
@@ -94,5 +94,12 @@
</section>
</div>
<style>
.discover-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem;
}
</style>
{{end}}