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

availability component tweaks

This commit is contained in:
Matthias Kretschmann 2018-04-25 20:41:47 +02:00
parent f9a05674b5
commit 840883b560
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 127 additions and 42 deletions

View File

@ -10,7 +10,11 @@
"GitHub": "https://github.com/kremalicious", "GitHub": "https://github.com/kremalicious",
"Dribbble": "https://dribbble.com/kremalicious" "Dribbble": "https://dribbble.com/kremalicious"
}, },
"availability": true, "availability": {
"status": true,
"available": "👔 Available for new projects. <a href=\"mailto:m@kretschmann.io\">Lets talk</a>!",
"unavailable": "Not available for new projects."
},
"typekit": "dtg3zui", "typekit": "dtg3zui",
"googleanalytics": "UA-1441794-4" "googleanalytics": "UA-1441794-4"
} }

View File

@ -11,3 +11,13 @@ export const FadeIn = props => (
{...props} {...props}
/> />
) )
export const MoveIn = props => (
<CSSTransition
classNames="movein"
appear={true}
in={true}
timeout={{ enter: 300, exit: 200, appear: 300 }}
{...props}
/>
)

View File

@ -1,18 +1,11 @@
.fadein-appear { .fadein-appear,
opacity: .01;
&.fadein-appear-active {
opacity: 1;
transition: 400ms ease-in;
}
}
.fadein-enter { .fadein-enter {
opacity: .01; opacity: .01;
&.fadein-appear-active,
&.fadein-enter-active { &.fadein-enter-active {
opacity: 1; opacity: 1;
transition: 300ms ease-out; transition: 400ms ease-in;
} }
} }
@ -24,3 +17,27 @@
opacity: .01; opacity: .01;
} }
} }
.movein-appear,
.movein-enter {
opacity: .01;
transform: translate3d(0, 3rem, 0);
&.movein-appear-active,
&.movein-enter-active {
opacity: 1;
transform: translate3d(0, 0, 0);
transition: 300ms ease-out;
}
}
.movein-exit {
opacity: 1;
transform: translate3d(0, 0, 0);
transition: 100ms ease-out;
&.movein-exit-active {
opacity: .01;
transform: translate3d(0, 3rem, 0);
}
}

View File

@ -1,37 +1,82 @@
import React, { Fragment } from 'react' import React, { Fragment, Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { FadeIn } from '../atoms/Animations' import { MoveIn } from '../atoms/Animations'
import './Availability.scss' import './Availability.scss'
const Availability = ({ meta, hide }) => { class Availability extends Component {
const { availability, social } = meta constructor(props) {
super(props)
this.handleScroll = this.handleScroll.bind(this)
}
const available = `👔 Available for new projects. <a href="${ componentDidMount() {
social.Email if (this.props.meta.availability.status === true) {
}">Lets talk</a>!` let supportsPassive = false
const unavailable = 'Not available for new projects.'
try {
const opts = Object.defineProperty({}, 'passive', {
get: function() {
supportsPassive = true
},
})
window.addEventListener('test', null, opts)
} catch (e) {
return e
}
window.addEventListener('scroll', this.handleScroll, supportsPassive ? { passive: true } : false)
}
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll)
}
handleScroll() {
let timeout
const footer = document.getElementsByClassName('footer')[0]
const availability = document.getElementsByClassName('availability')[0]
if (!timeout) {
timeout = setTimeout(function() {
timeout = null
if (footer.getBoundingClientRect().top <= window.innerHeight) {
availability.style.opacity = 0
window.removeEventListener('scroll', this.handleScroll)
} else {
availability.style.opacity = 1
}
}, 300)
}
}
render() {
const { availability } = this.props.meta
const { status, available, unavailable } = availability
return ( return (
<Fragment> <Fragment>
{!hide && ( {!this.props.hide && (
<FadeIn> <MoveIn>
<aside <aside
className={ className={
availability status
? 'availability available' ? 'availability available'
: 'availability unavailable' : 'availability unavailable'
} }
> >
<p <p
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: availability ? available : unavailable, __html: status ? available : unavailable,
}} }}
/> />
</aside> </aside>
</FadeIn> </MoveIn>
)} )}
</Fragment> </Fragment>
) )
}
} }
Availability.propTypes = { Availability.propTypes = {

View File

@ -9,6 +9,7 @@
z-index: 2; z-index: 2;
padding: $spacer / 2; padding: $spacer / 2;
display: block; display: block;
transition: opacity .2s ease-out;
p { margin-bottom: 0; } p { margin-bottom: 0; }
@ -17,4 +18,8 @@
position: fixed; position: fixed;
bottom: $spacer; bottom: $spacer;
} }
a {
border-bottom: 1px solid rgba($brand-cyan, .4);
}
} }

View File

@ -23,7 +23,7 @@ const Header = ({ meta, isHomepage }) => {
</FadeIn> </FadeIn>
<Social meta={meta} hide={!isHomepage} /> <Social meta={meta} hide={!isHomepage} />
<Availability meta={meta} hide={!isHomepage} /> <Availability meta={meta} hide={!isHomepage && !meta.availability.status} />
</header> </header>
) )
} }

View File

@ -73,7 +73,11 @@ export const query = graphql`
GitHub GitHub
Dribbble Dribbble
} }
availability availability {
status
available
unavailable
}
typekit typekit
googleanalytics googleanalytics
} }