Add Nav bar, css tweaks

ome · Oct 4, 2024 · 3248605 · 3248605
1 parent df37e12
commit 3248605
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 6 deletions.
diff --git a/ome2024-ngff-challenge/src/App.svelte b/ome2024-ngff-challenge/src/App.svelte
@@ -5,6 +5,7 @@
   import Pixel from "./Pixel.svelte";
 
   import { SAMPLES_HOME, filesizeformat, loadCsv, lookupImagingModality, lookupOrganism } from "./util";
+  import Nav from "./Nav.svelte";
 
 
   // check for ?csv=url
@@ -104,13 +105,14 @@
 <Pixel/><Pixel/><Pixel/><Pixel/><Pixel/>
 <Pixel/><Pixel/><Pixel/><Pixel/><Pixel/>
 
+<Nav/>
+
 <main>
   <h1 class="title">OME 2024 NGFF Challenge</h1>
 
   <ThumbGallery {csvUrl} />
 
   <div class="summary">
-    Totals:
     <table>
       <tr>
         <td>Zarr Samples (URLs)</td>
@@ -228,8 +230,6 @@
 <style>
 
   .title {
-    margin-top: 0;
-    padding-top: 20px;
     z-index: 10;
     position: relative;
   }
@@ -240,6 +240,11 @@
     border-collapse: collapse;
     width: 100%;
     background-color: white;
+    position: relative;
+    z-index: 10;
+    -webkit-box-shadow: 7px 6px 20px -8px rgba(115,115,115,1);
+    -moz-box-shadow: 7px 6px 20px -8px rgba(115,115,115,1);
+    box-shadow: 7px 6px 20px -8px rgba(115,115,115,1);
   }
   td, th {
     border: lightgrey 1px solid;

diff --git a/ome2024-ngff-challenge/src/Nav.svelte b/ome2024-ngff-challenge/src/Nav.svelte
@@ -0,0 +1,49 @@
+<nav>
+  <h2>OME 2024 NGFF Challenge</h2>
+
+  <ul>
+    <li>
+      <a href="https://github.com/ome/ome2024-ngff-challenge/" target="_blank">
+        About
+    </li>
+  </ul>
+</nav>
+
+<style>
+  nav {
+    position: relative;
+    display: block;
+    margin: 0;
+    padding: 5px;
+    flex: 0 0 48px;
+    background-color: #202428;
+    z-index: 10;
+  }
+
+  h2 {
+    color: white;
+    font-weight: 300;
+    margin: 5px 15px;
+  }
+
+  ul {
+    list-style: none;
+    color: white;
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: 10px 15px;
+  }
+
+  li {
+    float: right;
+    list-style-type: none;
+    margin: 0 10px;
+  }
+  a {
+    color: white;
+    text-decoration: none;
+    line-height: 2.3;
+  }
+
+</style>
diff --git a/ome2024-ngff-challenge/src/ThumbGallery.svelte b/ome2024-ngff-challenge/src/ThumbGallery.svelte
@@ -108,6 +108,8 @@
     color: black;
   }
   .gallery {
+    position: relative;
+    z-index: 10;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
     gap: 5px;

diff --git a/ome2024-ngff-challenge/src/app.css b/ome2024-ngff-challenge/src/app.css
@@ -38,7 +38,12 @@ body {
 
   width: 100%;
   height: 100%;
-  background-image: repeating-linear-gradient(
+  background-image: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.5),
+      rgba(255, 255, 255, 0)
+    ),
+    repeating-linear-gradient(
       180deg,
       rgb(255, 149, 0, 0.3) 0px,
       rgb(255, 149, 0, 0.3) 1px,
@@ -65,8 +70,7 @@ body {
       rgba(70, 70, 70, 0.1) 1px,
       transparent 1px,
       transparent 20px
-    ),
-    linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
+    );
 }
 
 p,