Merge pull request #703 from MuckRock/allanlasser/issue702

Layout styling fixes
MuckRock · Sep 25, 2024 · 506dffb · 506dffb
2 parents 97c6b3f + cd05932
commit 506dffb
Show file tree

Hide file tree

Showing 11 changed files with 79 additions and 91 deletions.
diff --git a/src/lib/components/addons/AddOnMeta.svelte b/src/lib/components/addons/AddOnMeta.svelte
@@ -6,14 +6,15 @@
 
   import Button from "$lib/components/common/Button.svelte";
   import Flex from "@/lib/components/common/Flex.svelte";
+  import Metadata from "../common/Metadata.svelte";
 
   export let addon: AddOnListItem;
 
   $: repo = new URL(addon.repository, "https://github.com/").href;
   $: github_org = addon.repository.split("/")[0];
 </script>
 
-<div class="conatiner">
+<div class="container">
   <h2 class="name">{addon.name}</h2>
   <div class="description">
     {@html addon.parameters.description}
@@ -28,17 +29,15 @@
       </details>
     </div>
   {/if}
-
-  <Flex wrap align="baseline" justify="between">
-    <div class="created-by">
-      <span>{$_("addonDispatchDialog.createdBy")}</span>
+  <Flex wrap align="center" justify="between">
+    <Metadata key={$_("addonDispatchDialog.createdBy")}>
       <h3>{github_org}</h3>
-    </div>
+    </Metadata>
     <Flex>
-      <Button ghost mode="primary">
+      <!-- <Button ghost mode="primary">
         <Share16 />
         {$_("addonDispatchDialog.share")}
-      </Button>
+      </Button> -->
       <Button ghost mode="primary" href={repo} target="_blank">
         <MarkGithub16 />
         {$_("addonDispatchDialog.viewsource")}
@@ -70,17 +69,4 @@
     line-height: 1.5;
     margin-bottom: 1rem;
   }
-
-  .created-by {
-    display: flex;
-    align-items: baseline;
-    gap: 0.5rem;
-  }
-
-  .created-by span {
-    color: var(--gray-4, #5c717c);
-    font-size: var(--font-xs);
-    letter-spacing: 0.07031rem;
-    text-transform: uppercase;
-  }
 </style>
diff --git a/src/lib/components/documents/DocumentListItem.svelte b/src/lib/components/documents/DocumentListItem.svelte
@@ -137,11 +137,13 @@ It's deliberately minimal and can be wrapped in other components to add addition
     color: inherit;
     text-decoration: none;
     background-color: transparent;
+    border: 1px solid transparent;
   }
 
   .document-list-item:hover,
   .document-list-item:focus {
     background-color: var(--blue-1);
+    border-color: var(--blue-2);
   }
 
   .thumbnail {

diff --git a/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap b/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
@@ -3,15 +3,15 @@
 exports[`DocumentListItem > renders 1`] = `
 <div>
   <a
-    class="document-list-item svelte-d6td3"
+    class="document-list-item svelte-u1blcs"
     href="https://www.dev.documentcloud.org/documents/24002098-quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018/"
   >
     <div
-      class="thumbnail svelte-d6td3"
+      class="thumbnail svelte-u1blcs"
     >
       <img
         alt="Page 1, Quarterly Reports created pursuant to the letter from the National Archives and Records Administration dated June 1, 2018"
-        class="svelte-d6td3"
+        class="svelte-u1blcs"
         height="77.64705882352942px"
         loading="lazy"
         src="https://s3.documentcloud.org/documents/24002098/pages/quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018-p1-thumbnail.gif"
@@ -21,16 +21,16 @@ exports[`DocumentListItem > renders 1`] = `
     </div>
      
     <div
-      class="documentInfo svelte-d6td3"
+      class="documentInfo svelte-u1blcs"
     >
       <h3
-        class="svelte-d6td3"
+        class="svelte-u1blcs"
       >
         Quarterly Reports created pursuant to the letter from the National Archives and Records Administration dated June 1, 2018
       </h3>
        
       <p
-        class="meta svelte-d6td3"
+        class="meta svelte-u1blcs"
       >
         20 pages
          -

diff --git a/src/lib/components/layouts/AddOnBrowser.svelte b/src/lib/components/layouts/AddOnBrowser.svelte
@@ -141,24 +141,32 @@
     padding: 1rem 0.5rem;
     max-height: 100%;
     overflow-y: auto;
-    box-shadow: var(--shadow-1);
     z-index: 1;
   }
   main {
     max-height: 100%;
     overflow-y: auto;
     background: var(--gray-1);
+    box-shadow: inset var(--shadow-2);
+  }
+  .nav {
+    min-width: 16rem;
+    max-width: 18rem;
   }
   .history {
     max-width: unset;
     display: flex;
     flex-direction: column;
     gap: 2rem;
+    padding: 1rem;
   }
   .container {
+    width: 100%;
+    max-width: var(--app-max-w, 100rem);
+    margin: 0 auto;
     max-height: 100%;
     display: grid;
-    grid-template-columns: 16rem 2fr 40%;
+    grid-template-columns: 18rem 2fr 40%;
     grid-template-rows: 1fr;
   }
 </style>
