mirror of
https://github.com/kremalicious/portfolio.git
synced 2024-12-23 01:29:41 +01:00
Merge pull request #104 from kremalicious/feature/project-nav
center current project in project nav
This commit is contained in:
commit
47e00e805c
10
package.json
10
package.json
@ -24,7 +24,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
"file-saver": "^2.0.1",
|
"file-saver": "^2.0.1",
|
||||||
"gatsby": "^2.3.3",
|
"gatsby": "^2.3.4",
|
||||||
"gatsby-image": "^2.0.35",
|
"gatsby-image": "^2.0.35",
|
||||||
"gatsby-plugin-favicon": "^3.1.5",
|
"gatsby-plugin-favicon": "^3.1.5",
|
||||||
"gatsby-plugin-matomo": "^0.6.0",
|
"gatsby-plugin-matomo": "^0.6.0",
|
||||||
@ -32,19 +32,19 @@
|
|||||||
"gatsby-plugin-react-helmet": "^3.0.11",
|
"gatsby-plugin-react-helmet": "^3.0.11",
|
||||||
"gatsby-plugin-sass": "^2.0.11",
|
"gatsby-plugin-sass": "^2.0.11",
|
||||||
"gatsby-plugin-sharp": "^2.0.32",
|
"gatsby-plugin-sharp": "^2.0.32",
|
||||||
"gatsby-plugin-sitemap": "^2.0.10",
|
"gatsby-plugin-sitemap": "^2.0.11",
|
||||||
"gatsby-plugin-svgr": "^2.0.2",
|
"gatsby-plugin-svgr": "^2.0.2",
|
||||||
"gatsby-source-filesystem": "^2.0.28",
|
"gatsby-source-filesystem": "^2.0.28",
|
||||||
"gatsby-transformer-json": "^2.1.11",
|
"gatsby-transformer-json": "^2.1.11",
|
||||||
"gatsby-transformer-sharp": "^2.1.17",
|
"gatsby-transformer-sharp": "^2.1.17",
|
||||||
"gatsby-transformer-yaml": "^2.1.11",
|
"gatsby-transformer-yaml": "^2.1.11",
|
||||||
"giphy-js-sdk-core": "^1.0.6",
|
"giphy-js-sdk-core": "^1.0.6",
|
||||||
"graphql": "^14.1.1",
|
"graphql": "^14.2.0",
|
||||||
"intersection-observer": "^0.5.1",
|
"intersection-observer": "^0.5.1",
|
||||||
"js-yaml": "^3.13.0",
|
"js-yaml": "^3.13.0",
|
||||||
"node-sass": "^4.11.0",
|
"node-sass": "^4.11.0",
|
||||||
"react": "^16.8.5",
|
"react": "^16.8.6",
|
||||||
"react-dom": "^16.8.5",
|
"react-dom": "^16.8.6",
|
||||||
"react-helmet": "^5.2.0",
|
"react-helmet": "^5.2.0",
|
||||||
"react-pose": "^4.0.8",
|
"react-pose": "^4.0.8",
|
||||||
"remark": "^10.0.1",
|
"remark": "^10.0.1",
|
||||||
|
@ -29,21 +29,15 @@ export default class Availability extends PureComponent {
|
|||||||
render={data => {
|
render={data => {
|
||||||
const { availability } = data.dataYaml
|
const { availability } = data.dataYaml
|
||||||
const { status, available, unavailable } = availability
|
const { status, available, unavailable } = availability
|
||||||
|
const className = status
|
||||||
|
? `${styles.availability} ${styles.available}`
|
||||||
|
: `${styles.availability}`
|
||||||
|
const html = status ? available : unavailable
|
||||||
|
|
||||||
return (
|
return (
|
||||||
!this.props.hide && (
|
!this.props.hide && (
|
||||||
<Animation
|
<Animation className={className}>
|
||||||
className={
|
<p dangerouslySetInnerHTML={{ __html: html }} />
|
||||||
status
|
|
||||||
? `${styles.availability} ${styles.available}`
|
|
||||||
: `${styles.availability}`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: status ? available : unavailable
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Animation>
|
</Animation>
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
|
@ -24,11 +24,19 @@ const query = graphql`
|
|||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
class ProjectLink extends PureComponent {
|
class Project extends PureComponent {
|
||||||
|
static propTypes = {
|
||||||
|
node: PropTypes.object.isRequired,
|
||||||
|
currentSlug: PropTypes.string.isRequired,
|
||||||
|
refCurrentItem: PropTypes.any
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { node } = this.props
|
const { node, currentSlug, refCurrentItem } = this.props
|
||||||
|
const isCurrent = node.slug === currentSlug
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<div className={styles.item} ref={isCurrent ? refCurrentItem : null}>
|
||||||
<Link className={styles.link} to={node.slug}>
|
<Link className={styles.link} to={node.slug}>
|
||||||
<Img
|
<Img
|
||||||
className={styles.image}
|
className={styles.image}
|
||||||
@ -37,57 +45,54 @@ class ProjectLink extends PureComponent {
|
|||||||
/>
|
/>
|
||||||
<h1 className={styles.title}>{node.title}</h1>
|
<h1 className={styles.title}>{node.title}</h1>
|
||||||
</Link>
|
</Link>
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ProjectLink.propTypes = {
|
|
||||||
node: PropTypes.object
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class ProjectNav extends PureComponent {
|
|
||||||
state = {
|
|
||||||
scrolledToCurrent: false
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
// this.scrollToCurrent()
|
|
||||||
this.setState({ scrolledToCurrent: true })
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate() {
|
|
||||||
// this.scrollToCurrent()
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
this.setState({ scrolledToCurrent: false })
|
|
||||||
}
|
|
||||||
|
|
||||||
scrollToCurrent = () => {
|
|
||||||
const current = this.currentItem
|
|
||||||
const currentLeft = current.getBoundingClientRect().left
|
|
||||||
const currentWidth = current.clientWidth
|
|
||||||
const finalPosition = currentLeft - window.innerWidth / 2 + currentWidth / 2
|
|
||||||
|
|
||||||
this.scrollContainer.scrollLeft += finalPosition
|
|
||||||
}
|
|
||||||
|
|
||||||
Project({ node }) {
|
|
||||||
// const current = node.slug === slug
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={styles.item}
|
|
||||||
key={node.slug}
|
|
||||||
// ref={node => current && (this.currentItem = node)}
|
|
||||||
>
|
|
||||||
<ProjectLink node={node} />
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class ProjectNav extends PureComponent {
|
||||||
|
static propTypes = {
|
||||||
|
currentSlug: PropTypes.string.isRequired
|
||||||
|
}
|
||||||
|
|
||||||
|
state = {
|
||||||
|
scrollLeftPosition: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
scrollContainer = React.createRef()
|
||||||
|
currentItem = React.createRef()
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.scrollToCurrent()
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate() {
|
||||||
|
this.scrollToCurrent()
|
||||||
|
}
|
||||||
|
|
||||||
|
scrollToCurrent = () => {
|
||||||
|
const scrollContainer = this.scrollContainer.current
|
||||||
|
const activeItem = this.currentItem.current
|
||||||
|
const scrollRect = scrollContainer.getBoundingClientRect()
|
||||||
|
const activeRect = activeItem.getBoundingClientRect()
|
||||||
|
const scrollLeftPosition =
|
||||||
|
activeRect.left -
|
||||||
|
scrollRect.left -
|
||||||
|
scrollRect.width / 2 +
|
||||||
|
activeRect.width / 2
|
||||||
|
|
||||||
|
scrollContainer.scrollLeft += this.state.scrollLeftPosition
|
||||||
|
|
||||||
|
this.setState(state => {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
scrollLeftPosition
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { slug } = this.props
|
const { currentSlug } = this.props
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StaticQuery
|
<StaticQuery
|
||||||
@ -96,12 +101,14 @@ export default class ProjectNav extends PureComponent {
|
|||||||
const projects = data.allProjectsYaml.edges
|
const projects = data.allProjectsYaml.edges
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav
|
<nav className={styles.projectNav} ref={this.scrollContainer}>
|
||||||
className={styles.projectNav}
|
|
||||||
// ref={node => (this.scrollContainer = node)}
|
|
||||||
>
|
|
||||||
{projects.map(({ node }) => (
|
{projects.map(({ node }) => (
|
||||||
<this.Project key={node.id} node={node} slug={slug} />
|
<Project
|
||||||
|
key={node.id}
|
||||||
|
node={node}
|
||||||
|
currentSlug={currentSlug}
|
||||||
|
refCurrentItem={this.currentItem}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</nav>
|
</nav>
|
||||||
)
|
)
|
||||||
@ -110,7 +117,3 @@ export default class ProjectNav extends PureComponent {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ProjectNav.propTypes = {
|
|
||||||
slug: PropTypes.string
|
|
||||||
}
|
|
||||||
|
@ -75,7 +75,7 @@ export default class Project extends PureComponent {
|
|||||||
<ProjectMeta links={links} techstack={techstack} />
|
<ProjectMeta links={links} techstack={techstack} />
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<ProjectNav slug={project.slug} />
|
<ProjectNav currentSlug={project.slug} />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user