diff --git a/public/App.jsx b/public/App.jsx index cf6386c..275983d 100644 --- a/public/App.jsx +++ b/public/App.jsx @@ -22,6 +22,8 @@ // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; +import { connect } from 'react-redux'; + import Background from './background/Background'; import Header from './header/Header'; import Footer from './footer/Footer'; @@ -31,19 +33,37 @@ import Routes from './page/Routes'; class App extends React.Component { constructor(props) { super(props); + + this.onEnteringBound = this.onEntering.bind(this); + } + + onEntering() { + this.refs.app.scroll({ + top: 0, + left: 0, + behavior: 'smooth' + }); } render() { + let clazz = "o-app"; + if(this.props.menuOpen) clazz += " is-menu-open " + return ( -
- +
- +
); } } -export default App; +const mapStateToProps = function(state) { + return { + menuOpen: state.menu.open + } +} + +export default connect(mapStateToProps)(App); diff --git a/public/actions/MenuActions.js b/public/actions/MenuActions.js new file mode 100644 index 0000000..050b2cb --- /dev/null +++ b/public/actions/MenuActions.js @@ -0,0 +1,44 @@ +// Copyright (c) 2018 Dominic Masters +// +// MIT License +// +// Permission is hereby granted, free of charge, to any person obtaining +// a copy of this software and associated documentation files (the +// "Software"), to deal in the Software without restriction, including +// without limitation the rights to use, copy, modify, merge, publish, +// distribute, sublicense, and/or sell copies of the Software, and to +// permit persons to whom the Software is furnished to do so, subject to +// the following conditions: +// +// The above copyright notice and this permission notice shall be +// included in all copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +export const OPEN_MENU = "OPEN_MENU"; +export const CLOSE_MENU = "CLOSE_MENU"; +export const TOGGLE_MENU = "TOGGLE_MENU"; + +export function openMenu() { + return { + type: OPEN_MENU + } +} + +export function closeMenu() { + return { + type: CLOSE_MENU + } +} + +export function toggleMenu() { + return { + type: TOGGLE_MENU + } +} diff --git a/public/nav/menu/HamburgerMenu.jsx b/public/nav/menu/HamburgerMenu.jsx index 581127c..4292d4a 100644 --- a/public/nav/menu/HamburgerMenu.jsx +++ b/public/nav/menu/HamburgerMenu.jsx @@ -22,12 +22,16 @@ // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; +import { connect } from 'react-redux'; import { NavLink } from 'react-router-dom'; +import * as MenuActions from './../../actions/MenuActions'; const HamburerMenuItem = function(props) { return (
  • - Home + + Home +
    • ); } @@ -35,23 +39,11 @@ const HamburerMenuItem = function(props) { class HamburgerMenu extends React.Component { constructor(props) { super(props); - - this.state ={ - open: false - } - - this.toggleMenuBound = this.toggleMenu.bind(this); - } - - toggleMenu() { - this.setState({ - open: !this.state.open - }); } render() { let clazz = "o-hamburger-menu"; - if(this.state && this.state.open) clazz += " is-open"; + if(this.props.open) clazz += " is-open"; if(this.props.className) clazz += " " + this.props.className; return ( @@ -59,7 +51,7 @@ class HamburgerMenu extends React.Component { -
      - - - -
    +
    +
      + + + +
    +
    ); } } -export default HamburgerMenu; + +const mapStateToProps = function(state) { + return { + open: state.menu.open + } +} + +const mapDispatchToProps = function(dispatch) { + return { + toggleMenu: function(theme) { + dispatch(MenuActions.toggleMenu()); + } + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(HamburgerMenu); diff --git a/public/page/Routes.jsx b/public/page/Routes.jsx index 247bf05..15138c0 100644 --- a/public/page/Routes.jsx +++ b/public/page/Routes.jsx @@ -27,6 +27,7 @@ import { withRouter } from 'react-router'; import PropTypes from 'prop-types' import { HashRouter, Route, Switch } from 'react-router-dom'; +import Header from './../header/Header'; import Footer from './../footer/Footer'; //Pages @@ -49,33 +50,35 @@ const RouteWrapper = (props) => { ); }; -const Routes = ({location}) => { - return ( - - { - window.scroll({ - top: 0, - left: 0, - behavior: 'smooth' - }); - }} - > - - - - - - - - ); -}; +class Routes extends React.Component { + constructor(props) { + super(props); + } -export default withRouter(() => { - return -}); + render() { + const { match, location, history } = this.props; + + return ( + + + + + + + + + + + + ); + } +} + +export default withRouter(Routes); diff --git a/public/page/home/Homepage.jsx b/public/page/home/Homepage.jsx index 8ae4a7c..a26f996 100644 --- a/public/page/home/Homepage.jsx +++ b/public/page/home/Homepage.jsx @@ -29,11 +29,15 @@ import Image from './../../image/Image'; import { Title, Subtitle } from './../../typography/Typography'; export default function() { - + let lines = []; + for(let i = 0; i < 100; i++) { + lines.push(
    ); + } return ( Welcome home + { lines } ); } diff --git a/public/reducers/MenuReducer.js b/public/reducers/MenuReducer.js new file mode 100644 index 0000000..ab60f14 --- /dev/null +++ b/public/reducers/MenuReducer.js @@ -0,0 +1,51 @@ +// Copyright (c) 2018 Dominic Masters +// +// MIT License +// +// Permission is hereby granted, free of charge, to any person obtaining +// a copy of this software and associated documentation files (the +// "Software"), to deal in the Software without restriction, including +// without limitation the rights to use, copy, modify, merge, publish, +// distribute, sublicense, and/or sell copies of the Software, and to +// permit persons to whom the Software is furnished to do so, subject to +// the following conditions: +// +// The above copyright notice and this permission notice shall be +// included in all copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +import { + OPEN_MENU, + CLOSE_MENU, + TOGGLE_MENU +} from './../actions/MenuActions'; + +const initialState = { + open: false +} + +const menu = function(state, action) { + if(typeof state === typeof undefined) { + state = initialState; + } + + switch(action.type) { + case OPEN_MENU: + return {open: true} + case CLOSE_MENU: + return {open: false} + case TOGGLE_MENU: + return {open: !state.open} + default: + return state; + } +} + +export default menu; diff --git a/public/reducers/RootReducer.js b/public/reducers/RootReducer.js index b127b9a..e9483b7 100644 --- a/public/reducers/RootReducer.js +++ b/public/reducers/RootReducer.js @@ -24,9 +24,11 @@ import { combineReducers } from 'redux'; import LanguageReducer from './LanguageReducer'; +import MenuReducer from './MenuReducer'; const rootReducer = combineReducers({ - language: LanguageReducer + language: LanguageReducer, + menu: MenuReducer }); export default rootReducer; diff --git a/public/styles/elements/_body.scss b/public/styles/elements/_body.scss index fd625d9..5d707a9 100644 --- a/public/styles/elements/_body.scss +++ b/public/styles/elements/_body.scss @@ -11,9 +11,10 @@ body { margin: 0; padding: 0; - min-height: 100vh; + width: 100vw; + height: 100vh; font-family: $s-font--stack-default; font-size: $s-font--size--base; - overflow-y: scroll;//Really makes the transitions feel smoother + overflow: hidden;//Really makes the transitions feel smoother } diff --git a/public/styles/objects/_app.scss b/public/styles/objects/_app.scss index ac90ade..48e7eeb 100644 --- a/public/styles/objects/_app.scss +++ b/public/styles/objects/_app.scss @@ -10,9 +10,8 @@ */ .o-app { position: relative; - min-height: 100vh; + height: 100vh; width: 100%; - - @extend %t-flexbox; - @include t-flex-direction(column); + overflow-y: scroll; + overflow-x: hidden; } diff --git a/public/styles/objects/_hamburger-menu.scss b/public/styles/objects/_hamburger-menu.scss index 581be5c..a20f451 100644 --- a/public/styles/objects/_hamburger-menu.scss +++ b/public/styles/objects/_hamburger-menu.scss @@ -3,18 +3,29 @@ * Mobile-Centric openable menu with a hamburger icon to toggle. * * Dependencies: + * styles/settings/animation.scss * styles/settings/colors.scss * styles/settings/z.scss * * Version: * 1.0.0 - 2018/06/12 */ +$o-hamburger-menu--max: 200%; +$o-hamburger-menu--pos-x: 100%; +$o-hamburger-menu--pos-y: 0%; +@include t-keyframes(o-hamburger-menu--open) { + from { clip-path: circle(0% at $o-hamburger-menu--pos-x $o-hamburger-menu--pos-y); } + to { clip-path: circle($o-hamburger-menu--max at $o-hamburger-menu--pos-x $o-hamburger-menu--pos-y); } +} + +@include t-keyframes(o-hamburger-menu--close) { + from { clip-path: circle($o-hamburger-menu--max at $o-hamburger-menu--pos-x $o-hamburger-menu--pos-y); } + to { clip-path: circle(0% at $o-hamburger-menu--pos-x $o-hamburger-menu--pos-y); } +} + .o-hamburger-menu { - border: 1px solid red; &__menu { - @extend %t-list-blank; - display: none; position: fixed; top: 0; @@ -22,12 +33,37 @@ width: 100%; height: 100%; background: $s-color--menu__background; + transition: all 1s $s-animation--ease-out; z-index: $s-z--menu; + + @include t-animation-fill-mode(forwards); + @include t-animation-timing-function($s-animation--ease-out); + @include t-animation-duration(0.4s); + } + + &__links { + @extend %t-list-blank; + padding: 1em; } &__link { @extend %t-list-litem-blank; + display: block; + font-size: 1.25em; + width: 100%; + position: relative; + border: 1px solid red; + + &-link { + position: relative; + display: block; + padding: 1.5em 0; + } + + &:hover:before { + //@include t-translate-x(5%); Disabled due to not being needed on mobile + } } &__button { @@ -47,6 +83,14 @@ &.is-open { .o-hamburger-menu__menu { display: block; + @include t-animation-name(o-hamburger-menu--open); + } + } + + &.is-closing { + .o-hamburger-menu__menu { + display: block; + @include t-animation-name(o-hamburger-menu--close); } } } diff --git a/public/styles/objects/_page-transition.scss b/public/styles/objects/_page-transition.scss index d1ea856..e77f7d2 100644 --- a/public/styles/objects/_page-transition.scss +++ b/public/styles/objects/_page-transition.scss @@ -20,7 +20,7 @@ .o-page-transition__container { overflow: hidden; width: 100%; - height: 100%; + min-height: 100%; position: relative; } diff --git a/public/styles/settings/colors.scss b/public/styles/settings/colors.scss index d3d4985..d8edb09 100644 --- a/public/styles/settings/colors.scss +++ b/public/styles/settings/colors.scss @@ -42,7 +42,7 @@ $s-color--navbar__bar-hover: $s-color--pastel-blue; $s-color--navbar__bar-active: $s-color--pastel-green; //Menu Colors -$s-color--menu__background: red; +$s-color--menu__background: rgba(0, 0, 0, 0.8); //loader $s-color--loader: $s-color--swatch-blue;