Minimize search text section.

package.json

@@ -20,7 +20,7 @@
     "@sveltejs/adapter-auto": "1.0.0-next.64",
     "@sveltejs/kit": "1.0.0-next.396",
     "@types/cookie": "^0.5.1",
-    "@types/node": "^18.6.1",
+    "@types/node": "^18.6.2",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
     "@typescript-eslint/parser": "^5.31.0",
     "carbon-components-svelte": "^0.67.4",

pnpm-lock.yaml

@@ -12,7 +12,7 @@ specifiers:
   '@sveltejs/kit': 1.0.0-next.396
   '@types/cookie': ^0.5.1
   '@types/feather-icons': ^4.7.0
-  '@types/node': ^18.6.1
+  '@types/node': ^18.6.2
   '@typescript-eslint/eslint-plugin': ^5.31.0
   '@typescript-eslint/parser': ^5.31.0
   carbon-components-svelte: ^0.67.4
@@ -50,7 +50,7 @@ devDependencies:
   '@sveltejs/adapter-auto': 1.0.0-next.64
   '@sveltejs/kit': 1.0.0-next.396_svelte@3.49.0+vite@3.0.3
   '@types/cookie': 0.5.1
-  '@types/node': 18.6.1
+  '@types/node': 18.6.2
   '@typescript-eslint/eslint-plugin': 5.31.0_d5zwcxr4bwkhmuo464cb3a2puu
   '@typescript-eslint/parser': 5.31.0_he2ccbldppg44uulnyq4rwocfa
   carbon-components-svelte: 0.67.4
@@ -196,7 +196,7 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
     dependencies:
-      '@types/node': 18.6.1
+      '@types/node': 18.6.2
       playwright-core: 1.24.1
     dev: true
 
@@ -315,8 +315,8 @@ packages:
     resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
     dev: true
 
-  /@types/node/18.6.1:
+  /@types/node/18.6.2:
-    resolution: {integrity: sha512-z+2vB6yDt1fNwKOeGbckpmirO+VBDuQqecXkgeIqDlaOtmKn6hPR/viQ8cxCfqLU4fTlvM3+YjM367TukWdxpg==}
+    resolution: {integrity: sha512-KcfkBq9H4PI6Vpu5B/KoPeuVDAbmi+2mDBqGPGUgoL7yXQtcWGu2vJWmmRkneWK3Rh0nIAX192Aa87AqKHYChQ==}
     dev: true
 
   /@types/pug/2.0.6:
@@ -326,7 +326,7 @@ packages:
   /@types/sass/1.43.1:
     resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==}
     dependencies:
-      '@types/node': 18.6.1
+      '@types/node': 18.6.2
     dev: true
 
   /@typescript-eslint/eslint-plugin/5.31.0_d5zwcxr4bwkhmuo464cb3a2puu:

src/lib/components/Checkbox.svelte

@@ -1,34 +1,33 @@
 <script lang="ts">
   export let labelText: string;
   export let showLabel: boolean;
+  export let name: string;
+  export let value: boolean;
+  export let onChange: FormDataEvent<HTMLInputElement>;
 </script>
 
-<label htmlFor={`${guest.id}`} className="checkbox">
+<label for={name} class="checkbox">
   <span class="checkbox__input">
-    <input
+    <input id={name} {name} checked={value} on:change={onChange} type="checkbox" />
-      id={`${guest.id}`}
-      name={`${guest.id}`}
-      checked={inputs[`${guest.id}`].plusOne}
-      onChange={onChangePlusOne}
-      type="checkbox"
-    />
     <span class="checkbox__control">
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
+        view-box="0 0 24 24"
         aria-hidden="true"
         focusable="false"
       >
         <path
           fill="none"
           stroke="currentColor"
-          strokeWidth="3"
+          stroke-width="3"
           d="M1.73 12.91l6.37 6.37L22.79 4.59"
         />
       </svg>
     </span>
   </span>
