m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2025-01-03 10:25:00 +01:00
Code Releases Activity

theme switch tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-05-12 01:42:29 +02:00
parent 5018f5c0c5
commit 10e4514de6
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 40 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/molecules/ThemeSwitch.jsx
View File

@ -1,4 +1,5 @@
import React, { PureComponent } from 'react'
import React, { PureComponent, Fragment } from 'react'
import Helmet from 'react-helmet'
import { FadeIn } from '../atoms/Animations'
import { ReactComponent as Day } from '../../images/day.svg'
import { ReactComponent as Night } from '../../images/night.svg'
@ -11,7 +12,7 @@ class ThemeSwitch extends PureComponent {
this.state = { dark: false }
}
componentWillMount() {
componentDidMount() {
const now = new Date().getHours()
if (now >= 19 || now <= 7) {
@ -19,28 +20,18 @@ class ThemeSwitch extends PureComponent {
}
}
componentDidMount() {
this.toggleTheme()
}
componentDidUpdate() {
this.toggleTheme()
}
isDark = () => this.state.dark === true
handleChange = () => {
this.setState({ dark: !this.isDark() })
}
toggleTheme = () => {
document
.getElementsByClassName('app')[0]
.classList.toggle('dark', this.state.dark)
}
render() {
return (
<Fragment>
<Helmet>
<body className={this.state.dark ? 'dark' : null} />
</Helmet>
<FadeIn>
<aside className="themeswitch">
<label className="checkbox">
@ -65,6 +56,7 @@ class ThemeSwitch extends PureComponent {
</label>
</aside>
</FadeIn>
</Fragment>
)
}
}

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

@ -44,7 +44,7 @@ class Footer extends PureComponent {
FileSaver.saveAs(blob, this.generateFileName())
}
handleAddressbookClick = (e) => {
handleAddressbookClick = e => {
e.preventDefault()
this.constructVcard()
}

12
src/layouts/index.jsx
View File

@ -1,4 +1,4 @@
import React, { Component } from 'react'
import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'
import withRouter from 'react-router-dom/withRouter'
import TransitionGroup from 'react-transition-group/TransitionGroup'
@ -24,15 +24,9 @@ const Main = ({ children }) => <main className="screen">{children}</main>
const TemplateWrapper = ({ data, location, children }) => {
const meta = data.dataYaml
const isHomepage = location.pathname === '/'
const now = new Date().getHours()
let classes = 'app'
if (now >= 19 || now <= 7) {
classes += ' dark'
}
return (
<div className={classes}>
<Fragment>
<Head meta={meta} location={location} />
<Header meta={meta} isHomepage={isHomepage} />
@ -48,7 +42,7 @@ const TemplateWrapper = ({ data, location, children }) => {
</TransitionGroup>
<Footer meta={meta} />
</div>
</Fragment>
)
}

6
src/layouts/index.scss
View File

@ -107,14 +107,14 @@ svg {
margin: 0;
}
.app {
#___gatsby {
display: flex;
min-height: 100vh;
flex-direction: column;
background: $body-background-color;
transition: background .2s ease-out;
transition: .6s $easing;
&.dark {
.dark & {
background: $body-background-color--dark;
color: $text-color--dark;
}

2
src/templates/Project.jsx
View File

@ -18,7 +18,7 @@ class Project extends Component {
const description = this.props.data.projectsYaml.description
this.state = {
descriptionWithLineBreaks: description.split('\n').join('\n\n')
descriptionWithLineBreaks: description.split('\n').join('\n\n'),
}
}