Skip to content

Commit bcacca8

Browse files
richardvanthofrichardvanthof
committed
Refactored thumbnails
Removed all react-grid-system components, Added box-shadow, refactored structure of thumbnail and added new animation. Also added fixed height to blogpost-single thumbnail.
1 parent 4335fdd commit bcacca8

File tree

10 files changed

+147
-96
lines changed

10 files changed

+147
-96
lines changed

‎src/containers/Container.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const { mediaQueryMin, containerWidth } = theme;
66
const Container = styled.section`
77
padding: 1em ${containerWidth.xs};
88
display: flex;
9-
align-items: center;
9+
flex-direction: column;
1010
@media (${mediaQueryMin.sm}) {
1111
padding: 3em ${containerWidth.sm};
1212
}

‎src/containers/Gallery.jsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import styled from 'styled-components';
2+
import theme from '../styles/theme';
3+
4+
const { mediaQueryMin } = theme;
5+
6+
const Gallery = styled.section`
7+
display: flex;
8+
flex-direction: column;
9+
flex-wrap: wrap;
10+
& > * {
11+
width: 100%;
12+
flex-basis: 100%;
13+
padding: 0.5em;
14+
}
15+
@media (${mediaQueryMin.xs}) {
16+
flex-direction: row;
17+
align-items: center;
18+
& > * {
19+
width: ${props => props.xs + '%'|| 'inherit'};
20+
flex-basis: ${props => props.xs + '%'|| 'inherit'};
21+
}
22+
}
23+
@media (${mediaQueryMin.sm}) {
24+
& > * {
25+
width: ${props => props.sm + '%'|| 'inherit'};
26+
flex-basis: ${props => props.sm + '%'|| 'inherit'};
27+
}
28+
}
29+
@media (${mediaQueryMin.md}) {
30+
& > * {
31+
width: ${props => props.md+ '%' || 'inherit'};
32+
flex-basis: ${props => props.md + '%' || 'inherit'};
33+
}
34+
}
35+
@media (${mediaQueryMin.lg}) {
36+
& > * {
37+
width: ${props => props.lg+ '%' || 'inherit'};
38+
flex-basis: ${props => props.lg + '%' || 'inherit'};
39+
}
40+
}
41+
@media (${mediaQueryMin.xxl}) {
42+
& > * {
43+
width: ${props => props.lg+ '%' || 'inherit'};
44+
flex-basis: width: ${props => props.lg + '%' || 'inherit'};
45+
padding: 0.5em;
46+
&:first-child {
47+
padding-right: 3em;
48+
}
49+
}
50+
}
51+
`;
52+
53+
export default Gallery;

‎src/containers/Thumbnails/PostThumbnail.components.jsx‎

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,14 @@ export const Subtitle = styled(SubtitleBase)`
2626
`;
2727

2828
export const ThumbnailBase = styled(Link)`
29-
background-color: ${theme.colors.secondary};
3029
padding-bottom: 2em;
3130
cursor: pointer;
3231
transition: all 0.4s ease;
3332
min-width: 10em;
33+
width: 100%;
34+
& > * {
35+
box-shadow: 0 0 0.1em 0 rgba(0,0,0,0.05);
36+
}
3437
.thumbnail-cta {
3538
transition: 0.3s ease all;
3639
transform: translate(0em, -1em);
@@ -54,23 +57,8 @@ export const ThumbnailBase = styled(Link)`
5457

5558
export const ThumbnailContent = styled.div`
5659
padding: 1.33em;
57-
big {
58-
p {
59-
margin-bottom: 1em;
60-
}
61-
}
62-
small {
63-
@media (${mediaQueryMin.md}) {
64-
display: block;
65-
margin: 1.66em 0em;
66-
}
67-
68-
img {
69-
width: 2em;
70-
height: 0.5em;
71-
margin-left: 0.66em;
72-
}
73-
}
60+
background-color: ${theme.colors.secondary};
61+
height: 13rem;
7462
`;
7563

7664
export const BigThumbnailImg = styled.div`
@@ -82,18 +70,33 @@ export const BigThumbnailImg = styled.div`
8270
transition: all 0.3s ease;
8371
8472
`;
85-
86-
export const ThumbnailImg = styled.div`
87-
background: url('${props => props.img}'), ${secondary};
73+
const ThumbnailImgBase = styled.figure`
74+
background: ${secondary};
8875
background-position: center center;
8976
background-size: cover;
9077
transition: all 0.5s ease;
91-
height: 50vh;
92-
max-height: 40em;
78+
height: 25rem;
79+
overflow: hidden;
80+
object-fit: cover;
9381
@media (${mediaQueryMin.md}) {
94-
height: ${props => (props.big ? '50vh' : '15em')};
82+
height: ${props => (props.big ? '50vh' : '20rem')};
83+
}
84+
`;
85+
86+
const ThumbnailImgContent = styled.img`
87+
width: 100%;
88+
height: 100%;
89+
object-fit: cover;
90+
transition: 0.3s ease-in-out;
91+
&:hover {
92+
transform: scale(1.05);
9593
}
9694
`;
95+
export const ThumbnailImg = ({img, alt}) => (
96+
<ThumbnailImgBase>
97+
<ThumbnailImgContent src={img} alt={alt || 'featured image'} />
98+
</ThumbnailImgBase>
99+
);
97100

98101
export const Arrow = styled.img`
99102
margin-left: 0.01em;

‎src/containers/Thumbnails/PostThumbnail.jsx‎

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { Col } from '../../lib/Grid';
43
import {
54
Arrow,
65
BigThumbnailImg,
@@ -10,43 +9,41 @@ import {
109
ThumbnailImg,
1110
} from './PostThumbnail.components';
1211

12+
const cutOffText = (string, maxLength) => {
13+
if (string.length > maxLength) {
14+
const subString = `${string.substring(0,maxLength)}...`;
15+
return subString;
16+
}
17+
return string;
18+
}
19+
1320
const PostThumbnail = ({ big, title, slug, category, postImageUrl }) => {
1421
if (big) {
1522
return (
16-
<Col>
17-
<ThumbnailBase to={slug}>
18-
<BigThumbnailImg
23+
<ThumbnailBase to={slug}>
24+
<BigThumbnailImg
1925
className="thumbnail-img"
2026
img={postImageUrl}
21-
/>
22-
<ThumbnailContent>
23-
<Subtitle>{category}</Subtitle>
24-
25-
<h6>{title}</h6>
26-
</ThumbnailContent>
27-
</ThumbnailBase>
28-
</Col>
27+
/>
28+
<ThumbnailContent>
29+
<p className="subtitle">{category}</p>
30+
<h6>{title}</h6>
31+
</ThumbnailContent>
32+
</ThumbnailBase>
2933
);
3034
}
3135
return (
32-
<Col lg={4} md={6}>
3336
<ThumbnailBase to={slug}>
3437
<ThumbnailImg className="thumbnail-img" img={postImageUrl} />
3538
<ThumbnailContent>
36-
<Subtitle>{category}</Subtitle>
37-
<h6>{title}</h6>
38-
<a href={slug}>
39-
<small className="thumbnail-cta">
40-
Lees meer
41-
<Arrow
42-
src={require('../../images/icons/ui/arrow.svg')}
43-
alt=">"
44-
/>
45-
</small>
39+
<p className="subtitle">{category}</p>
40+
<h5>{cutOffText(title, 65)}</h5>
41+
<a className="thumbnail-cta caption" href={slug}>
42+
Lees meer
4643
</a>
4744
</ThumbnailContent>
4845
</ThumbnailBase>
49-
</Col>
46+
5047
);
5148
};
5249

‎src/layouts/BlogpostLayout.components.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,9 @@ export const ArticleHeader = styled.header`
6262
export const ArticleImageWrapper = styled.figure`
6363
width: 125%;
6464
margin: 0.66em 0;
65+
margin-bottom: 1em;
66+
height: 50rem;
67+
overflow: hidden;
6568
`;
6669

6770
export const BlogContent = styled.div`
@@ -122,7 +125,11 @@ export const ReadingTime = styled(Small)`
122125
margin-bottom: 2px;
123126
`;
124127

125-
export const ArticleImage = styled.img``;
128+
export const ArticleImage = styled.img`
129+
width: 100%;
130+
height: 100%;
131+
object-fit: cover;
132+
`;
126133

127134
export const CallToActionContainer = styled.div`
128135
margin: 2rem 4rem;

‎src/layouts/BlogpostLayout.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import {
2424
} from './BlogpostLayout.components';
2525

2626
const BlogSingle = ({ content }) => (
27-
<Layout pageSettings={content.pageSettings}>
27+
<Layout padded pageSettings={content.pageSettings}>
2828
<Article>
2929
<ArticleHeader>
3030
<SubtitleContainer>

‎src/layouts/MainLayout.jsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import HeadScripts from '../lib/GetHeadScripts';
1313
const Main = styled.main`
1414
max-width: 100vw !important;
1515
overflow-x: hidden;
16+
padding-top: ${props => props.padded ? '10vh' : 0};
1617
`;
1718

1819
const HeadElements = () => (
@@ -26,21 +27,22 @@ const HeadElements = () => (
2627
</Helmet>
2728
);
2829

29-
const Layout = ({ children, pageSettings }) => {
30+
31+
const Layout = ({ children, pageSettings, padded }) => {
3032
const { title, description, keywords } = pageSettings;
3133
return (
32-
<div>
34+
<>
3335
<HeadElements />
3436
<HeadScripts />
3537
<GlobalStyles />
3638
<SEO title={title} description={description} keywords={keywords} />
3739
<Navbar />
38-
<Main className="main">
40+
<Main padded={padded} className="main">
3941
<TypographyClassStyling />
4042
{children}
4143
</Main>
4244
<Footer />
43-
</div>
45+
</>
4446
);
4547
};
4648

‎src/pages/cases.jsx‎

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import styled from 'styled-components';
33
import Layout from '../layouts/MainLayout';
4-
import { Container, Row } from '../lib/Grid';
4+
import Container from '../containers/Container';
55

66
import PostThumbnail from '../containers/Thumbnails/PostThumbnail';
77

@@ -19,24 +19,21 @@ const dawnyImage = require('../images/img/cases/dawny/dashboard.png');
1919
const sungevityImg = require('../images/img/cases/sungevity/woco.png');
2020
const vrsImg = require('../images/img/cases/vrs/cover.svg');
2121

22-
const CasesContainer = styled(Container)`
23-
margin-top: 15vh !important;
24-
`;
22+
2523
const Cases = () => (
26-
<Layout pageSettings={pageSettings}>
27-
<CasesContainer>
28-
<Row>
29-
<PostThumbnail
30-
big
31-
title="Modern functiewaarderingsplatform"
32-
category="STYR"
33-
slug="/case/styr"
34-
postImageUrl={styrImg}
35-
/>
36-
</Row>
37-
</CasesContainer>
24+
<Layout padded pageSettings={pageSettings}>
25+
<Container>
26+
<PostThumbnail
27+
big
28+
title="Modern functiewaarderingsplatform"
29+
category="STYR"
30+
slug="/case/styr"
31+
postImageUrl={styrImg}
32+
/>
33+
</Container>
34+
35+
3836
<Container>
39-
<Row>
4037
<PostThumbnail
4138
title="Brengt Breda dichter bij elkaar"
4239
category="Mooiwerk Breda"
@@ -55,10 +52,8 @@ const Cases = () => (
5552
slug="/case/dawny"
5653
postImageUrl={dawnyImage}
5754
/>
58-
</Row>
5955
</Container>
6056
<Container>
61-
<Row>
6257
<PostThumbnail
6358
title="Duurzaam met zonnepanelen"
6459
category="Sungevity"
@@ -77,7 +72,6 @@ const Cases = () => (
7772
slug="/case/vrs"
7873
postImageUrl={vrsImg}
7974
/>
80-
</Row>
8175
</Container>
8276
</Layout>
8377
);

0 commit comments

Comments
 (0)