fix click icons next to mapbox logo

remove overflow
hackforla · Oct 2, 2024 · ec10139 · ec10139
1 parent 70f748f
commit ec10139
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 81 deletions.
diff --git a/client/src/components/FoodSeeker/SearchResults/AttributionInfo.js b/client/src/components/FoodSeeker/SearchResults/AttributionInfo.js
@@ -10,7 +10,7 @@ const AttributionInfo = () => {
   return (
     <div>
       {toggle ? (
-        <div style={{ display: "flex", justifyContent: "flex-end" }}>
+        <div style={{ display: "flex", justifyContent: "flex-start" }}>
           <button
             style={{
               backgroundColor: "white",

diff --git a/client/src/components/FoodSeeker/SearchResults/StakeholderPreview/StakeholderPreview.js b/client/src/components/FoodSeeker/SearchResults/StakeholderPreview/StakeholderPreview.js
@@ -3,9 +3,8 @@ import {
   Button,
   Chip,
   Divider,
-  Snackbar,
   Stack,
-  Typography,
+  Typography
 } from "@mui/material";
 import Grid2 from "@mui/material/Unstable_Grid2";
 import {
@@ -14,32 +13,32 @@ import {
 } from "constants/stakeholder";
 import { useSiteContext } from "contexts/siteContext";
 import {
+  calculateMinutesToClosing,
+  calculateMinutesToOpening,
   extractNumbers,
   formatDatewTimeZoneDD,
   formatDatewTimeZoneMMM,
   formatDatewTimeZoneWeekdayShort,
   formatDatewTimeZonehhmmss,
   getGoogleMapsDirectionsUrl,
-  isCurrentDayAndWeek,
   hoursSort,
-  nextOpenTime,
-  standardTime,
   isAlmostClosed,
   isAlmostOpen,
-  calculateMinutesToClosing,
-  calculateMinutesToOpening,
+  isCurrentDayAndWeek,
+  nextOpenTime,
+  standardTime,
 } from "helpers";
 
 import Accordion from "@mui/material/Accordion";
 import AccordionDetails from "@mui/material/AccordionDetails";
 import AccordionSummary from "@mui/material/AccordionSummary";
 
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import StakeholderIcon from "images/stakeholderIcon";
-import ForkIcon from "icons/ForkIcon";
-import AppleIcon from "icons/AppleIcon";
-import SubdirectoryArrowRightIcon from "@mui/icons-material/SubdirectoryArrowRight";
 import PhoneIcon from "@mui/icons-material/Phone";
+import SubdirectoryArrowRightIcon from "@mui/icons-material/SubdirectoryArrowRight";
+import AppleIcon from "icons/AppleIcon";
+import ForkIcon from "icons/ForkIcon";
+import StakeholderIcon from "images/stakeholderIcon";
 import PropTypes from "prop-types";
 import { useLocation, useNavigate } from "react-router-dom";
 import * as analytics from "services/analytics";

diff --git a/client/src/components/FoodSeeker/SearchResults/layouts/Mobile.js b/client/src/components/FoodSeeker/SearchResults/layouts/Mobile.js
@@ -76,6 +76,16 @@ const MobileLayout = ({ filters, map, list, showList }) => {
         }}
       >
         <Box sx={{ flex: 1 }}>{map}</Box>
+        <Stack
+      sx={{
+            display: "flex",
+            flexDirection: "column",
+            position: "absolute",
+            bottom: "200px"
+          }}>
+        <MapboxBtn/>
+        <AttributionInfo />
+      </Stack>
         {list && (
           <Draggable
             position={position}
@@ -92,75 +102,6 @@ const MobileLayout = ({ filters, map, list, showList }) => {
           >
             <Box sx={overlay}>
               <Grid container spacing={0}>
-                <Stack>
-                  <div>
-                    <a
-                      target="_blank"
-                      rel="noopener nofollow noreferrer"
-                      href="https://www.mapbox.com/"
-                      aria-label="Mapbox logo"
-                    >
-                      <svg
-                        width="88"
-                        height="23"
-                        viewBox="0 0 88 23"
-                        xmlns="http://www.w3.org/2000/svg"
-                        xmlnsXlink="http://www.w3.org/1999/xlink"
-                        fillRule="evenodd"
-                      >
-                        <defs>
-                          <path
-                            id="logo"
-                            d="M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z"
-                          />
-                          <path
-                            id="text"
-                            d="M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z"
-                          />
-                        </defs>
-                        <mask id="clip">
-                          <rect
-                            x="0"
-                            y="0"
-                            width="100%"
-                            height="100%"
-                            fill="white"
-                          />
-                          <use xlinkHref="#logo" />
-                          <use xlinkHref="#text" />
-                        </mask>
-
-                        <g
-                          id="outline"
-                          opacity="0.3"
-                          stroke="#000"
-                          strokeWidth="3"
-                        >
-                          <circle
-                            mask="url(#clip)"
-                            cx="11.5"
-                            cy="11.5"
-                            r="9.25"
-                          />
-                          <use xlinkHref="#text" mask="url(#clip)" />
-                        </g>
-                        <g id="fill" opacity="0.9" fill="#fff">
-                          <use xlinkHref="#logo" />
-                          <use xlinkHref="#text" />
-                        </g>
-                      </svg>
-                    </a>
-                  </div>
-                  <div
-                    style={{
-                      display: "flex",
-                      justifyContent: "flex-start",
-                      paddingTop: "2.23px",
-                    }}
-                  >
-                    <AttributionInfo />
-                  </div>
-                </Stack>
               </Grid>
               <Box
                 sx={{
@@ -208,3 +149,66 @@ const MobileLayout = ({ filters, map, list, showList }) => {
 };
 
 export default MobileLayout;
+
+
+const MapboxBtn= () =>{
+  return(
+    <>
+        <a
+          target="_blank"
+          rel="noopener nofollow noreferrer"
+          href="https://www.mapbox.com/"
+          aria-label="Mapbox logo"
+        >
+        <svg
+          width="88"
+          height="23"
+          viewBox="0 0 88 23"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlnsXlink="http://www.w3.org/1999/xlink"
+          fillRule="evenodd"
+        >
+        <defs>
+          <path
+            id="logo"
+            d="M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z"
+          />
+          <path
+            id="text"
+            d="M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z"
+          />
+        </defs>
+        <mask id="clip">
+          <rect
+            x="0"
+            y="0"
+            width="100%"
+            height="100%"
+            fill="white"
+          />
+          <use xlinkHref="#logo" />
+          <use xlinkHref="#text" />
+        </mask>
+          <g
+            id="outline"
+            opacity="0.3"
+            stroke="#000"
+            strokeWidth="3"
+          >
+            <circle
+              mask="url(#clip)"
+              cx="11.5"
+              cy="11.5"
+              r="9.25"
+            />
+            <use xlinkHref="#text" mask="url(#clip)" />
+          </g>
+          <g id="fill" opacity="0.9" fill="#fff">
+            <use xlinkHref="#logo" />
+            <use xlinkHref="#text" />
+          </g>
+        </svg>
+        </a>
+    </>
+  )
+}