Double flex

MuckRock · Apr 22, 2024 · c0acaea · c0acaea
1 parent 61725c4
commit c0acaea
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 14 deletions.
diff --git a/src/lib/components/documents/NoteHighlights.svelte b/src/lib/components/documents/NoteHighlights.svelte
@@ -64,7 +64,16 @@
 <style>
   h4 :global(em),
   .segment :global(em) {
-    background-color: var(--yellow);
+    background-color: var(--yellow-bright);
     font-style: normal;
   }
+
+  blockquote {
+    border-left: 0.25rem solid var(--yellow-bright);
+    padding-left: 0.5rem;
+  }
+
+  cite {
+    font-size: var(--font-s);
+  }
 </style>
diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte
@@ -88,16 +88,19 @@
 
 <div class="container">
   {#each results as document (document.id)}
-    <Flex gap={0.625} align="center">
-      <label>
-        <span class="sr-only">Select</span>
-        <input
-          type="checkbox"
-          bind:group={$selected}
-          value={String(document.id)}
-        />
-      </label>
-      <DocumentListItem {document} />
+    <Flex direction="column">
+      <Flex gap={0.625} align="center">
+        <label>
+          <span class="sr-only">Select</span>
+          <input
+            type="checkbox"
+            bind:group={$selected}
+            value={String(document.id)}
+          />
+        </label>
+        <DocumentListItem {document} />
+      </Flex>
+
       {#if document.highlights}
         <SearchHighlights {document} />
       {/if}

diff --git a/src/lib/components/documents/SearchHighlights.svelte b/src/lib/components/documents/SearchHighlights.svelte
@@ -58,7 +58,7 @@
 
 <style>
   .segment :global(em) {
-    background-color: var(--yellow);
+    background-color: var(--yellow-bright);
     font-style: normal;
   }
 </style>
diff --git a/src/lib/components/documents/stories/ResultsList.stories.svelte b/src/lib/components/documents/stories/ResultsList.stories.svelte
@@ -6,7 +6,12 @@
 
   // typescript complains without the type assertion
   import searchResults from "$lib/api/fixtures/documents/search-highlight.json";
-  const results = searchResults.results as Document[];
+  const highlighted = searchResults.results as Document[];
+  const results = highlighted.map((d) => ({
+    ...d,
+    highlights: null,
+    note_highlights: null,
+  }));
   const count = searchResults.count;
   const next = searchResults.next;
 
@@ -31,5 +36,7 @@
 </Story>
 
 <Story name="Highlighted">
-  <div style="width: 36rem"><ResultsList {results} {count} {next} /></div>
+  <div style="width: 36rem">
+    <ResultsList results={highlighted} {count} {next} />
+  </div>
 </Story>
diff --git a/src/style/kit.css b/src/style/kit.css
@@ -144,6 +144,10 @@ dd {
   font-weight: var(--font-regular, 400);
 }
 
+summary {
+  cursor: pointer;
+}
+
 /*
 Utility classes
 */