325b967945
- Constrain main content to max-w-5xl centered - Widen search input (w-72 md:w-80 lg:w-96) - Search dropdown: card with shadow, border, and primary-tinted hover - Branding: SVG music note icon + gradient text + tagline - Covers: 64px with front-250 thumbnail URL for faster loading - Badge colors per type (primary/secondary/accent/ghost) - Sticky table headers via table-pin-rows - SVG icons for Add/Remove/RSS/OPML buttons - Consistent hover transitions across tables
64 lines
2.4 KiB
HTML
64 lines
2.4 KiB
HTML
{#if entries.isEmpty()}
|
|
<div class="card bg-base-100 shadow-xl p-10 text-center">
|
|
<svg class="w-12 h-12 mx-auto text-base-content/20 mb-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>
|
|
<path d="M9 18V5l12-2v13"/><path d="M9 9l12-2"/>
|
|
</svg>
|
|
<p class="text-lg font-medium text-base-content/60">No releases found</p>
|
|
<p class="text-sm text-base-content/40 mt-1">Add artists to your collection to see their releases here</p>
|
|
</div>
|
|
{#else}
|
|
<div class="overflow-x-auto rounded-box border border-base-300">
|
|
<table class="table table-pin-rows">
|
|
<thead>
|
|
<tr class="bg-base-200/80">
|
|
<th class="w-20">Cover</th>
|
|
<th>Artist</th>
|
|
<th>Release</th>
|
|
<th>Type</th>
|
|
<th class="w-28">Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#for entry in entries}
|
|
<tr class="hover:bg-base-200/50 transition-colors">
|
|
<td>
|
|
<a href="https://musicbrainz.org/release-group/{entry.mbid}"
|
|
target="_blank" rel="noopener noreferrer">
|
|
<img src="https://coverartarchive.org/release-group/{entry.mbid}/front-250"
|
|
alt="Cover"
|
|
width="64" height="64"
|
|
style="width:64px;height:64px;object-fit:cover;border-radius:8px"
|
|
loading="lazy"
|
|
onerror="this.style.display='none'">
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span class="font-medium">{entry.artistName}</span>
|
|
</td>
|
|
<td>
|
|
<a href="https://musicbrainz.org/release-group/{entry.mbid}"
|
|
target="_blank" rel="noopener noreferrer"
|
|
class="link link-hover font-medium">
|
|
{entry.title}
|
|
</a>
|
|
</td>
|
|
<td>
|
|
{#if entry.primaryType == 'Album'}
|
|
<span class="badge badge-primary badge-sm">Album</span>
|
|
{#else if entry.primaryType == 'Single'}
|
|
<span class="badge badge-secondary badge-sm">Single</span>
|
|
{#else if entry.primaryType == 'EP'}
|
|
<span class="badge badge-accent badge-sm">EP</span>
|
|
{#else}
|
|
<span class="badge badge-ghost badge-sm">{entry.primaryType}</span>
|
|
{/if}
|
|
</td>
|
|
<td class="text-sm text-base-content/50">{entry.firstReleaseDate}</td>
|
|
</tr>
|
|
{/for}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{/if}
|