Fix mobile check and globes on landing

Vizzuality · Oct 7, 2022 · 453585c · 453585c · vercel · Oct 7, 2022
1 parent 72ddbd4
commit 453585c
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 21 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <!-- TODO: Recover meta tag when we have responsive fixed -->
+    <!-- TODO: Recover meta tag when we have responsive fixed. Media queries wont work until we recover this -->
     <!-- <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"

diff --git a/src/constants/responsive.js b/src/constants/responsive.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import Responsive, { useMediaQuery } from 'react-responsive';
+import Responsive from 'react-responsive';
 
 export const baseUnit = 16;
 export const pixelBreakpoints = {
@@ -16,7 +16,9 @@ export const remBreakpoints = {
   desktop: getRems(pixelBreakpoints.desktop),
 };
 export const useMobile = () =>
-  useMediaQuery({ maxWidth: remBreakpoints.mobile });
+  window.screen.width && window.screen.width < pixelBreakpoints.mobile;
+// TODO: This doesn't work because we are not using the width meta tag. And so media queries wont work
+// useMediaQuery({ maxWidth: remBreakpoints.mobile });
 
 export function Desktop(props) {
   return <Responsive {...props} minWidth={remBreakpoints.desktop} />;
@@ -34,15 +36,20 @@ export function TabletLandscapeOnly(props) {
   return <Responsive {...props} maxWidth={remBreakpoints.desktop} />;
 }
 export function MobileOnly(props) {
-  const { children, view, map } = props;
-  return (
-    <Responsive {...props} maxWidth={remBreakpoints.mobile}>
-      {React.Children.map(children || null, (child, i) => {
-        return (
-          // eslint-disable-next-line react/no-array-index-key
-          child && <child.type {...child.props} key={i} view={view} map={map} />
-        );
-      })}
-    </Responsive>
-  );
+  const { children } = props;
+  if (window.screen.width && window.screen.width < pixelBreakpoints.mobile) {
+    return children;
+  }
+  return null;
+  // TODO: This doesn't work because we are not using the width meta tag
+  // return (
+  //   <Responsive {...props} maxWidth={remBreakpoints.mobile}>
+  //     {React.Children.map(children || null, (child, i) => {
+  //       return (
+  //         // eslint-disable-next-line react/no-array-index-key
+  //         child && <child.type {...child.props} key={i} view={view} map={map} />
+  //       );
+  //     })}
+  //   </Responsive>
+  // );
 }
diff --git a/src/containers/menus/globes-menu/component.jsx b/src/containers/menus/globes-menu/component.jsx
@@ -11,22 +11,24 @@ import { motion } from 'framer-motion';
 
 import Globe from 'containers/landing/globe';
 
+import { useMobile } from 'constants/responsive';
+
 import styles from './styles.module';
 
 import globeDiscover from 'images/globe-discover.png';
 import globeExplore from 'images/globe-explore.png';
 import globeNRC from 'images/globe-NRC.png';
 
-function GlobesMenu({
-  browsePage, className, landing = false, onMouseLeave,
-}) {
+function GlobesMenu({ browsePage, className, landing = false, onMouseLeave }) {
   const t = useT();
+  const isMobile = useMobile();
 
   return (
     <motion.div
       className={cx(className, {
         [styles.globesContainerLanding]: landing,
         [styles.globesContainer]: !landing,
+        [styles.isMobile]: isMobile,
       })}
       initial={{ opacity: 0, y: 25 }}
       animate={{ opacity: 1, y: 0 }}
@@ -39,15 +41,15 @@ function GlobesMenu({
       <Globe
         title={t('Discover stories')}
         description={t(
-          'Learn about important places of great biodiversity, what sets them apart from the rest of the world and what challenges they face today.',
+          'Learn about important places of great biodiversity, what sets them apart from the rest of the world and what challenges they face today.'
         )}
         globeImage={globeDiscover}
         handleClick={() => browsePage({ type: FEATURED })}
       />
       <Globe
         title={t('Explore data')}
         description={t(
-          'Explore areas of interest, the vertebrate species that live there, the human pressures that exist, and the current conservation efforts and those that are needed to safeguard enough habitat to preserve global biodiversity.',
+          'Explore areas of interest, the vertebrate species that live there, the human pressures that exist, and the current conservation efforts and those that are needed to safeguard enough habitat to preserve global biodiversity.'
         )}
         globeImage={globeExplore}
         center
@@ -56,7 +58,7 @@ function GlobesMenu({
       <Globe
         title={t('National Report Cards')}
         description={t(
-          'Analyze and compare how countries are contributing to preserving global biodiversity and where they can go further to protect species and critical land area',
+          'Analyze and compare how countries are contributing to preserving global biodiversity and where they can go further to protect species and critical land area'
         )}
         globeImage={globeNRC}
         handleClick={() => browsePage({ type: NATIONAL_REPORT_CARD_LANDING })}

diff --git a/src/containers/menus/globes-menu/styles.module.scss b/src/containers/menus/globes-menu/styles.module.scss
@@ -2,15 +2,18 @@
 
 .globesContainerLanding {
   align-content: end;
-  margin: auto 0 0 0;
   padding: 0 15px;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   width: 100%;
 
   @media #{$tablet-landscape} {
+    margin: auto 0 0 0;
     padding: 0 45px;
   }
+  &.isMobile {
+    margin: auto;
+  }
 }
 
 .globesContainer {