mkelvers/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: update header layout with nav on left, search on right

Browse Source
This commit is contained in:
mkelvers
2026-04-06 19:20:39 +02:00
parent 3643ab25cd
commit 362bf15b93
2 changed files with 11 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
internal/templates/layout.templ
View File

@@ -13,15 +13,15 @@ templ Layout(title string) {
<body>
<header>
<div class="header-top">
<h1>/malago</h1>
<div class="nav">
<a href="/">home</a>
<a href="/catalog">catalog</a>
<a href="/watchlist">watchlist</a>
<div class="header-left">
<a href="/" class="logo">/malago</a>
<div class="nav">
<a href="/">catalog</a>
<a href="/watchlist">watchlist</a>
</div>
</div>
<form action="/" method="GET" style="display: flex; align-items: center; gap: 0;">
<form action="/search" method="GET" class="header-search">
<input type="text" name="q" class="search-input" placeholder="search anime..." />
<button type="submit" class="search-button">go</button>
</form>
</div>
</header>
@@ -29,19 +29,17 @@ templ Layout(title string) {
<main>
{ children... }
</main>
<div id="toast-container" style="position: fixed; bottom: 24px; right: 24px; z-index: 1000; display: flex; flex-direction: column; gap: 8px;"></div>
<div id="toast-container"></div>
<script>
document.body.addEventListener('toast', function(evt) {
const container = document.getElementById('toast-container');
const toast = document.createElement('div');
toast.style.cssText = 'background: var(--surface); color: var(--text); border: 1px solid var(--border); padding: 12px 16px; font-size: 13px; font-weight: 500; opacity: 0; transition: opacity 0.3s; box-shadow: 0 4px 12px rgba(0,0,0,0.5);';
toast.className = 'toast';
toast.textContent = evt.detail.value;
container.appendChild(toast);
// fade in
requestAnimationFrame(() => { toast.style.opacity = '1'; });
// remove after 3s
setTimeout(() => {
toast.style.opacity = '0';
setTimeout(() => { toast.remove(); }, 300);