Add dataset overlay for small screens

AllenInstitute · Jul 26, 2024 · 59e236f · 59e236f
1 parent b9a5767
commit 59e236f
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git a/packages/web/src/components/DatasetDetails/DatasetDetails.module.css b/packages/web/src/components/DatasetDetails/DatasetDetails.module.css
@@ -11,7 +11,8 @@
   right: 0;
   padding: 24px 30px;
   border-left: 1px solid var(--medium-grey);
-  box-shadow: -4px 10px 8px 0px #000000
+  box-shadow: -4px 10px 8px 0px #000000;
+  z-index: 15;
 }
 
 .internal-wrapper {

diff --git a/packages/web/src/components/OpenSourceDatasets/DatasetRow.module.css b/packages/web/src/components/OpenSourceDatasets/DatasetRow.module.css
@@ -19,6 +19,21 @@
   border-bottom: 1px solid var(--bright-aqua);
 }
 
+/* Toggle overlay depending on screen size */
+@media screen and (max-width: 1024px) {
+  .table-header::after {
+    background-image: linear-gradient(to right, transparent, black);
+    top: 0;
+    content: " ";
+    width: 60px;
+    right: 0;
+    max-height: 100%;
+    position: absolute;
+    height: 100%;
+    z-index: 11;
+  }
+}
+
 .button-wrapper {
   position: absolute;
   top: 0;

diff --git a/packages/web/src/components/OpenSourceDatasets/DatasetTable.module.css b/packages/web/src/components/OpenSourceDatasets/DatasetTable.module.css
@@ -52,3 +52,18 @@
   text-decoration: underline;
   color: var(--bright-aqua);
 }
+
+/* Toggle overlay depending on screen size */
+ @media screen and (max-width: 1024px) {
+  .table-header::after {
+    background-image: linear-gradient(to right, transparent, black);
+    top: 0;
+    content: " ";
+    width: 60px;
+    right: 0;
+    max-height: 100%;
+    position: absolute;
+    height: 100%;
+    z-index: 11;
+  }
+}