change search to scroll

PENQEinc · Jul 26, 2023 · 5d25ea7 · 5d25ea7
1 parent e587a9e
commit 5d25ea7
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 15 deletions.
diff --git a/stanzas/search-disease/style.scss b/stanzas/search-disease/style.scss
@@ -1,17 +1,20 @@
 @use "@/common.scss";
+main {
+  border-bottom: 1px solid #fff;
+}
+
 .search-disease {
   white-space: nowrap;
+  max-height: calc(100vh - 255px);
   table {
     width: 100%;
     line-height: 2;
-    border-collapse: collapse;
     border-spacing: 0;
-    border-top: 1px solid #fff;
-    border-bottom: 1px solid #fff;
     thead {
-      tr:last-child {
-        border-bottom: 1px solid #fff;
-      }
+      position: sticky;
+      top: 0;
+      border-top: 1px solid #fff;
+      backdrop-filter: blur(10px);
     }
     tr {
       th {
@@ -20,6 +23,8 @@
         font-weight: 500;
         text-align: left;
         vertical-align: bottom;
+        border-top: 1px solid #fff;
+        border-bottom: 1px solid #fff;
         &.th-disease {
           width: 100px;
         }

diff --git a/stanzas/search-gene/style.scss b/stanzas/search-gene/style.scss
@@ -1,18 +1,29 @@
 @use "@/common.scss";
+main {
+  border-bottom: 1px solid #fff;
+}
+
 .search-gene {
-  border-top: 1px solid #fff;
-  border-radius: 3px;
+  white-space: nowrap;
+  max-height: calc(100vh - 255px);
   table {
     width: 100%;
     line-height: 2;
     border-spacing: 0;
-    border-bottom: 1px solid #fff;
+    thead {
+      position: sticky;
+      top: 0;
+      border-top: 1px solid #fff;
+      backdrop-filter: blur(10px);
+    }
     tr {
       th {
         width: 120px;
         padding-left: 10px;
         font-weight: 500;
         text-align: left;
+        vertical-align: bottom;
+        border-top: 1px solid #fff;
         border-bottom: 1px solid #fff;
       }
       td {

diff --git a/stanzas/search-variant/style.scss b/stanzas/search-variant/style.scss
@@ -1,16 +1,20 @@
 @use "@/common.scss";
+main {
+  border-bottom: 1px solid #fff;
+}
+
 .search-variant {
   white-space: nowrap;
+  max-height: calc(100vh - 255px);
   table {
     width: 100%;
     line-height: 2;
-    border-collapse: collapse;
-    border-top: 1px solid #fff;
-    border-bottom: 1px solid #fff;
+    border-spacing: 0;
     thead {
-      tr:last-child {
-        border-bottom: 1px solid #fff;
-      }
+      position: sticky;
+      top: 0;
+      border-top: 1px solid #fff;
+      backdrop-filter: blur(10px);
     }
     tr {
       th {
@@ -19,6 +23,8 @@
         font-weight: 500;
         text-align: left;
         vertical-align: bottom;
+        border-top: 1px solid #fff;
+        border-bottom: 1px solid #fff;
       }
       td {
         padding-left: 10px;