feat: vis on top

Venom-Biochem-Lab · Apr 9, 2024 · 03e5548 · 03e5548
1 parent 5d183e0
commit 03e5548
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 16 deletions.
diff --git a/frontend/src/lib/Header.svelte b/frontend/src/lib/Header.svelte
@@ -8,14 +8,14 @@
 		TableRowOutline,
 		BookOutline,
 	} from "flowbite-svelte-icons";
-	import {user} from "./stores/user"
-	import Cookies from "js-cookie"
+	import { user } from "./stores/user";
+	import Cookies from "js-cookie";
 
 	// Checking if the user has a cookie.
 	// If they do, set user status for the whole site.
 	onMount(async () => {
 		if (Cookies.get("auth")) {
-			$user.loggedIn = true
+			$user.loggedIn = true;
 		}
 	});
 </script>
@@ -32,9 +32,9 @@
 				><TableRowOutline size="lg" />Search</a
 			>
 			{#if $user.loggedIn}
-			<a href="/upload" class="flex items-center gap-1">
-				<UploadOutline size="lg" />Upload</a
-			>
+				<a href="/upload" class="flex items-center gap-1">
+					<UploadOutline size="lg" />Upload</a
+				>
 			{/if}
 			<a href="/tutorials" class="flex items-center gap-1">
 				<BookOutline size="lg" />Tutorials</a
@@ -44,13 +44,12 @@
 
 	<a href="/login" class="flex items-center gap-1 mr-5">
 		<UserOutline size="lg" />
-			{#if $user.loggedIn}
-				Logout
-			{:else}
-				Login
-			{/if}
-		</a
-	>
+		{#if $user.loggedIn}
+			Logout
+		{:else}
+			Login
+		{/if}
+	</a>
 </header>
 <div style="height: 60px;" />
 

diff --git a/frontend/src/lib/Molstar.svelte b/frontend/src/lib/Molstar.svelte
@@ -62,6 +62,6 @@
 	#myViewer {
 		float: left;
 		position: relative;
-		z-index: 997;
+		z-index: 999;
 	}
 </style>
diff --git a/frontend/src/routes/Align.svelte b/frontend/src/routes/Align.svelte
@@ -67,7 +67,7 @@
 					>
 				</div>
 			</div>
-			<div>
+			<div class="z-999">
 				<Molstar
 					format="pdb"
 					url="{BACKEND_URL}/protein/pdb/{combined}"

diff --git a/frontend/src/routes/Protein.svelte b/frontend/src/routes/Protein.svelte
@@ -119,7 +119,7 @@
 				{/if}
 			</div>
 
-			<div style="position: sticky; top: 55px; right: 0;">
+			<div style="position: sticky; top: 55px; right: 0; z-index:999;">
 				<EntryCard title="Provided Information">
 					<Molstar
 						format="pdb"