chore: Hide disclaimer for map on mobile

HaydnCCI · Jan 4, 2021 · 54fcadc · 54fcadc
1 parent c58881a
commit 54fcadc
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/src/components/pages/homepage/visualization-gallery/components/disclaimer.js b/src/components/pages/homepage/visualization-gallery/components/disclaimer.js
@@ -2,11 +2,11 @@ import React, { useState } from 'react'
 import classnames from 'classnames'
 import disclaimerStyle from './disclaimer.module.scss'
 
-const Disclaimer = ({ text }) => {
+const Disclaimer = ({ text, hideMobile }) => {
   const [isOpen, setIsOpen] = useState(false)
 
   return (
-    <div>
+    <div className={hideMobile && disclaimerStyle.hideMobile}>
       <button
         aria-expanded={isOpen}
         type="button"

diff --git a/src/components/pages/homepage/visualization-gallery/components/disclaimer.module.scss b/src/components/pages/homepage/visualization-gallery/components/disclaimer.module.scss
@@ -15,3 +15,10 @@
     display: block;
   }
 }
+
+.hide-mobile {
+  display: none;
+  @media (min-width: $viewport-md) {
+    display: block;
+  }
+}
diff --git a/src/components/pages/homepage/visualization-gallery/items/us-map/map.js b/src/components/pages/homepage/visualization-gallery/items/us-map/map.js
@@ -178,7 +178,7 @@ const Map = ({
           </svg>
           <MapLegend legend={metric.legend} />
           {disclaimer && (
-            <Disclaimer text={disclaimer.childMarkdownRemark.html} />
+            <Disclaimer text={disclaimer.childMarkdownRemark.html} hideMobile />
           )}
         </Col>
         <Col width={[4, 6, 3]}>