fix: layout

Venom-Biochem-Lab · Jan 30, 2024 · f2fe3a7 · f2fe3a7
1 parent 91b1bd4
commit f2fe3a7
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 45 deletions.
diff --git a/frontend/src/lib/ListProteins.svelte b/frontend/src/lib/ListProteins.svelte
@@ -10,44 +10,39 @@
  "scriptionDescriptionDescription DescriptionDescription Description Description";
 </script>
 
-<Tabs style="full" contentClass="bg-none p-5">
- <TabItem open title="Proteins">
- <div class="prot-grid">
- {#if allEntries}
- {#each allEntries as entry}
- <!-- svelte-ignore a11y-click-events-have-key-events -->
- <!-- svelte-ignore a11y-no-static-element-interactions -->
- <div
- class="prot-container"
- on:click={() => goto(`/protein/${entry.name}`)}
- title={`Name:${entry.name}\nDescription:${dummyDesc}`}
- >
- <div class="prot-thumb mr-2">
- <img class="prot-thumb" src={dummy} alt="dummy" />
- </div>
- <div class="prot-info">
- <div class="prot-name">
- {entry.name}
- </div>
- <div class="prot-desc">
- {dummyDesc}
- </div>
- <div>
- <div><b>Organism</b>: {entry.speciesName}</div>
- <div><b>Method</b>: AlphaFold2</div>
- <div><b>Length:</b> <code>{entry.length}</code></div>
- <div>
- <b>Mass</b>: <code>{numberWithCommas(entry.mass)}</code>
- </div>
- </div>
+<div class="prot-grid">
+ {#if allEntries}
+ {#each allEntries as entry}
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
+ <div
+ class="prot-container"
+ on:click={() => goto(`/protein/${entry.name}`)}
+ title={`Name:${entry.name}\nDescription:${dummyDesc}`}
+ >
+ <div class="prot-thumb mr-2">
+ <img class="prot-thumb" src={dummy} alt="dummy" />
+ </div>
+ <div class="prot-info">
+ <div class="prot-name">
+ {entry.name}
+ </div>
+ <div class="prot-desc">
+ {dummyDesc}
+ </div>
+ <div>
+ <div><b>Organism</b>: {entry.speciesName}</div>
+ <div><b>Method</b>: AlphaFold2</div>
+ <div><b>Length:</b> <code>{entry.length}</code></div>
+ <div>
+ <b>Mass</b>: <code>{numberWithCommas(entry.mass)}</code>
  </div>
  </div>
- {/each}
- {/if}
- </div>
- </TabItem>
- <TabItem title="Scatter Plot">not yet implemented</TabItem>
-</Tabs>
+ </div>
+ </div>
+ {/each}
+ {/if}
+</div>
 
 <style>
  .prot-container {
@@ -90,6 +85,10 @@
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
+ overflow-y: scroll;
+ padding: 10px;
+ margin-left: 10px;
+ height: calc(100vh - 100px);
  }
  .prot-info {
  width: 300px;

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -7,7 +7,7 @@
 <div class="app">
  <Header />
 
- <main class="p-10">
+ <main>
  <slot />
  </main>
 </div>
diff --git a/frontend/src/routes/Header.svelte b/frontend/src/routes/Header.svelte
@@ -18,15 +18,12 @@
  </a>
  </div>
  <div class="nav">
- <a href="/" class="flex items-center gap-1"
- ><HomeOutline size="sm" />Home</a
+ <a href="/search" class="flex items-center gap-1"
+ ><TableRowOutline size="sm" />View</a
  >
  <a href="/upload" class="flex items-center gap-1">
  <UploadOutline size="sm" />Upload</a
  >
- <a href="/search" class="flex items-center gap-1"
- ><TableRowOutline size="sm" />Proteins</a
- >
  </div>
  <form
  id="search-bar"

diff --git a/frontend/src/routes/protein/[proteinName]/+page.svelte b/frontend/src/routes/protein/[proteinName]/+page.svelte
@@ -35,7 +35,7 @@
  });
 </script>
 
-<section class="flex gap-10">
+<section class="flex gap-10 p-5">
  {#if entry}
  <div id="left-side">
  <!-- TITLE AND DESCRIPTION -->

diff --git a/frontend/src/routes/search/+page.svelte b/frontend/src/routes/search/+page.svelte
@@ -24,5 +24,23 @@
 </svelte:head>
 
 <section>
- <ListProteins {allEntries} />
+ <div id="sidebar">Filter By</div>
+ <div id="view">
+ <ListProteins {allEntries} />
+ </div>
 </section>
+
+<style>
+ section {
+ display: flex;
+ }
+ #sidebar {
+ width: 25%;
+ border-right: 1px solid #00000010;
+ background: #00000005;
+ }
+ #view {
+ width: 75%;
+ padding: 5px;
+ }
+</style>
diff --git a/frontend/src/routes/upload/+page.svelte b/frontend/src/routes/upload/+page.svelte
@@ -27,7 +27,7 @@
  $: file = files ? files[0] : undefined; // we're just concerned with one file
 </script>
 
-<section>
+<section class="p-5">
  <div class="w-500 flex flex-col gap-5">
  <div>
  <Label