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

72
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 { FadeIn } from '../atoms/Animations'
import { ReactComponent as Day } from '../../images/day.svg' import { ReactComponent as Day } from '../../images/day.svg'
import { ReactComponent as Night } from '../../images/night.svg' import { ReactComponent as Night } from '../../images/night.svg'
@ -11,7 +12,7 @@ class ThemeSwitch extends PureComponent {
this.state = { dark: false } this.state = { dark: false }
} }
componentWillMount() { componentDidMount() {
const now = new Date().getHours() const now = new Date().getHours()
if (now >= 19 || now <= 7) { if (now >= 19 || now <= 7) {
@ -19,52 +20,43 @@ class ThemeSwitch extends PureComponent {
} }
} }
componentDidMount() {
this.toggleTheme()
}
componentDidUpdate() {
this.toggleTheme()
}
isDark = () => this.state.dark === true isDark = () => this.state.dark === true
handleChange = () => { handleChange = () => {
this.setState({ dark: !this.isDark() }) this.setState({ dark: !this.isDark() })
} }
toggleTheme = () => {
document
.getElementsByClassName('app')[0]
.classList.toggle('dark', this.state.dark)
}
render() { render() {
return ( return (
<FadeIn> <Fragment>
<aside className="themeswitch"> <Helmet>
<label className="checkbox"> <body className={this.state.dark ? 'dark' : null} />
<span className="checkbox__label">Toggle Night Mode</span> </Helmet>
<input <FadeIn>
onChange={this.handleChange} <aside className="themeswitch">
type="checkbox" <label className="checkbox">
name="toggle" <span className="checkbox__label">Toggle Night Mode</span>
value="toggle" <input
aria-describedby="toggle" onChange={this.handleChange}
checked={this.state.dark} type="checkbox"
/> name="toggle"
<span value="toggle"
id="toggle" aria-describedby="toggle"
className="checkbox__faux-container" checked={this.state.dark}
aria-live="assertive" />
> <span
<Day className={this.state.dark ? 'icon' : 'icon active'} /> id="toggle"
<span className="checkbox__faux" /> className="checkbox__faux-container"
<Night className={this.state.dark ? 'icon active' : 'icon'} /> aria-live="assertive"
</span> >
</label> <Day className={this.state.dark ? 'icon' : 'icon active'} />
</aside> <span className="checkbox__faux" />
</FadeIn> <Night className={this.state.dark ? 'icon active' : 'icon'} />
</span>
</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()) FileSaver.saveAs(blob, this.generateFileName())
} }
handleAddressbookClick = (e) => { handleAddressbookClick = e => {
e.preventDefault() e.preventDefault()
this.constructVcard() 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 PropTypes from 'prop-types'
import withRouter from 'react-router-dom/withRouter' import withRouter from 'react-router-dom/withRouter'
import TransitionGroup from 'react-transition-group/TransitionGroup' 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 TemplateWrapper = ({ data, location, children }) => {
const meta = data.dataYaml const meta = data.dataYaml
const isHomepage = location.pathname === '/' const isHomepage = location.pathname === '/'
const now = new Date().getHours()
let classes = 'app'
if (now >= 19 || now <= 7) {
classes += ' dark'
}
return ( return (
<div className={classes}> <Fragment>
<Head meta={meta} location={location} /> <Head meta={meta} location={location} />
<Header meta={meta} isHomepage={isHomepage} /> <Header meta={meta} isHomepage={isHomepage} />
@ -48,7 +42,7 @@ const TemplateWrapper = ({ data, location, children }) => {
</TransitionGroup> </TransitionGroup>
<Footer meta={meta} /> <Footer meta={meta} />
</div> </Fragment>
) )
} }

6
src/layouts/index.scss
View File

@ -107,14 +107,14 @@ svg {
margin: 0; margin: 0;
} }
.app { #___gatsby {
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
flex-direction: column; flex-direction: column;
background: $body-background-color; background: $body-background-color;
transition: background .2s ease-out; transition: .6s $easing;
&.dark { .dark & {
background: $body-background-color--dark; background: $body-background-color--dark;
color: $text-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 const description = this.props.data.projectsYaml.description
this.state = { this.state = {
descriptionWithLineBreaks: description.split('\n').join('\n\n') descriptionWithLineBreaks: description.split('\n').join('\n\n'),
} }
} }