m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-22 17:23:22 +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-plugin-sharp',
'gatsby-plugin-sitemap',
'gatsby-plugin-offline',
// 'gatsby-plugin-offline',
{
resolve: 'gatsby-transformer-json',
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 withRouter from 'react-router-dom/withRouter'
import TransitionGroup from 'react-transition-group/TransitionGroup'
import { StaticQuery, graphql } from 'gatsby'
import Head from './atoms/Head'
import Header from './organisms/Header'
import Footer from './organisms/Footer'
import { FadeIn } from './atoms/Animations'
import styles from './Layout.module.scss'
class TransitionHandler extends Component {
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 Layout = ({ children, location }) => {
const isHomepage = location.pathname === '/'
return (
@ -66,41 +50,21 @@ const TemplateWrapper = ({ children, location }) => {
gpg
addressbook
}
# the package.json file
portfolioJson {
name
homepage
repository
bugs
}
}
`}
render={data => {
const meta = data.dataYaml
const pkg = data.portfolioJson
return (
<Fragment>
<Head meta={meta} />
<Header meta={meta} isHomepage={isHomepage} />
<TransitionGroup
className={styles.TransitionGroup}
component={Main}
appear={true}
>
<FadeIn
key={location.pathname}
timeout={{ enter: 200, exit: 150, appear: 200 }}
>
<TransitionHandler location={location}>
<main className={styles.screen} location={location}>
{children}
</TransitionHandler>
</FadeIn>
</TransitionGroup>
</main>
<Footer meta={meta} pkg={pkg} />
<Footer meta={meta} />
</Fragment>
)
}}
@ -108,18 +72,9 @@ const TemplateWrapper = ({ children, location }) => {
)
}
TransitionHandler.propTypes = {
Layout.propTypes = {
children: PropTypes.any.isRequired,
location: PropTypes.object.isRequired
}
Main.propTypes = {
children: PropTypes.any.isRequired
}
TemplateWrapper.propTypes = {
children: PropTypes.any.isRequired,
location: PropTypes.object.isRequired
}
export default withRouter(TemplateWrapper)
export default Layout

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

@ -4,12 +4,3 @@
flex: 1;
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 PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby'
import Vcard from '../atoms/Vcard'
import LogoUnit from '../atoms/LogoUnit'
import Networks from '../molecules/Networks'
@ -14,7 +15,22 @@ class Footer extends PureComponent {
render() {
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 (
<footer className={styles.footer}>
@ -28,11 +44,15 @@ class Footer extends PureComponent {
</p>
<p className={styles.footer__copyright}>
<small>
&copy; {this.state.year} {meta.title} &mdash; All Rights Reserved
&copy; {this.state.year} {meta.title} &mdash; All Rights
Reserved
</small>
</p>
</footer>
)
}}
/>
)
}
}

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

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

2
src/styles/base.scss
View File

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