droideparanoico/discdrop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add pagination to feed with Load more button using HTMX

Browse Source
This commit is contained in:
droideparanoico
2026-07-06 11:51:46 +02:00
parent 969fc673bc
commit bef4f7ba1d
5 changed files with 62 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/templates/fragments/feed-entries.html
+35 -29
View File
@@ -4,37 +4,43 @@
<p class="text-sm text-base-content/40 mt-2">Add artists to your collection to see their releases here</p>
</div>
{#else}
<div style="display:flex;flex-direction:column;gap:2.5rem">
{#for entry in entries}
<a href="https://musicbrainz.org/release-group/{entry.mbid}" target="_blank" rel="noopener noreferrer"
class="card card-side bg-base-200 border border-base-300 hover:bg-base-300 card-shadow overflow-hidden">
<figure class="w-64">
<img src="https://coverartarchive.org/release-group/{entry.mbid}/front-250"
alt="{entry.title}" class="object-cover w-full h-full"
loading="lazy"
onerror="this.parentElement.innerHTML='<div class=\'flex items-center justify-center h-full text-base-content/20\'>No Cover</div>'">
</figure>
<div class="card-body">
<h3 style="font-size:1.5rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--fallback-bc,oklch(var(--bc)/0.6))">{entry.artistName}</h3>
<h2 style="font-size:2rem;font-weight:700">{entry.title}</h2>
<div style="margin-top:0.75rem">
{#if entry.firstReleaseDate}
<div style="font-size:1.5rem;color:var(--fallback-bc,oklch(var(--bc)/0.4))">{entry.firstReleaseDate}</div>
{#for entry in entries}
<a href="https://musicbrainz.org/release-group/{entry.mbid}" target="_blank" rel="noopener noreferrer"
class="card card-side bg-base-200 border border-base-300 hover:bg-base-300 card-shadow overflow-hidden">
<figure class="w-64">
<img src="https://coverartarchive.org/release-group/{entry.mbid}/front-250"
alt="{entry.title}" class="object-cover w-full h-full"
loading="lazy"
onerror="this.parentElement.innerHTML='<div class=\'flex items-center justify-center h-full text-base-content/20\'>No Cover</div>'">
</figure>
<div class="card-body">
<h3 style="font-size:1.5rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--fallback-bc,oklch(var(--bc)/0.6))">{entry.artistName}</h3>
<h2 style="font-size:2rem;font-weight:700">{entry.title}</h2>
<div style="margin-top:0.75rem">
{#if entry.firstReleaseDate}
<div style="font-size:1.5rem;color:var(--fallback-bc,oklch(var(--bc)/0.4))">{entry.firstReleaseDate}</div>
{/if}
<div style="margin-top:0.4rem">
{#if entry.primaryType == 'Album'}
<span class="badge badge-primary" style="font-size:1.5rem;padding:0.3rem 0.8rem;height:auto">Album</span>
{#else if entry.primaryType == 'Single'}
<span class="badge badge-secondary" style="font-size:1.5rem;padding:0.3rem 0.8rem;height:auto">Single</span>
{#else if entry.primaryType == 'EP'}
<span class="badge badge-accent" style="font-size:1.5rem;padding:0.3rem 0.8rem;height:auto">EP</span>
{#else}
<span class="badge badge-ghost" style="font-size:1.5rem;padding:0.3rem 0.8rem;height:auto">{entry.primaryType}</span>
{/if}
<div style="margin-top:0.4rem">
{#if entry.primaryType == 'Album'}
<span class="badge badge-primary" style="font-size:1.5rem;padding:0.3rem 0.8rem;height:auto">Album</span>
{#else if entry.primaryType == 'Single'}
<span class="badge badge-secondary" style="font-size:1.5rem;padding:0.3rem 0.8rem;height:auto">Single</span>
{#else if entry.primaryType == 'EP'}
<span class="badge badge-accent" style="font-size:1.5rem;padding:0.3rem 0.8rem;height:auto">EP</span>
{#else}
<span class="badge badge-ghost" style="font-size:1.5rem;padding:0.3rem 0.8rem;height:auto">{entry.primaryType}</span>
{/if}
</div>
</div>
</div>
</a>
{/for}
</div>
</a>
{/for}
{#if hasMore}
<div style="display:flex;justify-content:center;padding:1rem 0">
<button class="btn btn-primary btn-sm"
hx-get="/api/artists/feed-table?page={nextPage}"
hx-target="closest div"
hx-swap="outerHTML">Load more</button>
</div>
{/if}
{/if}