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

Fix project nav scroll

src/components/molecules/Availability.jsx

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

src/components/molecules/ProjectNav.jsx

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

src/components/molecules/ProjectNav.module.scss

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

src/components/organisms/Footer.module.scss

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