styles

MuckRock · Jul 8, 2024 · 5174189 · 5174189
1 parent 04a3cbe
commit 5174189
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 19 deletions.
diff --git a/src/lib/components/documents/AnnotationPane.svelte b/src/lib/components/documents/AnnotationPane.svelte
@@ -266,7 +266,7 @@ Only one note can be added/edited at a time.
 
   .box {
     position: absolute;
-    border: 3px solid;
+    border: 3px dashed var(--gray-4);
     background-color: transparent;
     /* if we make boxes editable
     cursor: grab;

diff --git a/src/lib/components/documents/PDFPage.svelte b/src/lib/components/documents/PDFPage.svelte
@@ -16,8 +16,6 @@ Selectable text can be rendered in one of two ways:
     ViewerMode,
   } from "$lib/api/types";
 
-  import { pushState } from "$app/navigation";
-
   import * as pdfjs from "pdfjs-dist/build/pdf.mjs";
   import { getContext } from "svelte";
   import { _ } from "svelte-i18n";
@@ -45,7 +43,6 @@ Selectable text can be rendered in one of two ways:
   export let notes: NoteType[] = [];
   export let text: TextPosition[] = [];
 
-  const activeNote: Writable<NoteType> = getContext("activeNote");
   const mode: Writable<ViewerMode> = getContext("mode");
 
   let canvas: HTMLCanvasElement;
@@ -198,11 +195,11 @@ Selectable text can be rendered in one of two ways:
     });
   }
 
-  function onResize(e) {
+  function onResize() {
     numericScale = fitPage(width, height, container, scale);
   }
 
-  function onVisibilityChange(e: Event) {
+  function onVisibilityChange() {
     if (window.document.visibilityState === "visible" && !canvas.hidden) {
       Promise.all([pdf, page]).then(([pdf, page]) => {
         render(page, canvas, container, scale);

diff --git a/src/lib/components/documents/Page.svelte b/src/lib/components/documents/Page.svelte
@@ -18,7 +18,6 @@
 
   let io: IntersectionObserver;
   let container: HTMLElement;
-  let heading: HTMLElement;
   let visible: boolean;
 
   $: id = pageHashUrl(page_number).replace("#", "");
@@ -79,9 +78,9 @@
   });
 </script>
 
-<div bind:this={container} class="page" class:wide class:tall>
+<div {id} bind:this={container} class="page" class:wide class:tall>
   <header>
-    <h4 bind:this={heading} {id}>
+    <h4>
       <a {href}>
         {$_("documents.pageAbbrev")}
         {page_number}

diff --git a/src/lib/components/documents/stories/AnnotationPane.stories.svelte b/src/lib/components/documents/stories/AnnotationPane.stories.svelte
@@ -3,6 +3,7 @@
 
   import { Story } from "@storybook/addon-svelte-csf";
   import AnnotationPane from "../AnnotationPane.svelte";
+  import Page from "../Page.svelte";
   import Flex from "$lib/components/common/Flex.svelte";
 
   export const meta = {
@@ -39,22 +40,28 @@
 <Story name="default">
   <Flex class="pages" direction="column" gap={1}>
     {#each sizes as [width, height], page_number}
-      <div class="page">
-        <AnnotationPane
-          {document}
-          {page_number}
-          notes={notes[page_number] || []}
-        />
-      </div>
+      <Page page_number={page_number + 1}>
+        <div class="page-container">
+          <AnnotationPane
+            {document}
+            {page_number}
+            notes={notes[page_number] || []}
+          />
+        </div>
+      </Page>
     {/each}
   </Flex>
 </Story>
 
 <style>
-  .page {
+  .page-container {
+    margin: 0;
     position: relative;
+
+    background-color: var(--white, white);
+    box-shadow: var(--shadow);
+
     width: 88ch;
     aspect-ratio: 2 / 3;
-    box-shadow: var(--shadow);
   }
 </style>
diff --git a/src/routes/documents/[id]-[slug]/annotate/+page.server.ts b/src/routes/documents/[id]-[slug]/annotate/+page.server.ts
@@ -1,5 +1,5 @@
 import type { Actions } from "./$types.js";
-import type { Access, Bounds, Document, Note, Section } from "$lib/api/types";
+import type { Access, Note, Section } from "$lib/api/types";
 
 import { fail } from "@sveltejs/kit";