mirror of
https://github.com/kremalicious/portfolio.git
synced 2024-12-23 01:29:41 +01:00
Merge pull request #64 from kremalicious/feature/imagecount
show project images count on index page
This commit is contained in:
commit
2a6881e779
@ -7,6 +7,7 @@
|
|||||||
"syntax": "scss",
|
"syntax": "scss",
|
||||||
"rules": {
|
"rules": {
|
||||||
"indentation": 4,
|
"indentation": 4,
|
||||||
"number-leading-zero": "never"
|
"number-leading-zero": "never",
|
||||||
|
"no-descending-specificity": null
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -10,7 +10,6 @@
|
|||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://travis-ci.com/kremalicious/portfolio"><img src="https://travis-ci.com/kremalicious/portfolio.svg?branch=master" /></a>
|
<a href="https://travis-ci.com/kremalicious/portfolio"><img src="https://travis-ci.com/kremalicious/portfolio.svg?branch=master" /></a>
|
||||||
<a href="https://codeclimate.com/github/kremalicious/portfolio/maintainability"><img src="https://api.codeclimate.com/v1/badges/8f561ec93e0f8c6b15d9/maintainability" /></a>
|
<a href="https://codeclimate.com/github/kremalicious/portfolio/maintainability"><img src="https://api.codeclimate.com/v1/badges/8f561ec93e0f8c6b15d9/maintainability" /></a>
|
||||||
<a href="https://www.codacy.com/app/kremalicious/portfolio?utm_source=github.com&utm_medium=referral&utm_content=kremalicious/portfolio&utm_campaign=Badge_Grade"><img src="https://api.codacy.com/project/badge/Grade/c3bccea20dfd49c59b3956afd60998d8"/></a>
|
|
||||||
<a href="https://greenkeeper.io/"><img src="https://badges.greenkeeper.io/kremalicious/portfolio.svg" /></a>
|
<a href="https://greenkeeper.io/"><img src="https://badges.greenkeeper.io/kremalicious/portfolio.svg" /></a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
3
src/images/images.svg
Normal file
3
src/images/images.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||||
|
<path fill="#000000" d="M17.1250778,6.17151499 L15.0790778,0.536514988 C14.9280778,0.120514988 14.4840778,-0.100485012 14.0900778,0.0445149878 L0.492077822,5.00751499 C0.0980778217,5.15151499 -0.100922178,5.60451499 0.0510778217,6.02051499 L2.20707782,11.961515 L2.20707782,8.77851499 C2.20707782,7.34051499 3.35507782,6.17151499 4.76707782,6.17151499 L8.36007782,6.17151499 L12.6450778,3.16351499 L15.1240778,6.17151499 L17.1250778,6.17151499 Z M19.2380778,8.00151499 L4.76707782,8.00151499 C4.34707782,8.00151499 4.00507782,8.33551499 4.00507782,8.77851499 L4.00507782,18.198515 C4.00607782,18.642515 4.34807782,19.001515 4.76707782,19.001515 L19.2380778,19.001515 C19.6580778,19.001515 20.0000778,18.642515 20.0000778,18.198515 L20.0000778,8.77851499 C20.0000778,8.33551499 19.6580778,8.00151499 19.2380778,8.00151499 Z M18.0000778,17.001515 L6.00007782,17.001515 L6.00007782,15.001515 L7.98407782,10.983515 L10.7520778,14.419515 L13.3500778,11.757515 L16.6880778,10.552515 L18.0000778,14.001515 L18.0000778,17.001515 Z"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.1 KiB |
@ -2,21 +2,46 @@ import React from 'react'
|
|||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import { Link, graphql } from 'gatsby'
|
import { Link, graphql } from 'gatsby'
|
||||||
import ProjectImage from '../components/molecules/ProjectImage'
|
import ProjectImage from '../components/molecules/ProjectImage'
|
||||||
|
import { ReactComponent as Images } from '../images/images.svg'
|
||||||
import styles from './index.module.scss'
|
import styles from './index.module.scss'
|
||||||
|
|
||||||
|
const getImageCount = (images, slug) => {
|
||||||
|
let array = []
|
||||||
|
let slugWithoutSlashes = slug.replace(/\//g, '')
|
||||||
|
|
||||||
|
images.map(({ node }) => {
|
||||||
|
if (node.name.includes(slugWithoutSlashes)) {
|
||||||
|
array.push(node)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return array.length
|
||||||
|
}
|
||||||
|
|
||||||
const Home = ({ data }) => {
|
const Home = ({ data }) => {
|
||||||
const projects = data.allProjectsYaml.edges
|
const projects = data.allProjectsYaml.edges
|
||||||
|
const images = data.projectImageFiles.edges
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.projects}>
|
<div className={styles.projects}>
|
||||||
{projects.map(({ node }) => {
|
{projects.map(({ node }) => {
|
||||||
const { slug, title, img } = node
|
const { slug, title, img } = node
|
||||||
|
const imageCount = getImageCount(images, slug)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<article className={styles.project} key={slug}>
|
<article className={styles.project} key={slug}>
|
||||||
<Link to={slug}>
|
<Link to={slug}>
|
||||||
<h1 className={styles.title}>{title}</h1>
|
<h1 className={styles.title}>{title}</h1>
|
||||||
<ProjectImage fluid={img.childImageSharp.fluid} alt={title} />
|
<ProjectImage fluid={img.childImageSharp.fluid} alt={title} />
|
||||||
|
|
||||||
|
{imageCount > 1 && (
|
||||||
|
<small
|
||||||
|
className={styles.imageCount}
|
||||||
|
title={`${imageCount} project images`}
|
||||||
|
>
|
||||||
|
<Images /> {imageCount}
|
||||||
|
</small>
|
||||||
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
</article>
|
</article>
|
||||||
)
|
)
|
||||||
@ -49,5 +74,13 @@ export const IndexQuery = graphql`
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
projectImageFiles: allFile(filter: { name: { regex: "/portfolio/" } }) {
|
||||||
|
edges {
|
||||||
|
node {
|
||||||
|
name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
@ -57,6 +57,29 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
transform: translate3d(0, 0, 0);
|
transform: translate3d(0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.imageCount {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.imageCount {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10%;
|
||||||
|
right: 0;
|
||||||
|
color: $brand-grey-dimmed;
|
||||||
|
font-size: $font-size-mini;
|
||||||
|
padding: $spacer / 6 $spacer / 2;
|
||||||
|
background: rgba($brand-cyan, .9);
|
||||||
|
z-index: 10;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate3d(0, $spacer / 2, 0);
|
||||||
|
transition: transform .25s ease-out;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: $brand-grey-dimmed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user