Layout refinments
This commit is contained in:
13
src/components/Cards/ImageCard.css
Normal file
13
src/components/Cards/ImageCard.css
Normal file
@ -0,0 +1,13 @@
|
||||
.root {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.root h1 {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.root h2 {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
}
|
@ -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
|
||||
|
@ -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 },
|
||||
]
|
||||
};
|
||||
}
|
||||
|
Reference in New Issue
Block a user