m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-23 01:29:41 +01:00
Code Releases Activity

simplify layout

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-06-23 17:19:45 +02:00
parent db6addcbe2
commit ee8c5fb67a
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 46 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gatsby-config.js
View File

@ -14,7 +14,7 @@ module.exports = {
'gatsby-transformer-sharp', 'gatsby-transformer-sharp',
'gatsby-plugin-sharp', 'gatsby-plugin-sharp',
'gatsby-plugin-sitemap', 'gatsby-plugin-sitemap',
'gatsby-plugin-offline', // 'gatsby-plugin-offline',
{ {
resolve: 'gatsby-transformer-json', resolve: 'gatsby-transformer-json',
options: { options: {

59
src/components/Layout.jsx
View File

@ -1,28 +1,12 @@
import React, { Component, Fragment } from 'react' import React, { Fragment } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import withRouter from 'react-router-dom/withRouter'
import TransitionGroup from 'react-transition-group/TransitionGroup'
import { StaticQuery, graphql } from 'gatsby' import { StaticQuery, graphql } from 'gatsby'
import Head from './atoms/Head' import Head from './atoms/Head'
import Header from './organisms/Header' import Header from './organisms/Header'
import Footer from './organisms/Footer' import Footer from './organisms/Footer'
import { FadeIn } from './atoms/Animations'
import styles from './Layout.module.scss' import styles from './Layout.module.scss'
class TransitionHandler extends Component { const Layout = ({ children, location }) => {
shouldComponentUpdate() {
return this.props.location.pathname === window.location.pathname
}
render() {
const { children } = this.props
return <div className={styles.transitionContainer}>{children}</div>
}
}
const Main = ({ children }) => <main className={styles.screen}>{children}</main>
const TemplateWrapper = ({ children, location }) => {
const isHomepage = location.pathname === '/' const isHomepage = location.pathname === '/'
return ( return (
@ -66,41 +50,21 @@ const TemplateWrapper = ({ children, location }) => {
gpg gpg
addressbook addressbook
} }
# the package.json file
portfolioJson {
name
homepage
repository
bugs
}
} }
`} `}
render={data => { render={data => {
const meta = data.dataYaml const meta = data.dataYaml
const pkg = data.portfolioJson
return ( return (
<Fragment> <Fragment>
<Head meta={meta} /> <Head meta={meta} />
<Header meta={meta} isHomepage={isHomepage} /> <Header meta={meta} isHomepage={isHomepage} />
<TransitionGroup <main className={styles.screen} location={location}>
className={styles.TransitionGroup}
component={Main}
appear={true}
>
<FadeIn
key={location.pathname}
timeout={{ enter: 200, exit: 150, appear: 200 }}
>
<TransitionHandler location={location}>
{children} {children}
</TransitionHandler> </main>
</FadeIn>
</TransitionGroup>
<Footer meta={meta} pkg={pkg} /> <Footer meta={meta} />
</Fragment> </Fragment>
) )
}} }}
@ -108,18 +72,9 @@ const TemplateWrapper = ({ children, location }) => {
) )
} }
TransitionHandler.propTypes = { Layout.propTypes = {
children: PropTypes.any.isRequired, children: PropTypes.any.isRequired,
location: PropTypes.object.isRequired location: PropTypes.object.isRequired
} }
Main.propTypes = { export default Layout
children: PropTypes.any.isRequired
}
TemplateWrapper.propTypes = {
children: PropTypes.any.isRequired,
location: PropTypes.object.isRequired
}
export default withRouter(TemplateWrapper)

9
src/components/Layout.module.scss
View File

@ -4,12 +4,3 @@
flex: 1; flex: 1;
padding: $spacer; padding: $spacer;
} }
.transitionGroup {
position: relative;
}
.transitionContainer {
position: relative;
width: 100%;
}

24
src/components/organisms/Footer.jsx
View File

@ -1,5 +1,6 @@
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby'
import Vcard from '../atoms/Vcard' import Vcard from '../atoms/Vcard'
import LogoUnit from '../atoms/LogoUnit' import LogoUnit from '../atoms/LogoUnit'
import Networks from '../molecules/Networks' import Networks from '../molecules/Networks'
@ -14,7 +15,22 @@ class Footer extends PureComponent {
render() { render() {
const meta = this.props.meta const meta = this.props.meta
const pkg = this.props.pkg
return (
<StaticQuery
query={graphql`
query FooterQuery {
# the package.json file
portfolioJson {
name
homepage
repository
bugs
}
}
`}
render={data => {
const pkg = data.portfolioJson
return ( return (
<footer className={styles.footer}> <footer className={styles.footer}>
@ -28,11 +44,15 @@ class Footer extends PureComponent {
</p> </p>
<p className={styles.footer__copyright}> <p className={styles.footer__copyright}>
<small> <small>
&copy; {this.state.year} {meta.title} &mdash; All Rights Reserved &copy; {this.state.year} {meta.title} &mdash; All Rights
Reserved
</small> </small>
</p> </p>
</footer> </footer>
) )
}}
/>
)
} }
} }

2
src/components/organisms/Footer.module.scss
View File

@ -38,5 +38,5 @@
} }
.footer__copyright { .footer__copyright {
opacity: .6; opacity: .7;
} }

2
src/styles/base.scss
View File

@ -28,7 +28,7 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
min-height: 100vh; min-height: 100vh;
background-color: $body-background-color; background: $body-background-color;
transition: background .6s $easing; transition: background .6s $easing;
&.dark { &.dark {