Merge pull request #754 from hackforla/style-pass

Stakeholder details and list style improvements
hackforla · Oct 30, 2020 · b9eb880 · b9eb880
2 parents 8013a95 + c693d26
commit b9eb880
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 77 deletions.
diff --git a/client/src/components/Results/ResultsContainer.js b/client/src/components/Results/ResultsContainer.js
@@ -34,14 +34,12 @@ export default function ResultsContainer({
   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 = useCallback((stakeholder) => {
-    if (stakeholder && !isMobile) {
+    if (stakeholder && !mobileView) {
       setViewport({
         ...viewport,
         latitude: stakeholder.latitude,
@@ -137,17 +135,6 @@ export default function ResultsContainer({
     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();
@@ -224,23 +211,22 @@ export default function ResultsContainer({
         selectVerified={selectVerified}
         userCoordinates={userCoordinates}
         handleSearch={handleSearch}
-        isWindowWide={isWindowWide}
         viewport={viewport}
         setViewport={setViewport}
         viewPortHash={viewPortHash}
         isMapView={isMapView}
         switchResultsView={switchResultsView}
       />
       <Grid item container spacing={0} className={classes.listMapContainer}>
-        {(!isMobile || (isMobile && !isMapView)) && (
+        {(!mobileView || (mobileView && !isMapView)) && (
           <List
             selectedStakeholder={selectedStakeholder}
             doSelectStakeholder={doSelectStakeholder}
             stakeholders={sortedData}
             setToast={setToast}
           />
         )}
-        {(!isMobile || (isMobile && isMapView)) && (
+        {(!mobileView || (mobileView && isMapView)) && (
           <Map
             handleSearch={handleSearch}
             selectedLatitude={initialCoords.latitude}
@@ -251,7 +237,6 @@ export default function ResultsContainer({
             doSelectStakeholder={doSelectStakeholder}
             selectedStakeholder={selectedStakeholder}
             categoryIds={categoryIds}
-            isWindowWide={isWindowWide}
             setToast={setToast}
             search={search}
           />

diff --git a/client/src/components/Results/ResultsFilters.js b/client/src/components/Results/ResultsFilters.js
@@ -26,10 +26,20 @@ 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",
+    },
   },
   inputContainer: {
     display: "flex",
     alignItems: "center",
+    width: "100%",
+    [theme.breakpoints.up("md")]: {
+      width: "30rem",
+    },
   },
   searchIcon: {
     width: 32,
@@ -52,13 +62,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",
     },
   },
@@ -68,7 +78,6 @@ const distanceInfo = [0, 1, 2, 3, 5, 10, 20, 50, 100, 500];
 
 const ResultsFilters = ({
   handleSearch,
-  isWindowWide,
   viewport,
   setViewport,
   origin,
@@ -108,16 +117,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
@@ -213,7 +216,7 @@ const ResultsFilters = ({
           </Button>
         </Grid>
         <Grid item>
-          {isMobile && (
+          {mobileView && (
             <SwitchViewsButton
               isMapView={isMapView}
               onClick={switchResultsView}
@@ -222,10 +225,7 @@ const ResultsFilters = ({
           )}
         </Grid>
       </Grid>
-      <Box
-        className={classes.inputContainer}
-        style={{ width: isWindowWide ? "30rem" : "100%" }}
-      >
+      <Box className={classes.inputContainer}>
         <form
           noValidate
           onSubmit={(e) => handleSearch(e)}

diff --git a/client/src/components/Results/ResultsList.js b/client/src/components/Results/ResultsList.js
@@ -6,11 +6,9 @@ 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",
-    overflow: "scroll",
     width: "100%",
     display: "flex",
     flexDirection: "column",
@@ -19,9 +17,16 @@ const useStyles = makeStyles((theme, props) => ({
     [theme.breakpoints.up("md")]: {
       height: "100%",
     },
-    [theme.breakpoints.down("sm")]: {
+    [theme.breakpoints.up("sm")]: {
+      overflowY: "scroll",
+    },
+    [theme.breakpoints.only("sm")]: {
       order: 1,
-      height: (props) => (props.isMobile ? "100%" : "30em"),
+      height: "30em",
+    },
+    [theme.breakpoints.down("xs")]: {
+      height: "100%",
+      fontSize: "12px",
     },
   },
   preview: {
@@ -36,7 +41,7 @@ const ResultsList = ({
   stakeholders,
   setToast,
 }) => {
-  const classes = useStyles({ isMobile });
+  const classes = useStyles();
   const listRef = useRef();
   const itemsRef = useRef([]);
 
@@ -46,15 +51,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
@@ -22,17 +22,33 @@ 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: {
     margin: "0 1em",
   },
+  details: {
+    textAlign: "center",
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "0 1em",
+  },
   searchButton: {
     position: "absolute",
     top: "5px",
@@ -50,12 +66,11 @@ function Map({
   categoryIds,
   doSelectStakeholder,
   selectedStakeholder,
-  isWindowWide,
   viewport,
   setViewport,
   setToast,
 }) {
-  const classes = useStyles();
+  const classes = useStyles({ selectedStakeholder });
   const mapRef = useRef();
   const categoryIdsOrDefault = categoryIds.length
     ? categoryIds
@@ -90,36 +105,25 @@ function Map({
     doSelectStakeholder(null);
   };
 
-  if (showDetails && isMobile && selectedStakeholder) {
+  const mobileView = isMobile();
+
+  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>
     );
   }
 
   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"
           ref={mapRef}
           width="100%"
           height="100%"
@@ -169,7 +173,7 @@ function Map({
               })}
         </ReactMapGL>
       </Grid>
-      {!!selectedStakeholder && isMobile && (
+      {!!selectedStakeholder && mobileView && (
         <Grid
           item
           xs={12}

diff --git 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",

diff --git a/client/src/components/Stakeholder/StakeholderDetails.js b/client/src/components/Stakeholder/StakeholderDetails.js
@@ -21,10 +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%",

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

diff --git 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) => {