Card related refinments

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;
 }

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 (
       <Card onClick={onClick} className={styles.root}>
-        {image ? <img src={image} /> : null}
+        <img src={image} onLoad={onImageLoaded} />
         <h1>{text}</h1>
+
+        {description ? <p>{description}</p> : null}
       </Card>
     );
   }
@@ -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 = {

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 <div>
+    return <div className={styles.root}>
       <h1>Listing {name}</h1>
       <div ref={(c) => this._entries = c}>
         {entries.map((entry) => {

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 {

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;
 }