Alexander Bocken
903722b335
All checks were successful
CI / update (push) Successful in 1m9s
Previously, live client-side search only worked on the main /rezepte and /recipes pages. All other pages (category, tag, favorites, search results, icon, and season pages) fell back to server-side search with form submission. Now all recipe pages support live filtering as users type, providing consistent UX across the site.
53 lines
1.3 KiB
Svelte
53 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import '$lib/css/nordtheme.css';
|
|
import Recipes from '$lib/components/Recipes.svelte';
|
|
import Search from './Search.svelte';
|
|
export let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
|
|
let month : number;
|
|
export let active_index;
|
|
export let routePrefix = '/rezepte';
|
|
export let lang = 'de';
|
|
export let recipes = []
|
|
export let onSearchResults = (ids, categories) => {}
|
|
|
|
</script>
|
|
<style>
|
|
a.month{
|
|
text-decoration: unset;
|
|
font-family: sans-serif;
|
|
border-radius: 1000px;
|
|
background-color: var(--blue);
|
|
color: var(--nord5);
|
|
padding: 0.5em;
|
|
transition: 100ms;
|
|
min-width: 4em;
|
|
text-align: center;
|
|
}
|
|
a.month:hover,
|
|
.active
|
|
{
|
|
transform: scale(1.1,1.1) !important;
|
|
background-color: var(--red) !important;
|
|
}
|
|
.months{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
margin-inline: auto;
|
|
margin-block: 2rem;
|
|
}
|
|
</style>
|
|
|
|
<div class=months>
|
|
{#each months as month, i}
|
|
<a class:active={i == active_index} class=month href="{routePrefix}/season/{i+1}">{month}</a>
|
|
{/each}
|
|
</div>
|
|
<section>
|
|
<Search season={active_index + 1} {lang} {recipes} {onSearchResults}></Search>
|
|
</section>
|
|
<section>
|
|
<slot name=recipes></slot>
|
|
</section>
|