diff --git a/src/components/Cards/ImageCard.css b/src/components/Cards/ImageCard.css
index 398cfdda..b2020b48 100644
--- a/src/components/Cards/ImageCard.css
+++ b/src/components/Cards/ImageCard.css
@@ -3,11 +3,16 @@
}
.root h1 {
- font-weight: 500;
- font-size: 18px;
+ font-size: 17px;
}
.root h2 {
font-weight: 400;
- font-size: 16px;
+ font-size: 15px;
+}
+
+.root p {
+ color: #555;
+ font-size: 14px;
+ margin-top: 5px;
}
diff --git a/src/components/Cards/ImageCard.js b/src/components/Cards/ImageCard.js
index 1d09aa16..8a04d868 100644
--- a/src/components/Cards/ImageCard.js
+++ b/src/components/Cards/ImageCard.js
@@ -1,43 +1,18 @@
import React, { PropTypes } from 'react';
import { Card } from '../UI';
-import styles from './ImageCard.css'
+import styles from './ImageCard.css';
export default class ImageCard extends React.Component {
- constructor(props) {
- super(props);
- this._image = null;
- this.fetchImage = this.fetchImage.bind(this);
- }
-
- componentDidMount() {
- this._image = new Image();
- if (this.props.image) {
- this.fetchImage(this.props.image);
- }
- }
-
- componentWillReceiveProps(nextProps) {
- if (this.props.image !== nextProps.image) {
- this.fetchImage(nextProps.image);
- }
- }
-
- componentWillUnmount() {
- this._image.onload = null;
- this._image = null;
- }
-
- fetchImage(src) {
- this._image.onload = this.props.onImageLoaded;
- this._image.src = src;
- }
render() {
- const { onClick, image, text } = this.props;
+ const { onClick, onImageLoaded, image, text, description } = this.props;
+ console.log(this.props)
return (
- {image ? : null}
+
{text}
+
+ {description ? {description}
: null}
);
}
@@ -47,7 +22,8 @@ ImageCard.propTypes = {
image: PropTypes.string,
onClick: PropTypes.func,
onImageLoaded: PropTypes.func,
- text: PropTypes.string.isRequired
+ text: PropTypes.string.isRequired,
+ description: PropTypes.string
};
ImageCard.defaultProps = {
diff --git a/src/components/EntryListing.js b/src/components/EntryListing.js
index 712c0c08..710f2fe0 100644
--- a/src/components/EntryListing.js
+++ b/src/components/EntryListing.js
@@ -3,6 +3,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import Bricks from 'bricks.js';
import history from '../routing/history';
import Cards from './Cards';
+import _ from 'lodash';
+import styles from './EntryListing.css'
export default class EntryListing extends React.Component {
constructor(props) {
@@ -21,6 +23,8 @@ export default class EntryListing extends React.Component {
{ mq: '1770px', columns: 7, gutter: 15 },
]
};
+
+ this.updateBricks = _.throttle(this.updateBricks.bind(this), 30);
}
componentDidMount() {
@@ -51,6 +55,10 @@ export default class EntryListing extends React.Component {
this.bricksInstance.resize(false);
}
+ updateBricks() {
+ this.bricksInstance.pack();
+ }
+
cardFor(collection, entry, link) {
//const { entry, getMedia, onChange, onAddMedia, onRemoveMedia } = this.props;
const card = Cards[collection.getIn(['card', 'type'])] || Cards._unknown;
@@ -58,8 +66,9 @@ export default class EntryListing extends React.Component {
key: entry.get('slug'),
collection: collection,
onClick: history.push.bind(this, link),
- onImageLoaded: () => this.bricksInstance.pack(),
+ onImageLoaded: this.updateBricks,
text: entry.getIn(['data', collection.getIn(['card', 'text'])]),
+ description: entry.getIn(['data', collection.getIn(['card', 'description'])]),
image: entry.getIn(['data', collection.getIn(['card', 'image'])]),
});
}
@@ -68,7 +77,7 @@ export default class EntryListing extends React.Component {
const { collection, entries } = this.props;
const name = collection.get('name');
- return
+ return
Listing {name}
this._entries = c}>
{entries.map((entry) => {
diff --git a/src/components/UI/card/Card.css b/src/components/UI/card/Card.css
index e5ae2065..592cfd1e 100644
--- a/src/components/UI/card/Card.css
+++ b/src/components/UI/card/Card.css
@@ -8,7 +8,8 @@
}
.card > *:not(iframe, video, img, header, footer) {
- margin: 0 10px;
+ margin-left: 10px;
+ margin-right: 10px;
}
.card > *:not(iframe, video, img, header, footer):first-child {
diff --git a/src/index.css b/src/index.css
index 7d136634..c13be2b0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -28,6 +28,6 @@ header {
height: 100%;
}
-h1, h2, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5, h6, p {
margin: 0;
}