Merge pull request #456 from MuckRock/sveltekit-layout

[SvelteKit] MainLayout component
MuckRock · Feb 28, 2024 · 23df078 · 23df078
2 parents 390a31a + c7fb643
commit 23df078
Show file tree

Hide file tree

Showing 9 changed files with 473 additions and 2 deletions.
diff --git a/src/lib/components/MainLayout.svelte b/src/lib/components/MainLayout.svelte
@@ -0,0 +1,243 @@
+<script lang="ts">
+  import OrgMenu from "./OrgMenu.svelte";
+  import Button from "./common/Button.svelte";
+  import Logo from "./common/Logo.svelte";
+  import { SidebarCollapse16, SidebarExpand16 } from "svelte-octicons";
+
+  let panel: "navigation" | "action" | null = null;
+
+  function closePanel() {
+    panel = null;
+  }
+
+  function openPanel(name: typeof panel): () => void {
+    return () => {
+      panel = name;
+    };
+  }
+</script>
+
+<div class="container">
+  <nav class="small">
+    <Button mode="ghost" on:click={openPanel("navigation")}>
+      <SidebarCollapse16 />
+    </Button>
+    <a href="/" class="logo"><Logo /></a>
+    <Button mode="ghost" on:click={openPanel("action")}>
+      <SidebarExpand16 />
+    </Button>
+  </nav>
+  <nav
+    class="navigation left large"
+    class:active={panel === "navigation"}
+    id="navigation"
+  >
+    <header class="header">
+      <div class="small closePane">
+        <Button mode="ghost" on:click={closePanel}>
+          <SidebarExpand16 />
+        </Button>
+      </div>
+      <a href="/" class="logo"><Logo /></a>
+    </header>
+    <main><slot name="navigation" /></main>
+  </nav>
+  <main class="content">
+    <slot name="content" />
+  </main>
+  <nav class="action right large" class:active={panel === "action"} id="action">
+    <header class="header">
+      <OrgMenu />
+      <div class="small closePane">
+        <Button
+          mode="ghost"
+          on:click={() => {
+            panel = null;
+          }}
+        >
+          <SidebarCollapse16 />
+        </Button>
+      </div>
+    </header>
+    <main><slot name="action" /></main>
+    <footer>
+      <p>Allan Lasser</p>
+      <p>Language</p>
+      <p>Help</p>
+    </footer>
+  </nav>
+  <div
+    class="small overlay"
+    class:active={panel !== null}
+    role="presentation"
+    on:click={closePanel}
+    on:keydown={closePanel}
+  />
+</div>
+
+<style>
+  .container {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    gap: 0;
+    flex-shrink: 0;
+    background: var(--gray-1, #f5f6f7);
+  }
+  header {
+    display: flex;
+    padding: 1rem;
+    gap: 0.5rem;
+    align-items: flex-start;
+    align-self: stretch;
+    border-bottom: 1px solid var(--gray-2, #d8dee2);
+  }
+  main {
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    gap: 2rem;
+    flex: 1 0 0;
+    max-height: 100%;
+    overflow-y: auto;
+  }
+  nav {
+    flex: 1 0 0;
+    min-width: 16rem;
+    max-width: 18rem;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+  .logo {
+    height: 2rem;
+    width: auto;
+  }
+  .content {
+    padding: 4.0625rem 0;
+  }
+  .navigation {
+    border-right: 1px solid var(--gray-2, #d8dee2);
+  }
+  .action {
+    border-left: 1px solid var(--gray-2, #d8dee2);
+  }
+  .action footer {
+    display: flex;
+    width: 100%;
+    position: sticky;
+    bottom: 0;
+    padding: 1rem;
+    z-index: 1;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.875rem;
+
+    border-top: 1px solid var(--gray-2, #d8dee2);
+    background: var(--gray-1, #f5f6f7);
+  }
+
+  /* Start Mobile Styles */
+  /* When the viewport is smaller than 1024px, we move both sidebars
+  into a fixed position, then transform them to an offscreen position.
+  Then, when a button in a small-only navigation bar is clicked,
+  the appropriate sidebar will move out into a visible position. */
+
+  .small {
+    display: none;
+  }
+
+  nav.small {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem;
+    flex: 0 0 0;
+    max-width: unset;
+
+    border-bottom: 1px solid var(--gray-2, #d8dee2);
+  }
+
+  nav.small .logo {
+    height: 1.5rem;
+    width: auto;
+  }
+
+  .small.overlay {
+    display: block;
+    visibility: hidden;
+  }
+
+  @media (max-width: 64rem) {
+    .container {
+      flex-direction: column;
+    }
+    .small {
+      display: block;
+    }
+    nav.large {
+      min-width: 33vh;
+      max-width: 100vh;
+      display: flex;
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      background: var(--gray-1, #f5f6f7);
+      z-index: 2;
+      transition: transform 0.25s ease-in-out;
+      overflow: hidden;
+    }
+    nav.large.right {
+      transform: translateX(100%);
+      right: 0;
+      border-top-left-radius: 1rem;
+      border-bottom-left-radius: 1rem;
+    }
+    nav.large.left {
+      left: 0;
+      transform: translateX(-100%);
+      border-top-right-radius: 1rem;
+      border-bottom-right-radius: 1rem;
+    }
+    nav.large.active {
+      display: flex;
+      transform: translateX(0);
+      transition: transform 0.25s ease-in-out;
+    }
+    nav.large header {
+      align-items: center;
+      flex-direction: row-reverse;
+      padding: 0.5rem;
+    }
+    nav.large .logo {
+      display: none;
+    }
+    nav.small {
+      display: flex;
+    }
+    .content {
+      padding: 0.5rem;
+    }
+    .small.overlay {
+      position: fixed;
+      z-index: 1;
+      background: var(--gray-5, #233944);
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      opacity: 0;
+      transition:
+        opacity 0.25s linear,
+        visibility 0s linear 0.25s;
+    }
+    .small.overlay.active {
+      visibility: visible;
+      opacity: 0.75;
+      transition:
+        opacity 0.25s linear,
+        visibility 0s linear 0s;
+    }
+  }
+  /* End Mobile Styles */
+</style>
diff --git a/src/lib/components/OrgMenu.svelte b/src/lib/components/OrgMenu.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+  import Premium from "@/common/icons/Premium.svelte";
+  import { TriangleDown16 } from "svelte-octicons";
+
+  const name = "MuckRock";
+  const src =
+    "https://squarelet-staging.s3.amazonaws.com/media/org_avatars/logo_uEHCMva.png";
+</script>
+
+<div class="container">
+  <div class="org">
+    <div class="avatar">
+      <img alt="MuckRock's avatar" {src} />
+    </div>
+    <p class="name">{name}</p>
+    <span class="arrow"><TriangleDown16 /></span>
+  </div>
+  <div class="premium">
+    <Premium size={2} />
+  </div>
+</div>
+
+<style>
+  .container {
+    width: 100%;
+    display: flex;
+    gap: 0.5rem;
+    flex: 1 0 0;
+  }
+  .org {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    flex: 1 0 0;
+  }
+  .avatar {
+    width: 2rem;
+    height: 2rem;
+
+    overflow: hidden;
+    border-radius: 0.75rem;
+    background: var(--gray-2, #d8dee2);
+  }
+  .avatar img {
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+  .name {
+    color: #233944;
+    font-family: var(--font-sans, "Source Sans Pro");
+    font-size: var(--font-xl, 1.5rem);
+    font-weight: var(--font-semibold, 600);
+    line-height: 1rem;
+  }
+  .arrow {
+    width: 1rem;
+    height: 1rem;
+    fill: #5c717c;
+  }
+  .premium {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 0 0 0;
+    align-self: stretch;
+    fill: var(--premium);
+    height: 2rem;
+    width: 2rem;
+  }
+
+  /* Small styles */
+  @media (max-width: 64rem) {
+    .avatar {
+      height: 1.5rem;
+      width: 1.5rem;
+    }
+    .name {
+      font-size: var(--font-l, 1.25rem);
+    }
+    .premium {
+      height: 1.5rem;
+      width: 1.5rem;
+    }
+  }
+</style>
diff --git a/src/lib/components/common/Button.svelte b/src/lib/components/common/Button.svelte
@@ -64,6 +64,12 @@
     background: var(--blue-1, #eef3f9);
   }
 
+  @media (hover: none) {
+    .ghost:hover {
+      background: transparent;
+    }
+  }
+
   button:disabled,
   .disabled {
     opacity: 0.5;

diff --git a/src/lib/components/common/Logo.svelte b/src/lib/components/common/Logo.svelte
@@ -0,0 +1,34 @@
+<svg
+  viewBox="0 0 182 32"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  title="DocumentCloud"
+  class="icon"
+>
+  <path
+    id="DocumentCloud"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M114.875 31.1278V16.9305H117.213V31.1278H114.875ZM100.151 24.3405C100.151 28.2693 103.088 31.3614 107.03 31.3614C109.562 31.3614 111.108 30.4275 112.519 28.9495L110.991 27.3939C109.833 28.4832 108.769 29.1638 107.108 29.1638C104.518 29.1638 102.644 26.9855 102.644 24.301C102.644 21.6173 104.518 19.4782 107.108 19.4782C108.653 19.4782 109.813 20.1587 110.895 21.1699L112.421 19.4001C111.127 18.156 109.62 17.2805 107.127 17.2805C103.03 17.2805 100.151 20.4503 100.151 24.3405ZM5.04372 19.6919H2.37682V28.9495H5.04372C7.88428 28.9495 9.73932 27.0242 9.73932 24.3405C9.73932 21.6564 7.88428 19.6919 5.04372 19.6919ZM5.04372 31.1278H0V17.514H5.04372C9.29477 17.514 12.2322 20.4502 12.2322 24.301C12.2322 28.1522 9.29477 31.1278 5.04372 31.1278ZM19.6903 22.7066C17.816 22.7066 16.6181 24.1846 16.6181 25.994C16.6181 27.8219 17.913 29.3193 19.7291 29.3193C21.623 29.3193 22.821 27.8413 22.821 26.0323C22.821 24.2044 21.5261 22.7066 19.6903 22.7066ZM19.6903 31.3614C16.5793 31.3614 14.2796 28.9693 14.2796 26.0323C14.2796 23.0764 16.5985 20.6452 19.7291 20.6452C22.8599 20.6452 25.1594 23.0374 25.1594 25.994C25.1594 28.9302 22.8402 31.3614 19.6903 31.3614ZM26.9753 26.0323C26.9753 28.9693 29.2167 31.3614 32.2506 31.3614C34.2409 31.3614 35.4197 30.5636 36.4248 29.4356L35.014 28.0358C34.2797 28.7942 33.4682 29.3193 32.3666 29.3193C30.5692 29.3193 29.3132 27.8413 29.3132 25.994C29.3132 24.1846 30.55 22.7066 32.2506 22.7066C33.4293 22.7066 34.1832 23.2314 34.8979 23.9905L36.3472 22.4151C35.4004 21.3644 34.2024 20.6452 32.2698 20.6452C29.2167 20.6452 26.9753 23.0953 26.9753 26.0323ZM45.2743 20.8594H47.6126V31.1278H45.2743V29.5335C44.6176 30.5056 43.6705 31.3417 42.086 31.3417C39.7864 31.3417 38.4531 29.7859 38.4531 27.3939V20.8594H40.7911V26.694C40.7911 28.2883 41.5834 29.2021 42.975 29.2021C44.3275 29.2021 45.2743 28.2496 45.2743 26.6545V20.8594ZM66.0665 24.574C66.0665 22.0651 64.7137 20.6452 62.4917 20.6452C60.9455 20.6452 59.8636 21.3644 59.0326 22.4537C58.4915 21.3644 57.4671 20.6452 55.9986 20.6452C54.4333 20.6452 53.5443 21.5006 52.8877 22.4151V20.8594H50.5493V31.1278H52.8877V25.3521C52.8877 23.7569 53.7764 22.7848 55.0712 22.7848C56.3661 22.7848 57.1387 23.6788 57.1387 25.2739V31.1278H59.477V25.3324C59.477 23.6788 60.3854 22.7848 61.6606 22.7848C62.9747 22.7848 63.7285 23.6595 63.7285 25.2929V31.1278H66.0665V24.574ZM75.9014 25.274C75.7466 23.757 74.8575 22.5709 73.3118 22.5709C71.8817 22.5709 70.8769 23.6789 70.6645 25.274H75.9014ZM73.6211 29.4356C74.7611 29.4356 75.573 29.008 76.3844 28.2102L77.7565 29.4356C76.7905 30.6031 75.4573 31.3614 73.5823 31.3614C70.6261 31.3614 68.3457 29.2021 68.3457 26.0126C68.3457 23.057 70.4136 20.6452 73.3314 20.6452C76.5777 20.6452 78.2203 23.2125 78.2203 26.1881C78.2203 26.3743 78.2057 26.5458 78.189 26.7412L78.1815 26.8301H70.6836C70.9546 28.5022 72.1138 29.4356 73.6211 29.4356ZM80.5767 31.1278H82.915V25.3324C82.915 23.7373 83.8618 22.7848 85.2146 22.7848C86.6063 22.7848 87.3982 23.6985 87.3982 25.2929V31.1278H89.7365V24.593C89.7365 22.2013 88.4033 20.6452 86.1038 20.6452C84.5192 20.6452 83.5724 21.4813 82.915 22.4537V20.8594H80.5767V31.1278ZM95.3789 27.9187C95.3789 28.8332 95.8423 29.2021 96.6345 29.2021C97.1563 29.2021 97.6201 29.0857 98.0839 28.8521V30.7775C97.5041 31.109 96.8475 31.3031 95.9779 31.3031C94.2577 31.3031 93.0405 30.5448 93.0405 28.2883V22.8814H91.7457V20.8595H93.0405V18.0388H95.3789V20.8595H98.1227V22.8814H95.3789V27.9187ZM122.043 25.994C122.043 24.1846 123.241 22.7066 125.116 22.7066C126.952 22.7066 128.246 24.2044 128.246 26.0323C128.246 27.8413 127.048 29.3193 125.155 29.3193C123.338 29.3193 122.043 27.8219 122.043 25.994ZM119.706 26.0323C119.706 28.9693 122.005 31.3614 125.116 31.3614C128.266 31.3614 130.585 28.9302 130.585 25.994C130.585 23.0374 128.285 20.6452 125.155 20.6452C122.024 20.6452 119.706 23.0764 119.706 26.0323ZM139.666 20.8595H142.005V31.1278H139.666V29.5335C139.01 30.5057 138.062 31.3417 136.478 31.3417C134.179 31.3417 132.846 29.786 132.846 27.3939V20.8595H135.183V26.694C135.183 28.2883 135.976 29.2021 137.367 29.2021C138.72 29.2021 139.666 28.2496 139.666 26.6545V20.8595ZM146.778 25.994C146.778 23.9321 148.111 22.6873 149.715 22.6873C151.28 22.6873 152.672 23.9905 152.672 25.994C152.672 27.9964 151.28 29.3 149.715 29.3C148.13 29.3 146.778 28.0161 146.778 25.994ZM152.633 29.4163V31.1278H154.971V16.9305H152.633V22.4537C151.899 21.5006 150.835 20.6452 149.154 20.6452C146.719 20.6452 144.419 22.5709 144.419 25.994C144.419 29.4163 146.758 31.3417 149.154 31.3417C150.817 31.3417 151.879 30.486 152.633 29.4163Z"
+    fill="#233944"
+  />
+  <path
+    id="Shape"
+    d="M159.008 3.45049C157.759 3.09128 156.292 2.9471 154.868 2.85891C154.43 2.83193 154.009 2.81905 153.601 2.81905C149.241 2.8283 146.593 4.26398 144.93 5.69926C143.273 7.13613 142.636 8.6298 142.613 8.69425L141.776 10.8419L140.259 9.10339C140.258 9.10339 140.253 9.09696 140.227 9.06716C140.198 9.03655 140.155 8.98943 140.096 8.92661C139.978 8.80257 139.798 8.61732 139.562 8.391C139.09 7.93794 138.392 7.31816 137.52 6.67463C135.775 5.38312 133.333 4.02034 130.619 3.62729C129.919 3.5246 129.266 3.4795 128.651 3.4795C123.865 3.47265 121.375 6.23889 121.174 6.46602L121.169 6.47085L120.219 7.63913L119.126 6.60456C119.124 6.60456 119.124 6.60374 119.101 6.5824C119.077 6.56146 119.039 6.52683 118.985 6.48092C118.879 6.3899 118.713 6.25299 118.494 6.08546C118.055 5.75081 117.402 5.29694 116.574 4.84349C114.918 3.93416 112.581 3.04135 109.857 3.04215C109.705 3.04215 109.552 3.04577 109.394 3.05181C107.88 3.10819 106.733 3.41265 105.838 3.82141L104.678 1.25531C105.925 0.683045 107.453 0.301279 109.29 0.235234C109.48 0.227179 109.668 0.223955 109.857 0.223955C114.688 0.246106 118.314 2.44614 120.002 3.70059C121.405 2.50976 124.283 0.667349 128.651 0.660099C129.401 0.660099 130.194 0.714865 131.024 0.837692C135.618 1.54406 139.173 4.23096 141.002 5.89215C141.449 5.25103 142.067 4.49876 142.898 3.74408C144.979 1.84366 148.445 -0.0104264 153.601 4.41388e-05C154.067 4.41388e-05 154.548 0.0145489 155.042 0.0455565C156.58 0.142209 158.19 0.335106 159.697 0.718893C159.82 0.778495 166.543 2.43807 170.496 8.0209C172.652 11.1037 173.254 14.0918 173.249 16.3458C173.248 17.5197 173.093 18.4963 172.924 19.2139C174.87 20.2002 178.666 22.606 180.825 27.2718C181.595 28.9536 181.945 30.4992 182 31.8781L179.201 31.9928C179.16 31.005 178.914 29.8367 178.281 28.4502C176.08 23.5657 171.267 21.5001 170.776 21.3217C170.744 21.3097 170.743 21.3088 170.743 21.3088L169.333 20.7938L169.939 19.4205C169.94 19.4177 169.942 19.4097 169.947 19.3967C169.958 19.3702 169.975 19.3242 169.998 19.2586C170.044 19.1289 170.109 18.9236 170.175 18.6538C170.31 18.1141 170.448 17.318 170.447 16.3458C170.443 14.573 170.007 12.2333 168.203 9.64103C165.471 5.67228 160.168 3.78395 159.008 3.45049Z"
+    fill="#4294F0"
+  />
+</svg>
+
+<style>
+  .icon {
+    display: block;
+    height: 100%;
+    width: auto;
+  }
+  #DocumentCloud {
+    fill: var(--gray-5, #233944);
+  }
+  #Shape {
+    fill: var(--blue-3, #4294f0);
+  }
+</style>
diff --git a/src/lib/components/documents/DocumentListItem.svelte b/src/lib/components/documents/DocumentListItem.svelte
@@ -95,6 +95,7 @@ It's deliberately minimal and can be wrapped in other components to add addition
     gap: 0.25rem;
     flex: 1 0 0;
     align-self: stretch;
+    min-width: 0;
   }
 
   h4 {
@@ -122,7 +123,7 @@ It's deliberately minimal and can be wrapped in other components to add addition
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: 100ch;
+    max-width: 100%;
   }
 
   .actions {