From cd2acf8e81975a9d27d2405402c53beef37fc2ff Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Wed, 21 Oct 2020 18:30:11 -0500
Subject: [PATCH 1/6] remove double scroll on mobile

- remove double scroll on list view or details view on mobile
- fix padding on smaller desktop/tablet sizes
---
 client/src/components/Results/ResultsFilters.js | 4 ++--
 client/src/components/Results/ResultsList.js    | 1 -
 client/src/components/Search.js                 | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Results/ResultsFilters.js b/client/src/components/Results/ResultsFilters.js
index ba921373a..f151faef8 100644
--- a/client/src/components/Results/ResultsFilters.js
+++ b/client/src/components/Results/ResultsFilters.js
@@ -53,13 +53,13 @@ const useStyles = makeStyles((theme) => ({
       backgroundColor: "#C7F573",
       boxShadow: "none",
     },
-    [theme.breakpoints.down("xs")]: {
+    [theme.breakpoints.down("sm")]: {
       marginRight: ".5rem",
     },
   },
   buttonHolder: {
     display: "flex",
-    [theme.breakpoints.down("xs")]: {
+    [theme.breakpoints.down("sm")]: {
       marginTop: "0.5rem",
     },
   },
diff --git a/client/src/components/Results/ResultsList.js b/client/src/components/Results/ResultsList.js
index 16c345ace..5498f5c6d 100644
--- a/client/src/components/Results/ResultsList.js
+++ b/client/src/components/Results/ResultsList.js
@@ -10,7 +10,6 @@ const useStyles = makeStyles((theme, props) => ({
   list: {
     textAlign: "center",
     fontSize: "12px",
-    overflow: "scroll",
     width: "100%",
     display: "flex",
     flexDirection: "column",
diff --git a/client/src/components/Search.js b/client/src/components/Search.js
index be3422b94..50b3b2b7d 100644
--- a/client/src/components/Search.js
+++ b/client/src/components/Search.js
@@ -23,7 +23,7 @@ const useStyles = makeStyles((theme) => ({
   },
   container: {
     width: "100%",
-    [theme.breakpoints.down("xs")]: {
+    [theme.breakpoints.down("sm")]: {
       marginLeft: ".5rem",
     },
     position: "relative",

From 29a69d2bc5a21e2cb6f33a7be2ef5afb16476603 Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Thu, 22 Oct 2020 14:53:23 -0500
Subject: [PATCH 2/6] fix resizing

- remove need to refresh the page for mobile sizes
- remove passing `isWindowWide` as props and some inline styles
---
 .../components/Results/ResultsContainer.js    | 23 ++---------
 .../src/components/Results/ResultsFilters.js  | 27 ++++++-------
 client/src/components/Results/ResultsList.js  | 17 ++++++---
 client/src/components/Results/ResultsMap.js   | 38 ++++++++-----------
 client/src/helpers/index.js                   |  6 +--
 5 files changed, 46 insertions(+), 65 deletions(-)

diff --git a/client/src/components/Results/ResultsContainer.js b/client/src/components/Results/ResultsContainer.js
index 4836b6017..418b0b41b 100644
--- a/client/src/components/Results/ResultsContainer.js
+++ b/client/src/components/Results/ResultsContainer.js
@@ -30,14 +30,12 @@ export default function ResultsContainer(props) {
   const [sortedData, setSortedData] = useState([]);
   const classes = useStyles();
 
-  const windowSize = window.innerWidth > 960 ? true : false;
-  const [isWindowWide, changeWindow] = useState(windowSize);
-
   const [selectedStakeholder, onSelectStakeholder] = useState(null);
   const [isMapView, setIsMapView] = useState(true);
+  const mobileView = isMobile();
 
   const doSelectStakeholder = (stakeholder) => {
-    if (stakeholder && !isMobile) {
+    if (stakeholder && !mobileView) {
       setViewport({
         ...viewport,
         latitude: stakeholder.latitude,
@@ -130,17 +128,6 @@ export default function ResultsContainer(props) {
     setSortedData(data.sort(sortOrganizations));
   }, [data]);
 
-  useEffect(() => {
-    const changeInputContainerWidth = () => {
-      window.innerWidth > 960 ? changeWindow(true) : changeWindow(false);
-    };
-
-    window.addEventListener("resize", changeInputContainerWidth);
-
-    return () =>
-      window.removeEventListener("resize", changeInputContainerWidth);
-  }, []);
-
   useEffect(() => {
     return () => {
       sessionStorage.clear();
@@ -160,7 +147,6 @@ export default function ResultsContainer(props) {
         selectVerified={selectVerified}
         userCoordinates={userCoordinates}
         search={search}
-        isWindowWide={isWindowWide}
         viewport={viewport}
         setViewport={setViewport}
         doSelectStakeholder={doSelectStakeholder}
@@ -169,7 +155,7 @@ export default function ResultsContainer(props) {
         switchResultsView={switchResultsView}
       />
       <Grid item container spacing={0} className={classes.listMapContainer}>
-        {(!isMobile || (isMobile && !isMapView)) && (
+        {(!mobileView || (mobileView && !isMapView)) && (
           <List
             selectedStakeholder={selectedStakeholder}
             doSelectStakeholder={doSelectStakeholder}
@@ -177,7 +163,7 @@ export default function ResultsContainer(props) {
             setToast={setToast}
           />
         )}
-        {(!isMobile || (isMobile && isMapView)) && (
+        {(!mobileView || (mobileView && isMapView)) && (
           <Map
             selectedLatitude={initialCoords.latitude}
             selectedLongitude={initialCoords.longitude}
@@ -187,7 +173,6 @@ export default function ResultsContainer(props) {
             doSelectStakeholder={doSelectStakeholder}
             selectedStakeholder={selectedStakeholder}
             categoryIds={categoryIds}
-            isWindowWide={isWindowWide}
             setToast={setToast}
           />
         )}
diff --git a/client/src/components/Results/ResultsFilters.js b/client/src/components/Results/ResultsFilters.js
index f151faef8..26ec11913 100644
--- a/client/src/components/Results/ResultsFilters.js
+++ b/client/src/components/Results/ResultsFilters.js
@@ -27,10 +27,17 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: theme.palette.primary.main,
     padding: "1rem 0",
     flex: "1 0 auto",
+    [theme.breakpoints.up("md")]: {
+      justifyContent: "center",
+    },
   },
   inputContainer: {
     display: "flex",
     alignItems: "center",
+    width: "100%",
+    [theme.breakpoints.up("md")]: {
+      width: "30rem",
+    },
   },
   searchIcon: {
     width: 32,
@@ -69,7 +76,6 @@ const distanceInfo = [0, 1, 2, 3, 5, 10, 20, 50, 100, 500];
 
 const ResultsFilters = ({
   search,
-  isWindowWide,
   viewport,
   setViewport,
   doSelectStakeholder,
@@ -161,16 +167,10 @@ const ResultsFilters = ({
     });
   };
 
+  const mobileView = isMobile();
+
   return (
-    <Grid
-      item
-      container
-      wrap="wrap-reverse"
-      className={classes.controlPanel}
-      style={{
-        justifyContent: isWindowWide ? null : "center",
-      }}
-    >
+    <Grid item container wrap="wrap-reverse" className={classes.controlPanel}>
       <Grid
         item
         container
@@ -266,7 +266,7 @@ const ResultsFilters = ({
           </Button>
         </Grid>
         <Grid item>
-          {isMobile && (
+          {mobileView && (
             <SwitchViewsButton
               isMapView={isMapView}
               onClick={switchResultsView}
@@ -275,10 +275,7 @@ const ResultsFilters = ({
           )}
         </Grid>
       </Grid>
-      <Box
-        className={classes.inputContainer}
-        style={{ width: isWindowWide ? "30rem" : "100%" }}
-      >
+      <Box className={classes.inputContainer}>
         <form
           noValidate
           onSubmit={(e) => doHandleSearch(e)}
diff --git a/client/src/components/Results/ResultsList.js b/client/src/components/Results/ResultsList.js
index 5498f5c6d..54938e17a 100644
--- a/client/src/components/Results/ResultsList.js
+++ b/client/src/components/Results/ResultsList.js
@@ -6,7 +6,7 @@ import { makeStyles } from "@material-ui/core/styles";
 import StakeholderPreview from "components/Stakeholder/StakeholderPreview";
 import { isMobile } from "helpers";
 
-const useStyles = makeStyles((theme, props) => ({
+const useStyles = makeStyles((theme) => ({
   list: {
     textAlign: "center",
     fontSize: "12px",
@@ -18,9 +18,12 @@ const useStyles = makeStyles((theme, props) => ({
     [theme.breakpoints.up("md")]: {
       height: "100%",
     },
-    [theme.breakpoints.down("sm")]: {
+    [theme.breakpoints.only("sm")]: {
       order: 1,
-      height: (props) => (props.isMobile ? "100%" : "30em"),
+      height: "30em",
+    },
+    [theme.breakpoints.down("xs")]: {
+      height: "100%",
     },
   },
   preview: {
@@ -35,7 +38,7 @@ const ResultsList = ({
   stakeholders,
   setToast,
 }) => {
-  const classes = useStyles({ isMobile });
+  const classes = useStyles();
   const listRef = useRef();
   const itemsRef = useRef([]);
 
@@ -45,15 +48,17 @@ const ResultsList = ({
     itemsRef.current = itemsRef.current.slice(0, stakeholders.length);
   }, [stakeholders]);
 
+  const mobileView = isMobile();
+
   const selectStakeholder = (stakeholder) => {
     doSelectStakeholder(stakeholder);
-    if (stakeholder && isMobile) {
+    if (stakeholder && mobileView) {
       const index = stakeholders.findIndex((s) => s.id === stakeholder.id);
       const currentRef = itemsRef.current[index];
       setPosition(currentRef.offsetTop);
       listRef.current.scrollTo(0, 0);
     }
-    if (!stakeholder && isMobile) {
+    if (!stakeholder && mobileView) {
       window.scrollTo(0, 0);
       listRef.current.scrollTo(0, position);
     }
diff --git a/client/src/components/Results/ResultsMap.js b/client/src/components/Results/ResultsMap.js
index d15e3f15e..74b2c15b9 100644
--- a/client/src/components/Results/ResultsMap.js
+++ b/client/src/components/Results/ResultsMap.js
@@ -22,12 +22,20 @@ const styles = {
   },
 };
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles((theme, props) => ({
   map: {
     textAlign: "center",
     fontSize: "12px",
-    [theme.breakpoints.down("sm")]: {
+    [theme.breakpoints.up("md")]: {
+      height: "100%",
+    },
+    [theme.breakpoints.down("xs")]: {
+      height: (props) =>
+        props.selectedStakeholder ? "calc(100% - 120px)" : "100%",
+    },
+    [theme.breakpoints.only("sm")]: {
       order: 0,
+      height: "50%",
     },
   },
   preview: {
@@ -40,12 +48,11 @@ function Map({
   categoryIds,
   doSelectStakeholder,
   selectedStakeholder,
-  isWindowWide,
   viewport,
   setViewport,
   setToast,
 }) {
-  const classes = useStyles();
+  const classes = useStyles({ selectedStakeholder });
   const categoryIdsOrDefault = categoryIds.length
     ? categoryIds
     : DEFAULT_CATEGORIES;
@@ -57,7 +64,9 @@ function Map({
     doSelectStakeholder(null);
   };
 
-  if (showDetails && isMobile && selectedStakeholder) {
+  const mobileView = isMobile();
+
+  if (showDetails && mobileView && selectedStakeholder) {
     return (
       <StakeholderDetails
         doSelectStakeholder={unselectStakeholder}
@@ -69,24 +78,9 @@ function Map({
 
   return (
     <>
-      <Grid
-        item
-        xs={12}
-        md={8}
-        className={classes.map}
-        style={{
-          height:
-            isWindowWide || isMobile
-              ? isMobile && !!selectedStakeholder
-                ? `calc(100% - 120px)`
-                : "100%"
-              : "50%",
-        }}
-      >
+      <Grid item xs={12} md={8} className={classes.map}>
         <ReactMapGL
           {...viewport}
-          /* dragPan={isWindowWide && isMobile ? false : true} */
-          // touchAction="pan-y pinch-zoom"
           width="100%"
           height="100%"
           onViewportChange={(newViewport) => setViewport(newViewport)}
@@ -124,7 +118,7 @@ function Map({
               })}
         </ReactMapGL>
       </Grid>
-      {!!selectedStakeholder && isMobile && (
+      {!!selectedStakeholder && mobileView && (
         <Grid
           item
           xs={12}
diff --git a/client/src/helpers/index.js b/client/src/helpers/index.js
index 17e665da7..c89cf3e4e 100644
--- a/client/src/helpers/index.js
+++ b/client/src/helpers/index.js
@@ -1,3 +1,5 @@
+import theme from "theme/materialUI";
+
 export const getGoogleMapsUrl = (zip, address1, address2) => {
   const baseUrl = `https://google.com/maps/place/`;
 
@@ -17,9 +19,7 @@ export const getGoogleMapsUrl = (zip, address1, address2) => {
   return `${baseUrl}${address1url},+${zip}`;
 };
 
-export const isMobile = new RegExp("Mobi", "i").test(navigator.userAgent)
-  ? true
-  : false;
+export const isMobile = () => window.innerWidth < theme.breakpoints.values.sm;
 
 export const extractNumbers = (numbers) =>
   numbers.split(/(and)|,|&+/).map((n) => {

From 484d651bb542e2321212020da77f480b736b4477 Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Thu, 22 Oct 2020 14:57:31 -0500
Subject: [PATCH 3/6] remove iOS details render

- explicitly set flexShrink to remove overlap error in stakeholder details
---
 client/src/components/Stakeholder/StakeholderDetails.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/Stakeholder/StakeholderDetails.js b/client/src/components/Stakeholder/StakeholderDetails.js
index db8e4f7a7..d4a36f3a2 100644
--- a/client/src/components/Stakeholder/StakeholderDetails.js
+++ b/client/src/components/Stakeholder/StakeholderDetails.js
@@ -25,6 +25,7 @@ const useStyles = makeStyles((theme, props) => ({
     padding: "1em",
     alignItems: "center",
     paddingBottom: "5em",
+    flexShrink: 0,
   },
   topInfo: {
     width: "100%",

From e1b0934f513fec5afabdc6498324a3e0806acc6f Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Thu, 22 Oct 2020 15:01:02 -0500
Subject: [PATCH 4/6] preserve scrolling on tablet/desktop

- readd scroll for lists on all non mobile screens
---
 client/src/components/Results/ResultsList.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/src/components/Results/ResultsList.js b/client/src/components/Results/ResultsList.js
index 54938e17a..9f665b52e 100644
--- a/client/src/components/Results/ResultsList.js
+++ b/client/src/components/Results/ResultsList.js
@@ -18,6 +18,9 @@ const useStyles = makeStyles((theme) => ({
     [theme.breakpoints.up("md")]: {
       height: "100%",
     },
+    [theme.breakpoints.up("sm")]: {
+      overflowY: "scroll",
+    },
     [theme.breakpoints.only("sm")]: {
       order: 1,
       height: "30em",

From ce6726724055c939f2e793478ca48fca6b8454a2 Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Thu, 22 Oct 2020 15:03:11 -0500
Subject: [PATCH 5/6] disabled details

disabled details button for inactive locations
---
 client/src/components/Stakeholder/StakeholderPreview.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Stakeholder/StakeholderPreview.js b/client/src/components/Stakeholder/StakeholderPreview.js
index 4f83763d2..aa3a6a71f 100644
--- a/client/src/components/Stakeholder/StakeholderPreview.js
+++ b/client/src/components/Stakeholder/StakeholderPreview.js
@@ -232,7 +232,11 @@ const StakeholderPreview = ({ stakeholder, doSelectStakeholder }) => {
               Call
             </Button>
           )}
-          <Button variant="outlined" size="small">
+          <Button
+            variant="outlined"
+            size="small"
+            disabled={stakeholder.inactive}
+          >
             Details
           </Button>
         </div>

From 1dddc754479e8899ec72dee06981ecf9267505aa Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Fri, 23 Oct 2020 11:53:37 -0500
Subject: [PATCH 6/6] sticky search bar

- make search and filters sticky
- reduce font size only on mobile views
- fix details styling
---
 .../src/components/Results/ResultsFilters.js  |  3 +++
 client/src/components/Results/ResultsList.js  |  2 +-
 client/src/components/Results/ResultsMap.js   | 20 ++++++++++++++-----
 .../Stakeholder/StakeholderDetails.js         |  5 ++++-
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Results/ResultsFilters.js b/client/src/components/Results/ResultsFilters.js
index 26ec11913..887d18b73 100644
--- a/client/src/components/Results/ResultsFilters.js
+++ b/client/src/components/Results/ResultsFilters.js
@@ -27,6 +27,9 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: theme.palette.primary.main,
     padding: "1rem 0",
     flex: "1 0 auto",
+    position: "sticky",
+    top: "48px",
+    zIndex: 1,
     [theme.breakpoints.up("md")]: {
       justifyContent: "center",
     },
diff --git a/client/src/components/Results/ResultsList.js b/client/src/components/Results/ResultsList.js
index 9f665b52e..715a68d0e 100644
--- a/client/src/components/Results/ResultsList.js
+++ b/client/src/components/Results/ResultsList.js
@@ -9,7 +9,6 @@ import { isMobile } from "helpers";
 const useStyles = makeStyles((theme) => ({
   list: {
     textAlign: "center",
-    fontSize: "12px",
     width: "100%",
     display: "flex",
     flexDirection: "column",
@@ -27,6 +26,7 @@ const useStyles = makeStyles((theme) => ({
     },
     [theme.breakpoints.down("xs")]: {
       height: "100%",
+      fontSize: "12px",
     },
   },
   preview: {
diff --git a/client/src/components/Results/ResultsMap.js b/client/src/components/Results/ResultsMap.js
index 74b2c15b9..f33724614 100644
--- a/client/src/components/Results/ResultsMap.js
+++ b/client/src/components/Results/ResultsMap.js
@@ -41,6 +41,14 @@ const useStyles = makeStyles((theme, props) => ({
   preview: {
     margin: "0 1em",
   },
+  details: {
+    textAlign: "center",
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "0 1em",
+  },
 }));
 
 function Map({
@@ -68,11 +76,13 @@ function Map({
 
   if (showDetails && mobileView && selectedStakeholder) {
     return (
-      <StakeholderDetails
-        doSelectStakeholder={unselectStakeholder}
-        selectedStakeholder={selectedStakeholder}
-        setToast={setToast}
-      />
+      <Grid item xs={12} md={4} className={classes.details}>
+        <StakeholderDetails
+          doSelectStakeholder={unselectStakeholder}
+          selectedStakeholder={selectedStakeholder}
+          setToast={setToast}
+        />
+      </Grid>
     );
   }
 
diff --git a/client/src/components/Stakeholder/StakeholderDetails.js b/client/src/components/Stakeholder/StakeholderDetails.js
index d4a36f3a2..428edf6be 100644
--- a/client/src/components/Stakeholder/StakeholderDetails.js
+++ b/client/src/components/Stakeholder/StakeholderDetails.js
@@ -21,11 +21,14 @@ const useStyles = makeStyles((theme, props) => ({
     width: "100%",
     display: "flex",
     flexDirection: "column",
-    justifyContent: "space-between",
+    textAlign: "center",
     padding: "1em",
     alignItems: "center",
     paddingBottom: "5em",
     flexShrink: 0,
+    [theme.breakpoints.down("xs")]: {
+      fontSize: "12px",
+    },
   },
   topInfo: {
     width: "100%",