Removed double scrolling (#2143)

* fixed bug in scrolling other pages * fixed bug for good * removed extra scrolling * disabled scroll in mobile food seeker page * changing draggable positions * adjusting dynamic padding * tweaked some paddings
hackforla · May 21, 2024 · 696c856 · 696c856
1 parent f639ee0
commit 696c856
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git a/client/src/Routes.js b/client/src/Routes.js
@@ -208,7 +208,7 @@ function AppWrapper() {
         backgroundColor: "#fff",
         margin: "0",
         height: "100%",
-        overflow: "hidden",
+        overflowX: "hidden",
       }}
     >
       <Header />

diff --git a/client/src/components/FoodSeeker/SearchResults/StakeholderDetails/StakeholderDetails.js b/client/src/components/FoodSeeker/SearchResults/StakeholderDetails/StakeholderDetails.js
@@ -94,11 +94,11 @@ const StakeholderDetails = ({ onBackClick, isDesktop }) => {
 
   useEffect(()=> {
     const windowHeight = window.innerHeight / 100;
-    if(position.y === (100 / window.innerHeight * 60) * windowHeight || position.y === 5 * windowHeight){
-      setPaddingBottom(300)
+    if(position.y === (100 / window.innerHeight * 54) * windowHeight || position.y === 0 * windowHeight){
+      setPaddingBottom(200)
     }
-    else if(position.y === 25 * windowHeight){
-      setPaddingBottom(window.innerHeight / 1.3)
+    else if(position.y === 17 * windowHeight){
+      setPaddingBottom(300)
     }
 
   },[position])
@@ -108,11 +108,11 @@ const StakeholderDetails = ({ onBackClick, isDesktop }) => {
   //   const windowHeight = window.innerHeight / 100;
   //   let newY;
   //   if (ui.y < 20 * windowHeight) {
-  //     newY = hasAdvancedFilterFeatureFlag ? (100 / window.innerHeight) * 60 : 5;
+  //     newY = hasAdvancedFilterFeatureFlag ? (100 / window.innerHeight) * 60 : 0;
   //   } else if (ui.y > 20 * windowHeight && ui.y < 40 * windowHeight) {
-  //     newY = 25;
+  //     newY = 17;
   //   } else if (ui.y > 40 * windowHeight) {
-  //     newY = 57;
+  //     newY = 54;
   //   }
   //   setPosition({ x: 0, y: newY * windowHeight });
   // };
@@ -297,7 +297,7 @@ const StakeholderDetails = ({ onBackClick, isDesktop }) => {
           alignItems="flex-end"
           sx={{
             width: 1,
-            padding: isDesktop ? "1.5rem 35px 0 65px" : "1.5rem",
+            padding: isDesktop ? "1.5rem 35px 0 65px" : "1rem 1.5rem",
           }}
         >
           <Typography
@@ -359,7 +359,7 @@ const StakeholderDetails = ({ onBackClick, isDesktop }) => {
           sx={{
             minHeight: "6rem",
             overflowY: "scroll",
-            padding: isDesktop ? "38px 35px 0 65px" : "38px 23px 0",
+            padding: isDesktop ? "38px 35px 0 65px" : "3px 23px 0",
             paddingBottom: isDesktop ? "0" : `${paddingBottom}px`,
           }}
         >

diff --git a/client/src/components/FoodSeeker/SearchResults/layouts/Mobile.js b/client/src/components/FoodSeeker/SearchResults/layouts/Mobile.js
@@ -31,6 +31,14 @@ const MobileLayout = ({ filters, map, list, showList }) => {
 
   const isListPanelVisible = useIsListPanelVisible()
 
+  // disable body scroll
+  useEffect(() => {
+    window.scrollTo({
+      top: 0
+    });
+    document.body.style.overflow = "hidden"
+  }, [])
+
 
   // List goes up when clicking the map
   useEffect(() => {
@@ -51,9 +59,9 @@ const MobileLayout = ({ filters, map, list, showList }) => {
     if (filterPanelOpen) {
       newY = 100;
     } else if (hasAdvancedFilterFeatureFlag) {
-      newY = showList ? ((100 / window.innerHeight) * 60) : 57;
+      newY = showList ? ((100 / window.innerHeight) * 60) : 54;
     } else {
-      newY = showList ? 5 : 57;
+      newY = showList ? 0 : 54;
     }
     setPosition({ x: 0, y: newY * (window.innerHeight / 100) });
   }, [showList, filterPanelOpen, hasAdvancedFilterFeatureFlag]);
@@ -62,11 +70,11 @@ const MobileLayout = ({ filters, map, list, showList }) => {
     const windowHeight = window.innerHeight / 100;
     let newY;
     if (ui.y < 20 * windowHeight) {
-      newY = hasAdvancedFilterFeatureFlag ? (100 / window.innerHeight) * 60 : 5;
+      newY = hasAdvancedFilterFeatureFlag ? (100 / window.innerHeight) * 60 : 0;
     } else if (ui.y > 20 * windowHeight && ui.y < 40 * windowHeight) {
-      newY = 25;
+      newY = 17;
     } else if (ui.y > 40 * windowHeight) {
-      newY = 57;
+      newY = 54;
     }
     setPosition({ x: 0, y: newY * windowHeight });
   };
@@ -82,6 +90,7 @@ const MobileLayout = ({ filters, map, list, showList }) => {
           display: "flex",
           flexDirection: "column",
           position: "relative",
+          overflow: 'hidden'
         }}
       >
         <Box sx={{ flex: 1 }}>{map}</Box>
@@ -198,7 +207,7 @@ const MobileLayout = ({ filters, map, list, showList }) => {
               <Box
                 sx={{
                   backgroundColor: "white",
-                  height: "100vh",
+                  height: "100%",
                   width: "100vw",
                 }}
               >