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} {#include layouts/base}
{#page-content} {#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> <h2 class="text-2xl font-bold mb-4">🎤 Artists</h2>
<div id="artist-list" hx-get="/api/artists/list" hx-trigger="load"> <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>
</div> </div>
{/page-content} {/page-content}
src/main/resources/templates/layouts/base.html
+31 -12
View File
@@ -15,31 +15,50 @@
z-index: 50; z-index: 50;
} }
</style> </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> </head>
<body class="min-h-screen bg-base-200"> <body class="min-h-screen bg-base-200">
<div class="navbar bg-base-100 shadow-lg px-4"> <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> <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="/" class="tab {#if activeTab == 'releases'}tab-active{/if}">Releases</a>
<a href="/artists" class="tab {#if activeTab == 'artists'}tab-active{/if}">Artists</a> <a href="/artists" class="tab {#if activeTab == 'artists'}tab-active{/if}">Artists</a>
</div> </div>
</div> </div>
</div>
<div class="flex-none gap-2 relative"> <div class="navbar-center">
<div class="form-control"> <div class="relative">
<input type="text" placeholder="Search artists..." <form hx-get="/api/artists/search"
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-target="#search-results"
hx-swap="innerHTML" 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"> autocomplete="off">
</div> </form>
<div id="search-results" class="search-dropdown"></div> <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="dark">Dark</option>
<option value="light">Light</option> <option value="light">Light</option>
<option value="synthwave">Synthwave</option> <option value="synthwave">Synthwave</option>
@@ -60,7 +79,7 @@
</main> </main>
<dialog id="settingsModal" class="modal"> <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-get="/api/settings/form"
hx-trigger="load" hx-trigger="load"
hx-swap="innerHTML"> hx-swap="innerHTML">
src/main/resources/templates/releases.html
+4 -4
View File
@@ -1,11 +1,11 @@
{#include layouts/base} {#include layouts/base}
{#page-content} {#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">📡 Releases</h2> <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"> <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>
<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/rss.xml" class="btn btn-primary">📥 RSS Feed</a>
<a href="/feed/opml" class="btn btn-ghost">📋 OPML</a> <a href="/feed/opml" class="btn btn-ghost">📋 OPML</a>
</div> </div>