Merge pull request #459 from MuckRock/sveltekit-searchbar

[SvelteKit] ContentLayout with toolbars

src/lib/components/ContentLayout.svelte

@@ -0,0 +1,48 @@
+<div class="container">
+  {#if $$slots.header}
+    <header>
+      <slot name="header" />
+    </header>
+  {/if}
+  <main>
+    <slot />
+  </main>
+  {#if $$slots.footer}
+    <footer>
+      <slot name="footer" />
+    </footer>
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    padding: 0;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1 0 0;
+    align-self: stretch;
+    position: relative;
+  }
+  header {
+    flex: 0 0 0;
+    width: 100%;
+    position: sticky;
+    top: 0;
+    padding: 0.625rem;
+  }
+  main {
+    flex: 1 0 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  footer {
+    flex: 0 0 0;
+    width: 100%;
+    position: sticky;
+    bottom: 0;
+    padding: 0.625rem;
+  }
+</style>

src/lib/components/MainLayout.svelte

@@ -107,9 +107,6 @@
     height: 2rem;
     width: auto;
   }
-  .content {
-    padding: 4.0625rem 0;
-  }
   .navigation {
     border-right: 1px solid var(--gray-2, #d8dee2);
   }
@@ -129,6 +126,9 @@
 
     background: var(--gray-1, #f5f6f7);
   }
+  .content {
+    padding: 0;
+  }
 
   /* Start Mobile Styles */
   /* When the viewport is smaller than 1024px, we move both sidebars
@@ -208,9 +208,6 @@
     nav.small {
       display: flex;
     }
-    .content {
-      padding: 0.5rem;
-    }
     .small.overlay {
       position: fixed;
       z-index: 1;

src/lib/components/Search.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { Search24, XCircleFill24 } from "svelte-octicons";
+  import Button from "./common/Button.svelte";
+
+  export let query: string = "";
+  let input: HTMLInputElement;
+
+  function clear() {
+    query = "";
+    input.focus();
+  }
+</script>
+
+<form class="container" on:submit|preventDefault>
+  <label for="query" title="Search"><Search24 /></label>
+  <input
+    id="query"
+    name="query"
+    bind:value={query}
+    bind:this={input}
+    on:change
+    autocomplete="off"
+    placeholder="Search…"
+  />
+  <button
+    title="Clear Search"
+    type="reset"
+    class:hidden={!query}
+    on:click={clear}
+  >
+    <XCircleFill24 />
+  </button>
+</form>
+
+<style>
+  form {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    gap: 0.75rem;
+
+    color: var(--gray-5, #233944);
+    fill: var(--gray-5, #233944);
+  }
+  input {
+    flex: 1 0 0;
+    appearance: none;
+    padding: 0.25rem;
+    border: none;
+    font-family: var(--font-sans, "Source Sans Pro");
+    font-weight: var(--font-regular, 400);
+    font-size: var(--font-m, 1rem);
+  }
+  input::placeholder {
+    color: var(--gray-4, #5c717c);
+  }
+  label {
+    display: flex;
+    align-items: center;
+  }
+  button {
+    flex: 0 0 0;
+    appearance: none;
+    border: none;
+    display: flex;
+    align-items: center;
+    padding: 0;
+    font-family: var(--font-sans, "Source Sans Pro");
+    font-weight: var(--font-regular, 400);
+    font-size: var(--font-m, 1rem);
+    background: transparent;
+    fill: var(--gray-3, #99a8b3);
+    cursor: pointer;
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(0) rotate(0deg);
+    transition:
+      transform 0.25s ease-in-out,
+      opacity 0.125s linear,
+      visibility 0s;
+  }
+  button.hidden {
+    visibility: hidden;
+    opacity: 0;
+    transform: translateX(100%) rotate(90deg);
+    transition:
+      transform 0.25s ease-in-out,
+      opacity 0.125s linear,
+      visibility 0s linear 0.25s;
+  }
+</style>

src/lib/components/common/Checkbox.svelte

@@ -34,72 +34,67 @@
   label {
     display: flex;
     align-items: center;
-    gap: 0.625rem;
-    align-self: stretch;
+    gap: 0.5rem;
   }
 
   input {
-    opacity: 0;
-    position: fixed;
-    z-index: -10;
+    display: none;
+    visibility: hidden;
   }
 
   span {
-    border: solid 1px var(--gray-3, #bbbbbb);
-    border-radius: 2px;
-    cursor: pointer;
-    display: inline-block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     height: 1.25rem;
+    border: solid 1px var(--gray-4, #5c717c);
+    border-radius: 0.25rem;
+    cursor: pointer;
     flex-shrink: 0;
     transition:
       box-shadow 0.2s ease,
       border 0.2s ease;
     user-select: none;
     width: 1.25em;
     box-sizing: border-box;
+    background: var(--white, #ffffff);
+    fill: var(--white, #ffffff);
   }
 
   span:hover {
     border: solid 1px var(--primary, #4294f0);
   }
 
-  /* make the svg the same size as its container */
-  span :global(svg) {
-    fill: white;
-    width: 1.25rem;
-    height: 1.25rem;
-  }
-
   input:focus + span {
     border: solid 1px var(--primary, #4294f0);
   }
 
   input:checked + span,
   input:indeterminate + span {
-    background: var(--primary, #4294f0);
-    border: solid 1px var(--primary, #4294f0);
+    background: var(--blue-3, #4294f0);
+    border: solid 1px var(--blue-4, #1367d0);
   }
 
   input:checked:focus + span {
-    box-shadow: 0 0 0 2px var(--primary-faded, rgba(66, 148, 240, 0.13));
-    border: solid 1px var(--primary, #4294f0);
+    box-shadow: 0 0 0 2px var(--blue-2, #b5ceed);
+    border: solid 1px var(--blue-4, #1367d0);
   }
 
   input:disabled + span {
-    background: rgba(0, 0, 0, 0.05);
+    background: var(--gray-3, #99a8b3);
     cursor: default;
   }
 
   input:disabled + span:hover {
-    border: solid 1px var(--gray-3, #bbbbbb);
+    border: solid 1px var(--gray-4, #5c717c);
   }
 
   input:checked:disabled + span {
-    background: rgba(0, 0, 0, 0.05);
-    border: solid 1px var(--gray-3, #bbbbbb);
+    background: var(--gray-3, #99a8b3);
+    border: solid 1px var(--gray-4, #5c717c);
   }
 
   input:checked:disabled + span:hover {
-    border: solid 1px var(--gray-3, #bbbbbb);
+    border: solid 1px var(--gray-4, #5c717c);
   }
 </style>

src/lib/components/documents/DocumentListItem.svelte

@@ -73,11 +73,13 @@ It's deliberately minimal and can be wrapped in other components to add addition
 
 <style>
   .document-list-item {
+    flex: 1 0 0;
     display: flex;
     max-width: 100%;
-    padding: 0rem 1.25rem;
+    min-width: 0;
     align-items: center;
-    gap: 0.625rem;
+    align-self: stretch;
+    gap: 0.5rem;
   }
 
   .thumbnail {
@@ -104,6 +106,10 @@ It's deliberately minimal and can be wrapped in other components to add addition
     font-style: normal;
     font-weight: var(--font-semibold, 600);
     line-height: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
   }
 
   .meta {