Merge branch 'master' into issue#161

alexspence · web-flow · commit 6c3e38cfff5a · 2017-06-15T21:32:51.000-05:00
diff --git a/Dockerfile b/Dockerfile
@@ -9,6 +9,7 @@ WORKDIR /usr/src/app
 
 # Install app dependencies
 COPY package.json /usr/src/app/
+COPY yarn.lock /usr/src/app/
 RUN yarn install --no-progress
 
 # Bundle app source
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "font-awesome": "^4.7.0",
     "history": "^4.6.1",
     "lodash": "^4.17.4",
+    "postscribe": "^2.0.8",
     "prop-types": "^15.5.8",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
diff --git a/src/images/Family-2.jpg b/src/images/Family-2.jpg
diff --git a/src/images/Family-2.png b/src/images/Family-2.png
diff --git a/src/images/Family-mobile.jpg b/src/images/Family-mobile.jpg
diff --git a/src/images/icons/newburger.png b/src/images/icons/newburger.png
diff --git a/src/scenes/home/gala/gala.css b/src/scenes/home/gala/gala.css
@@ -0,0 +1,12 @@
+.container {
+  width:80%;
+}
+
+#tt-widget {
+  width: 100%;
+}
+
+.header {
+  text-align: center;
+  padding-bottom: 20px;
+}
diff --git a/src/scenes/home/gala/gala.js b/src/scenes/home/gala/gala.js
@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import Section from 'shared/components/section/section';
+import postscribe from 'postscribe';
+
+import styles from './gala.css';
+
+class Gala extends Component {
+
+  componentDidMount() {
+    const script = document.createElement('script');
+
+    script.src = 'https://dc161a0a89fedd6639c9-03787a0970cd749432e2a6d3b34c55df.ssl.cf3.rackcdn.com/tt-widget.js';
+    script.async = true;
+    script.setAttribute('data-url', 'https://www.tickettailor.com/new-order/99297/d163/ref/website_widget/');
+    script.setAttribute('data-type', 'inline');
+    script.setAttribute('data-inline-minimal', 'true');
+    script.setAttribute('data-inline-show-logo', 'false');
+    script.setAttribute('data-inline-bg-fill', 'true');
+
+    postscribe('#tt-widget', script.outerHTML);
+  }
+
+  render() {
+    return (
+      <Section title="Operation Code Gala">
+        <div className={styles.header}>
+          <h3>Nov 10, 2017</h3>
+          <h3>Governor&#39;s Ballroom, Sentinel Hotel</h3>
+          <h3>Portland, Oregon</h3>
+        </div>
+        <div className={styles.container}>
+          <div id="tt-widget">
+            <div className="tt-widget-fallback">
+              <p>
+                <a href="https://www.tickettailor.com/new-order/99297/d163/ref/website_widget/" target="_blank" rel="noopener noreferrer">Click here to buy tickets</a><br />
+                <small><a href="http://www.tickettailor.com?rf=wdg" className="tt-widget-powered">Sell tickets online with Ticket Tailor</a></small>
+              </p>
+            </div>
+          </div>
+        </div>
+      </Section>
+    );
+  }
+}
+
+export default Gala;
diff --git a/src/scenes/home/header/burger/burger.css b/src/scenes/home/header/burger/burger.css
@@ -3,17 +3,21 @@
 }
 
 .burger img {
-    width: 40px;
+    width: 2.5em;
     margin: 0;
+    background-color: #fafafa;
+    padding: 10px;
+    border-radius: 5px;
+    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    transition-delay: 0.2s;
+    box-shadow: 0 2px 5px 0 grey;
  }
 
  @media screen and (max-width: 760px) {
   .burger {
     display: block;
     position: absolute;
-    right: 0;
-    margin: 0;
-    margin-right: 7px;
-    padding: 0 4px 0 4px;
+    right: 5%;
+    top: 15px;
   }
 }
