From c03c7a2807411f390cd4a83ffb6e083d486612c0 Mon Sep 17 00:00:00 2001 From: scurry222 Date: Mon, 13 Jul 2020 19:14:30 -0700 Subject: [PATCH 1/5] implement dropdown menu --- src/App.css | 9 ++ src/components/UI/Map.tsx | 10 +-- src/components/UI/Menu.tsx | 122 ++++++++++++++------------- src/components/UI/Search.tsx | 62 ++++++++------ src/components/UI/TopBar.tsx | 18 ++-- src/components/common/MenuButton.tsx | 4 +- 6 files changed, 128 insertions(+), 97 deletions(-) diff --git a/src/App.css b/src/App.css index f6579c0..afc7846 100644 --- a/src/App.css +++ b/src/App.css @@ -42,6 +42,8 @@ em { text-decoration: underline; } + + .search-container { position: relative; } @@ -302,3 +304,10 @@ footer { .place__info-contact { margin-bottom: 20px; } + +@media (max-width: 400px) { + .navbar { + padding: 1rem 1rem .5rem !important; + align-items: flex-start !important; + } +} diff --git a/src/components/UI/Map.tsx b/src/components/UI/Map.tsx index 17b5c31..17974c8 100644 --- a/src/components/UI/Map.tsx +++ b/src/components/UI/Map.tsx @@ -18,12 +18,12 @@ import { IconButton as FilterButton } from "../common/Button" const MapContainer = styled.div` height: calc(100vh - 76px); - width: 100vw; + // width: 100vw; @media (min-width: 980px) { position: absolute; right: 0; - top: 76px; + top: 71px; width: calc(100vw - 430px); } ` @@ -42,7 +42,7 @@ const Filter = styled.div` left: 0; position: absolute; padding: 17.5px 30px; - top: 76px; + top: 70px; width: 430px; z-index: 500; } @@ -54,11 +54,11 @@ const ResultsList = styled.div` background: white; box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.3); display: block; - height: calc(100vh - (76px + 92px)); + height: calc(100vh - (70px + 92px)); left: 0; overflow: scroll; position: absolute; - top: calc(76px + 92px); + top: calc(70px + 92px); width: 430px; z-index: 500; } diff --git a/src/components/UI/Menu.tsx b/src/components/UI/Menu.tsx index 4ede384..27b536f 100644 --- a/src/components/UI/Menu.tsx +++ b/src/components/UI/Menu.tsx @@ -3,6 +3,7 @@ import styled from "styled-components" import { IoMdMenu } from "react-icons/all" // import InfoPopover from "./InfoPopover" import MenuButton from '../common/MenuButton' +import { Navbar } from 'react-bootstrap' const MenuContainer = styled("div")` display: flex; @@ -10,20 +11,24 @@ const MenuContainer = styled("div")` margin-left: 0px; @media (max-width: 400px) { - top: 80px; + position: absolute; + top: 5px; + right: 0; + padding: .75rem; } ` const MobileMenu = styled("div")` - @media (min-width: 400px) { - display: none; - } + position: absolute; + padding: .5rem .75rem; + right: 0; + top: 0; ` const ButtonsContainer = styled("div")` display: flex; justify-content: space-around; - width: 380px; + right: 0; & button { border: none; @@ -35,11 +40,12 @@ const ButtonsContainer = styled("div")` } @media (max-width: 400px) { - position: fixed; - top: 120px; - left: 0; - width: 100%; - height: 100%; + // display: block; + // top: 7rem; + // left: -18rem; + // width: 300px; + // height: 100%; + bottom: 0; z-index: 1000; background: white; @@ -63,52 +69,54 @@ const ButtonsContainer = styled("div")` // ` export default () => ( - - - - + <> + + + + + - - - - - {/* -

- For over 30 years, the Souper Bowl of Caring campaign has been a local - effort with a collective impact using the energy of the Big Game to - tackle hunger. -

-

- Churches, schools and civic groups around the country join in through - hosting food and donation campaigns each year that benefit local - charities picked by participants. -

-

- Since 1990, over $163 million has been raised for almost 10,000 local - charities around the nation and world. -

-

- The Souper Bowl of Caring illustrates the importance of a collective - impact from local grassroots efforts to tackle hunger. -

- Learn more about our history - - -

- Contributing, Branching, & Forking While we actively accept help, as - well as encourage you to fork this repo and build it out for your - city, we do not take pull requests directly to this repo - please - contact us before you plan to do so. Reach out to:
- Repo - Github - {" "} -
- Twitter @dariceshelter -

- - -

Coming soon

