Fix stakeholder preview getting cut off (#2113)

hackforla · May 21, 2024 · f639ee0 · f639ee0
1 parent 618c47d
commit f639ee0
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 5 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%",
-        overflowX: "hidden",
+        overflow: "hidden",
       }}
     >
       <Header />

diff --git a/client/src/appReducer.js b/client/src/appReducer.js
@@ -127,6 +127,15 @@ function isListPanelVisibleReducer(state, action) {
   }
 }
 
+function position(state, action) {
+  switch (action.type) {
+    case "POSITION":
+      return action.position; // Toggle the state
+    default:
+      return state;
+  }
+}
+
 
 export function appReducer(state, action) {
   return {
@@ -158,6 +167,7 @@ export function appReducer(state, action) {
       ),
     listPanel: listPanelReducer(state.listPanel, action),
     isListPanelVisible: isListPanelVisibleReducer(state.isListPanelVisible, action),
+    position: position(state.position, action)
   };
 }
 
@@ -174,7 +184,8 @@ export function getInitialState() {
     openTimeFilter: { radio: "Show All", day: "", time: "" },
     noKnownEligibilityRequirementsFilter: false,
     listPanel: true,
-    isListPanelVisible: false
+    isListPanelVisible: false,
+    position: '0'
   };
 }
 
@@ -268,3 +279,8 @@ export function useIsListPanelVisible() {
   return isListPanelVisible;
 }
 
+export function usePosition() {
+  const { position } = useAppState();
+  return position;
+}
+
diff --git a/client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.js b/client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.js
@@ -169,7 +169,7 @@ const ResultsMap = (
   const filterPanelLeftPostion = isFilterPanelOpen ? 340 : 0;
 
   return (
-    <div style={{ position: "relative", height: "100%" }}>
+    <div style={{ position: "relative", height: "100%", width: "100%" }}>
       <Map
         ref={mapRef}
         {...viewport}

diff --git a/client/src/components/FoodSeeker/SearchResults/StakeholderDetails/StakeholderDetails.js b/client/src/components/FoodSeeker/SearchResults/StakeholderDetails/StakeholderDetails.js
@@ -42,6 +42,7 @@ import {
   useSelectedOrganization,
   useUserCoordinates,
   useWidget,
+  usePosition
 } from "../../../../appReducer";
 import { useToasterContext } from "../../../../contexts/toasterContext";
 import SEO from "../../../SEO";
@@ -88,6 +89,34 @@ const StakeholderDetails = ({ onBackClick, isDesktop }) => {
   const navigate = useNavigate();
   const { setToast } = useToasterContext();
   const { tenantTimeZone } = useSiteContext();
+  const position = usePosition();
+  const [paddingBottom, setPaddingBottom] = useState(30)
+
+  useEffect(()=> {
+    const windowHeight = window.innerHeight / 100;
+    if(position.y === (100 / window.innerHeight * 60) * windowHeight || position.y === 5 * windowHeight){
+      setPaddingBottom(300)
+    }
+    else if(position.y === 25 * windowHeight){
+      setPaddingBottom(window.innerHeight / 1.3)
+    }
+
+  },[position])
+
+  // USE EFFECT BASED ON THIS FUNCTION IN Mobile.js
+  // const handleStop = (e, ui) => {
+  //   const windowHeight = window.innerHeight / 100;
+  //   let newY;
+  //   if (ui.y < 20 * windowHeight) {
+  //     newY = hasAdvancedFilterFeatureFlag ? (100 / window.innerHeight) * 60 : 5;
+  //   } else if (ui.y > 20 * windowHeight && ui.y < 40 * windowHeight) {
+  //     newY = 25;
+  //   } else if (ui.y > 40 * windowHeight) {
+  //     newY = 57;
+  //   }
+  //   setPosition({ x: 0, y: newY * windowHeight });
+  // };
+
 
   useEffect(() => {
     if (selectedOrganization?.id) {
@@ -330,7 +359,8 @@ const StakeholderDetails = ({ onBackClick, isDesktop }) => {
           sx={{
             minHeight: "6rem",
             overflowY: "scroll",
-            padding: isDesktop ? "38px 35px 0 65px" : "0 23px 0",
+            padding: isDesktop ? "38px 35px 0 65px" : "38px 23px 0",
+            paddingBottom: isDesktop ? "0" : `${paddingBottom}px`,
           }}
         >
           <Grid2 xs={2}>

diff --git a/client/src/components/FoodSeeker/SearchResults/layouts/Mobile.js b/client/src/components/FoodSeeker/SearchResults/layouts/Mobile.js
@@ -5,6 +5,7 @@ import { useFilterPanel } from "appReducer";
 import AttributionInfo from "../AttributionInfo";
 import { 
   useIsListPanelVisible,
+  useAppDispatch
 } from '../../../../appReducer'
 import useFeatureFlag from "hooks/useFeatureFlag";
 
@@ -21,6 +22,7 @@ const MobileLayout = ({ filters, map, list, showList }) => {
   const filterPanelOpen = useFilterPanel();
   const initialY = showList ? 5 : 57;
   const hasAdvancedFilterFeatureFlag = useFeatureFlag("advancedFilter");
+  const dispatch = useAppDispatch();
 
   const [position, setPosition] = useState({
     x: 0,
@@ -38,6 +40,12 @@ const MobileLayout = ({ filters, map, list, showList }) => {
     })
   }, [isListPanelVisible])
 
+
+  useEffect(() => {
+    dispatch({ type: "POSITION", position: position });
+  }, [position])
+
+
   useEffect(() => {
     let newY;
     if (filterPanelOpen) {
@@ -73,7 +81,6 @@ const MobileLayout = ({ filters, map, list, showList }) => {
           height: window.innerHeight,
           display: "flex",
           flexDirection: "column",
-          overflow: "hidden",
           position: "relative",
         }}
       >