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

Merge pull request #7 from kremalicious/fix/project-nav-scroll

Fix project nav scroll
This commit is contained in:
Matthias Kretschmann 2018-06-12 11:21:45 +02:00 committed by GitHub
commit f8420ac660
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 55 additions and 89 deletions

View File

@ -8,52 +8,6 @@ class Availability extends PureComponent {
super(props) super(props)
} }
componentDidMount() {
if (this.props.meta.availability.status === true) {
let supportsPassive = false
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() { render() {
const { availability } = this.props.meta const { availability } = this.props.meta
const { status, available, unavailable } = availability const { status, available, unavailable } = availability

View File

@ -2,25 +2,28 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import Link from 'gatsby-link' import Link from 'gatsby-link'
import Img from 'gatsby-image' import Img from 'gatsby-image'
import FullWidth from '../atoms/FullWidth'
import styles from './ProjectNav.module.scss' import styles from './ProjectNav.module.scss'
const ProjectItem = ({ title, slug, img, current }) => ( const ProjectLink = ({ node }) => (
<div className={styles.item} id={current ? 'current' : null}> <Link className={styles.link} to={node.slug}>
<Link className={styles.link} to={slug}>
<Img <Img
className={styles.image} className={styles.image}
sizes={img.childImageSharp.sizes} sizes={node.img.childImageSharp.sizes}
alt={title} alt={node.title}
/> />
<h1 className={styles.title}>{title}</h1> <h1 className={styles.title}>{node.title}</h1>
</Link> </Link>
</div>
) )
class ProjectNav extends Component { class ProjectNav extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.scrollToCurrent = this.scrollToCurrent.bind(this)
}
componentDidMount() {
this.scrollToCurrent()
} }
componentDidUpdate() { componentDidUpdate() {
@ -28,45 +31,46 @@ class ProjectNav extends Component {
} }
scrollToCurrent = () => { scrollToCurrent = () => {
const container = window.document.getElementById('scrollContainer') const current = this.currentItem
const current = window.document.getElementById('current')
const currentLeft = current.getBoundingClientRect().left const currentLeft = current.getBoundingClientRect().left
const currentWidth = current.clientWidth const currentWidth = current.clientWidth
const finalPosition = currentLeft - window.innerWidth / 2 + currentWidth / 2 const finalPosition = currentLeft - window.innerWidth / 2 + currentWidth / 2
container.scrollLeft = finalPosition this.scrollContainer.scrollLeft = finalPosition
} }
render() { render() {
const { projects, project } = this.props const { projects, project } = this.props
return ( return (
<FullWidth> <nav
<nav className={styles.projectNav} id="scrollContainer"> className={styles.projectNav}
ref={node => {
this.scrollContainer = node
}}
>
{projects.map(({ node }) => { {projects.map(({ node }) => {
const current = node.slug === project.slug const current = node.slug === project.slug
return ( return (
<ProjectItem <div
className={styles.item}
key={node.slug} key={node.slug}
title={node.title} ref={node => {
current={current} if (current) this.currentItem = node
slug={node.slug} }}
img={node.img} >
/> <ProjectLink node={node} />
</div>
) )
})} })}
</nav> </nav>
</FullWidth>
) )
} }
} }
ProjectItem.propTypes = { ProjectLink.propTypes = {
current: PropTypes.bool, node: PropTypes.object
title: PropTypes.string,
slug: PropTypes.string,
img: PropTypes.object
} }
ProjectNav.propTypes = { ProjectNav.propTypes = {

View File

@ -1,6 +1,7 @@
@import 'variables'; @import 'variables';
.projectNav { .projectNav {
composes: fullWidth from '../atoms/FullWidth.module.scss';
white-space: nowrap; white-space: nowrap;
overflow-y: hidden; overflow-y: hidden;
overflow-x: scroll; overflow-x: scroll;
@ -13,12 +14,17 @@
.item { .item {
display: inline-block; display: inline-block;
width: 40vw; width: 60vw;
margin-left: $spacer * 2; margin-left: $spacer;
&:last-child { &:last-child {
margin-right: $spacer * 2; margin-right: $spacer * 2;
} }
@media (min-width: 30rem) {
width: 40vw;
margin-left: $spacer * 2;
}
} }
.image { .image {

View File

@ -26,15 +26,17 @@
display: inline-block; display: inline-block;
padding: 0 $spacer / 4; padding: 0 $spacer / 4;
font-size: $font-size-small; font-size: $font-size-small;
margin-left: $spacer; margin-left: $spacer / 2;
margin-right: $spacer / 2;
margin-bottom: $spacer / 2;
color: $text-color-light; color: $text-color-light;
&:first-child {
margin-left: 0;
}
:global(.dark) & { :global(.dark) & {
color: $text-color-light--dark; color: $text-color-light--dark;
} }
} }
} }
.footer__copyright {
opacity: .6;
}