-  <span class="checkbox__label">Plus one? </span>
+  {#if showLabel}
+    <span class="checkbox__label">{labelText}</span>
+  {/if}
 </label>
 
 <style lang="scss">

src/lib/components/header/Header.svelte

@@ -1,12 +1,7 @@
 <script lang="ts">
-  // import {
-  //   Theme,
-  //   RadioButtonGroup,
-  //   RadioButton,
-  // } from "carbon-components-svelte";
-  // import type { CarbonTheme } from "carbon-components-svelte/types/Theme/Theme.svelte";
   import { page } from '$app/stores';
   import Themes from '$lib/components/preferences/themes.svelte';
+  import Profile from '../preferences/profile.svelte';
   import logo from './bored-game.png';
 
   // let theme: CarbonTheme = "white";
@@ -20,13 +15,8 @@
   </div>
 
   <nav>
-    <!-- <ul>
-      <li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li>
-      <li class:active={$page.url.pathname === '/about'}>
-        <a sveltekit:prefetch href="/about">About</a>
-      </li>
-    </ul> -->
     <div><Themes /></div>
+    <!-- <div><Profile /></div> -->
   </nav>
 </header>
 
@@ -35,14 +25,12 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    /* box-shadow: var(--level-2); */
     padding: 0 var(--containerPadding);
     font-size: 1.6rem;
 
     @media (max-width: 1000px) {
       padding-top: 1.25rem;
     }
-    /* max-width: 1000px; */
   }
 
   .corner {

src/lib/components/preferences/profile.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { Popover, PopoverButton, PopoverPanel } from '@rgossiaux/svelte-headlessui';
+</script>
+
+<Popover style="position: relative;">
+  <PopoverButton>Solutions</PopoverButton>
+
+  <PopoverPanel style="position: absolute; z-index: 10;">
+    <div class="panel-contents">
+      <a href="/analytics">Analytics</a>
+      <a href="/engagement">Engagement</a>
+      <a href="/security">Security</a>
+      <a href="/integrations">Integrations</a>
+    </div>
+
+    <img src="/solutions.jpg" alt="" />
+  </PopoverPanel>
+</Popover>
+
+<style lang="scss">
+  .panel-contents {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+</style>

src/lib/components/search/advancedSearch/index.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { Checkbox } from 'carbon-components-svelte';
   import { boredState } from '$lib/stores/boredState';
   import { gameStore } from '$lib/stores/gameSearchStore';
 
@@ -50,7 +49,15 @@
         />
         Min Players
       </label>
-      <Checkbox name="exactMinPlayers" labelText="Search exact?" bind:checked={exactMinPlayers} />
+      <label htmlfor="exactMinPlayers">
+        <input
+          id="exactMinPlayers"
+          type="checkbox"
+          name="exactMinPlayers"
+          bind:checked={exactMinPlayers}
+        />
+        <span>Exact?</span>
+      </label>
     </div>
     <div>
       <label htmlfor="maxPlayers">
@@ -71,7 +78,7 @@
           name="exactMaxPlayers"
           bind:checked={exactMaxPlayers}
         />
-        <span>Search exact?</span>
+        <span>Exact?</span>
       </label>
     </div>
   </fieldset>

src/lib/components/search/textSearch/index.svelte

@@ -17,41 +17,59 @@
     gameStore.addAll(responseData?.games);
   }
 
+  export const showButton = false;
+
   let submitting = $boredState?.loading;
   let name = '';
 </script>
 
 <form on:submit|preventDefault={handleSearch} method="post">
   <fieldset aria-busy={submitting} disabled={submitting}>
-    <div>
+    <label for="name">
-      <label htmlfor="name">
+      Search
-        Search
+      <input
-        <input id="name" name="name" bind:value={name} type="text" placeholder="Enter name" />
+        id="name"
-      </label>
+        name="name"
-    </div>
+        bind:value={name}
+        type="text"
+        aria-label="Search boardgame"
+        placeholder="Search boardgame"
+      />
+      {#if showButton}
+        <button class="btn" type="submit" disabled={submitting}>Search</button>
+      {/if}
+    </label>
   </fieldset>
-  <button type="submit" disabled={submitting}>Search</button>
 </form>
 
 <style lang="scss">
+  form {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    place-items: start;
+  }
   h1 {
     width: 100%;
   }
   button {
-    border-radius: 10px;
+    max-height: 5rem;
-    margin: 0.5rem;
+    padding: 2rem;
-    padding: 1rem;
+    /* border-radius: 10px; */
-    color: var(--clr-input-txt);
+    /* margin: 0.5rem; */
-    background-color: var(--color-btn-primary-active);
+    /* padding: 1rem; */
+    /* color: var(--clr-input-txt); */
+    /* background-color: var(--color-btn-primary-active); */
   }
 
   fieldset {
-    display: grid;
+    /* grid-template-columns: repeat(3, 1fr); */
-    grid-template-columns: repeat(3, 1fr);
   }
 
   label {
     display: grid;
+    grid-template-columns: auto auto auto;
+    gap: 1rem;
+    place-items: center;
     margin: 1rem;
   }
 </style>