diff --git a/src/lib/components/MediaScroller.svelte b/src/lib/components/MediaScroller.svelte index 6224960..537fd7d 100644 --- a/src/lib/components/MediaScroller.svelte +++ b/src/lib/components/MediaScroller.svelte @@ -11,7 +11,7 @@ export let title gap: 2rem; padding: 3rem; } -.wrapper{ +.media_scroller_wrapper{ background-color: var(--nord2); } h2{ @@ -23,7 +23,7 @@ h2{ -
+
{#if title}

{title}

{/if} diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte index 1a27085..4510dba 100644 --- a/src/lib/components/Search.svelte +++ b/src/lib/components/Search.svelte @@ -14,6 +14,8 @@ onMount(() => { const searchTerms = searchText.split(" "); const hasFilter = searchText.length > 0; + let scrollers_with_results = []; + let scrollers = []; // for each recipe hide all but matched recipes.forEach(recipe => { const searchString = `${recipe.textContent} ${recipe.dataset.tags}`.toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, ""); @@ -21,7 +23,19 @@ onMount(() => { recipe.style.display = (isMatch ? 'flex' : 'none'); recipe.classList.toggle("matched-recipe", hasFilter && isMatch); - }) + if(!scrollers.includes(recipe.parentNode)){ + scrollers.push(recipe.parentNode) + } + if(!scrollers_with_results.includes(recipe.parentNode) && isMatch){ + scrollers_with_results.push(recipe.parentNode) + } + }) + scrollers_with_results.forEach( scroller => { + scroller.parentNode.style.display= 'block' + }) + scrollers.filter(item => !scrollers_with_results.includes(item)).forEach( scroller => { + scroller.parentNode.style.display= 'none' + }) } search.addEventListener("input", () => { @@ -33,7 +47,10 @@ onMount(() => { recipes.forEach(recipe => { recipe.style.display = 'flex'; recipe.classList.remove("matched-recipe"); - }) + }) + document.querySelectorAll(".media_scroller_wrapper").forEach( scroller => { + scroller.style.display= 'block' + }) }) let paramString = window.location.href.split('?')[1];