diff --git a/src/lib/components/layouts/AddOnLayout.svelte b/src/lib/components/layouts/AddOnLayout.svelte
@@ -102,6 +102,7 @@
           properties={addon.parameters.properties}
           required={addon.parameters.required}
           eventOptions={addon.parameters.eventOptions}
+          {disablePremium}
         >
           <svelte:fragment slot="selection">
             {#await search then results}
@@ -172,8 +173,6 @@
     justify-content: center;
     width: 100%;
     height: 100%;
-    padding: 1rem;
-    gap: 1rem;
     max-width: var(--app-max-w, 100rem);
     margin: 0 auto;
   }
@@ -188,21 +187,16 @@
     max-height: 100%;
     display: flex;
     flex-direction: column;
-    overflow: visible;
+    overflow-y: auto;
   }
   .addon header {
     margin-bottom: 1rem;
+    padding: 1rem;
   }
   .addon .tabs {
     display: flex;
     padding: 0 1rem;
-  }
-  .addon main {
-    overflow-y: auto;
-    background-color: var(--white);
-    border: 1px solid var(--gray-1);
-    border-radius: var(--radius, 0.5rem);
-    box-shadow: var(--shadow-1);
+    border-bottom: 1px solid var(--gray-2);
   }
   .docs {
     background-color: var(--gray-1);

diff --git a/src/lib/components/layouts/ContentLayout.svelte b/src/lib/components/layouts/ContentLayout.svelte
@@ -25,6 +25,8 @@
     width: 100%;
     height: min-content;
     min-height: 100%;
+    background: var(--gray-1);
+    box-shadow: inset var(--shadow-2);
   }
   header {
     flex: 0 0 0;

diff --git a/src/lib/components/layouts/DocumentBrowser.svelte b/src/lib/components/layouts/DocumentBrowser.svelte
@@ -197,8 +197,7 @@
 <style>
   .container {
     width: 100%;
-    background: var(--gray-1);
-    box-shadow: inset var(--shadow-2);
+    height: auto;
   }
 
   label.select-all {

diff --git a/src/lib/components/layouts/DocumentLayout.svelte b/src/lib/components/layouts/DocumentLayout.svelte
@@ -37,12 +37,8 @@
     <Notes {document} />
   </nav>
   <article slot="content">
-    <header>
-      <DocumentHeader {document} />
-    </header>
-    <main class="viewer">
-      <Viewer {document} {asset_url} {text} {query} />
-    </main>
+    <header><DocumentHeader {document} /></header>
+    <main><Viewer {document} {asset_url} {text} {query} /></main>
   </article>
   <aside class="column between" slot="action">
     <Flex direction="column" gap={2}>
@@ -57,41 +53,26 @@
           </Flex>
         </Metadata>
       {/if}
-
       <Actions {document} user={$me} {action} />
     </Flex>
     <DocumentMetadata {document} />
   </aside>
 </SidebarLayout>
 
 <style>
-  .container {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    max-width: var(--app-max-w, 100rem);
-    max-height: 100%;
-    margin: 0 auto;
-    position: relative;
-  }
-
-  header {
-    padding: 1rem;
-  }
-
   article {
     flex: 1 1 auto;
     z-index: 0;
-    padding-bottom: 0.5rem;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
-    overflow-y: auto;
   }
 
-  main {
-    flex: 1 1 auto;
+  header {
+    padding: 1rem;
+  }
 
+  main {
     background: var(--gray-1);
     border: 1px solid var(--gray-2);
     border-radius: var(--radius, 0.5rem);

diff --git a/src/lib/components/layouts/Sidebar.svelte b/src/lib/components/layouts/Sidebar.svelte
@@ -59,7 +59,7 @@
 <svelte:window bind:innerWidth={viewWidth} />
 
 {#if isOpen}
-  <aside class="container {position}" transition:fly={flyOptions}>
+  <aside class="sidebarContainer {position}" transition:fly={flyOptions}>
     <header class:reverse={position === "left"}>
       {#if $$slots.title}
         <span class="title"><slot name="title" /></span>
@@ -84,15 +84,18 @@
 {/if}
 
 <style>
-  .container {
+  .sidebarContainer {
     flex: 1 0 0;
+    display: flex;
+    flex-direction: column;
     min-width: 16rem;
     max-width: 18rem;
     max-height: 100%;
+    min-height: 100%;
     overflow-y: auto;
-    position: relative;
-    display: flex;
-    flex-direction: column;
+    position: sticky;
+    top: 0;
+    background: var(--white);
   }
 
   header {

diff --git a/src/lib/components/layouts/SidebarLayout.svelte b/src/lib/components/layouts/SidebarLayout.svelte
@@ -2,7 +2,7 @@
   import Sidebar from "./Sidebar.svelte";
 </script>
 
-<div class="container">
+<div class="sidebarLayoutContainer">
   {#if $$slots.navigation}
     <Sidebar position="left" id="navigation">
       <slot name="navigation" />
@@ -21,17 +21,14 @@
 </div>
 
 <style>
-  .container {
+  .sidebarLayoutContainer {
     flex: 1 0 0;
     display: flex;
     flex-direction: row;
-    overflow: hidden;
     max-width: var(--app-max-w, 100rem);
     margin: 0 auto;
     height: 100%;
     max-height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
   }
 
   .content {

diff --git a/src/lib/components/layouts/stories/AppLayout.stories.svelte b/src/lib/components/layouts/stories/AppLayout.stories.svelte
@@ -1,16 +1,22 @@
 <script context="module" lang="ts">
   import { Story, Template } from "@storybook/addon-svelte-csf";
   import AppLayout from "../AppLayout.svelte";
-  import type { Document } from "$lib/api/types";
 
   import { _ } from "svelte-i18n";
 
-  import doc from "@/test/fixtures/documents/document-expanded.json";
-  import txt from "@/test/fixtures/documents/document.txt.json";
-  const document = doc as Document;
+  import DocumentBrowser from "../DocumentBrowser.svelte";
+  import SidebarLayout from "../SidebarLayout.svelte";
+  import Documents from "@/routes/(app)/documents/sidebar/Documents.svelte";
+  import Projects from "@/routes/(app)/documents/sidebar/Projects.svelte";
+  import Button from "../../common/Button.svelte";
+  import { PlusCircle16 } from "svelte-octicons";
+  import Actions from "@/routes/(app)/documents/sidebar/Actions.svelte";
+  import AddOns from "@/routes/(app)/documents/sidebar/AddOns.svelte";
 
+  import { documentsList } from "@/test/fixtures/documents";
   import { addons } from "@/test/handlers/addons";
   import { organizations, users } from "@/test/handlers/accounts";
+  import { activeAddons } from "@/test/fixtures/addons";
 
   export const meta = {
     title: "Layout / App",
@@ -34,11 +40,27 @@
 </script>
 
 <Template let:args>
-  <div class="vh">
-    <AppLayout {...args}>
-      <p>Foobar!</p>
-    </AppLayout>
-  </div>
+  <AppLayout {...args}>
+    <SidebarLayout>
+      <svelte:fragment slot="navigation">
+        <Documents />
+        <Projects />
+      </svelte:fragment>
+
+      <DocumentBrowser
+        slot="content"
+        documents={Promise.resolve(documentsList)}
+      />
+
+      <svelte:fragment slot="action">
+        <Button mode="primary" href="/upload/">
+          <PlusCircle16 />{$_("sidebar.upload")}
+        </Button>
+        <Actions />
+        <AddOns pinnedAddOns={Promise.resolve(activeAddons)} />
+      </svelte:fragment>
+    </SidebarLayout>
+  </AppLayout>
 </Template>
 
 <Story name="Desktop" {...args} />
@@ -74,9 +96,3 @@
   }}
   {...args}
 />
-
-<style>
-  .vh {
-    height: 100vh;
-  }
-</style>