mirror of
https://github.com/kremalicious/portfolio.git
synced 2024-12-23 01:29:41 +01:00
scroll currently viewed project into view
This commit is contained in:
parent
154adac8ad
commit
8fed76e3ec
@ -1,13 +1,12 @@
|
|||||||
import React from 'react'
|
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 FullWidth from '../atoms/FullWidth'
|
||||||
import styles from './ProjectNav.module.scss'
|
import styles from './ProjectNav.module.scss'
|
||||||
|
|
||||||
const ProjectItem = ({ title, slug, img }) => {
|
const ProjectItem = ({ title, slug, img, current }) => (
|
||||||
return (
|
<div className={styles.item} id={current ? 'current' : null}>
|
||||||
<div className={styles.item}>
|
|
||||||
<Link className={styles.link} to={slug}>
|
<Link className={styles.link} to={slug}>
|
||||||
<Img
|
<Img
|
||||||
className={styles.image}
|
className={styles.image}
|
||||||
@ -17,32 +16,62 @@ const ProjectItem = ({ title, slug, img }) => {
|
|||||||
<h1 className={styles.title}>{title}</h1>
|
<h1 className={styles.title}>{title}</h1>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</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>
|
<FullWidth>
|
||||||
<nav className={styles.projectNav}>
|
<nav className={styles.projectNav} id="scrollContainer">
|
||||||
{projects.map(({ node }) => (
|
{projects.map(({ node }) => {
|
||||||
|
const current = node.slug === project.slug
|
||||||
|
|
||||||
|
return (
|
||||||
<ProjectItem
|
<ProjectItem
|
||||||
key={node.slug}
|
key={node.slug}
|
||||||
title={node.title}
|
title={node.title}
|
||||||
|
current={current}
|
||||||
slug={node.slug}
|
slug={node.slug}
|
||||||
img={node.img}
|
img={node.img}
|
||||||
/>
|
/>
|
||||||
))}
|
)
|
||||||
|
})}
|
||||||
</nav>
|
</nav>
|
||||||
</FullWidth>
|
</FullWidth>
|
||||||
)
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
ProjectItem.propTypes = {
|
ProjectItem.propTypes = {
|
||||||
|
current: PropTypes.bool,
|
||||||
title: PropTypes.string,
|
title: PropTypes.string,
|
||||||
slug: PropTypes.string,
|
slug: PropTypes.string,
|
||||||
img: PropTypes.object
|
img: PropTypes.object
|
||||||
}
|
}
|
||||||
|
|
||||||
ProjectNav.propTypes = {
|
ProjectNav.propTypes = {
|
||||||
projects: PropTypes.object
|
projects: PropTypes.array,
|
||||||
|
project: PropTypes.object
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ProjectNav
|
export default ProjectNav
|
||||||
|
@ -1,9 +1,8 @@
|
|||||||
@import 'variables';
|
@import 'variables';
|
||||||
|
|
||||||
$breakpoint-project-nav: 45rem;
|
|
||||||
|
|
||||||
.projectNav {
|
.projectNav {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
overflow-y: hidden;
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
@ -14,12 +13,8 @@ $breakpoint-project-nav: 45rem;
|
|||||||
|
|
||||||
.item {
|
.item {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 45vw;
|
width: 40vw;
|
||||||
margin-left: $spacer;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-right: $spacer * 2;
|
margin-right: $spacer * 2;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
|
@ -66,7 +66,7 @@ class Project extends Component {
|
|||||||
</Content>
|
</Content>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<ProjectNav projects={projects} />
|
<ProjectNav projects={projects} project={project} />
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user