diff --git a/src/components/molecules/ProjectNav.jsx b/src/components/molecules/ProjectNav.jsx
index f4415d0..9abbb5c 100644
--- a/src/components/molecules/ProjectNav.jsx
+++ b/src/components/molecules/ProjectNav.jsx
@@ -3,19 +3,12 @@ import PropTypes from 'prop-types'
import Link from 'gatsby-link'
import Img from 'gatsby-image'
import FullWidth from '../atoms/FullWidth'
-import { ReactComponent as Index } from '../../images/index.svg'
-
-import icons from '../atoms/Icons.module.scss'
import styles from './ProjectNav.module.scss'
-const ProjectNavLink = ({ previous, next }) => {
- const slug = previous ? previous.slug : next.slug
- const title = previous ? previous.title : next.title
- const img = previous ? previous.img : next.img
-
+const ProjectItem = ({ title, slug, img }) => {
return (
-
+
![]()
{
)
}
-const ProjectNav = ({ previous, next }) => (
+const ProjectNav = ({ projects }) => (
)
-ProjectNavLink.propTypes = {
- previous: PropTypes.object,
- next: PropTypes.object
+ProjectItem.propTypes = {
+ title: PropTypes.string,
+ slug: PropTypes.string,
+ img: PropTypes.object
}
ProjectNav.propTypes = {
- previous: PropTypes.object,
- next: PropTypes.object
+ projects: PropTypes.object
}
export default ProjectNav
diff --git a/src/components/molecules/ProjectNav.module.scss b/src/components/molecules/ProjectNav.module.scss
index 56af8cf..ef5be7f 100644
--- a/src/components/molecules/ProjectNav.module.scss
+++ b/src/components/molecules/ProjectNav.module.scss
@@ -3,10 +3,23 @@
$breakpoint-project-nav: 45rem;
.projectNav {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- overflow: hidden;
+ white-space: nowrap;
+ overflow-x: scroll;
+ -webkit-overflow-scrolling: touch;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+}
+
+.item {
+ display: inline-block;
+ width: 45vw;
+ margin-left: $spacer;
+
+ &:last-child {
+ margin-right: $spacer * 2;
+ }
}
.image {
@@ -20,48 +33,6 @@ $breakpoint-project-nav: 45rem;
}
}
-.item {
- flex: 1 1 46%;
- position: relative;
- transition: .2s ease-out;
- max-width: 500px;
-
- &:first-child {
- margin-right: $spacer / 2;
-
- &:hover,
- &:focus {
- transform: translate3d(-.5rem, 0, 0);
- }
- }
-
- /* stylelint-disable no-descending-specificity */
- &:last-child {
- margin-left: $spacer / 2;
-
- &:hover,
- &:focus {
- transform: translate3d(.5rem, 0, 0);
- }
- }
- /* stylelint-enable no-descending-specificity */
-
- @media (min-width: $breakpoint-project-nav) {
- flex-basis: 33%;
-
- &:first-child,
- &:last-child {
- margin: 0;
- }
- }
-}
-
-.itemEnd {
- pointer-events: none;
- display: flex;
- align-items: center;
-}
-
.title {
visibility: hidden;
font-size: 0;
@@ -70,69 +41,3 @@ $breakpoint-project-nav: 45rem;
.link {
display: block;
}
-
-.index {
- height: 100%;
- display: block;
- align-self: center;
- margin-top: $spacer * 2;
- margin-left: $spacer;
- margin-right: $spacer;
- transition: .2s ease-out;
- order: 3;
- width: 100%;
-
- @media (min-width: $breakpoint-project-nav) {
- margin-top: 0;
- margin-left: $spacer * 4;
- margin-right: $spacer * 4;
- order: initial;
- width: auto;
- }
-
- svg {
- fill: $brand-grey-light;
- width: 1.5rem;
- height: 1.5rem;
- }
-
- &:hover,
- &:focus {
- svg {
- fill: $brand-cyan;
- }
- }
-
- &:first-child {
- margin-left: 48.5%;
- }
-
- &:last-child {
- margin-right: auto;
- }
-}
-
-.end {
- padding-right: $spacer;
- text-align: left;
-
- h3 {
- font-size: $font-size-h4;
- margin-bottom: $spacer / 4;
- color: $brand-grey-light;
-
- @media (min-width: $breakpoint-project-nav) {
- font-size: $font-size-h3;
- }
- }
-
- p {
- margin: 0;
- color: $brand-grey-light;
- font-size: $font-size-small;
-
- @media (min-width: $breakpoint-project-nav) {
- font-size: $font-size-base;
- }
- }
-}
diff --git a/src/templates/Project.jsx b/src/templates/Project.jsx
index 257bf93..01accf7 100644
--- a/src/templates/Project.jsx
+++ b/src/templates/Project.jsx
@@ -43,11 +43,10 @@ class Project extends Component {
render() {
const meta = this.props.data.dataYaml
+ const projects = this.props.data.allProjectsYaml.edges
const project = this.props.data.projectsYaml
const projectImages = this.props.data.projectImages.edges
- const pathContext = this.props.pathContext
const { title, links, techstack } = project
- const { next, previous } = pathContext
return (
@@ -67,7 +66,7 @@ class Project extends Component {
-
+
)
}
@@ -90,7 +89,7 @@ Project.propTypes = {
export default Project
-export const projectQuery = graphql`
+export const projectAndProjectsQuery = graphql`
query ProjectBySlug($slug: String!) {
projectsYaml(slug: { eq: $slug }) {
title
@@ -136,6 +135,7 @@ export const projectQuery = graphql`
}
}
}
+
projectImages: allImageSharp(
filter: { id: { regex: $slug } }
sort: { fields: [id], order: ASC }
@@ -147,5 +147,19 @@ export const projectQuery = graphql`
}
}
}
+
+ allProjectsYaml {
+ edges {
+ node {
+ title
+ slug
+ img {
+ childImageSharp {
+ ...ProjectImageSizes
+ }
+ }
+ }
+ }
+ }
}
`