Fix project details map (#917)

* feat (projectDetails): map - for small screen, full screen map visible(only map visible) * feat (projectDetails): map - footer added to the map * fix (MobileFooter) - border top added * feat (bottomSheet): bottomSheet component made for mobile device * feat (projectDetails): activities - bottomSheet made for activities * feat (projectDetails): project info - added bottom sheet for project information for small screen * feat (projectDetails) - fmtm logo and back button added for small screen * fix (Accordion): interface added to props * feat/fix (projectDetails): projectDetails component projectOption section splitted to projectOption component. projectOptions added for others bottomSheet * fix (projectDetails): bottomSheet - converted css to tailwind css, converted dom manipulation to react states * fix (projectDetails): map - mapcontrols button gap reduced for small screens * fix (bottomSheet): fmtm logo move bottom sheet expand/contract * fix (projectDetails): margins/paddings updated for mobile view * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * fix (Icons): new icon added * fix (projectDetails): accordion for projectOptions for small screen removed, mapLegend removed from projectOptions * fix (projectDetails): mapLegends seperated to different bottomSheet for small screen view * fix (projectDetails): mapLegend added to mobile view footer, UI enhancements * fix (projectDetails): mobile browser view - UI adjustments for mobile browser view * fix (projectDetails): mapLegend - seperated component for rendering legend list * fix (projectDetails): mapLegend - seperated component for rendering legend list --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
hotosm · Oct 17, 2023 · 1a5e91b · 1a5e91b
1 parent 5a14242
commit 1a5e91b
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 60 deletions.
diff --git a/src/frontend/src/components/MapLegends.jsx b/src/frontend/src/components/MapLegends.jsx
@@ -46,6 +46,27 @@ const MapLegends = ({ direction, spacing, iconBtnProps, defaultTheme, valueStatu
       type: 'locked',
     },
   ];
+
+  const LegendListItem = ({ data }) => {
+    return (
+      <div className="fmtm-flex fmtm-items-center fmtm-gap-3">
+        <div className="fmtm-border-[1px] fmtm-border-gray-200">
+          {data.type !== 'locked' ? (
+            <CoreModules.IconButton
+              style={{ backgroundColor: data.color, borderRadius: 0 }}
+              {...iconBtnProps}
+              color="primary"
+              component="label"
+              className="fmtm-w-10 fmtm-h-10"
+            ></CoreModules.IconButton>
+          ) : (
+            <AssetModules.LockIcon sx={{ fontSize: '40px' }} />
+          )}
+        </div>
+        <p className="fmtm-text-lg">{data.value}</p>
+      </div>
+    );
+  };
   return (
     // <CoreModules.Stack direction={direction} spacing={spacing}>
     //   {MapDetails.map((data, index) => {
@@ -68,28 +89,16 @@ const MapLegends = ({ direction, spacing, iconBtnProps, defaultTheme, valueStatu
     //     );
     //   })}
     // </CoreModules.Stack>
-
-    <div className="fmtm-flex fmtm-flex-col fmtm-gap-4">
-      {MapDetails.map((data, index) => {
-        return (
-          <div key={index} className="fmtm-flex fmtm-items-center fmtm-gap-3">
-            <div className="fmtm-border-[1px] fmtm-border-gray-200">
-              {data.type !== 'locked' ? (
-                <CoreModules.IconButton
-                  style={{ backgroundColor: data.color, borderRadius: 0 }}
-                  {...iconBtnProps}
-                  color="primary"
-                  component="label"
-                  className="fmtm-w-10 fmtm-h-10"
-                ></CoreModules.IconButton>
-              ) : (
-                <AssetModules.LockIcon sx={{ fontSize: '40px' }} />
-              )}
-            </div>
-            <p className="fmtm-text-lg">{data.value}</p>
-          </div>
-        );
-      })}
+    <div>
+      <div className="fmtm-flex fmtm-gap-3 fmtm-border-b-[1px] fmtm-pb-2 fmtm-mb-4">
+        <AssetModules.LegendToggleIcon className=" fmtm-text-primaryRed" sx={{ fontSize: '35px' }} />
+        <p className="fmtm-text-2xl">Map Legend</p>
+      </div>
+      <div className="fmtm-flex fmtm-flex-col fmtm-gap-4">
+        {MapDetails.map((data, index) => {
+          return <LegendListItem data={data} key={index} />;
+        })}
+      </div>
     </div>
   );
 };

diff --git a/src/frontend/src/components/ProjectDetails/MobileActivitiesContents.tsx b/src/frontend/src/components/ProjectDetails/MobileActivitiesContents.tsx
@@ -8,7 +8,7 @@ const MobileActivitiesContents = ({ map, mainView, mapDivPostion }) => {
   const defaultTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme);
 
   return (
-    <div className="fmtm-w-full fmtm-bg-white fmtm-mb-[10vh]">
+    <div className="fmtm-w-full fmtm-bg-white fmtm-mb-[12vh]">
       <CoreModules.Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
         <ActivitiesPanel
           params={params}

diff --git a/src/frontend/src/components/ProjectDetails/MobileFooter.tsx b/src/frontend/src/components/ProjectDetails/MobileFooter.tsx
@@ -7,8 +7,6 @@ const MobileFooter = () => {
   const dispatch = CoreModules.useAppDispatch();
   const mobileFooterSelection = CoreModules.useAppSelector((state) => state.project.mobileFooterSelection);
 
-  console.log(mobileFooterSelection, 'mobileFooterSelection');
-
   const footerItem = [
     {
       id: 'explore',
@@ -43,6 +41,18 @@ const MobileFooter = () => {
         />
       ),
     },
+    {
+      id: 'mapLegend',
+      title: 'Legend',
+      icon: (
+        <AssetModules.LegendToggleIcon
+          className={`${
+            mobileFooterSelection === 'mapLegend' ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500'
+          } fmtm-duration-300`}
+        />
+      ),
+    },
+    ,
     {
       id: 'others',
       title: 'Others',
@@ -55,30 +65,33 @@ const MobileFooter = () => {
       ),
     },
   ];
-
   return (
     <div className="fmtm-absolute fmtm-bottom-0 sm:fmtm-hidden fmtm-w-full fmtm-border-t-[1px]">
-      <div className="fmtm-w-full fmtm-grid fmtm-grid-cols-4 fmtm-bg-white  fmtm-pb-4 fmtm-pt-2 fmtm-gap-5 fmtm-px-2">
+      <div
+        className={`fmtm-w-full fmtm-grid fmtm-grid-cols-${
+          footerItem.length - 1
+        } fmtm-bg-white  fmtm-pb-16 fmtm-pt-2 fmtm-gap-5 fmtm-px-2`}
+      >
         {footerItem.map((item) => (
           <div
-            key={item.id}
-            onClick={() => dispatch(ProjectActions.SetMobileFooterSelection(item.id))}
+            key={item?.id}
+            onClick={() => dispatch(ProjectActions.SetMobileFooterSelection(item?.id))}
             className="fmtm-group fmtm-cursor-pointer"
           >
             <div
               className={`fmtm-w-full fmtm-flex fmtm-justify-center fmtm-py-1 fmtm-rounded-3xl fmtm-mb-1 fmtm-duration-300 ${
-                mobileFooterSelection === item.id ? 'fmtm-bg-red-100' : 'group-hover:fmtm-bg-gray-200'
+                mobileFooterSelection === item?.id ? 'fmtm-bg-red-100' : 'group-hover:fmtm-bg-gray-200'
               }`}
             >
-              <div>{item.icon}</div>
+              <div>{item?.icon}</div>
             </div>
             <div className="fmtm-flex fmtm-justify-center">
               <p
                 className={`${
-                  mobileFooterSelection === item.id ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500'
-                } fmtm-duration-300 fmtm-text-sm`}
+                  mobileFooterSelection === item?.id ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500'
+                } fmtm-duration-300 fmtm-text-xs fmtm-whitespace-nowrap`}
               >
-                {item.title}
+                {item?.title}
               </p>
             </div>
           </div>

diff --git a/src/frontend/src/components/ProjectDetails/MobileProjectInfoContent.tsx b/src/frontend/src/components/ProjectDetails/MobileProjectInfoContent.tsx
@@ -2,9 +2,8 @@ import React from 'react';
 import AssetModules from '../../shared/AssetModules';
 
 const MobileProjectInfoContent = ({ projectInfo }) => {
-  console.log('projectInfo', projectInfo);
   return (
-    <div className="fmtm-flex fmtm-flex-col fmtm-gap-3 fmtm-mb-[10vh]">
+    <div className="fmtm-flex fmtm-flex-col fmtm-gap-3 fmtm-mb-[12vh]">
       <div className="fmtm-flex fmtm-gap-3 fmtm-border-b-[1px] fmtm-pb-2">
         <AssetModules.InfoIcon className=" fmtm-text-primaryRed" sx={{ fontSize: '35px' }} />
         <p className="fmtm-text-2xl">Project Information</p>

diff --git a/src/frontend/src/components/ProjectDetails/ProjectOptions.tsx b/src/frontend/src/components/ProjectDetails/ProjectOptions.tsx
@@ -1,10 +1,8 @@
-import Accordion from '../../components/common/Accordion';
 import React, { useState } from 'react';
 import CoreModules from '../../shared/CoreModules';
 import AssetModules from '../../shared/AssetModules';
 import environment from '../../environment';
 import { DownloadDataExtract, DownloadProjectForm } from '../../api/Project';
-import MapLegends from '../../components/MapLegends';
 
 const ProjectOptions = ({ setToggleGenerateModal }) => {
   const dispatch = CoreModules.useAppDispatch();
@@ -13,7 +11,6 @@ const ProjectOptions = ({ setToggleGenerateModal }) => {
   const [toggleAction, setToggleAction] = useState(false);
   const downloadProjectFormLoading = CoreModules.useAppSelector((state) => state.project.downloadProjectFormLoading);
   const downloadDataExtractLoading = CoreModules.useAppSelector((state) => state.project.downloadDataExtractLoading);
-  const defaultTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme);
 
   const encodedId = params.id;
   const decodedId = environment.decode(encodedId);
@@ -35,8 +32,8 @@ const ProjectOptions = ({ setToggleGenerateModal }) => {
     );
   };
   return (
-    <div className="fmtm-mt-4">
-      <div>
+    <div className="sm:fmtm-mt-4">
+      {/* <div>
         <div
           className={`fmtm-flex fmtm-gap-5 fmtm-py-4 sm:fmtm-hidden fmtm-justify-between  fmtm-items-center fmtm-mx-4 sm:fmtm-mx-7 fmtm-mb-2 ${
             toggleAction ? 'fmtm-border-b-[#929DB3] fmtm-border-b-[1px]' : ''
@@ -56,13 +53,20 @@ const ProjectOptions = ({ setToggleGenerateModal }) => {
             />
           </div>
         </div>
-      </div>
-      <div
+      </div> */}
+      {/* <div
         className={`fmtm-flex fmtm-flex-col lg:fmtm-flex-row fmtm-gap-6 lg:fmtm-gap-0 fmtm-px-3 sm:fmtm-px-0 ${
           toggleAction ? '' : 'fmtm-hidden sm:fmtm-flex'
         }`}
+      > */}
+      <div className="fmtm-flex fmtm-gap-3 fmtm-border-b-[1px] fmtm-pb-2 fmtm-mb-4 sm:fmtm-hidden">
+        <AssetModules.ListViewIcon className=" fmtm-text-primaryRed" sx={{ fontSize: '35px' }} />
+        <p className="fmtm-text-2xl">Project Options</p>
+      </div>
+      <div
+        className={`fmtm-flex fmtm-flex-col lg:fmtm-flex-row fmtm-gap-6 lg:fmtm-gap-0 fmtm-px-3 sm:fmtm-px-0 sm:fmtm-flex`}
       >
-        <div className="fmtm-w-full fmtm-flex fmtm-flex-col fmtm-items-start sm:fmtm-flex-row  sm:fmtm-justify-center lg:fmtm-justify-start sm:fmtm-items-center fmtm-gap-6 fmtm-ml-2 sm:fmtm-ml-4">
+        <div className="fmtm-w-full fmtm-flex fmtm-flex-col fmtm-items-start sm:fmtm-flex-row  sm:fmtm-justify-center lg:fmtm-justify-start sm:fmtm-items-center fmtm-gap-6  sm:fmtm-ml-4">
           <CoreModules.LoadingButton
             onClick={() => handleDownload('form')}
             sx={{ width: 'unset' }}
@@ -98,7 +102,7 @@ const ProjectOptions = ({ setToggleGenerateModal }) => {
             Data Extract
           </CoreModules.LoadingButton>
         </div>
-        <div className="fmtm-flex fmtm-flex-col sm:fmtm-flex-row sm:fmtm-justify-center lg:fmtm-justify-end fmtm-w-full fmtm-ml-2 sm:fmtm-ml-4 fmtm-gap-6">
+        <div className="fmtm-flex fmtm-flex-col sm:fmtm-flex-row sm:fmtm-justify-center lg:fmtm-justify-end fmtm-w-full sm:fmtm-ml-4 fmtm-gap-6">
           <CoreModules.Link
             to={`/projectInfo/${encodedId}`}
             style={{
@@ -140,19 +144,6 @@ const ProjectOptions = ({ setToggleGenerateModal }) => {
             </CoreModules.Button>
           </CoreModules.Link>
         </div>
-        <div className="fmtm-px-1 sm:fmtm-hidden">
-          <Accordion
-            collapsed={true}
-            disableHeaderClickToggle
-            onToggle={() => {}}
-            header={<div className="fmtm-text-[#2C3038] fmtm-font-bold fmtm-text-xl">Map Legends</div>}
-            body={
-              <div className="fmtm-mt-4">
-                <MapLegends defaultTheme={defaultTheme} />
-              </div>
-            }
-          />
-        </div>
       </div>
     </div>
   );

diff --git a/src/frontend/src/components/common/BottomSheet.tsx b/src/frontend/src/components/common/BottomSheet.tsx
@@ -63,7 +63,7 @@ const BottomSheet = ({ body, onClose }) => {
     sheetHeight = parseInt(sheetContentRef.current.style.height);
     setCurrSheetHeight(sheetHeight);
 
-    sheetHeight < 25 ? hideBottomSheet() : sheetHeight > 75 ? updateSheetHeight(100) : updateSheetHeight(50);
+    sheetHeight < 25 ? hideBottomSheet() : sheetHeight > 75 ? updateSheetHeight(93) : updateSheetHeight(50);
   };
 
   useEffect(() => {

diff --git a/src/frontend/src/shared/AssetModules.js b/src/frontend/src/shared/AssetModules.js
@@ -46,6 +46,7 @@ import {
   Info as InfoIcon,
   MoreVert as MoreVertIcon,
   LocationOn as LocationOnIcon,
+  LegendToggle as LegendToggleIcon,
 } from '@mui/icons-material';
 import LockPng from '../assets/images/lock.png';
 import RedLockPng from '../assets/images/red-lock.png';
@@ -102,4 +103,5 @@ export default {
   InfoIcon,
   MoreVertIcon,
   LocationOnIcon,
+  LegendToggleIcon,
 };
diff --git a/src/frontend/src/views/ProjectDetails.jsx b/src/frontend/src/views/ProjectDetails.jsx
@@ -423,10 +423,20 @@ const Home = () => {
                 <img src={FmtmLogo} alt="Hot Fmtm Logo" className="fmtm-ml-2 fmtm-z-10 fmtm-w-[5.2rem]" />
               </div>
             )}
+            {mobileFooterSelection === 'mapLegend' && (
+              <BottomSheet
+                body={
+                  <div className="fmtm-mb-[12vh]">
+                    <MapLegends defaultTheme={defaultTheme} />
+                  </div>
+                }
+                onClose={() => dispatch(ProjectActions.SetMobileFooterSelection('explore'))}
+              />
+            )}
             {mobileFooterSelection === 'others' && (
               <BottomSheet
                 body={
-                  <div className="fmtm-mb-[10vh]">
+                  <div className="fmtm-mb-[12vh]">
                     <ProjectOptions setToggleGenerateModal={setToggleGenerateModal} />
                   </div>
                 }