From 28a0675f16eb5f1f98c694d59d8dddbe74a874af Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 14 Sep 2018 20:22:57 +0200 Subject: [PATCH] animation tweaks --- gatsby-browser.js | 2 +- gatsby-ssr.js | 2 +- src/components/Layout.jsx | 54 +++++++++++++++-------- src/components/Transition.jsx | 27 ------------ src/components/atoms/LogoUnit.jsx | 38 +++++++++++----- src/components/atoms/LogoUnit.module.scss | 2 - src/components/molecules/Availability.jsx | 29 ++++++++---- src/components/molecules/Networks.jsx | 24 +++++----- src/components/molecules/ThemeSwitch.jsx | 44 ++++++++++++------ src/helpers/wrapPageElement.jsx | 4 +- src/pages/404.jsx | 31 ++++++------- src/pages/index.jsx | 35 +++++++-------- src/templates/Project.jsx | 9 ++-- 13 files changed, 164 insertions(+), 137 deletions(-) delete mode 100644 src/components/Transition.jsx diff --git a/gatsby-browser.js b/gatsby-browser.js index 68bc627..8e155d4 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -6,5 +6,5 @@ if (typeof window !== 'undefined' && !window.IntersectionObserver) { import('intersection-observer') } -// Page Transitions +// Page Transitions & Layout export const wrapPageElement = wrapPageElementWithTransition diff --git a/gatsby-ssr.js b/gatsby-ssr.js index 670aea2..ba55016 100644 --- a/gatsby-ssr.js +++ b/gatsby-ssr.js @@ -1,4 +1,4 @@ import wrapPageElementWithTransition from './src/helpers/wrapPageElement' -// Page Transitions +// Page Transitions & Layout export const wrapPageElement = wrapPageElementWithTransition diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx index 1da111c..c15f0b1 100644 --- a/src/components/Layout.jsx +++ b/src/components/Layout.jsx @@ -1,28 +1,46 @@ -import React, { Fragment } from 'react' +import React, { PureComponent, Fragment } from 'react' import PropTypes from 'prop-types' +import posed, { PoseGroup } from 'react-pose' import Head from './molecules/Head' import Header from './organisms/Header' import Footer from './organisms/Footer' import styles from './Layout.module.scss' -const Layout = ({ children, location }) => { - const isHomepage = location.pathname === '/' +const timeout = 150 - return ( - - -
+export default class Layout extends PureComponent { + static propTypes = { + children: PropTypes.any.isRequired, + location: PropTypes.object.isRequired + } -
{children}
+ render() { + const { children, location } = this.props + const isHomepage = location.pathname === '/' -