Merge pull request #805 from NSUWAL123/fix-explore-projects

Fix explore projects
hotosm · Sep 6, 2023 · 6e9707f · 6e9707f
2 parents 0de1922 + 88975f3
commit 6e9707f
Showing 1 changed file with 18 additions and 14 deletions.
diff --git a/src/frontend/main/src/views/Home.jsx b/src/frontend/main/src/views/Home.jsx
@@ -57,10 +57,10 @@ const Home = () => {
           totalProjectCount={stateHome.homeProjectSummary.length}
         />
         {stateHome.homeProjectLoading == false ? (
-          filteredProjectCards.length > 0 ? (
-            <div>
-              <div className="fmtm-flex fmtm-flex-col lg:fmtm-flex-row fmtm-gap-5">
-                <div className={`fmtm-w-full ${showMapStatus ? 'lg:fmtm-w-[50%]' : ''} `}>
+          <div className="fmtm-flex fmtm-flex-col lg:fmtm-flex-row fmtm-gap-5">
+            <div className={`fmtm-w-full ${showMapStatus ? 'lg:fmtm-w-[50%]' : ''} `}>
+              {filteredProjectCards.length > 0 ? (
+                <div>
                   <div
                     className={`fmtm-px-[1rem] fmtm-grid fmtm-gap-5 ${
                       !showMapStatus
@@ -73,17 +73,21 @@ const Home = () => {
                     ))}
                   </div>
                 </div>
-                {/* fmtm-w-[41.8rem] */}
-                {showMapStatus && (
-                  <div className="lg:fmtm-order-last lg:fmtm-w-[50%] fmtm-h-[33rem] fmtm-bg-gray-300 fmtm-mx-4 fmtm-mb-2"></div>
-                )}
-              </div>
+              ) : (
+                <CoreModules.Typography
+                  variant="h2"
+                  color="error"
+                  sx={{ p: 2, textAlign: 'center' }}
+                  className="fmtm-h-full fmtm-flex fmtm-justify-center fmtm-items-center"
+                >
+                  No projects found.
+                </CoreModules.Typography>
+              )}
             </div>
-          ) : (
-            <CoreModules.Typography variant="h2" color="error" sx={{ p: 2, textAlign: 'center' }}>
-              No projects found.
-            </CoreModules.Typography>
-          )
+            {showMapStatus && (
+              <div className="lg:fmtm-w-[50%] fmtm-h-[33rem] fmtm-bg-gray-300 fmtm-mx-4 fmtm-mb-2"></div>
+            )}
+          </div>
         ) : (
           <CoreModules.Stack
             sx={{