Layout refinments

This commit is contained in:
Cássio Zen
2016-07-14 17:17:18 -03:00
parent 2746d91e39
commit 5d6eec28bb
7 changed files with 98 additions and 18 deletions

View File

@ -0,0 +1,13 @@
.root {
cursor: pointer;
}
.root h1 {
font-weight: 500;
font-size: 18px;
}
.root h2 {
font-weight: 400;
font-size: 16px;
}

View File

@ -1,5 +1,6 @@
import React, { PropTypes } from 'react';
import { Card } from '../UI';
import styles from './ImageCard.css'
export default class ImageCard extends React.Component {
constructor(props) {
@ -34,16 +35,16 @@ export default class ImageCard extends React.Component {
render() {
const { onClick, image, text } = this.props;
return (
<Card onClick={onClick}>
<img src={image} />
<h4>{text}</h4>
<Card onClick={onClick} className={styles.root}>
{image ? <img src={image} /> : null}
<h1>{text}</h1>
</Card>
);
}
}
ImageCard.propTypes = {
image: PropTypes.string.isRequired,
image: PropTypes.string,
onClick: PropTypes.func,
onImageLoaded: PropTypes.func,
text: PropTypes.string.isRequired

View File

@ -12,12 +12,13 @@ export default class EntryListing extends React.Component {
this.bricksConfig = {
packed: 'data-packed',
sizes: [
{ columns: 2, gutter: 15 },
{ mq: '780px', columns: 3, gutter: 15 },
{ mq: '1035px', columns: 4, gutter: 15 },
{ mq: '1290px', columns: 5, gutter: 15 },
{ mq: '1545px', columns: 6, gutter: 15 },
{ mq: '1800px', columns: 7, gutter: 15 },
{ columns: 1, gutter: 15 },
{ mq: '495px', columns: 2, gutter: 15 },
{ mq: '750px', columns: 3, gutter: 15 },
{ mq: '1005px', columns: 4, gutter: 15 },
{ mq: '1260px', columns: 5, gutter: 15 },
{ mq: '1515px', columns: 6, gutter: 15 },
{ mq: '1770px', columns: 7, gutter: 15 },
]
};
}