From 8023484aa73f6b6c04f137477c4ef5e87eeab3bd Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Fri, 3 Mar 2017 21:22:44 +0000
Subject: [PATCH] Make map responsive Keep all visible in nav

---
 src/components/Map/Map.js                | 21 +++++++++++++++++----
 src/components/Navigation/Navigation.css |  7 ++-----
 src/routes/accomodation/Accomodation.css |  4 ----
 src/routes/accomodation/Accomodation.js  | 14 ++++++--------
 src/routes/ceremony/Ceremony.css         |  4 ----
 src/routes/ceremony/Ceremony.js          | 14 ++++++--------
 src/routes/reception/Reception.css       |  4 ----
 src/routes/reception/Reception.js        | 14 ++++++--------
 8 files changed, 37 insertions(+), 45 deletions(-)

diff --git a/src/components/Map/Map.js b/src/components/Map/Map.js
index 7247d4a..06c0735 100644
--- a/src/components/Map/Map.js
+++ b/src/components/Map/Map.js
@@ -14,7 +14,7 @@ class Map extends React.Component {
   };
 
   render() {
-    const CeremonyGoogleMap = withGoogleMap(() => (
+    const GMap = withGoogleMap(() => (
       <GoogleMap
         defaultZoom={this.props.defaultZoom}
         defaultCenter={{ lat: this.props.lat, lng: this.props.lng }}
@@ -29,12 +29,25 @@ class Map extends React.Component {
       </GoogleMap>
     ));
     return (
-      <CeremonyGoogleMap
+      <GMap
         containerElement={
-          <div style={{ height: '360px', width: '360px' }} />
+          <div
+            style={{
+              height: '360px',
+              width: '100%',
+              'max-width': '480px',
+              overflow: 'hidden',
+            }}
+          />
         }
         mapElement={
-          <div style={{ height: '360px', width: '360px' }} />
+          <div
+            style={{
+              height: '360px',
+              width: '100%',
+              'max-width': '480px',
+            }}
+          />
         }
       />
     );
diff --git a/src/components/Navigation/Navigation.css b/src/components/Navigation/Navigation.css
index 3ad0bfc..8181df9 100644
--- a/src/components/Navigation/Navigation.css
+++ b/src/components/Navigation/Navigation.css
@@ -17,16 +17,13 @@
 }
 
 .link,
-.link:active,
 .link:visited {
   color: rgba(255, 255, 255, 0.8);
 }
 
+.active,
+.link:active,
 .link:hover {
   color: rgba(255, 255, 255, 1);
   border-color: #fff;
 }
-
-.active {
-  display: none;
-}
diff --git a/src/routes/accomodation/Accomodation.css b/src/routes/accomodation/Accomodation.css
index 4b5e2d1..eb389dc 100644
--- a/src/routes/accomodation/Accomodation.css
+++ b/src/routes/accomodation/Accomodation.css
@@ -52,7 +52,3 @@
 .hotelLink:focus {
   color: rgba(255, 255, 255, 1);
 }
-
-.map {
-  width: 360px;
-}
diff --git a/src/routes/accomodation/Accomodation.js b/src/routes/accomodation/Accomodation.js
index c48ce33..e7889f6 100644
--- a/src/routes/accomodation/Accomodation.js
+++ b/src/routes/accomodation/Accomodation.js
@@ -55,14 +55,12 @@ class Accomodation extends React.Component {
                 <li key={index}><a className={s.hotelLink} href={hotel.url}>{hotel.title}</a></li>
               ))}
             </ul>
-            <div className={s.map}>
-              <Map
-                defaultZoom={12}
-                lat={offley[0].lat}
-                lng={offley[0].lng}
-                markers={hotels}
-              />
-            </div>
+            <Map
+              defaultZoom={12}
+              lat={offley[0].lat}
+              lng={offley[0].lng}
+              markers={hotels}
+            />
           </div>
         </div>
       </div>
diff --git a/src/routes/ceremony/Ceremony.css b/src/routes/ceremony/Ceremony.css
index d5ede26..93f734d 100644
--- a/src/routes/ceremony/Ceremony.css
+++ b/src/routes/ceremony/Ceremony.css
@@ -46,7 +46,3 @@
   color: #fff;
   text-shadow: 1px 1px 4px var(--colour-nearblack);
 }
-
-.map {
-  width: 360px;
-}
diff --git a/src/routes/ceremony/Ceremony.js b/src/routes/ceremony/Ceremony.js
index 750fbb6..68a67c8 100644
--- a/src/routes/ceremony/Ceremony.js
+++ b/src/routes/ceremony/Ceremony.js
@@ -30,14 +30,12 @@ class Ceremony extends React.Component {
             <p>The Church is located at the southern end of Kings Langley high street.
               Parking is available across the road at the Rose and Crown pub
               (Dan may be there before 1pm 😉).</p>
-            <div className={s.map}>
-              <Map
-                defaultZoom={14}
-                lat={markers[0].lat}
-                lng={markers[0].lng}
-                markers={markers}
-              />
-            </div>
+            <Map
+              defaultZoom={14}
+              lat={markers[0].lat}
+              lng={markers[0].lng}
+              markers={markers}
+            />
             <h3>About the church</h3>
             <p>All Saints Church is a medieval church with parts dating from the 13th century.
               The main features of the body of the Church are the beautiful reredos, depicting
diff --git a/src/routes/reception/Reception.css b/src/routes/reception/Reception.css
index a1feb6e..0fcc61f 100644
--- a/src/routes/reception/Reception.css
+++ b/src/routes/reception/Reception.css
@@ -46,7 +46,3 @@
   color: #fff;
   text-shadow: 1px 1px 4px var(--colour-nearblack);
 }
-
-.map {
-  width: 360px;
-}
diff --git a/src/routes/reception/Reception.js b/src/routes/reception/Reception.js
index 05c7338..1ea6c88 100644
--- a/src/routes/reception/Reception.js
+++ b/src/routes/reception/Reception.js
@@ -33,14 +33,12 @@ class Reception extends React.Component {
               followed by music until late.</p>
             <h3>Where</h3>
             <p>The venue is approximately 30 minute drive from the Church.</p>
-            <div className={s.map}>
-              <Map
-                defaultZoom={12}
-                lat={offley[0].lat}
-                lng={offley[0].lng}
-                markers={offley}
-              />
-            </div>
+            <Map
+              defaultZoom={12}
+              lat={offley[0].lat}
+              lng={offley[0].lng}
+              markers={offley}
+            />
           </div>
         </div>
       </div>