diff --git a/src/scenes/home/header/sideNav/sideNav.css b/src/scenes/home/header/sideNav/sideNav.css
@@ -1,5 +1,9 @@
 .content {
-  padding: 16px;
+  background-color: black;
+  background-color:rgba(47,52,72,.95);
+  height: 100%;
+  width: 100%;
+  position: fixed;
 }
 
 .header {
@@ -9,33 +13,38 @@
 
 .close {
   color: #fff;
-  font-size: 26px;
-  padding: 6px; /*to increase clickability on mobile*/
   text-decoration: none;
+  font-size: 40px;
+  position: absolute;
+  right: 5%;
+  top: 22px;
+  padding-right: 10px;
+  line-height: 1;
 }
 
 .logoWrapper {
   text-align: center;
 }
 
 .logo {
-  margin: 16px auto;
   max-width: 75%;
   max-height: 40px;
-  width: auto;
-  height: auto;
+  position: absolute;
+  top: 20px;
+  left: 5%;
 }
 
 .list {
   display: flex;
   flex-direction: column;
-  margin-top: 8px;
-  padding: 16px;
+  margin-top: 80px;
+  padding: 50px 5%;
+  border-top: 1px solid #fafafa;
+  font-size: 40px;
 }
 
 .item {
   color: #F7F7F7;
-  font-size: 60px;
 }
 
 .item ~ .item {
@@ -46,7 +55,8 @@
   display: flex;
   height: 100%;
   flex-direction: column;
-  padding-top: 1rem;
+  padding-top: 1.75rem;
+  position: relative;
 }
 
 .navButton {
@@ -56,5 +66,5 @@
   text-align: left;
   font-size: 2.5rem;
   margin: 0.5rem 0;
-  padding: 0;
+  padding: 0; 
 }
diff --git a/src/scenes/home/home.css b/src/scenes/home/home.css
@@ -16,6 +16,7 @@
 
 .backgroundImage {
     background-size: 100%;
+    background-position: center top;
     background-repeat: no-repeat;
 }
 
diff --git a/src/scenes/home/home.js b/src/scenes/home/home.js
@@ -5,13 +5,14 @@ import { Route, withRouter, Switch } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import * as CookieHelpers from 'shared/utils/cookieHelper';
-import familyImage from 'images/Family-2.png';
+import familyImage from 'images/Family-2.jpg';
 import SignUp from './signup/signup';
 import MentorRequestsTable from './mentor/mentorRequestsTable/mentorRequestsTable';
 import SquadsTable from './squads/squadsTable/squadsTable';
 import Dashboard from './dashboard/dashboard';
 import MentorsTable from './mentor/mentorsTable/mentorsTable';
 import Thanks from './thanks/thanks';
+import Gala from './gala/gala';
 import FinancialStatements from './about/financialStatements/financialStatements';
 import styles from './home.css';
 import Header from './header/header';
@@ -149,6 +150,12 @@ class Home extends Component {
                 <SquadsTable {...authProps} />
               )}
             />
+            <Route
+              path="/gala"
+              render={() => (
+                <Gala {...authProps} />
+              )}
+            />
             <Route exact path="/about/financial-statements" component={FinancialStatements} />
             <Route
               path="*" component={FourOhFour}
diff --git a/src/scenes/home/landing/landing.css b/src/scenes/home/landing/landing.css
@@ -12,20 +12,24 @@
   align-items: center;
   margin-top:10vw;
   text-align: center;
-  padding-bottom:20px;
+  padding-bottom:60px;
 }
 
 .pageHeading h1 {
   width: 80%;
   color: #fff;
+  text-shadow: black 1px 0 15px;
+  padding: 50px 0 50px 0;
+  background-color:rgba(47,52,72,.25);
+  border-radius: 1rem;
 }
 
 @media screen and (max-width: 900px) {
   .pageHeading {
     margin-top:5vw;
   }
   .pageHeading h1 {
-    font-size:16px;
+    font-size:20px;
   }
 }
 
@@ -34,6 +38,6 @@
     margin-top:3vw;
   }
   .pageHeading h1 {
-    font-size:14px;
+    font-size:18px;
   }
 }
diff --git a/src/scenes/home/landing/landing.js b/src/scenes/home/landing/landing.js
@@ -16,7 +16,7 @@ class Landing extends Component {
         <div className={styles.pageHeading}>
           <h1>The largest community dedicated to helping military veterans and
             families launch software development careers.</h1>
-          <LinkButton text="Join" theme="red" link="/signup" />
+          <LinkButton text="JOIN" theme="red" link="/signup" />
         </div>
         <WhatWeDo />
         <Membership />
diff --git a/src/scenes/home/signup/signup.css b/src/scenes/home/signup/signup.css
@@ -39,10 +39,17 @@
     border: 1px solid rgb(92,105,122);
     padding: 10px;
   }
+  .signup h2 {
+    font-size: 26px;
+  }
 }
 
-@media screen and (max-width: 599px) {
+@media screen and (max-width: 321px) {
+  .signupForm {
+    border-left-style: none;
+    border-right-style: none;
+  }
   .signup h2 {
-    font-size: 26px;
+    font-size: 20px;
   }
 }
diff --git a/src/shared/components/drawer/drawer.css b/src/shared/components/drawer/drawer.css
@@ -20,21 +20,13 @@
 }
 
 .content {
-  background-color: #4A4A4A;
+
   height: 100%;
   width: 100%;
 }
 
-
-@media screen and (max-width: 760px) /* Tablet */ {
+@media screen and (max-width: 760px) {
   .body {
     display: block;
-    width: 480px;
-  }
-}
-
-@media screen and (max-width: 480px) /* Tablet */ {
-  .body {
-    width: 100%;
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -5412,6 +5412,12 @@ postcss@^6.0.1, postcss@^6.x:
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
+postscribe@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/postscribe/-/postscribe-2.0.8.tgz#5b7a53aad4b690b6c2f75818fcefe74490f410d5"
+  dependencies:
+    prescribe ">=1.1.2"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -5420,6 +5426,10 @@ prepend-http@^1.0.0, prepend-http@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
 
+prescribe@>=1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/prescribe/-/prescribe-1.1.3.tgz#8d3122445f3fbaf4c4c5817ea527a17fc8139ee6"
+
 preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
