UI polish: centering, search width, dropdown contrast, cover thumbnails, branding, sticky headers

- 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
This commit is contained in:
2026-07-03 10:58:44 +02:00
parent 0bae5fd288
commit 16f23557f0
6 changed files with 126 additions and 71 deletions
+20 -7
View File
@@ -1,13 +1,26 @@
{#include layouts/base}
{#page-content}
<div class="w-full max-w-4xl mx-auto">
<h2 class="text-2xl font-bold mb-4 text-center">📡 Releases</h2>
<div id="feed-entries" hx-get="/api/artists/feed-table" hx-trigger="load">
<span class="loading loading-spinner loading-lg block mx-auto"></span>
<div class="w-full">
<div class="flex items-center justify-between mb-5">
<h2 class="text-2xl font-bold">📡 Releases</h2>
<div class="flex gap-2">
<a href="/feed/rss.xml" class="btn btn-primary btn-sm gap-2">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/>
<circle cx="5" cy="19" r="1"/>
</svg>
RSS Feed
</a>
<a href="/feed/opml" class="btn btn-ghost btn-sm gap-2">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
OPML
</a>
</div>
</div>
<div class="mt-6 flex justify-center gap-4">
<a href="/feed/rss.xml" class="btn btn-primary">📥 RSS Feed</a>
<a href="/feed/opml" class="btn btn-ghost">📋 OPML</a>
<div id="feed-entries" hx-get="/api/artists/feed-table" hx-trigger="load">
<div class="flex justify-center my-16">
<span class="loading loading-spinner loading-lg"></span>
</div>
</div>
</div>
{/page-content}