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:
droideparanoico
2026-07-02 16:02:42 +02:00
parent aef7bd067c
commit b08eb2573c
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/layouts/base.html
+37 -18
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">
<a href="/" class="text-xl font-bold">🎵 DiscDrop</a>
<div class="tabs tabs-box ml-4 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 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-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"
hx-target="#search-results"
hx-swap="innerHTML"
autocomplete="off">
<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">
</form>
<div id="search-results" class="search-dropdown"></div>
</div>
<div id="search-results" class="search-dropdown"></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">