Move access into document header

MuckRock · Nov 4, 2024 · c6b3663 · c6b3663
1 parent fa30f59
commit c6b3663
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 20 deletions.
diff --git a/src/lib/components/documents/Access.svelte b/src/lib/components/documents/Access.svelte
@@ -32,7 +32,6 @@
 
   import type { Access } from "@/lib/api/types";
   import type { Level } from "$lib/components/inputs/AccessLevel.svelte";
-  import SidebarItem from "$lib/components/sidebar/SidebarItem.svelte";
 
   export let level: Level;
 </script>

diff --git a/src/lib/components/documents/Header.svelte b/src/lib/components/documents/Header.svelte
@@ -12,6 +12,7 @@
 
   import { ALLOWED_TAGS, ALLOWED_ATTR } from "@/config/config.js";
   import { remToPx } from "@/lib/utils/layout";
+  import Access, { getLevel } from "./Access.svelte";
 
   export let document: Document;
 
@@ -27,37 +28,52 @@
   function clean(html: string) {
     return DOMPurify.sanitize(html, { ALLOWED_TAGS, ALLOWED_ATTR });
   }
+
+  $: access = getLevel(document.access);
 </script>
 
-<header bind:clientWidth={width} class:twoColumn={BREAKPOINTS.TWO_COLUMN}>
-  <h1>{document.title}</h1>
+<header bind:clientWidth={width}>
+  {#if access}
+    <div class="access">
+      <Access level={access} />
+    </div>
+  {/if}
+  <h1 class="title">{document.title}</h1>
   {#if description}
-    <div class="description">
+    <div class="description" class:twoColumn={BREAKPOINTS.TWO_COLUMN}>
       {@html description}
     </div>
   {/if}
 </header>
 
 <style>
-  header h1 {
+  header {
+    margin: 0 auto;
+    max-width: 64rem;
+    display: flex;
+    flex-flow: row-reverse wrap;
+    align-items: baseline;
+    /* with row-reverse, align to end instead of start */
+    justify-content: flex-end;
+    gap: 1rem;
+  }
+  .title {
+    flex: 1 1 32rem;
     display: inline;
     overflow-wrap: break-word;
     font-weight: var(--font-semibold);
-    font-size: calc(1.25 * var(--font-xl));
+    font-size: var(--font-xl);
     line-height: 1.2;
   }
-  header {
-    margin: 0 auto;
-    max-width: 64rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem 0;
+  .access {
+    flex: 0 1 auto;
   }
   .description {
+    flex: 1 1 100%;
     line-height: 1.4;
     color: var(--gray-5);
   }
-  .twoColumn .description {
+  .twoColumn.description {
     columns: 2;
     column-gap: 1rem;
   }

diff --git a/src/lib/components/layouts/DocumentLayout.svelte b/src/lib/components/layouts/DocumentLayout.svelte
@@ -11,7 +11,6 @@
   } from "$lib/api/types";
   import { _ } from "svelte-i18n";
 
-  import Access, { getLevel } from "../documents/Access.svelte";
   import Actions from "../documents/Actions.svelte";
   import AddOns from "$lib/components/common/AddOns.svelte";
   import Avatar from "../accounts/Avatar.svelte";
@@ -38,7 +37,6 @@
 
   $: document = $documentStore;
   $: projects = (document.projects ?? []) as Project[];
-  $: access = getLevel(document.access);
 </script>
 
 <SidebarLayout>
@@ -55,11 +53,6 @@
 
   <aside class="column between" slot="action">
     <Flex direction="column" gap={2}>
-      {#if access}
-        <div style="font-size: var(--font-xl)">
-          <Access level={access} />
-        </div>
-      {/if}
       {#if document.access === "organization" && isOrg(document.organization)}
         <Metadata key={$_("sidebar.sharedWith")}>
           <Flex>