Add Ceremony page with google map

Add nav bar to public pages
2017-03-01 23:28:26 +00:00
parent 92899edbe5
commit 6a7b57dbe4
17 changed files with 273 additions and 5 deletions
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
    "query-string": "^4.2.3",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
+    "react-google-maps": "6",
    "react-icon-base": "^2.0.4",
    "react-icons": "^2.2.3",
    "rollbar": "^0.6.3",
--- a/src/components/CeremonyMap/CeremonyMap.js
+++ b/src/components/CeremonyMap/CeremonyMap.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
+
+class CeremonyMap extends React.Component {
+  render() {
+    const CeremonyGoogleMap = withGoogleMap(() => (
+      <GoogleMap
+        defaultZoom={14}
+        defaultCenter={{ lat: 51.7109, lng: -0.4479 }}
+      >
+        <Marker
+          title="All Saints' Church"
+          position={{ lat: 51.7109, lng: -0.4479 }}
+          key="0"
+        />
+      </GoogleMap>
+    ));
+    return (
+      <CeremonyGoogleMap
+        containerElement={
+          <div style={{ height: '360px', width: '360px' }} />
+        }
+        mapElement={
+          <div style={{ height: '360px', width: '360px' }} />
+        }
+      />
+    );
+  }
+}
+
+export default CeremonyMap;
--- a/src/components/CeremonyMap/package.json
+++ b/src/components/CeremonyMap/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "CeremonyMap",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./CeremonyMap.js"
+}
--- a/src/components/Html.js
+++ b/src/components/Html.js
@@ -23,6 +23,7 @@ class Html extends React.Component {
          <link rel="apple-touch-icon" href="apple-touch-icon.png" />
          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Palanquin+Dark|Niconne" />
          {style && <style id="css" dangerouslySetInnerHTML={{ __html: style }} />}
+          <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAY-RO-FaBZyAh8FDJneMc6NjMdK2D8WtQ" />
        </head>
        <body>
          <div id="app" dangerouslySetInnerHTML={{ __html: children }} />
--- a/src/components/Layout/Layout.js
+++ b/src/components/Layout/Layout.js
@@ -1,15 +1,18 @@
 import React, { PropTypes } from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './Layout.css';
+import Navigation from '../Navigation';

 class Layout extends React.Component {
  static propTypes = {
    children: PropTypes.node.isRequired,
+    current: PropTypes.string,
  };

  render() {
    return (
      <div>
+        <Navigation current={this.props.current} />
        {this.props.children}
      </div>
    );
--- a/src/components/Navigation/Navigation.css
+++ b/src/components/Navigation/Navigation.css
@@ -0,0 +1,32 @@
+.root {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.link {
+  display: inline-block;
+  padding: 8px 8px 6px;
+  text-decoration: none;
+  font-size: 1.125em;
+  border-bottom: 2px solid transparent;
+  transition: color 0.3s ease-in, border-color 0.3s ease-in;
+}
+
+.link,
+.link:active,
+.link:visited {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.link:hover {
+  color: rgba(255, 255, 255, 1);
+  border-color: #fff;
+}
+
+.active {
+  display: none;
+}
--- a/src/components/Navigation/Navigation.js
+++ b/src/components/Navigation/Navigation.js
@@ -0,0 +1,24 @@
+import React, { PropTypes } from 'react';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import s from './Navigation.css';
+import Link from '../Link';
+
+class Navigation extends React.Component {
+  static propTypes = {
+    current: PropTypes.string,
+  };
+
+  render() {
+    if (!this.props.current) {
+      return null;
+    }
+    return (
+      <div className={s.root} role="navigation">
+        <Link className={[s.link, this.props.current === 'home' ? s.active : null].join(' ')} to="/">RSVP</Link>
+        <Link className={[s.link, this.props.current === 'ceremony' ? s.active : null].join(' ')} to="/ceremony">Church</Link>
+      </div>
+    );
+  }
+}
+
+export default withStyles(s)(Navigation);
--- a/src/components/Navigation/package.json
+++ b/src/components/Navigation/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "Navigation",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Navigation.js"
+}
--- a/src/routes/ceremony/Ceremony.css
+++ b/src/routes/ceremony/Ceremony.css
@@ -0,0 +1,56 @@
+@import '../../components/variables.css';
+
+.root {
+  width: 100vw;
+  height: 100vh;
+}
+
+.bgImage {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  background: url('/img/church_2560.jpg');
+  background-size: cover;
+  background-position-x: 54%;
+  background-color: #c1c1c1;
+  filter: grayscale(1) brightness(0.6);
+  z-index: -1;
+  transition: filter ease-in-out 0.5s;
+}
+
+.bgImageFocus {
+  filter: grayscale(0.4) brightness(1);
+}
+
+.container {
+  padding-top: 50px;
+  margin: 0 20px;
+}
+
+.headings {
+  max-width: 640px;
+  margin: 0 auto 40px;
+  text-align: center;
+  color: #fff;
+  text-shadow: 3px 3px 8px var(--colour-nearblack);
+  font-size: 1.3em;
+}
+
+.headings h1 {
+  margin: 0 0 10px;
+}
+
+.subheading {
+  font-family: var(--font-family-cursive);
+}
+
+.content {
+  max-width: 960px;
+  margin: 0 auto;
+  color: #fff;
+  text-shadow: 1px 1px 4px var(--colour-nearblack);
+}
+
+.map {
+  width: 360px;
+}
--- a/src/routes/ceremony/Ceremony.js
+++ b/src/routes/ceremony/Ceremony.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import s from './Ceremony.css';
+import CeremonyMap from '../../components/CeremonyMap';
+
+class Ceremony extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  focusBgImage = (focus) => {
+    this.setState({ focusBgImage: focus });
+  }
+
+  render() {
+    return (
+      <div className={s.root}>
+        <div
+          className={[
+            s.bgImage,
+            this.state.focusBgImage ? s.bgImageFocus : null,
+          ].join(' ')}
+        />
+        <div className={s.container}>
+          <div className={s.headings}>
+            <h1>All Saints&#8217; Church</h1>
+            <h2 className={s.subheading}>Church Lane<br />Kings Langley<br />WD4 8JS</h2>
+          </div>
+          <div className={s.content}>
+            <h3>When</h3>
+            <p>The Ceremony begins at 1pm</p>
+            <h3>Where</h3>
+            <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}>
+              <CeremonyMap />
+            </div>
+            <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
+              The Last Supper, and the fine Jacobean pulpit with its intricate carvings.
+              The Tower has a peal of 8 bells that are regularly rung before Services.</p>
+            <p>The church was chosen because it is Dan&#8217;s family church.</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withStyles(s)(Ceremony);
--- a/src/routes/ceremony/index.js
+++ b/src/routes/ceremony/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import Ceremony from './Ceremony';
+import Layout from '../../components/Layout';
+
+export default {
+
+  path: '/ceremony',
+
+  action() {
+    return {
+      title: 'Ceremony',
+      component: <Layout current="ceremony"><Ceremony /></Layout>,
+    };
+  },
+};
--- a/src/routes/home/Home.css
+++ b/src/routes/home/Home.css
@@ -23,7 +23,7 @@
 }

 .container {
-  padding-top: 5vh;
+  padding-top: 50px;
  margin: 0 20px;
 }

--- a/src/routes/home/index.js
+++ b/src/routes/home/index.js
@@ -9,7 +9,7 @@ export default {
  action() {
    return {
      title: 'Welcome',
-      component: <Layout><Home /></Layout>,
+      component: <Layout current="home"><Home /></Layout>,
    };
  },
 };
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -9,6 +9,7 @@ export default {
  children: [
    require('./home').default,
    require('./rsvp').default,
+    require('./ceremony').default,
    require('./login').default,
    require('./admin').default,
    require('./adminPeople').default,
--- a/src/routes/notFound/NotFound.css
+++ b/src/routes/notFound/NotFound.css
@@ -7,6 +7,6 @@

 .container {
  margin: 0 auto;
-  padding: 0 0 40px;
+  padding: 50px 0 40px;
  max-width: var(--max-content-width);
 }
--- a/src/routes/rsvp/index.js
+++ b/src/routes/rsvp/index.js
@@ -38,7 +38,7 @@ export default {
    return {
      title,
      component: (
-        <Layout>
+        <Layout current="home">
          <Rsvp
            title={title}
            people={people}
--- a/yarn.lock
+++ b/yarn.lock
@@ -1315,6 +1315,10 @@ camelcase@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"

+can-use-dom@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a"
+
 caniuse-db@^1.0.30000187, caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000597:
  version "1.0.30000602"
  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000602.tgz#06b2cbfb6c3aeef7ddb18cd588043549ad1a2d4e"
@@ -3016,6 +3020,10 @@ gonzales-pe@^4.0.3:
  dependencies:
    minimist "1.1.x"

+google-maps-infobox@^1.1.13:
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/google-maps-infobox/-/google-maps-infobox-1.1.14.tgz#daed6c9775696056408e767d17f4b13b6fe1d02d"
+
 graceful-fs@^3.0.2, graceful-fs@^3.0.4:
  version "3.0.11"
  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-3.0.11.tgz#7613c778a1afea62f25c630a086d7f3acbbdd818"
@@ -4050,7 +4058,7 @@ lodash@^4.0.0, lodash@^4.15.0, lodash@^4.16.4, lodash@^4.17.2, lodash@^4.6.1:
  version "4.17.2"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.2.tgz#34a3055babe04ce42467b607d700072c7ff6bf42"

-lodash@^4.1.0, lodash@^4.17.4, lodash@^4.3.0:
+lodash@^4.1.0, lodash@^4.16.2, lodash@^4.17.4, lodash@^4.3.0:
  version "4.17.4"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"

@@ -4137,6 +4145,10 @@ markdown-it@^8.2.2:
    mdurl "^1.0.1"
    uc.micro "^1.0.3"

+marker-clusterer-plus@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/marker-clusterer-plus/-/marker-clusterer-plus-2.1.4.tgz#f8eff74d599dab3b7d0e3fed5264ea0e704f5d67"
+
 math-expression-evaluator@^1.2.14:
  version "1.2.14"
  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.14.tgz#39511771ed9602405fba9affff17eb4d2a3843ab"
@@ -5457,6 +5469,10 @@ react-deep-force-update@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-2.0.1.tgz#4f7f6c12c3e7de42f345992a3c518236fa1ecad3"

+react-display-name@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/react-display-name/-/react-display-name-0.2.0.tgz#0e1f7086e45a32d07764df35ed32ff16f1259790"
+
 react-dom@^15.4.1:
  version "15.4.1"
  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.1.tgz#d54c913261aaedb17adc20410d029dcc18a1344a"
@@ -5465,6 +5481,21 @@ react-dom@^15.4.1:
    loose-envify "^1.1.0"
    object-assign "^4.1.0"

+react-google-maps@6:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/react-google-maps/-/react-google-maps-6.0.1.tgz#8d2c57631a8bc3a8d65257d7b3f95738f33476bc"
+  dependencies:
+    babel-runtime "^6.11.6"
+    can-use-dom "^0.1.0"
+    google-maps-infobox "^1.1.13"
+    invariant "^2.2.1"
+    lodash "^4.16.2"
+    marker-clusterer-plus "^2.1.4"
+    react-display-name "^0.2.0"
+    react-prop-types-element-of-type "^2.2.0"
+    scriptjs "^2.5.8"
+    warning "^3.0.0"
+
 react-hot-loader@^3.0.0-beta.6:
  version "3.0.0-beta.6"
  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-3.0.0-beta.6.tgz#463fac0bfc8b63a8385258af20c91636abce75f4"
@@ -5486,6 +5517,10 @@ react-icons@^2.2.3:
  dependencies:
    react-icon-base "2.0.4"

+react-prop-types-element-of-type@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/react-prop-types-element-of-type/-/react-prop-types-element-of-type-2.2.0.tgz#bcc332d3903c2259cf68c28a81c4a663faba59ac"
+
 react-proxy@^3.0.0-alpha.0:
  version "3.0.0-alpha.1"
  resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz#4400426bcfa80caa6724c7755695315209fa4b07"
@@ -5887,6 +5922,10 @@ sax@~1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"

+scriptjs@^2.5.8:
+  version "2.5.8"
+  resolved "https://registry.yarnpkg.com/scriptjs/-/scriptjs-2.5.8.tgz#d0c43955c2e6bad33b6e4edf7b53b8965aa7ca5f"
+
 "semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.0.1, semver@~5.3.0:
  version "5.3.0"
  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"