Front end mobile

package.json

@@ -24,7 +24,9 @@
     "react-icons": "^3.10.0",
     "react-instantsearch": "^6.4.0",
     "react-instantsearch-dom-maps": "^6.4.0",
+    "react-native-elements": "^2.0.4",
     "react-places-autocomplete": "^7.2.1",
+    "react-responsive": "^8.1.0",
     "react-scripts": "^3.4.1",
     "styled-components": "^5.1.0",
     "typescript": "^3.9.5"

src/App.css

@@ -42,6 +42,8 @@ em {
   text-decoration: underline;
 }
 
+
+
 .search-container {
   position: relative;
 }
@@ -210,7 +212,6 @@ footer {
 #popover-contained {
   background-color: #ffffff;
   box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4);
-  height: 490px;
   max-width: 532px;
   padding: 40px 40px;
 }
@@ -221,7 +222,6 @@ footer {
   line-height: 1.15;
   font-size: 15px;
   font-weight: 400;
-  height: 509px;
   max-width: 410px;
   text-align: justify;
   width: 410px;
@@ -232,7 +232,6 @@ footer {
 }
 
 .map-popover__address {
-  height: 23px;
   font-size: 15px;
   font-weight: normal;
   font-stretch: normal;
@@ -249,7 +248,6 @@ footer {
   font-stretch: normal;
   font-style: normal;
   font-weight: bold;
-  height: 23px;
   margin-bottom: 12px;
   letter-spacing: 0.75px;
   line-height: normal;
@@ -263,7 +261,6 @@ footer {
   font-stretch: normal;
   font-style: normal;
   font-weight: normal;
-  height: 23px;
   letter-spacing: 0.75px;
   line-height: normal;
   margin-bottom: 34px;
@@ -280,7 +277,6 @@ footer {
   font-stretch: normal;
   font-style: normal;
   font-weight: bold;
-  height: 23px;
   letter-spacing: 0.8px;
   line-height: normal;
   text-transform: uppercase;
@@ -302,3 +298,14 @@ footer {
 .place__info-contact {
   margin-bottom: 20px;
 }
+
+@media (max-width: 400px) {
+  .navbar {
+    padding: 1rem 1rem .5rem !important;
+    align-items: flex-start !important;
+  }
+  #map-popover {
+    left: -5px!important;
+    max-width: 100%;
+  }
+}

src/App.tsx

@@ -8,7 +8,7 @@ function App() {
     <div
       className="App"
       style={{
-        height: "100vh",
+        height: "",
         position: "relative",
       }}
     >

src/components/UI/ButtonExample.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 
 interface IProps {
     buttonStyle?: object;
@@ -18,3 +18,8 @@ const Button: React.FC<IProps> = props => {
 };
 
 export default Button;
+
+
+// access state => Callback in parent Component
+//         toggles state
+// 2. Set state variable in parent component, pass it to child as prop

src/components/UI/Map.tsx

@@ -13,54 +13,67 @@ import Marker from "./Marker"
 import { Location } from "./types"
 import { HitComponent } from "../common/Hit"
 import filterIcon from "../../assets/filter.png"
+import mapIcon from "../../assets/map.png"
+import listIcon from "../../assets/list.png"
 import LocationProvider from "../../contexts/LocationContext"
-import { IconButton as FilterButton } from "../common/Button"
+import { IconButton as FilterButton, MapListButton } from "../common/Button"
+import { useWindowSize } from '../common/MediaQuery';
+
+export const MapContainer = styled.div`
+  height: calc(100vh - 71px);
+  position: absolute;
+  right: 0;
+  top: 71px;
+  width: calc(100vw - 430px);
 
-const MapContainer = styled.div`
-  height: calc(100vh - 76px);
-  width: 100vw;
 
   @media (min-width: 980px) {
-    position: absolute;
-    right: 0;
-    top: 76px;
+    // position: absolute;
+    // right: 0;
+    // top: 71px;
     width: calc(100vw - 430px);
   }
+  @media (max-width: 575px) {
+    top: 0;
+    position: relative;
+    height: calc(96vh - 76px);
+    width: 100%;
+  }
 `
 
 const Filter = styled.div`
-  display: none;
+  align-content: center;
+  align-items: center;
+  background: white;
+  border-bottom: 1px solid lightgray;
+  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.3);
+  display: flex;
+  height: 92px;
+  // position: absolute;
+  padding: 17.5px 30px;
+  top: 70px;
+  width: 414px;
+  z-index: 500;
+  justify-content: space-between;
 
-  @media (min-width: 980px) {
-    align-content: center;
-    align-items: center;
-    background: white;
-    border-bottom: 1px solid lightgray;
-    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.3);
-    display: flex;
-    height: 92px;
-    left: 0;
-    position: absolute;
-    padding: 17.5px 30px;
-    top: 76px;
-    width: 430px;
-    z-index: 500;
+  @media (max-width: 575px) {
+    width: 100%;
   }
 `
-const ResultsList = styled.div`
-  display: none;
+export const ResultsList = styled.div`
+  background: white;
+  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.3);
+  display: block;
+  height: calc(100vh - (70px + 92px));
+  overflow: scroll;
+  top: calc(70px + 92px);
+  width: 414px;
+  z-index: 1000;
+
+  @media (max-width: 575px) {
+    width: 100%;
+    height: calc(100vh - (70px + 150px));
 
-  @media (min-width: 980px) {
-    background: white;
-    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.3);
-    display: block;
-    height: calc(100vh - (76px + 92px));
-    left: 0;
-    overflow: scroll;
-    position: absolute;
-    top: calc(76px + 92px);
-    width: 430px;
-    z-index: 500;
   }
 `
 
@@ -84,6 +97,9 @@ export default ({ defaultLocation }: Map) => {
   const [location, setLocation] = useState<Location>(
     defaultLocation || US_LOCATION
   )
+  const mq = useWindowSize();
+  const mdScreen = mq.width < 575
+  let [show, setShow] = useState(true)
 
   return (
     <LocationProvider>
@@ -115,12 +131,20 @@ export default ({ defaultLocation }: Map) => {
                   src={filterIcon}>
                   Filter
                 </FilterButton>
+                {mdScreen ? <MapListButton
+                  border
+                  primary
+                  width="122px"
+                  alt="map/list"
+                  src={show === true ? listIcon : mapIcon}
+                  onClick={() => setShow(!show)}
+                  toggle={show} >
+                    {show ? 'map' : 'list'}
+                  </MapListButton>
+                  : <div></div>}
               </Filter>
-              <ResultsList>
-                <Hits hitComponent={HitComponent} />
-              </ResultsList>
-
-              <MapContainer>
+              { !mdScreen || show ?
+               <MapContainer>
                 <GeoSearch
                   google={google}
                   zoomControlOptions={{
@@ -137,10 +161,15 @@ export default ({ defaultLocation }: Map) => {
                   )}
                 </GeoSearch>
               </MapContainer>
+              : <div></div> }
+              { !mdScreen || !show ? 
+              <ResultsList>
+                <Hits hitComponent={HitComponent} />
+              </ResultsList> : <div></div> }
             </div>
           </InstantSearch>
         )}
       </GoogleMapsLoader>
     </LocationProvider>
   )
-}
+}

src/components/UI/Marker.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components"
-import { Overlay, Popover } from "react-bootstrap"
+import { Popover, Overlay } from "react-bootstrap"
 import React, { useContext, useRef, useState } from "react"
 import { CustomMarker } from "react-instantsearch-dom-maps"
 
@@ -34,10 +34,17 @@ const Title = styled.div`
   font-stretch: normal;
   font-style: normal;
   font-weight: bold;
-  height: 23px;
   margin-bottom: 5px;
   line-height: normal;
 `
+const MarkerContainer = styled.div`
+  width: 375px;
+  height: 517px;
+  border-radius: 5px;
+  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4);
+  background-color: #ffffff;
+`
+
 
 const Marker: React.FC<IProps> = (props) => {
   const ref = useRef(null)
@@ -83,6 +90,12 @@ const Marker: React.FC<IProps> = (props) => {
     selectHit(true)
   }
 
+  const direction = () => {
+    const smallScreen = window.matchMedia('(min-width: 400px)')
+    return smallScreen.matches ? "right" : "bottom-end"
+  }
+
+
   return (
     <div>
       <CustomMarker aria-describedby={id} key={hit.objectID} hit={hit}>
@@ -94,7 +107,7 @@ const Marker: React.FC<IProps> = (props) => {
         rootClose
         show={open}
         target={target}
-        placement="right"
+        placement={direction()}
         transition={false}
         onHide={handleClose}
         container={ref.current}>