- */} - - + + + + {/* +

+ For over 30 years, the Souper Bowl of Caring campaign has been a local + effort with a collective impact using the energy of the Big Game to + tackle hunger. +

+

+ Churches, schools and civic groups around the country join in through + hosting food and donation campaigns each year that benefit local + charities picked by participants. +

+

+ Since 1990, over $163 million has been raised for almost 10,000 local + charities around the nation and world. +

+

+ The Souper Bowl of Caring illustrates the importance of a collective + impact from local grassroots efforts to tackle hunger. +

+ Learn more about our history + + +

+ Contributing, Branching, & Forking While we actively accept help, as + well as encourage you to fork this repo and build it out for your + city, we do not take pull requests directly to this repo - please + contact us before you plan to do so. Reach out to:
+ Repo + Github + {" "} +
+ Twitter @dariceshelter +

+ + +

Coming soon

+ */} + + + ) diff --git a/src/components/UI/Search.tsx b/src/components/UI/Search.tsx index 519d32e..e2dc15f 100644 --- a/src/components/UI/Search.tsx +++ b/src/components/UI/Search.tsx @@ -2,13 +2,14 @@ import styled from "styled-components"; import React, { useState } from "react"; import { Form, InputGroup, FormControl } from "react-bootstrap"; import PlacesAutocomplete, { geocodeByAddress, getLatLng } from "react-places-autocomplete"; +import { Navbar } from 'react-bootstrap' import { SetLocation } from "./types"; import searchIcon from "../../assets/images/search@3x.png"; const Suggestions = styled.div` border-radius: 0 0 10px 10px; - position: absolute; + // position: absolute; z-index: 1000; background: white; width: 100%; @@ -32,12 +33,19 @@ const Container = styled.div` justify-content: center; z-index: 1000; height: 48px; + min-width: 300px; + + @media (max-width: 575px) { + margin: 15px 0 0 0; + } @media (max-width: 400px) { position: relative; - top: 50px; + margin-top: 50px; min-width: 100%; + } + `; const SearchBar = styled.div` @@ -54,6 +62,8 @@ const SearchIcon = styled.img` top: 13px; width: 24px; z-index: 999; + + `; type SearchProps = { @@ -77,30 +87,30 @@ export default ({ setLocation }: SearchProps) => { > {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => ( - - -
- - - - - - {!loading && - suggestions.map((suggestion) => ( - - {suggestion.description} - - ))} - -
- + + +
+ + + + + + {!loading && + suggestions.map((suggestion) => ( + + {suggestion.description} + + ))} + +
+ )} diff --git a/src/components/UI/TopBar.tsx b/src/components/UI/TopBar.tsx index 9819719..e9183de 100644 --- a/src/components/UI/TopBar.tsx +++ b/src/components/UI/TopBar.tsx @@ -6,19 +6,21 @@ import Search from "./Search"; import { SetLocation } from "./types"; import BrandLogo from "../common/BrandLogo"; import "bootstrap/dist/css/bootstrap.min.css"; +import { Navbar } from "react-bootstrap"; const Container = styled("div")` background-color: #ffffff; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2) !important; display: flex; - padding: 14px 25px; - position: absolute; + padding: 5px 0 0; + // position: absolute; top: 0; width: 100%; + // height: 75px; z-index: 1000; @media (max-width: 400px) { - height: 120px; + // height: 150px; } `; @@ -29,9 +31,11 @@ type TopBarProps = { export default ({ setLocation }: TopBarProps) => { return ( - - - + + + + + ); }; diff --git a/src/components/common/MenuButton.tsx b/src/components/common/MenuButton.tsx index fbe58a7..23fe127 100644 --- a/src/components/common/MenuButton.tsx +++ b/src/components/common/MenuButton.tsx @@ -13,7 +13,7 @@ const ButtonLink = styled.a` color: #171b50; font-weight: bold; letter-spacing: 0.8px; - padding-top: 12px; + padding: 12px; text-transform: uppercase; width: auto; text-decoration: none; @@ -27,7 +27,7 @@ const ButtonLink = styled.a` @media (max-width: 400px) { width: 100%; - margin-bottom: 20px; + padding: .2rem; } ` From 71b8755ceae78cc6d0f681c6c6178db2bafcd464 Mon Sep 17 00:00:00 2001 From: scurry222 Date: Mon, 20 Jul 2020 15:24:36 -0700 Subject: [PATCH 2/5] change marker popover style on small media screens --- package.json | 2 ++ src/App.css | 10 ++++------ src/App.tsx | 2 +- src/components/UI/Map.tsx | 5 ++++- src/components/UI/Marker.tsx | 22 +++++++++++++++++++--- src/components/UI/Menu.tsx | 14 -------------- src/components/UI/Search.tsx | 1 - 7 files changed, 30 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index 1a90b36..0ba7722 100644 --- a/package.json +++ b/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" diff --git a/src/App.css b/src/App.css index afc7846..abc6970 100644 --- a/src/App.css +++ b/src/App.css @@ -212,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; } @@ -223,7 +222,6 @@ footer { line-height: 1.15; font-size: 15px; font-weight: 400; - height: 509px; max-width: 410px; text-align: justify; width: 410px; @@ -234,7 +232,6 @@ footer { } .map-popover__address { - height: 23px; font-size: 15px; font-weight: normal; font-stretch: normal; @@ -251,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; @@ -265,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; @@ -282,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; @@ -310,4 +304,8 @@ footer { padding: 1rem 1rem .5rem !important; align-items: flex-start !important; } + #map-popover { + left: -5px!important; + max-width: 100%; + } } diff --git a/src/App.tsx b/src/App.tsx index 65f8e90..45d3b5e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,7 +8,7 @@ function App() {
diff --git a/src/components/UI/Map.tsx b/src/components/UI/Map.tsx index 17974c8..d64d22e 100644 --- a/src/components/UI/Map.tsx +++ b/src/components/UI/Map.tsx @@ -17,7 +17,7 @@ import LocationProvider from "../../contexts/LocationContext" import { IconButton as FilterButton } from "../common/Button" const MapContainer = styled.div` - height: calc(100vh - 76px); + height: calc(100vh - 71px); // width: 100vw; @media (min-width: 980px) { @@ -26,6 +26,9 @@ const MapContainer = styled.div` top: 71px; width: calc(100vw - 430px); } + @media (max-width: 575px) { + height: calc(96vh - 76px); + } ` const Filter = styled.div` diff --git a/src/components/UI/Marker.tsx b/src/components/UI/Marker.tsx index e040c84..583a890 100644 --- a/src/components/UI/Marker.tsx +++ b/src/components/UI/Marker.tsx @@ -1,7 +1,10 @@ import styled from "styled-components" -import { Overlay, Popover } from "react-bootstrap" +import { Popover, Overlay } from "react-bootstrap" +// import { Overlay } from 'react-native' import React, { useContext, useRef, useState } from "react" import { CustomMarker } from "react-instantsearch-dom-maps" +import MediaQuery from 'react-responsive'; +import mediaQuery from 'css-mediaquery'; import { Pin } from "../common/Pin" import { GmapsTypeIcon } from "../common/GmapsType" @@ -34,10 +37,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 = (props) => { const ref = useRef(null) @@ -83,6 +93,12 @@ const Marker: React.FC = (props) => { selectHit(true) } + const direction = () => { + const smallScreen = window.matchMedia('(min-width: 400px)') + return smallScreen.matches ? "right" : "bottom-end" + } + + return (
@@ -94,7 +110,7 @@ const Marker: React.FC = (props) => { rootClose show={open} target={target} - placement="right" + placement={direction()} transition={false} onHide={handleClose} container={ref.current}> diff --git a/src/components/UI/Menu.tsx b/src/components/UI/Menu.tsx index 27b536f..c1589dc 100644 --- a/src/components/UI/Menu.tsx +++ b/src/components/UI/Menu.tsx @@ -1,23 +1,9 @@ import React from "react" import styled from "styled-components" -import { IoMdMenu } from "react-icons/all" // import InfoPopover from "./InfoPopover" import MenuButton from '../common/MenuButton' import { Navbar } from 'react-bootstrap' -const MenuContainer = styled("div")` - display: flex; - justify-content: space-between; - margin-left: 0px; - - @media (max-width: 400px) { - position: absolute; - top: 5px; - right: 0; - padding: .75rem; - } -` - const MobileMenu = styled("div")` position: absolute; padding: .5rem .75rem; diff --git a/src/components/UI/Search.tsx b/src/components/UI/Search.tsx index e2dc15f..b4af1fc 100644 --- a/src/components/UI/Search.tsx +++ b/src/components/UI/Search.tsx @@ -2,7 +2,6 @@ import styled from "styled-components"; import React, { useState } from "react"; import { Form, InputGroup, FormControl } from "react-bootstrap"; import PlacesAutocomplete, { geocodeByAddress, getLatLng } from "react-places-autocomplete"; -import { Navbar } from 'react-bootstrap' import { SetLocation } from "./types"; import searchIcon from "../../assets/images/search@3x.png"; From ae2024504d6d471ef644dd34153269fac9c7deb1 Mon Sep 17 00:00:00 2001 From: scurry222 Date: Sun, 26 Jul 2020 16:42:02 -0700 Subject: [PATCH 3/5] implement map/list toggle button --- src/assets/genericPinSelected.png | Bin 0 -> 15062 bytes src/assets/list.png | Bin 0 -> 154 bytes src/assets/map.png | Bin 0 -> 261 bytes src/components/UI/ButtonExample.tsx | 7 ++- src/components/UI/Map.tsx | 92 +++++++++++++++++----------- src/components/UI/Marker.tsx | 3 - src/components/common/Button.tsx | 27 +++++++- 7 files changed, 86 insertions(+), 43 deletions(-) create mode 100644 src/assets/genericPinSelected.png create mode 100644 src/assets/list.png create mode 100644 src/assets/map.png diff --git a/src/assets/genericPinSelected.png b/src/assets/genericPinSelected.png new file mode 100644 index 0000000000000000000000000000000000000000..6532ccefdd90ca7ec27311392b3ac704679c54f1 GIT binary patch literal 15062 zcmeI3hgVZs+xE{%0tvl0X#r;dkzzm*g2GWoL`6_^1VoAn0v14ehl7k1L5O1`DjLUv z2#TNrQUsL}B|>ZnQdEj`klx9+Pndb0_kI6?Z#`>0S&QX;+CKN$r|kW^ugjD@cH6~- zR|!K9B(}rmHwOq3M6f>+9;}gnAA1q}0|z;5-wHi!Q0WH?1n(`ow?I%qhREV!0SLlF zdu;b_1MC0){fr^V3xb#s#DO3l1eT1AA!9Gdmp5&QSOz~1lgYz65?miREm-1km>eGHS8%x? z3$T&N<1l%kA3;xp4gh(9-9bl#s|8&N`U9j1jt1QUasn3&t`KAm8Usm#BSBgq4{&18 zHfWlM-6Cvnuo*0a9}nCy(2?N!z-hq}hsVQiApiDbS@7>Dc0c(y2}_FK@7V3-cO{l1 zzjv^^&A(tQW&Sl_H=mytb_M)1fu_OZ0PYg#JaA3mRQU&XtAH0kC)mMm-}x53)I0r$H_$%xWuJga=2|*jz?)YuX z{&2V9_Ljg_>SJ_o%h)d&<0l4})Ptk?ICe!JaI2)BHNDN*H|2Pay)CX)Q%J7~Vvxzu zZ4wDugTo7-V-^Ks5-uP39-8uiQzppRae{{(2!a~JF@2%7i=etUNh3+r8AP>bG zMi00b)d!CDuk({YsW&9p-)o%HhV+AjVkL`(khAuJ-SdI1%Rgt^+mE*CK>`*sj92xF z?_BJypf`(gh`1k(I-1xU7j++xyyu;5O&#X-4>-5dw>;jt^An3O&_8Pl29{(~)WV7rS$g1<SRTuYULXGje zZF5c#RRb~hhs~1bs1cz(0zNt zidEIR;R6*ugor=vxGYw6*9|ZII7B{L7{_JrLeywQ4X3_7f>uQcvE4XL5y>I=M>j8{ zoSwBW!#)?BgiI!+8JT&;-?zD;Ch~)IAPi6tA$l06P6gREJxe}~f5fawo2Eo~Z>$_dMSs6N$hn=ZXE*Dl2oM+H_)_k#bP|SX}2wNgy6|YDp5w8rc>4Kh_Dsy1B{{J z2gigp$yO@W70~1(-4^9th;>Q23*1Myyt~^GXH@0eCWIKu*}oUK-SKjv3<(qPpAfdG zxLP8GrqBETG$8k=M2lbOd!Czu?w`QP@3}owUygGa(jCFEiaR90QJF+C!fa4pD{Q0h z&cdJeqfbt1ke_y{LAsMmQoE3yW?O`HLZn`0i@-UaA~Gx|+ZzUi+ka~JAqCeP-wE7i z*du75>P(LuW9u>mzZtH91`uSxv|3(~thI-TbMRK$2<_=Jv)&VhbNKPgLy0}QURYSW zkz6I2P5I-B48tfO0zKGnv0Z_on+-x*9VPLg3`1A#CO%;@GR=Uz?HV4JR(Qtj;}ul) zS#mD^!r-LxB@m`!;S=qAR5m3Q|IwwEe9RU(HhV@=QAcYp9p}(xW+1+<>Tud$MTFb6 zv4>PVPz#AIgxl7Kls*1?Nv%Uw=YdtBXKNi(Daj-r$Xy5fdk$-j2Khv;o}>yGV2c2?hk zYx@d8YWq(rlGYu#O!pPIeQJ~xUocHy1$LG5>jL`*&&j$Xx+Ky%C)-oI4T5D1xB6^hooLBb{Ls}vh4X;(lF8v}e% zjiK7s+GMn??kSvjQq4wrHEvu5OW2g3aHqyYv30+3uRfX>>B^%+4>+>R>bb zoyeJRF%iYSHP(AwKwoXb`pS2uueM-)mHFFQA)9k0rbxwOMJ$w(*n%Fmqf2hkB5yP3 z9DsTr()e+D*8udX^qSVxR^|XXviv$5+nYZKw`~upv6@^(v5@0@ zNS(F+@`E;aAsgmki3M`ULV3+|X$G~v1V*=3sNEE?xpN*1De+WE#@6T7#5Y-W*z+X3 zxmFdrkTUln0o^|?OVDW=6-q`w1{Uh?$^E+4$&hgSKzl9Hro;YzZ3P(nn7+by=n zttLNJ>(qjTgTK^mCfO8}m587tkrrFxG{~P01SmsUA=KB?%5aX?E}R+R^%gSCgkU3BtmgYS{hT5y6wC`rP&-qSw+1o&<^a@eT8_@VFgfZOVTSl|I~E z3oCW58xde7{TWMQlf^IN=AWhP_`pO(1N+QK+#PSfs^g3rE}nv1CzqimWmu_Bs2Cv% zjE)MzN_~1GBo_07;yM9>=k3&zUs00-#S}MP5_^x@9lU;f-H99xa>AUFh|k?YxTsQw z@lI_?3b%gmLT{Z2tTbxoCrb9OTo@Uylw#C|D|i zE(y0-6e}!C!pkGe{p+-95nN%`Lve%YOBNJDY~exuQNs*z-I=m^aF}0eZkK}N7!N*i zu4Zw0?F{vjc$Jp?g!v~QkyukgCR$@uI}m-MK0gU6^QBZO#BSOH`5X>Vr-xY3dY}`Y z1q%N}l*(5+{8a&~=piQ4bZl#YDi~ZER@Taa@H&5O0XFzpZL}23OrI0Dz1$Xo?l_p& zJN@g;Q4)N`DKCTes9~F)3i?*B$v8@^ewP#Ei$$bBDQt{0gj+J+Q6)@*h(2Avk}p#Z z_G&bVRVBLN0wr&S$X_b(gG?r+8P1ytW-;z2(A7vWHn{Z>?i(QGC^2?g?5lARd1P%q z%zWqXWbzW{)1y!JrnqH~`aXl!|1{ZaPb;_UXm7m&`+QrneBC>)e={o_z7iq9wrzM? z5#gc-=~r9DXFihYT`h@*YJ%wzP1|?s`2px)GRo<+msB3Zt)JXLHlCHKRwqOHF=A}d zWkN*qMI85KF>1TKO|LAIKL;5+BKjq#^lS)@TRnrS)UmSeO*m;mzR?owc}?r#Uxw>6 zVV~|K)OLQm-u9dL_0x2uDL1p|16?@`ZHg6UdxrH?WC-B69DA5KK$pC#gL^U)gfv~I z1Zvl4_d%+Q(u}DX(RLwc)w(Z`Pv2+M_Gh?@yCiP%rwgLxD7ggnbKvK8@5`6=1xKhNT9z?omG(6&OhE+4dM1G{eBPcRRNk6SGlQPY1Rz>t)X@QI6AmH9 z3A5+PwLcraq@ISjHR|}nE`R#)jcQ$}ugeg2R_~}@-?906EHpV?jOKkNmd&ke?@xf1 zmNt_Ir@9)ljGmSzyAWB~JP~$eOxeE1t<&nAMR4CB4?o^{bo;WXbC&rtdDfe3+<0g3 zpmJg40SR>L4Ka3V-K_^_*#qM*?xsLbmo>=we)f%xMFVg1KDBq8wzq%;XY0^ETF=)d zeaODmJFz$2;JTW)nnZqQETnT;gakd-{x2u}r*YE%LEG_B_}S)?lJZvf7$v`_m2KwK zisxq*aIBA(0^Qwx28lBVS}LRWNTJ7Wh_he!#Bv6QgF{zs6h=}S1-b(aYbOu5Skw&T zxL>t#fze9%NTQxZ=UupOC=MT3crj!1@`(_sjpB$SPlk~+9Q$*upuQvmqRt;j#6v0S z`3-a!3ZA%(suiDMZ55xy|GxN~AW;@DfH# z0^Pp|j(WD$y@Y%Qz#BX?n&G%C2={%zjOyK;TtK$@vgj5dl_;Km07!%-pr38t2mw@TFLwY4pSy0q%Q{ z(t^-@*(;~Dkl1gC8okyId_fLk^i-IpWbRuxnkvAGpFwR;%FJXmH>+aUWE&=vccVgI z9+mIFOHYK1M~i?@82BPBOU;Mn7H`0Ft6Y$~;iBK`>^kJds(t`IQvMJkxCu~7&j#}2 zIf22Nh5K-G^Ks;EgyekP(119`N?wy9O_vQX|NY$;y5YHCK6)5lKQ7Ja_wQa_eYF(- zWQ?uA}83rXfT0D6FK1o>VWq~^4 z_^bJ(FqIh;G8hYjW}+ju9n?)oWqFj2%eRFHPdW~WMh`J z9sYHMj!gkSMI$8H{v};N8&Sz+P~XFeA}5@Ko*#}?c|`QO9pUyRLsI|)C>wg%v# z5bB7JCOKpg#))$MUEJWD$7hrwosXm2^x!o?t3DHTLR75onZax53T__B6N+2k3fWxj zD%pfQ@Y}u%guNgvIIn2+0K_F!t0Dj{{FQ6BGO3SbNxK|V-oZk+u@<^-yH@>)vTPrYx z9WjLRqw%?jKv3L;d{LBSv|@PUI^8A55XRv|TA>Lay2E2e0Y zqcCu?TiMqD(2&)k8a}>lss;Hc^AYfos^L0^%Z&)(whcy$6MR}cTUKIP1raG{zDP4x zUH=P@4~a+wJSE=M2~Cv_)vP5S>BOQFo|@z%4HzMnMqBHUkBDO-P5h}A`F9X~YM_Z? z;bNkI==Vz*Vv`xImq97)^-aHnnx-q~I&dCU$OsGfp#_34DC+T;*} zE-yrJ3`6Q#hIsI_Y}Z|F@G9myA&wR9RgtU7^tS4^Q1DNcTXzj%rRwWi$i@vzlHkQA z!qhc$O9Q7-(XQyNtkfh$qjn*-X>WiPG@K_+ub$K<<5jCw;V18>2s!Q~wvD4(E$&Kb zTED|qq;`BSmAhv+T88mL{6vGu`u8yl?O>Oa*8xD~y-B)?riBgO+Uh}%$*|-xz;`NX zsbnL1;eArCyAV6nlp#qT9@n+rp%1sn6W#g+j1J&q%OkbPtzBI6imJ*|^JF0-6nqo$ z#M97?;yhE6fkuL7>!#}qMuge8+=}?PD9}y%Pr^$ky$pYDUzpjhO)*H6X84AL#6$*1 z#1*%>x9eT@j_R!%QdM=mW}%iI(KWC-b#BS6Q0}{6bA+)dJ7nb(J~Q>=?~nP+lWEfx zf?D|L5v7K}LxnXlX`kkjFXA5oz$$873AX)f)t0nREl#!kp<>;SffGYDSV+UTDRKCk z#5#R2^jPtSo~9u4U7zfMJ9gFBsWM()c4=q?i4> z%~pIwn)qV(?!Xzyx17+eV?DU3x)g5af?;z?zjTxfV-?0oyX-GiNmbUl&tNulGAm)` zcl@J*&nTyFqh6&4{A7F;L#cwjFk9pUnas#D<`xsDioBpz;Uetc(>}kBighuD#L5Lc zW90Fn10C`rh{!0+d`+KRD6Rq26NNNwq|ma5f5sF*>m@;jRLcBl{mfGwcPqhDzE^r) zSe11Xz}Sl$8)D6g{nD$4Qa~qODHwj4{tDj<`YJ0X>=Ci`;!&ykM0_M1NR_v*(Spe%iH$ z;Yf%jsG7^F{b33bSlN~Wo)ynC%*t;autSJ_1C8J`L*uZ<_3QZH>C1qU?91kX$)WuW>EB$B7YOhfhbu|mMP1h{Wj-UJ)9upod7lubF z;>6gmKg_i(Umh-KD>E%Q8--_aEeYMz!TxgesMa>stm@skJ>8Gth_+Pcil>+CulGW- z^B=h}9&yUBl)FUt~O>9fh7u?n189`t089))Pk)W5wC@ zw6>Hn19>D00HlfFNcW*y9PINW8y%XTc8vRRH5k-eMA;1^9m_&)KLmV+lF)0ld0DrQ ztY}Q0Qny0?N~dASv>B*aN3-8#I6=E(MA%z6Ew9H743T|baYpSMA3dk?OF#gbj)`<+ zv}7uycQ&{jHq)yh;WA--20d}(RrbQ%(j(GhYR|+Ad6nH7 zWS1WvvFbmdHMtY-viFhLCT5wf{ccrW4dS#&QLwdZV3VKZw+RD(dg4bgMF`kbx%)M0 za_QFHE1*2rm&KCY|<8- zfB_AgHoXd8go6tdtnQk_O5M%r!-)0_#XAy!l3$k>^rbA7U#AY}8I@q&x^jxdmYj!! zL*!p!CGGE8egdrXXL`vvBXlM#ek7gtE%+DmRJ0{Ywy*L<8G7MyoY0=X7MzQ54#TE? zcvk*WCbgYpvq6FzuUTQaLxDk4L!l#7^@|4Nrw_Y8A-=l1|2O1V%N8k}k2A+5;WZ($ zGti#SUlQ%Xr1NMZ?@QI5+)S*3f9G+D0IF$EiH!s*!1PJt{i#Kn-w@$BJVEDkfW01^ z)1@5Da;viha!x}`8-(2aptxliND8@_q!8;u1K|V+bNs%ZBH1X_HRG&;%{vYt_pen0 zfucqh%&PB){~<2=evrNu&XIN`-V2qX-`fDM8JBb<>L>(ZVW)zgN2VPSgDFe|u^R;d zCAOf0!`J+R$xMd;K?#6;D`*z6=kU;6(g(tKb0_P zX*IZVOgajg`*RPX+nlPPcwFuuT=Jlt1^N&msI(qKzIdbxAAMyN>=9ai`co~6&WaNh zk1O#rkh(0W*k!@jiZlUL)kg4vtvVJkPjc!Cv6W$&NvtSNy%;!&ujFRe1;D9V?-+I4PhFS?wkxkr%0hIn+WH0Z_{HnYu4IJ;2e%AfoJru&jwlmdM-4+i{JUTvNV(| zAWKcb*hzLmMOEj+gwVVQye3pJ4CcCgRewadeLZ6fs##GKz}tzu$*PHgf#>*(y>W{>5$m$FR$Mb@ zfLyy%4ptfoRoW={D84syO$fnLXl0FA@LD+~WDc>fmPa z)VblBU}=6CY_7tb+8w2gzIJY_2A})CUY&xq{3w;iXN$VN%Tzsd;f$6g3`dd#9_7kM zQ4aL3=8q-4|BCD>2fXQWYcZR``OMtM0Sf%E6$_R4VF>3_O9>yi<^(*uf6PHLg-(sW zpFhLIM!fAi+LB7b-zC3-*t8c^88@H@(J93;ThjS;z=G>7`+~FM!Qd{V?jON+tK>HL#Kz}Sh?ze}1}A-=0{Kae!8~!VZ@mi|+JQGZZ@DF!fa8L(L9LZp zo-c>WYmy(ED#eV(Jb<1^!pxc*StK@r0rlV8an*$>LI@qq#;Aav<_HAVQy}J8oCz>D z3;izOGm?$kPE**8xdc|cyY=Auj7z2IpI~l7KF{~Lx^dXfXc)(R;cq!&JNkQGwv!U1 zza-D7`6vveIy@^!Le0>A&{0nvg(kNKB1zOMivj z<+=hvpkBEkq0?b`OXvA^CIFm{mnrAN*zb$gApt;6h6bU7&g_oEZ5tuir8uN%FriGb z!Ns4a7ff#)6#x(6FH>U$cH9 zA!ounUMn+~DZe*xE%rh7?FwIlpOFxy$fj5hn8Zr$Ypyn!WOm%)B`n?2S0PF3GNV!Dh~Jx1y5N5KFWAj zZguHzW8O4o%)7esB!lV)O>LBA{*TafqFq6q*KKwQM%3d(0pE0HJ&jXb3$u~{znv_0 ztC-IW0~*r2DcPQKDy+>_kBCkKbV`37Jymwm{{tL3r$aWM_&%pSt3_a)mjEhFi@BIY zfiCoAelxjjX?kSzI?WY`(?Ei0$}n`dqaOjV1f-U!g->M(PRfwjk~Cw@W=q}(^#Bnu zwivu;&?k{Va@#NHLC9zFhdUB0NdUgmxNqD2O2VQP}K^ka>U`5UqMQllSoi zyVojTf!0sRGd^VIpAVb(yMQH|p|RLJ%y;JfZNBh_Rz%U(Ap9%*M1p zCk8f_)Sb69F$h;^v9ab7MR9er3dq)G-Rz0dZSC!$ORqHCAO$NN3a z-2|l>4}t=DxbNE;e~{Snne9wHB*+`zF(k+ME?)6eWc^PS z<2&hSnn@+z8MQd@>BDZMwsd+xj>~bgy`+gVx)7F+UYg#eeiyj&EK~@q%96(%wji}; zlM`~>L*E;na7G+@n*_3}K9jN}#MY4rFo%4H9fy52$q9$5+o2~#)buUD+LQKuYAx$l zD}O2`X<`UR-k($c4OoJbF>BuM1si~hby779$F0}>vD+T!Fly>YVBI)X93gP~dV5$r zZiW&#FU1I)2~dYzH`j3ct&#g#wZ2er)4~xqc+C%(wC9NB4?9Dg0|zh3vh6)9Cji7I zZv58Il*oBWhJ*29ub|+-!fN1GqozhdI%6t)gI+gD@*jiVYEnFH^Nm{~HX7bGa1V8) zel7WQ`Ad-t=Be<I1nC5aCzLWV$y3W*Q{JhEcL)5u3JB=5qf1*rcEb?AKR$vG(p zu;*5N=oy^Di?BbcoLn0&09-1@z>9zx@qTFE#q54t5VT-X;C-SuxoT*rZapyg>4uAl zDAv0;VS3Xj*jlPW(p)hB4y`Ci*qOuA`2tu;%5l8tm@NO?-#1Bm+%rh9M|N()P|0*< zkCR%|b^BM$dG_xxbKZ8Hzs-3Osg8e}^Vaj3iEqwBE_?Uk9J(o(MrZq1Ev8JVusWPY zv5;-_P<+qB#?_K=&baKq2-fIToR7z@U^7vm7VRI?G+bwMIZO5*f~w|I6TsnPE6~*P zUKQMJE-+)7>?c_FJwDgD7S0J$0M^ZWAGVW$!LA_$drC49Rg#T{`z?G=`U*eU0e-rl zM_ZmGlP_)(fX__LC;z;N?x&`^K=)+12BO%fWcaqVx&^}*1R>~JkOE(fb+&+K~MbwX!74xi-qWB=c z__ssq)uuTZI=#6iN%sH58_LK4=u}dg){39qST7Y9Q!dRI4mcd8_w9zOS}iFDNKoC} z8yZ!Wrpi-wb(lFXqvy9X?f4>F^-5I?(Jlx`tB+)oy8A~g{ zd5wBKE4Q?yR-{uX*U%Fc+ZNr?;lj+X8Na&7_@h}xnP2T}yWAr1nSa(Srq`IK-@!jh zsc{A0{pM4S3Xqlur7~ubZ@8mWx~>EPvj150#w7o@GjC+Yr1yWEdD)ni!Ke~lspipQ z zRh}{`Rzc|g#d=Wh8h?Bo-1Ptqq2Is%J)8!8dAAhv2|6*fft*1(T7HwTKj+e*i$@8T@%`91x z_4EeLsKqs6h87QI8~ZTr=%jY7ayc}-q{5gAN^9FOCPYPul|VaEvI^Tebd$uFn?`Gz zv(hdqJc1&z{}-_~8TjVL0Lb(LGti3(3Dgd_gf0|?h9&DGh5(+H6uZKD=a%uTtC&Bp zGzIwcRJM?~jdd`yda!(2Fr>J)i~wj{f!dn^JU--9BWW> zC@EYpK>Xt{171a1O1aBQ!G08W&X*Xa>x`zwjJm=5XDiY2MZ?fzNgZW%CBD%7JP$25 zZ9ezPZzdzXD;<>d_rVbXkESe-v>$3Vkz#SZfq(Dk(c`NNqo?cTkOIJPxiwuiJ?$nj zwD6#~$#3T+P^DKRuLTHbi;N`XKp>#9FihTtKsHkU lUHorv{PQq4<@500;EU&E()S$3{&(GuZFavs-0E@a{{d}i9a{hZ literal 0 HcmV?d00001 diff --git a/src/assets/list.png b/src/assets/list.png new file mode 100644 index 0000000000000000000000000000000000000000..befcd180278534204598bdcaad058a65d4ba639d GIT binary patch literal 154 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjY)RhkE)4%caKYZ?lYt`so-U3d z9-YYv60FR;5(`a)nVFqMrtF>4*!a+Xt8Q1L)UWxCjfzs9f9zQ$-WAPaa#OM5%KBWy xCdG2`0_)a@!#Wm+-#=&kRPOZN1H1k0JvoYA^dxaK>$o*vd{ED}vEOXPL2h=PdPC*)CuZeJ z-L`)&72=e;{_FP4;M+4#g=U=WH7K|x!n?WMpeN|oM4NrTI3n_XSp|gweZk=A>gTe~ HDWM4fU*c;q literal 0 HcmV?d00001 diff --git a/src/components/UI/ButtonExample.tsx b/src/components/UI/ButtonExample.tsx index 57a95d8..d70a32e 100644 --- a/src/components/UI/ButtonExample.tsx +++ b/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 = 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 diff --git a/src/components/UI/Map.tsx b/src/components/UI/Map.tsx index d64d22e..f4821e6 100644 --- a/src/components/UI/Map.tsx +++ b/src/components/UI/Map.tsx @@ -13,10 +13,12 @@ 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" -const MapContainer = styled.div` +export const MapContainer = styled.div` height: calc(100vh - 71px); // width: 100vw; @@ -32,38 +34,38 @@ const MapContainer = styled.div` ` 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: 430px; + 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: 70px; - 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 - (70px + 92px)); - left: 0; - overflow: scroll; - position: absolute; - top: calc(70px + 92px); - width: 430px; - z-index: 500; } ` @@ -88,6 +90,11 @@ export default ({ defaultLocation }: Map) => { defaultLocation || US_LOCATION ) + const mq = window.matchMedia("(max-width: 575px)") + + let [show, setShow] = useState('both') + if (mq.matches) [show, setShow] = useState('list') + return ( { src={filterIcon}> Filter + {mq.matches ? setShow(show === 'map' ? 'list' : 'map')} + toggle={show} > + {show === 'map' ? 'list' : 'map'} + + :
} - - - - - + { show === 'both' || show === 'map' ? + { )} + :
} + { show === 'both' || show === 'list' ? + + + :
}
)} ) -} +} \ No newline at end of file diff --git a/src/components/UI/Marker.tsx b/src/components/UI/Marker.tsx index 583a890..8c9f527 100644 --- a/src/components/UI/Marker.tsx +++ b/src/components/UI/Marker.tsx @@ -1,10 +1,7 @@ import styled from "styled-components" import { Popover, Overlay } from "react-bootstrap" -// import { Overlay } from 'react-native' import React, { useContext, useRef, useState } from "react" import { CustomMarker } from "react-instantsearch-dom-maps" -import MediaQuery from 'react-responsive'; -import mediaQuery from 'css-mediaquery'; import { Pin } from "../common/Pin" import { GmapsTypeIcon } from "../common/GmapsType" diff --git a/src/components/common/Button.tsx b/src/components/common/Button.tsx index 6187e7a..8bba91a 100644 --- a/src/components/common/Button.tsx +++ b/src/components/common/Button.tsx @@ -4,11 +4,12 @@ import styled from "styled-components" const getWidth = (size = "medium") => ({ small: "53.5px", medium: "107px", large: "244px" }[size] || "107px") -interface ButtonProps { +interface ButtonProps extends React.ButtonHTMLAttributes{ border?: boolean - size?: string primary?: boolean width?: string + size?: string + toggle?: string } const Button = styled.button` @@ -38,7 +39,6 @@ const Button = styled.button` interface IconButtonProps extends ButtonProps { alt?: string - children: React.ReactNode src: string } @@ -61,4 +61,25 @@ export const IconButton = ({ ) } +interface MapListButtonProps extends ButtonProps { + alt?: string + src: string +} + +export const MapListButton = ({ + alt, + children, + src, + toggle, + ...buttonProps +}: MapListButtonProps) => { + console.log(toggle) + return ( + + ) +} + export default Button From 90f7f7372f5a7e56596ee1798d6be940f5628423 Mon Sep 17 00:00:00 2001 From: scurry222 Date: Sun, 26 Jul 2020 18:39:03 -0700 Subject: [PATCH 4/5] replace matchMedia method with custom media query hook --- src/components/UI/Map.tsx | 22 ++++++++++---------- src/components/common/Button.tsx | 3 +-- src/components/common/MediaQuery.tsx | 30 ++++++++++++++++++++++++++++ 3 files changed, 41 insertions(+), 14 deletions(-) create mode 100644 src/components/common/MediaQuery.tsx diff --git a/src/components/UI/Map.tsx b/src/components/UI/Map.tsx index f4821e6..89e2590 100644 --- a/src/components/UI/Map.tsx +++ b/src/components/UI/Map.tsx @@ -17,10 +17,10 @@ import mapIcon from "../../assets/map.png" import listIcon from "../../assets/list.png" import LocationProvider from "../../contexts/LocationContext" import { IconButton as FilterButton, MapListButton } from "../common/Button" +import { useWindowSize } from '../common/MediaQuery'; export const MapContainer = styled.div` height: calc(100vh - 71px); - // width: 100vw; @media (min-width: 980px) { position: absolute; @@ -89,11 +89,9 @@ export default ({ defaultLocation }: Map) => { const [location, setLocation] = useState( defaultLocation || US_LOCATION ) - - const mq = window.matchMedia("(max-width: 575px)") - - let [show, setShow] = useState('both') - if (mq.matches) [show, setShow] = useState('list') + const mq = useWindowSize(); + const mdScreen = mq.width < 575 + let [show, setShow] = useState(true) return ( @@ -125,19 +123,19 @@ export default ({ defaultLocation }: Map) => { src={filterIcon}> Filter - {mq.matches ? setShow(show === 'map' ? 'list' : 'map')} + src={show === true ? listIcon : mapIcon} + onClick={() => setShow(!show)} toggle={show} > - {show === 'map' ? 'list' : 'map'} + {show ? 'map' : 'list'} :
} - { show === 'both' || show === 'map' ? + { !mdScreen || show ? { :
} - { show === 'both' || show === 'list' ? + { !mdScreen || !show ? :
} diff --git a/src/components/common/Button.tsx b/src/components/common/Button.tsx index 8bba91a..b9ce0ca 100644 --- a/src/components/common/Button.tsx +++ b/src/components/common/Button.tsx @@ -9,7 +9,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes{ primary?: boolean width?: string size?: string - toggle?: string + toggle?: boolean } const Button = styled.button` @@ -73,7 +73,6 @@ export const MapListButton = ({ toggle, ...buttonProps }: MapListButtonProps) => { - console.log(toggle) return (