From 95e247260875b356710b7abf269d80de09db35b3 Mon Sep 17 00:00:00 2001 From: Matt Wagner Date: Sun, 10 Sep 2017 00:49:21 -0400 Subject: [PATCH] Issue #154 - Create Military Families Page This finalizes the Military Families and Spouses page as per Issue #154. This also adds the requirements for the clipping appearance as was represented in the mockup. --- package.json | 2 +- src/scenes/home/families/facts/facts.css | 62 ++++++++++++++----- src/scenes/home/families/facts/facts.js | 10 +-- src/scenes/home/families/families.css | 10 +++ src/scenes/home/families/families.js | 40 ++++++++++++ src/scenes/home/families/goals/goals.css | 44 +++++++++++++ src/scenes/home/families/goals/goals.js | 26 ++++++++ .../home/families/jumboQuote/jumboQuote.css | 15 ----- .../home/families/jumboQuote/jumboQuote.js | 39 ------------ .../home/families/jumboQuote/quotes.json | 7 --- src/scenes/home/home.css | 2 +- src/scenes/home/home.js | 7 ++- src/scenes/home/team/team.js | 11 ++-- .../headerClipMask/headerClipMask.css | 22 +++++++ .../headerClipMask/headerClipMask.js | 19 ++++++ .../components/quoteBanner/quoteBanner.js | 2 +- yarn.lock | 18 +++++- 17 files changed, 243 insertions(+), 93 deletions(-) create mode 100644 src/scenes/home/families/families.css create mode 100644 src/scenes/home/families/families.js create mode 100644 src/scenes/home/families/goals/goals.css create mode 100644 src/scenes/home/families/goals/goals.js delete mode 100644 src/scenes/home/families/jumboQuote/jumboQuote.css delete mode 100644 src/scenes/home/families/jumboQuote/jumboQuote.js delete mode 100644 src/scenes/home/families/jumboQuote/quotes.json create mode 100644 src/shared/components/headerClipMask/headerClipMask.css create mode 100644 src/shared/components/headerClipMask/headerClipMask.js diff --git a/package.json b/package.json index b7194fb74..8d5d27fcc 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "react-error-overlay": "^1.0.7", "react-ga": "^2.2.0", "react-icons": "^2.2.5", - "react-modal": "^1.7.7", + "react-modal": "^2.3.2", "react-router": "^4.1.1", "react-router-dom": "^4.1.1", "react-scroll": "^1.5.4", diff --git a/src/scenes/home/families/facts/facts.css b/src/scenes/home/families/facts/facts.css index 33102ee2d..a6c54672c 100644 --- a/src/scenes/home/families/facts/facts.css +++ b/src/scenes/home/families/facts/facts.css @@ -1,26 +1,54 @@ - .facts { - display: 'flex'; - background-color: '#E2E2E2'; - align-items: 'center'; - padding: '96px'; + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 50px 0; +} + +@media screen and (max-width: 1024px) { + .facts { + display: block; + } } -.factsHeading { - font-size: '50px'; - text-align: 'center'; + +.factsHeading h2 { + width: 100%; } + .factsList { - color: '#445366'; - font-size: '24px'; - padding: '0 32px'; + flex: .48; + color: #445366; + font-size: 1.5rem; +} + +.factsList ul { + width: 80%; + margin: 0 auto; } + +.factsList .footnote { + font-size: 80%; + font-style: italic; + margin: 0 auto; + text-align: left; + width: 75%; +} + .factsRight { - padding: '0 32px' + background-position: 90% 25%; + border-radius: 40px; + flex: .48; + height: 50vh; + margin-top: 65px; + overflow: hidden; } -.factsImage { - width: '30vw'; - border-radius: '40px'; + +@media screen and (max-width: 1150px) { + .factsRight { + background-position: 80% 25%; + } } + .factItem { - padding-bottom: '24px'; -} \ No newline at end of file + padding-bottom: 24px; +} diff --git a/src/scenes/home/families/facts/facts.js b/src/scenes/home/families/facts/facts.js index 6c6c03725..51011d092 100644 --- a/src/scenes/home/families/facts/facts.js +++ b/src/scenes/home/families/facts/facts.js @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import Heading from 'shared/components/heading/heading'; import styles from './facts.css'; import family3 from '../../../../images/Family-3.jpg'; @@ -8,7 +9,7 @@ class Facts extends Component {
-
The Facts
+
  • @@ -28,10 +29,11 @@ class Facts extends Component { Only 19% of military spouses have adequate full-time employment.
+
+ *Source pointsofflight.org +
-
- -
+
{null}
); } diff --git a/src/scenes/home/families/families.css b/src/scenes/home/families/families.css new file mode 100644 index 000000000..1e59cab6c --- /dev/null +++ b/src/scenes/home/families/families.css @@ -0,0 +1,10 @@ +.quoteSection { + margin-top: 50vh; + position: relative; +} + +@media screen and (max-width: 800px) { + .quoteSection { + margin-top: 200px; + } +} diff --git a/src/scenes/home/families/families.js b/src/scenes/home/families/families.js new file mode 100644 index 000000000..dcb04bd57 --- /dev/null +++ b/src/scenes/home/families/families.js @@ -0,0 +1,40 @@ +import React, { Component } from 'react'; +import Join from 'shared/components/join/join'; +import Donate from 'shared/components/donate/donate'; +import Section from 'shared/components/section/section'; +import HeaderClipMask from 'shared/components/headerClipMask/headerClipMask'; +import QuoteBanner from 'shared/components/quoteBanner/quoteBanner'; +import Facts from './facts/facts'; +import Goals from './goals/goals'; +import styles from './families.css'; + +class Families extends Component { + render() { + const quoteProps = { + author: 'Former First Lady Michelle Obama', + quote: 'It\'s hard to impress employers who often view a resume with multiple jobs as a red flag rather than as a reality of military life.' + }; + + return ( +
+
+ + +
+ +
+ +
+ +
+ +
+ + + +
+ ); + } +} + +export default Families; diff --git a/src/scenes/home/families/goals/goals.css b/src/scenes/home/families/goals/goals.css new file mode 100644 index 000000000..b6008838e --- /dev/null +++ b/src/scenes/home/families/goals/goals.css @@ -0,0 +1,44 @@ +.goals { + width: 100%; +} + +.goalsHeading h2 { + width: 100%; +} + +.goalsContent { + margin: 0 auto; + width: 80%; +} + +@media screen and (max-width: 1024px) { + .goalsContent { + width: 95%; + } +} + +.goalsContent p, +.goalsContent ul li { + font-size: 1.5rem; +} + +.goalsContent ul li { + background-image: url('../../../../images/logos/small-blue-medal.png'); + background-position: left center; + background-repeat: no-repeat; + background-size: 60px; + list-style: none; + margin: 0; + padding: 36px 0 36px 97px; +} + +@media screen and (max-width: 1024px) { + .goalsContent ul { + padding: 0; + } + + .goalsContent ul li { + background-size: 40px; + padding: 16px 0 16px 67px; + } +} diff --git a/src/scenes/home/families/goals/goals.js b/src/scenes/home/families/goals/goals.js new file mode 100644 index 000000000..7e60e15b4 --- /dev/null +++ b/src/scenes/home/families/goals/goals.js @@ -0,0 +1,26 @@ +import React, { Component } from 'react'; +import Heading from 'shared/components/heading/heading'; +import styles from './goals.css'; + +class Goals extends Component { + render() { + return ( +
+
+ +
+
+

When a loved one deploys, we understand the hardships that family members who are left behind can endure. There can be a lot of responsibilities to juggle. Operation Code works to ease the burden on military families by opening our programs and services up to military spouses, children and grandchildren.

+
    +
  • We strive to make software development more accessible not only to our veteran and military members, but also to their spouses and extended family.
    • +
  • Our community works to increase the interaction and engagement between military families across all our social channels.
    • +
  • Operation Code programs, scholarships and services are open to military families to help cultivate the learning process, and our employer services can work with family members to get them placed in software development jobs.
    • +
  • In the future, Operation Code plans to do a curriculum and grow a community for military children who are interested in learning how to code.
    • +
+
+
+ ); + } +} + +export default Goals; diff --git a/src/scenes/home/families/jumboQuote/jumboQuote.css b/src/scenes/home/families/jumboQuote/jumboQuote.css deleted file mode 100644 index c98c2c8dd..000000000 --- a/src/scenes/home/families/jumboQuote/jumboQuote.css +++ /dev/null @@ -1,15 +0,0 @@ - -.quotes { - color: #445366; -} -.quoteBody { - text-align: center; - color: #445366; -} -.quoteAuthor { - text-align: right; - color: #445366; -} -.quoteIcon { - vertical-align: top; -} diff --git a/src/scenes/home/families/jumboQuote/jumboQuote.js b/src/scenes/home/families/jumboQuote/jumboQuote.js deleted file mode 100644 index a3395f6ee..000000000 --- a/src/scenes/home/families/jumboQuote/jumboQuote.js +++ /dev/null @@ -1,39 +0,0 @@ -import React, { Component } from 'react'; -import { FaQuoteLeft, FaQuoteRight } from 'react-icons/lib/fa'; -import quotes from './quotes.json'; -import styles from './jumboQuote.css'; - -class JumboQuote extends Component { - constructor(props) { - super(props); - - this.state = { - quote: {} - }; - } - - componentDidMount() { - if (quotes.quotes.length > 0) { - const randomQuoteID = Math.floor(Math.random() * quotes.quotes.length) - - this.setState({ - quote: quotes.quotes[randomQuoteID] - }); - } - } - - render() { - return ( -
-

- - {this.state.quote.body} - -

-
{this.state.quote.author}
-
- ); - } -} - -export default JumboQuote; diff --git a/src/scenes/home/families/jumboQuote/quotes.json b/src/scenes/home/families/jumboQuote/quotes.json deleted file mode 100644 index adfe771b4..000000000 --- a/src/scenes/home/families/jumboQuote/quotes.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "quotes": [{ - "author": "Former First Lady Michelle Obama", - "body": "It's hard to impress employers who often view a resume with multiple jobs as a red flag rather than as a reality of military life." - }] -} - diff --git a/src/scenes/home/home.css b/src/scenes/home/home.css index 50eddccb7..8c82e61e9 100644 --- a/src/scenes/home/home.css +++ b/src/scenes/home/home.css @@ -38,7 +38,7 @@ @media screen and (max-width: 800px) { .backgroundImage { - background-size: auto 8%; + background-size: contain; } } diff --git a/src/scenes/home/home.js b/src/scenes/home/home.js index b9ee4ce32..7be941f87 100644 --- a/src/scenes/home/home.js +++ b/src/scenes/home/home.js @@ -32,6 +32,7 @@ import MentorRequest from './mentorRequest/mentorRequest'; import SquadsNew from './squads/squadsNew/squadsNew'; import CodeSchools from './codeSchools/codeSchools'; import About from './about/about'; +import Families from './families/families'; import Press from './press/press'; import ResetPassword from './resetPassword/resetPassword'; import Challenge from './challenge/challenge'; @@ -59,7 +60,7 @@ class Home extends Component { } setBgImage(location) { - if (location.pathname === '/') { + if (location.pathname === '/' || location.pathname === '/families') { this.setState({ bgChanged: !(this.state.bgImage), bgImage: true, bgImageUrl: familyImage }); } else { this.setState({ bgChanged: this.state.bgImage, bgImage: false, bgImageUrl: null }); @@ -161,6 +162,10 @@ class Home extends Component { path="/about" component={About} /> + - +

diff --git a/src/shared/components/headerClipMask/headerClipMask.css b/src/shared/components/headerClipMask/headerClipMask.css new file mode 100644 index 000000000..593848c90 --- /dev/null +++ b/src/shared/components/headerClipMask/headerClipMask.css @@ -0,0 +1,22 @@ +.maskLeft, +.maskRight { + bottom: 99.5%; + fill: #FFFFFF; + position: absolute; + width: 50%; +} + +.maskLeft { + left: 0; +} + +.maskRight { + right: 0; +} + +@media screen and (max-width: 800px) { + .maskLeft, + .maskRight { + display: none; + } +} diff --git a/src/shared/components/headerClipMask/headerClipMask.js b/src/shared/components/headerClipMask/headerClipMask.js new file mode 100644 index 000000000..9c2ccb161 --- /dev/null +++ b/src/shared/components/headerClipMask/headerClipMask.js @@ -0,0 +1,19 @@ +import React, { Component } from 'react'; +import styles from './headerClipMask.css'; + +class HeaderClipMask extends Component { + render() { + return ( +

+ + + + + + +
+ ); + } +} + +export default HeaderClipMask; diff --git a/src/shared/components/quoteBanner/quoteBanner.js b/src/shared/components/quoteBanner/quoteBanner.js index 27915a655..4afd0fb0c 100644 --- a/src/shared/components/quoteBanner/quoteBanner.js +++ b/src/shared/components/quoteBanner/quoteBanner.js @@ -5,7 +5,7 @@ import styles from './quoteBanner.css'; class QuoteBanner extends Component { render() { return ( -
+

"{this.props.quote}" diff --git a/yarn.lock b/yarn.lock index f78f11d0d..1eb1ff63d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2706,7 +2706,7 @@ exec-sh@^0.2.0: dependencies: merge "^1.1.3" -exenv@1.2.0: +exenv@1.2.0, exenv@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.0.tgz#3835f127abf075bfe082d0aed4484057c78e3c89" @@ -5546,7 +5546,7 @@ prop-types@15.5.8: dependencies: fbjs "^0.8.9" -prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7: +prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7: version "15.5.10" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154" dependencies: @@ -5703,6 +5703,10 @@ react-docgen@^2.12.1: node-dir "^0.1.10" recast "^0.11.5" +react-dom-factories@^1.0.0: + version "1.0.2" + resolved "https://registry.yarnpkg.com/react-dom-factories/-/react-dom-factories-1.0.2.tgz#eb7705c4db36fb501b3aa38ff759616aa0ff96e0" + react-dom@^15.5.4: version "15.5.4" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.4.tgz#ba0c28786fd52ed7e4f2135fe0288d462aef93da" @@ -5793,7 +5797,7 @@ react-komposer@^2.0.0: react-stubber "^1.0.0" shallowequal "^0.2.2" -react-modal@^1.2.0, react-modal@^1.2.1, react-modal@^1.7.7: +react-modal@^1.2.0, react-modal@^1.2.1: version "1.7.7" resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-1.7.7.tgz#70205f51c58708c487aff681ba3fed7946e391d9" dependencies: @@ -5803,6 +5807,14 @@ react-modal@^1.2.0, react-modal@^1.2.1, react-modal@^1.7.7: lodash.assign "^4.2.0" prop-types "^15.5.7" +react-modal@^2.3.2: + version "2.3.2" + resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-2.3.2.tgz#af9d625da218461de3e87551609dfca12d8d4946" + dependencies: + exenv "^1.2.0" + prop-types "^15.5.10" + react-dom-factories "^1.0.0" + react-router-dom@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.1.1.tgz#3021ade1f2c160af97cf94e25594c5f294583025"