claude/kochwas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(header): Filter-Dropdown auch in der Header-Suche
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m15s
Details

Browse Source 
Der SearchFilter-Store galt schon global, aber das UI zum Ändern gab es
nur auf der Home-Seite — auf Rezept-/Preview-Seiten konnte man den
Filter nicht sehen, geschweige denn setzen. Jetzt zeigt die Header-Suche
denselben inline-Trigger links vom Input. Nav-Form bekommt Border +
Background als Container, Input wird transparent, Fokus-Outline landet
auf dem Container (wie auf der Home-Seite).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-18 08:53:54 +02:00
parent aad3ad689d
commit c87196cd67
1 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/routes/+layout.svelte
View File

@@ -10,6 +10,7 @@
import ProfileSwitcher from '$lib/components/ProfileSwitcher.svelte'; import ProfileSwitcher from '$lib/components/ProfileSwitcher.svelte';
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'; import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
import SearchLoader from '$lib/components/SearchLoader.svelte'; import SearchLoader from '$lib/components/SearchLoader.svelte';
import SearchFilter from '$lib/components/SearchFilter.svelte';
import UpdateToast from '$lib/components/UpdateToast.svelte'; import UpdateToast from '$lib/components/UpdateToast.svelte';
import type { SearchHit } from '$lib/server/recipes/search-local'; import type { SearchHit } from '$lib/server/recipes/search-local';
import type { WebHit } from '$lib/server/search/searxng'; import type { WebHit } from '$lib/server/search/searxng';
@@ -219,6 +220,7 @@
{#if showHeaderSearch} {#if showHeaderSearch}
<div class="nav-search-wrap" bind:this={navContainer}> <div class="nav-search-wrap" bind:this={navContainer}>
<form class="nav-search" onsubmit={submitNav} role="search"> <form class="nav-search" onsubmit={submitNav} role="search">
<SearchFilter inline />
<input <input
type="search" type="search"
bind:value={navQuery} bind:value={navQuery}
@@ -412,21 +414,29 @@
} }
.nav-search { .nav-search {
display: flex; display: flex;
} align-items: stretch;
.nav-search input {
width: 100%;
padding: 0.55rem 0.85rem;
font-size: 0.95rem;
border: 1px solid #cfd9d1; border: 1px solid #cfd9d1;
border-radius: 999px; border-radius: 999px;
background: #f4f8f5; background: #f4f8f5;
min-height: 40px; min-height: 40px;
} }
.nav-search input:focus { .nav-search:focus-within {
outline: 2px solid #2b6a3d; outline: 2px solid #2b6a3d;
outline-offset: 1px; outline-offset: 1px;
background: white; background: white;
} }
.nav-search input {
flex: 1;
width: 100%;
padding: 0.55rem 0.85rem;
font-size: 0.95rem;
border: 0;
background: transparent;
min-width: 0;
}
.nav-search input:focus {
outline: none;
}
.dropdown { .dropdown {
position: absolute; position: absolute;
top: calc(100% + 0.4rem); top: calc(100% + 0.4rem);