White background, UI makeover

ome · Oct 15, 2024 · c03dbd2 · c03dbd2
1 parent 69010ce
commit c03dbd2
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 48 deletions.
diff --git a/ome2024-ngff-challenge/src/App.svelte b/ome2024-ngff-challenge/src/App.svelte
@@ -194,16 +194,29 @@
     <!-- start left side-bar (moves to top for mobile) -->
     <div class="sidebarContainer">
       <div class="sidebar">
-        <input
-          on:input={filterText}
-          placeholder="Filter by Name or Description"
-          name="textFilter"
-        />
+        <div class="textInputWrapper">
+          <input
+            bind:value={textFilter}
+            on:input={filterText}
+            placeholder="Filter by Name or Description"
+            name="textFilter"
+          />
+          <button
+            title="Clear Filter"
+            style="visibility: {textFilter !== '' ? 'visible' : 'hidden'}"
+            on:click={filterText}
+            >&times;
+          </button>
+        </div>
         <div class="filters">
           <div style="white-space: nowrap;">Filter by:</div>
           {#if sourceFilter !== "" && ngffTable.getCsvSourceList(sourceFilter).length > 0}
             <div class="selectWrapper">
-              <select name="collection" bind:value={collectionFilter} on:change={filterCollection}>
+              <select
+                name="collection"
+                bind:value={collectionFilter}
+                on:change={filterCollection}
+              >
                 <option value="">Collection</option>
                 {#each ngffTable.getCsvSourceList(sourceFilter) as childSource}
                   <option value={childSource.url}>
@@ -302,8 +315,8 @@
 
           <div class="clear"></div>
         </div>
-        <div>
-          Sort:
+        Sort by:
+        <div class="sortButtons">
           <!-- <ColumnSort
             col_label={"Rating"}
             col_name={"rating"}
@@ -382,14 +395,26 @@
   }
 
   input[name="textFilter"] {
-    height: 24px;
     width: 100%;
     flex: auto 1 1;
-    border: solid grey 1px;
+    border: solid var(--border-color) 1px;
     border-radius: 16px;
-    padding: 10px;
-    font-size: 14px;
-    background-color: #bbb;
+    padding: 8px 8px 6px 8px;
+    font-size: 1rem;
+    background-color: var(--light-background);
+    position: relative;
+    display: block;
+  }
+  /* Add a X over the input */
+  input[name="textFilter"]::before {
+    content: "Where is this going?";
+    width: 200px;
+    height: 200px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: block;
   }
 
   @media (max-width: 800px) {
@@ -404,10 +429,10 @@
     font-size: 1rem;
     line-height: 1.5;
     appearance: none;
-    background-color: #bbb;
-    border: 1px solid #dee2e6;
+    background-color: var(--light-background);
+    border: 1px solid var(--border-color);
     border-radius: 0.375rem;
-    margin: 3px;
+    margin: 3px 0;
     float: left;
     background-image: var(--form-select-bg-img);
     background-repeat: no-repeat;
@@ -428,28 +453,35 @@
     flex: 0 0 20px;
     cursor: pointer;
   }
-  .selectWrapper button {
+  .selectWrapper button, .textInputWrapper button {
     background: transparent;
     border: none;
     padding: 2px;
-    color: white;
     font-size: 24px;
   }
+  .textInputWrapper {
+    position: relative;
+  }
+  .textInputWrapper button {
+    position: absolute;
+    right: 7px;
+    top: -1px;
+  }
 
   .source:has(input:checked) {
-    border: solid #ccc 2px;
-    background-color: #333;
+    border: solid #ccc 1px;
+    background-color: var(--selected-background);
   }
   .clear {
-    background-color: #333;
+    /* background-color: #333; */
   }
   .sources {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
     gap: 5px;
   }
   .source {
-    border: solid #333 1px;
+    border: solid var(--border-color) 1px;
     float: left;
     position: relative;
     padding: 3px;
@@ -470,31 +502,24 @@
   .app {
     margin: 0;
     padding: 0;
-    background-color: black;
     inset: 0;
     display: flex;
     flex-direction: column;
   }
   .filters {
-    /* display: flex;
-    flex-direction: row; */
     gap: 10px;
     margin: 5px 0;
   }
   main {
-    background-color: black;
     flex: auto 1 1;
     overflow: scroll;
-    color: white;
     width: 100%;
     display: flex;
     flex-direction: column;
   }
 
   .summary {
-    color: white;
     top: 0;
-    background-color: black;
     z-index: 20;
     padding: 10px;
     flex: auto 0 0;
@@ -505,4 +530,12 @@
   .results h3 {
     margin: 10px;
   }
+
+  .sortButtons {
+    display: flex;
+    flex-direction: row;
+    border: solid var(--border-color) 1px;
+    border-radius: 5px;
+    width: fit-content;
+  }
 </style>
diff --git a/ome2024-ngff-challenge/src/ColumnSort.svelte b/ome2024-ngff-challenge/src/ColumnSort.svelte
@@ -16,15 +16,16 @@
 
 <style>
   button {
-    background-color: #bbb;
-    border:none;
+    background-color: var(--light-background);
+    border: none;
     text-wrap: none;
     white-space: nowrap;
     position: relative;
     padding-right: 20px;
     padding-left: 5px;
     outline: none;
-    margin: 3px;
+    margin: 0;
+    border-radius: 0;
   }
   button:focus-visible {
    outline: 4px solid gold;

diff --git a/ome2024-ngff-challenge/src/ImageList.svelte b/ome2024-ngff-challenge/src/ImageList.svelte
@@ -49,16 +49,14 @@
 
 <style>
   .imageListContainer {
-    border-top: solid #333 1px;
+    border-top: solid var(--border-color) 1px;
     width: 100%;
     margin: auto;
     flex: auto 1 1;
     overflow: hidden;
   }
 
   .row {
-    background-color: black;
     padding: 10px;
-    color: white;
   }
 </style>
diff --git a/ome2024-ngff-challenge/src/SourcePanel.svelte b/ome2024-ngff-challenge/src/SourcePanel.svelte
@@ -31,11 +31,11 @@
 
 <style>
   .source:has(input:checked) {
-    border: solid #ccc 2px;
-    background-color: #333;
+    border: solid #ccc 1px;
+    background-color: var(--selected-background);
   }
   .source {
-    border: solid #333 1px;
+    border: solid var(--border-color) 1px;
     float: left;
     position: relative;
     padding: 3px;

diff --git a/ome2024-ngff-challenge/src/Thumbnail.svelte b/ome2024-ngff-challenge/src/Thumbnail.svelte
@@ -123,13 +123,15 @@
   bind:this={canvas}
   {height}
   {width}
-/>
-</div>
+/></div>
 
 <style>
   .canvasWrapper {
     position: relative;
   }
+  canvas {
+    box-shadow: 5px 4px 10px -5px #737373;
+  }
 
   @keyframes spinner {
     to {

diff --git a/ome2024-ngff-challenge/src/ZarrListItem.svelte b/ome2024-ngff-challenge/src/ZarrListItem.svelte
@@ -93,7 +93,6 @@
   }
   .zarr-list-item {
     padding: 10px;
-    color: lightgray;
     display: flex;
     flex-direction: row;
     align-items: start;

diff --git a/ome2024-ngff-challenge/src/app.css b/ome2024-ngff-challenge/src/app.css
@@ -45,19 +45,28 @@ body {
   --bg-opacity: 0.5;
 }
 
-@media (prefers-color-scheme: dark) {
-  body {
-    --bg-opacity: 0;
-  }
-}
-
 body {
   margin: 0;
   width: 100%;
   height: 100%;
-  background: black;
+  background: white;
+  color: #333;
   position: absolute;
   inset: 0;
+  --border-color: lightgrey;
+  --light-background: #eee;
+  --selected-background: #eee;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    --bg-opacity: 0;
+    background: black;
+    color: #bbb;
+    --light-background: #222;
+    --border-color: #333;
+    --selected-background: #444;
+  }
 }
 
 p,
@@ -116,3 +125,13 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+/* first button has border-radius */
+.sortButtons button:first-child {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+.sortButtons button:last-child {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}