Filters (#12)

* Started on filter rewrite * Finished first version of filters * Small improvement for filtesr
tweedegolf · Aug 9, 2024 · 0a78dd8 · 0a78dd8
1 parent c2bfebf
commit 0a78dd8
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
@@ -33,26 +33,31 @@
         return selected_crates;
     }
 
+    // Close filter with Esc key
+    function handle_key_down(e) {
+       if (e.keyCode == 27) {
+         $open_filter = "";
+       }
+    }
+
     $: selected_crates = combine_filters(t_crates.length, [selected_d, selected_l, selected_r, selected_i]);
 
 </script>
 
-<div>
-
-  <ForkMe />
+<svelte:window on:keydown={handle_key_down} />
 
-  <h1>{selected_crates.length} awesome drivers waiting for you!</h1>
-  <main>
+<ForkMe />
 
-      <div class="filters">
-        <Filter name="Dependencies" values={t_indexes.dependencies} bind:selected={selected_d}/>
-        <Filter name="Interfaces" values={t_indexes.interfaces} bind:selected={selected_i}/>
-        <Filter name="👮 License" values={t_indexes.license} bind:selected={selected_l}/>
-        <Filter name="Rust Version" values={t_indexes.rust_version} bind:selected={selected_r}/>
-      </div>
+<h1 on:click={() => $open_filter = ""}>{selected_crates.length} awesome drivers waiting for you!</h1>
+<main>
 
-      <CrateList crates={t_crates} filter={selected_crates} cols_shown={cols}/>
+  <div class="filters">
+    <Filter name="Dependencies" values={t_indexes.dependencies} bind:selected={selected_d}/>
+    <Filter name="Interfaces" values={t_indexes.interfaces} bind:selected={selected_i}/>
+    <Filter name="👮 License" values={t_indexes.license} bind:selected={selected_l}/>
+    <Filter name="Rust Version" values={t_indexes.rust_version} bind:selected={selected_r}/>
+  </div>
 
-  </main>
+  <CrateList crates={t_crates} filter={selected_crates} cols_shown={cols} />
 
-</div>
+</main>
diff --git a/frontend/src/lib/CrateList.svelte b/frontend/src/lib/CrateList.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import type {FullCrate} from "../crate-db";
     import Crate from "./Crate.svelte";
+    import {open_filter} from '../store/FilterStore.svelte';
 
     export let crates: FullCrate[];
 
@@ -10,8 +11,7 @@
     let filtered_crates: FullCrate[] = crates;
 </script>
 
-
-<ol>
+<ol on:click={() => $open_filter = ""}>
 {#each filtered_crates as crate, i}
     {#if filter.includes(i)}
         <li><Crate crate={crate}/></li>
@@ -24,4 +24,4 @@
         list-style-type: none;
         padding: 0;
     }
-</style>
+</style>