feat: improve mobile support for forest type description

geops · Sep 14, 2020 · 34f05f1 · 34f05f1
1 parent fe8c70f
commit 34f05f1
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 11 deletions.
diff --git a/src/components/ForestTypeDescription/Site.js b/src/components/ForestTypeDescription/Site.js
@@ -8,7 +8,7 @@ import { getStyle } from './utils';
 function Site({ altitude, aspect, slope }) {
   const { t } = useTranslation();
   return (
-    <svg viewBox="0 0 400 400" style={{ margin: '20px 200px 0px' }}>
+    <svg viewBox="0 0 800 400" style={{ marginTop: '20px' }}>
       <path
         className={getStyle(aspect, '15')}
         d="M303.1 312.4L282 265.6c6-2.9 13.1-4.5 21.2-4.5v51.3z"

diff --git a/src/components/ForestTypeDescription/TerrainTab.js b/src/components/ForestTypeDescription/TerrainTab.js
@@ -6,16 +6,18 @@ import { Table } from 'semantic-ui-react';
 import AltitudinalZone from './AltitudinalZoneForestEcoregion';
 import Legend from './Legend';
 import Site from './Site';
+import useIsMobile from '../../hooks/useIsMobile';
 
 function TerrainTab({ data }) {
+  const isMobile = useIsMobile();
   const { t } = useTranslation();
 
   return (
     <>
       <Legend />
       <AltitudinalZone data={data.altitudinalZoneForestEcoregion} />
       <Site altitude={data.altitude} aspect={data.aspect} slope={data.slope} />
-      <Table basic padded structured unstackable>
+      <Table basic padded={isMobile === false} structured unstackable>
         <Table.Body>
           <Table.Row>
             <Table.HeaderCell rowSpan="2">

diff --git a/src/components/ForestTypeDescription/VegetationTab.js b/src/components/ForestTypeDescription/VegetationTab.js
@@ -26,7 +26,7 @@ function VegetationTab({ data }) {
   };
 
   return (
-    <Table basic padded structured unstackable>
+    <Table basic padded structured>
       <Table.Body>
         <Table.Row>
           <Table.HeaderCell>{t('forestType.naturalForest')}</Table.HeaderCell>

diff --git a/src/components/ForestTypeModal.js b/src/components/ForestTypeModal.js
@@ -6,7 +6,7 @@ import { Modal } from 'semantic-ui-react';
 import Button from './Button';
 import ForestTypeDescription from './ForestTypeDescription';
 
-function ForestTypeModal({ compact, data, setIsForestTypeModalOpen }) {
+function ForestTypeModal({ data, setIsForestTypeModalOpen }) {
   const { i18n } = useTranslation();
 
   return (
@@ -22,21 +22,25 @@ function ForestTypeModal({ compact, data, setIsForestTypeModalOpen }) {
           {data.code} - {data[i18n.language]} (<i>{data.la}</i>)
         </Modal.Header>
       }
-      onClose={() => setIsForestTypeModalOpen(false)}
-      onOpen={() => setIsForestTypeModalOpen(true)}
-      trigger={<Button active compact={compact} icon="info" />}
+      onClose={(e) => {
+        e.stopPropagation();
+        setIsForestTypeModalOpen(false);
+      }}
+      onOpen={(e) => {
+        e.stopPropagation();
+        setIsForestTypeModalOpen(true);
+      }}
+      trigger={<Button active icon="info" />}
     />
   );
 }
 
 ForestTypeModal.propTypes = {
-  compact: PropTypes.bool,
   data: PropTypes.arrayOf().isRequired,
   setIsForestTypeModalOpen: PropTypes.func,
 };
 
 ForestTypeModal.defaultProps = {
-  compact: false,
   setIsForestTypeModalOpen: () => null,
 };
 

diff --git a/src/components/LocationResult.js b/src/components/LocationResult.js
@@ -76,7 +76,7 @@ function LocationResult() {
                         <Dropdown.Item
                           content={
                             <>
-                              <ForestTypeModal compact data={ftInfo} />
+                              <ForestTypeModal data={ftInfo} />
                               {key} - {ftInfo[i18n.language]}
                             </>
                           }

diff --git a/src/components/ProjectionForm.js b/src/components/ProjectionForm.js
@@ -22,7 +22,7 @@ const getDropdownOptions = (type, lng, includeKey = false) => (key) => ({
   key,
   content: includeKey ? (
     <>
-      <ForestTypeModal compact data={info(type, key)} />
+      <ForestTypeModal data={info(type, key)} />
       {key} - {info(type, key)[lng]}
     </>
   ) : (