Merge pull request #2372 from Plant-for-the-Planet-org/develop

Release hotfix intervention filter
Plant-for-the-Planet-org · Jan 17, 2025 · 3973092 · 3973092
2 parents dd4a11f + 420384a
commit 3973092
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 32 deletions.
diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.module.scss b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.module.scss
@@ -15,9 +15,17 @@ $layoutPaddingSide: 20px;
   gap: 18px;
   position: absolute;
   z-index: 2;
-  top: calc($layoutPaddingTop + 70px);
   right: calc($layoutPaddingSide + 10px);
 }
+
+.dropdownButtonAlignmentAbove {
+  top: calc($layoutPaddingTop + 75px);
+}
+
+.dropdownButtonAlignmentBelow {
+  top: calc($layoutPaddingTop + 10px);
+}
+
 .interventionIconAndTextContainer {
   display: flex;
   gap: 6px;
@@ -62,8 +70,7 @@ $layoutPaddingSide: 20px;
   font-size: $fontXSmall;
   position: absolute;
   z-index: 4;
-  top: 140px;
-  right: 30px;
+    right: 30px;
   max-height: 42vh;
   overflow-y: auto;
   scrollbar-width: none; /* Firefox */
@@ -75,6 +82,15 @@ $layoutPaddingSide: 20px;
     width: 100%;
   }
 }
+
+.interventionListOptionsAbove {
+  top: calc($layoutPaddingTop + 60px);
+}
+
+.interventionListOptionsBelow {
+  top: calc($layoutPaddingTop + 124px);
+}
+
 .listItem {
   display: flex;
   justify-content: space-between;

diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx
@@ -14,12 +14,14 @@ interface InterventionListProps {
   setSelectedInterventionType: SetState<INTERVENTION_TYPE>;
   setIsMenuOpen: SetState<boolean>;
   selectedInterventionData: InterventionData | undefined;
+  hasProjectSites?: boolean
 }
 const InterventionList = ({
   interventionList,
   setSelectedInterventionType,
   setIsMenuOpen,
   selectedInterventionData,
+  hasProjectSites
 }: InterventionListProps) => {
   const tProjectDetails = useTranslations("ProjectDetails.intervention");
   const handleFilterSelection = (key: INTERVENTION_TYPE) => {
@@ -28,19 +30,19 @@ const InterventionList = ({
   };
 
   return (
-    <ul className={styles.interventionListOptions}>
+    <ul className={`${styles.interventionListOptions} ${!hasProjectSites ? styles.interventionListOptionsAbove : styles.interventionListOptionsBelow}`}>
       {interventionList.map((intervention, index) => {
         return (
           <li
             className={`${styles.listItem} ${intervention.value === selectedInterventionData?.value
-                ? styles.selectedItem
-                : ''
+              ? styles.selectedItem
+              : ''
               }`}
             onClick={() => handleFilterSelection(intervention.value)}
             key={index}
           >
             <p>
-             {tProjectDetails(intervention.value)}
+              {tProjectDetails(intervention.value)}
             </p>
           </li>
         );

diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx
@@ -23,6 +23,7 @@ interface Props {
   isMobile?: boolean;
   enableInterventionFilter: () => void;
   disableInterventionMenu: boolean;
+  hasProjectSites?: boolean
 }
 
 const InterventionDropdown = ({
@@ -32,9 +33,10 @@ const InterventionDropdown = ({
   enableInterventionFilter,
   disableInterventionMenu,
   isMobile,
+  hasProjectSites
 }: Props) => {
   const tIntervention = useTranslations('ProjectDetails.intervention');
-  
+
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const interventionList = useMemo(() => {
     if (!allInterventions) return [];
@@ -59,7 +61,7 @@ const InterventionDropdown = ({
   };
   return (
     <>
-      <div className={styles.dropdownButton} onClick={toggleMenu}>
+      <div className={`${styles.dropdownButton} ${hasProjectSites ? styles.dropdownButtonAlignmentAbove : styles.dropdownButtonAlignmentBelow}`} onClick={toggleMenu}>
         <div className={styles.interventionIconAndTextContainer}>
           <InterventionIcon />
           <>
@@ -75,7 +77,7 @@ const InterventionDropdown = ({
                     style={{ marginTop: '5px' }}
                   >
                     {truncateString(tIntervention(interventionData?.value), 40)}
-                    </p>
+                  </p>
                 )}
               </div>
             )}
@@ -95,6 +97,7 @@ const InterventionDropdown = ({
           setSelectedInterventionType={setSelectedInterventionType}
           setIsMenuOpen={setIsMenuOpen}
           selectedInterventionData={interventionData}
+          hasProjectSites={hasProjectSites}
         />
       )}
     </>

diff --git a/src/features/projectsV2/ProjectsMap/MapControls.tsx b/src/features/projectsV2/ProjectsMap/MapControls.tsx
@@ -113,13 +113,12 @@ const MapControls = ({
     setSelectedMode && setSelectedMode('list');
   };
 
-  const layerToggleClass = `${styles.layerToggle} ${
-    isMobile
-      ? mobileOS === 'android'
-        ? styles.layerToggleAndroid
-        : styles.layerToggleIos
-      : styles.layerToggleDesktop
-  }`;
+  const layerToggleClass = `${styles.layerToggle} ${isMobile
+    ? mobileOS === 'android'
+      ? styles.layerToggleAndroid
+      : styles.layerToggleIos
+    : styles.layerToggleDesktop
+    }`;
 
   return (
     <>
@@ -132,15 +131,14 @@ const MapControls = ({
         <>
           {isMobile ? (
             <div className={styles.projectDetailsControlsContainer}>
-              {hasProjectSites && (
-                <>
-                  <ProjectSiteDropdown {...siteDropdownProps} />
-                  <InterventionDropDown
-                    {...interventionDropDownProps}
-                    isMobile={isMobile}
-                  />
-                </>
-              )}
+              {hasProjectSites &&
+                <ProjectSiteDropdown {...siteDropdownProps} />
+              }
+              <InterventionDropDown
+                {...interventionDropDownProps}
+                isMobile={isMobile}
+                hasProjectSites={hasProjectSites}
+              />
               <button
                 className={styles.exitMapModeButton}
                 onClick={exitMapMode}
@@ -150,12 +148,9 @@ const MapControls = ({
             </div>
           ) : (
             <>
-              {hasProjectSites && (
-                <>
-                  <ProjectSiteDropdown {...siteDropdownProps} />
-                  <InterventionDropDown {...interventionDropDownProps} />
-                </>
-              )}
+              {hasProjectSites && <ProjectSiteDropdown {...siteDropdownProps} />}
+              <InterventionDropDown {...interventionDropDownProps} hasProjectSites={hasProjectSites}
+              />
             </>
           )}
           {canShowSatelliteToggle && (