feat: replace cards with new component

Venom-Biochem-Lab · Jan 27, 2024 · a4ac2e6 · a4ac2e6
1 parent 0e54746
commit a4ac2e6
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 11 deletions.
diff --git a/frontend/src/lib/EntryCard.svelte b/frontend/src/lib/EntryCard.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+ import { Card } from "flowbite-svelte";
+ export let title = "";
+</script>
+
+<Card
+ class="max-w-full mt-5"
+ style="padding-top: 15px; color: var(--color-text);"
+>
+ <h2 class="text-darkblue mb-2">{title}</h2>
+ <slot />
+</Card>
diff --git a/frontend/src/routes/protein/[proteinName]/+page.svelte b/frontend/src/routes/protein/[proteinName]/+page.svelte
@@ -10,11 +10,11 @@
  Spinner,
  } from "flowbite-svelte";
  import Markdown from "$lib/Markdown.svelte";
- import { Heading, Span } from "flowbite-svelte";
  import { numberWithCommas } from "$lib/format";
  import { goto } from "$app/navigation";
  import References from "$lib/References.svelte";
  import { ChevronDownSolid, PenOutline } from "flowbite-svelte-icons";
+ import EntryCard from "$lib/EntryCard.svelte";
 
  const fileDownloadDropdown = ["pdb", "fasta"];
 
@@ -48,11 +48,21 @@
  Description Description Description Description
  </div>
 
- <Card title="Info" class="max-w-full mt-5">
- <Heading tag="h4">Information</Heading>
+ <EntryCard title="Provided Info">
+ <div class="grid grid-cols-2">
+ <div>Organism</div>
+ <div>
+ {entry.speciesName}
+ </div>
+
+ <div>Method</div>
+ <div>AlphaFold 2</div>
+ </div>
+ </EntryCard>
 
+ <EntryCard title="Computed Insights">
  <div class="grid grid-cols-2">
- <div>Source Organism</div>
+ <div>Organism</div>
  <div>
  {entry.speciesName}
  </div>
@@ -66,22 +76,20 @@
  <div>Mass (Da)</div>
  <div><code>{numberWithCommas(entry.mass)}</code></div>
  </div>
- </Card>
+ </EntryCard>
 
  <!-- Article / Wiki entry -->
  {#if entry.content}
- <Card title="Info" class="max-w-full mt-5">
- <Heading tag="h4">Article</Heading>
+ <EntryCard title="Article">
  <Markdown text={entry.content} />
- </Card>
+ </EntryCard>
  {/if}
 
  <!-- References -->
  {#if entry.refs}
- <Card title="References" class="max-w-full mt-5 overflow-wrap">
- <Heading tag="h4">References</Heading>
+ <EntryCard title="References">
  <References bibtex={entry.refs} />
- </Card>
+ </EntryCard>
  {/if}
  </div>
  <div id="right-side">
@@ -130,4 +138,7 @@
  font-weight: 500;
  color: var(--darkblue);
  }
+ h2 {
+ color: var(--darkblue);
+ }
 </style>