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

scroll currently viewed project into view

This commit is contained in:
Matthias Kretschmann 2018-06-11 23:54:16 +02:00
parent 154adac8ad
commit 8fed76e3ec
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 63 additions and 39 deletions

View File

@ -1,13 +1,12 @@
import React from 'react'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Link from 'gatsby-link'
import Img from 'gatsby-image'
import FullWidth from '../atoms/FullWidth'
import styles from './ProjectNav.module.scss'
const ProjectItem = ({ title, slug, img }) => {
return (
<div className={styles.item}>
const ProjectItem = ({ title, slug, img, current }) => (
<div className={styles.item} id={current ? 'current' : null}>
<Link className={styles.link} to={slug}>
<Img
className={styles.image}
@ -17,32 +16,62 @@ const ProjectItem = ({ title, slug, img }) => {
<h1 className={styles.title}>{title}</h1>
</Link>
</div>
)
}
)
const ProjectNav = ({ projects }) => (
class ProjectNav extends Component {
constructor(props) {
super(props)
}
componentDidUpdate() {
this.scrollToCurrent()
}
scrollToCurrent = () => {
const container = window.document.getElementById('scrollContainer')
const current = window.document.getElementById('current')
const currentLeft = current.getBoundingClientRect().left
const currentWidth = current.clientWidth
const finalPosition = currentLeft - window.innerWidth / 2 + currentWidth / 2
container.scrollLeft = finalPosition
}
render() {
const { projects, project } = this.props
return (
<FullWidth>
<nav className={styles.projectNav}>
{projects.map(({ node }) => (
<nav className={styles.projectNav} id="scrollContainer">
{projects.map(({ node }) => {
const current = node.slug === project.slug
return (
<ProjectItem
key={node.slug}
title={node.title}
current={current}
slug={node.slug}
img={node.img}
/>
))}
)
})}
</nav>
</FullWidth>
)
)
}
}
ProjectItem.propTypes = {
current: PropTypes.bool,
title: PropTypes.string,
slug: PropTypes.string,
img: PropTypes.object
}
ProjectNav.propTypes = {
projects: PropTypes.object
projects: PropTypes.array,
project: PropTypes.object
}
export default ProjectNav

View File

@ -1,9 +1,8 @@
@import 'variables';
$breakpoint-project-nav: 45rem;
.projectNav {
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
@ -14,12 +13,8 @@ $breakpoint-project-nav: 45rem;
.item {
display: inline-block;
width: 45vw;
margin-left: $spacer;
&:last-child {
width: 40vw;
margin-right: $spacer * 2;
}
}
.image {

View File

@ -66,7 +66,7 @@ class Project extends Component {
</Content>
</article>
<ProjectNav projects={projects} />
<ProjectNav projects={projects} project={project} />
</Fragment>
)
}