mirror of
https://github.com/kremalicious/portfolio.git
synced 2024-06-28 16:47:41 +02:00
project navigation
This commit is contained in:
parent
f52fec3560
commit
79923b5378
GPG Key ID:
606EEEF3C479A91F
|
|
@ -25,6 +25,16 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
|
|||
description
|
||||
techstack
|
||||
}
|
||||
previous {
|
||||
title
|
||||
slug
|
||||
img
|
||||
}
|
||||
next {
|
||||
title
|
||||
slug
|
||||
img
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -33,29 +43,33 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
|
|||
reject(result.errors)
|
||||
}
|
||||
|
||||
result.data.allProjectsJson.edges.forEach(({ node }) => {
|
||||
const slug = node.slug
|
||||
const title = node.title
|
||||
const img = node.img
|
||||
const img_more = node.img_more
|
||||
const description = node.description
|
||||
const links = node.links
|
||||
const techstack = node.techstack
|
||||
result.data.allProjectsJson.edges.forEach(
|
||||
({ node, previous, next }) => {
|
||||
const slug = node.slug
|
||||
const title = node.title
|
||||
const img = node.img
|
||||
const img_more = node.img_more
|
||||
const description = node.description
|
||||
const links = node.links
|
||||
const techstack = node.techstack
|
||||
|
||||
createPage({
|
||||
path: slug,
|
||||
component: template,
|
||||
context: {
|
||||
title,
|
||||
slug,
|
||||
img,
|
||||
img_more,
|
||||
description,
|
||||
techstack,
|
||||
links,
|
||||
},
|
||||
})
|
||||
})
|
||||
createPage({
|
||||
path: slug,
|
||||
component: template,
|
||||
context: {
|
||||
title,
|
||||
slug,
|
||||
img,
|
||||
img_more,
|
||||
description,
|
||||
techstack,
|
||||
links,
|
||||
previous,
|
||||
next,
|
||||
},
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
resolve()
|
||||
}))
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
text-align: center;
|
||||
|
||||
img {
|
||||
max-height: 100vh;
|
||||
max-height: 105vh;
|
||||
width: auto;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
|
|
|
|||
|
|
@ -64,3 +64,12 @@ export const Email = props => (
|
|||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const Index = props => <svg className="icon" viewBox="0 0 20 20" width="20" height="20" {...props}>
|
||||
<rect width="9" height="5" />
|
||||
<rect width="9" height="5" y="7" />
|
||||
<rect width="9" height="5" y="14" />
|
||||
<rect width="9" height="5" x="11" />
|
||||
<rect width="9" height="5" x="11" y="7" />
|
||||
<rect width="9" height="5" x="11" y="14" />
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
|
||||
@media (min-width: 30rem) {
|
||||
margin-top: $spacer / 2;
|
||||
margin-bottom: $spacer / 2;
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
.header__title,
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
@ -14,5 +14,7 @@
|
|||
flex: 0 0 (100% / 3);
|
||||
margin-bottom: $spacer;
|
||||
font-size: $font-size-small;
|
||||
text-align: center;
|
||||
background: rgba(#fff, .2);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,30 @@
|
|||
import React, { Fragment } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Link from 'gatsby-link'
|
||||
import Helmet from 'react-helmet'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import Content from '../atoms/Content'
|
||||
import FullWidth from '../atoms/FullWidth'
|
||||
import ProjectTechstack from '../molecules/ProjectTechstack'
|
||||
import ProjectLinks from '../molecules/ProjectLinks'
|
||||
import { Index } from '../atoms/Icons'
|
||||
import images from '../../images'
|
||||
import './Project.scss'
|
||||
|
||||
const Project = props => {
|
||||
const project = props.pathContext
|
||||
const title = project.title
|
||||
const img = project.img
|
||||
const img_more = project.img_more
|
||||
const description = project.description
|
||||
const links = project.links
|
||||
const techstack = project.techstack
|
||||
const Project = ({ pathContext }) => {
|
||||
const project = pathContext
|
||||
const {
|
||||
title,
|
||||
img,
|
||||
img_more,
|
||||
description,
|
||||
links,
|
||||
techstack,
|
||||
next,
|
||||
previous,
|
||||
} = project
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
return <Fragment>
|
||||
<Helmet>
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
|
|
@ -29,18 +34,13 @@ const Project = props => {
|
|||
<article className="project">
|
||||
<Content>
|
||||
<h1 className="project__title">{title}</h1>
|
||||
<ReactMarkdown
|
||||
source={description}
|
||||
escapeHtml={false}
|
||||
className="project__description"
|
||||
/>
|
||||
<ReactMarkdown source={description} escapeHtml={false} className="project__description" />
|
||||
|
||||
<FullWidth>
|
||||
<img className="project__image" src={images[img]} alt={title} />
|
||||
</FullWidth>
|
||||
|
||||
{!!img_more && (
|
||||
<FullWidth>
|
||||
{!!img_more && <FullWidth>
|
||||
{img_more.map(key => (
|
||||
<img
|
||||
key={key}
|
||||
|
|
@ -49,8 +49,7 @@ const Project = props => {
|
|||
alt={title}
|
||||
/>
|
||||
))}
|
||||
</FullWidth>
|
||||
)}
|
||||
</FullWidth>}
|
||||
|
||||
<footer className="project__meta">
|
||||
{!!techstack && <ProjectTechstack techstack={techstack} />}
|
||||
|
|
@ -58,9 +57,26 @@ const Project = props => {
|
|||
</footer>
|
||||
</Content>
|
||||
</article>
|
||||
|
||||
<nav className="project__nav full-width">
|
||||
{previous && <div className="project__nav__item">
|
||||
<Link className="project__nav__link prev" to={previous.slug}>
|
||||
<img className="project__image project__nav__image" src={images[previous.img]} alt={previous.title} />
|
||||
<h1 className="project__nav__title">{previous.title}</h1>
|
||||
</Link>
|
||||
</div>}
|
||||
<Link className="project__nav__index" title="Back to projects" to={'/'}>
|
||||
<Index />
|
||||
</Link>
|
||||
{next && <div className="project__nav__item">
|
||||
<Link className="project__nav__link next" to={next.slug}>
|
||||
<img className="project__image project__nav__image" src={images[next.img]} alt={next.title} />
|
||||
<h1 className="project__nav__title">{next.title}</h1>
|
||||
</Link>
|
||||
</div>}
|
||||
</nav>
|
||||
</main>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
Project.propTypes = {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,8 @@
|
|||
}
|
||||
|
||||
.project__meta {
|
||||
margin-top: $spacer;
|
||||
margin-top: $spacer * 4;
|
||||
margin-bottom: $spacer * 4;
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
display: flex;
|
||||
|
|
@ -44,3 +45,83 @@
|
|||
color: $brand-grey-light;
|
||||
}
|
||||
}
|
||||
|
||||
.project__nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.project__nav__image {
|
||||
margin: 0;
|
||||
box-shadow: 0 3px 5px rgba($brand-main, .2), 0 5px 16px rgba($brand-main, .2);
|
||||
}
|
||||
|
||||
.project__nav__item {
|
||||
flex: 0 0 48%;
|
||||
position: relative;
|
||||
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (min-width: 45rem) {
|
||||
flex-basis: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
.project__nav__link {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
background: transparent;
|
||||
transition: background .2s ease-out;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
&::after {
|
||||
background: rgba($brand-cyan, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project__nav__title {
|
||||
font-size: $font-size-small;
|
||||
padding: $spacer / 2 $spacer / 4;
|
||||
margin: 0;
|
||||
|
||||
@media (min-width: 45rem) {
|
||||
font-size: $font-size-base;
|
||||
padding: $spacer / 2 $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
.project__nav__index {
|
||||
height: 100%;
|
||||
display: block;
|
||||
align-self: center;
|
||||
margin-top: -$spacer;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 48.5%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: $brand-grey-light;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,10 +9,11 @@
|
|||
.projects__project {
|
||||
position: relative;
|
||||
background-color: $brand-grey-light;
|
||||
margin-bottom: $spacer * 4;
|
||||
margin: 0 auto $spacer * 4 auto;
|
||||
|
||||
@media (min-width: 85rem) {
|
||||
flex: 0 0 calc(50% - #{$spacer / 2});
|
||||
margin: 0;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user