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

Fix UI: navbar layout, search form, theme switcher, content centering

Browse Source 
- Wrap search in HTMX form for reliable parameter serialization
- Replace daisyUI data-choose-theme with custom JS (localStorage persistence)
- Restructure navbar: logo+tabs left, search center, theme+settings right
- Center releases page with max-w-4xl constrained layout
- Center artist page content
- Add loading spinner centering
This commit is contained in:
david.alvarez
2026-07-02 16:02:42 +02:00
parent aef7bd067c
commit dcdd04df8c
3 changed files with 43 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/templates/artists.html
+2 -2
View File
@@ -1,9 +1,9 @@
{#include layouts/base}
{#page-content}
<div class="container mx-auto p-4">
<div class="w-full max-w-4xl mx-auto">
<h2 class="text-2xl font-bold mb-4">🎤 Artists</h2>
<div id="artist-list" hx-get="/api/artists/list" hx-trigger="load">
<span class="loading loading-spinner loading-lg"></span>
<span class="loading loading-spinner loading-lg block mx-auto"></span>
</div>
</div>
{/page-content}
src/main/resources/templates/layouts/base.html
+31 -12
View File
@@ -15,31 +15,50 @@
z-index: 50;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var saved = localStorage.getItem('daisyui-theme');
if (saved) document.documentElement.setAttribute('data-theme', saved);
});
function setTheme(sel) {
var theme = sel.value;
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('daisyui-theme', theme);
}
</script>
</head>
<body class="min-h-screen bg-base-200">
<div class="navbar bg-base-100 shadow-lg px-4">
<div class="flex-1 gap-2">
<div class="navbar-start">
<div class="flex items-center gap-2">
<a href="/" class="text-xl font-bold">🎵 DiscDrop</a>
<div class="tabs tabs-box ml-4 hidden sm:flex">
<div class="tabs tabs-box ml-2 hidden sm:flex">
<a href="/" class="tab {#if activeTab == 'releases'}tab-active{/if}">Releases</a>
<a href="/artists" class="tab {#if activeTab == 'artists'}tab-active{/if}">Artists</a>
</div>
</div>
</div>
<div class="flex-none gap-2 relative">
<div class="form-control">
<input type="text" placeholder="Search artists..."
class="input input-bordered input-sm w-48 md:w-64"
name="q"
hx-get="/api/artists/search"
hx-trigger="keyup changed delay:300ms"
<div class="navbar-center">
<div class="relative">
<form hx-get="/api/artists/search"
hx-target="#search-results"
hx-swap="innerHTML"
hx-trigger="keyup changed delay:300ms from:#search-input">
<input id="search-input"
type="text"
placeholder="Search artists..."
class="input input-bordered input-sm w-48 md:w-64"
name="q"
autocomplete="off">
</div>
</form>
<div id="search-results" class="search-dropdown"></div>
</div>
</div>
<select class="select select-bordered select-sm w-full max-w-[8rem]" data-choose-theme>
<div class="navbar-end gap-2">
<select class="select select-bordered select-sm w-full max-w-[8rem]"
onchange="setTheme(this)">
<option value="dark">Dark</option>
<option value="light">Light</option>
<option value="synthwave">Synthwave</option>
@@ -60,7 +79,7 @@
</main>
<dialog id="settingsModal" class="modal">
<div class="modal-box" id="settings-modal-content"
<div class="modal-box max-w-md" id="settings-modal-content"
hx-get="/api/settings/form"
hx-trigger="load"
hx-swap="innerHTML">
src/main/resources/templates/releases.html
+4 -4
View File
@@ -1,11 +1,11 @@
{#include layouts/base}
{#page-content}
<div class="container mx-auto p-4">
<h2 class="text-2xl font-bold mb-4">📡 Releases</h2>
<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"></span>
<span class="loading loading-spinner loading-lg block mx-auto"></span>
</div>
<div class="mt-4 flex gap-4">
<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>