wip

src/components/grid/grid.jsx

@@ -4,6 +4,7 @@ var React = require('react');
 var Thumbnail = require('../thumbnail/thumbnail.jsx');
 var FlexRow = require('../flex-row/flex-row.jsx');
 
+var api = require('../../lib/api');
 require('./grid.scss');
 
 var Grid = React.createClass({
@@ -16,9 +17,19 @@ var Grid = React.createClass({
             showLoves: false,
             showFavorites: false,
             showRemixes: false,
-            showViews: false
+            showViews: false,
+            showAvatar: false
         };
     },
+    getAvatar: function (username) {
+        var url = '';
+        api({
+            uri: '/users/' + username
+        }, function (err, body) {
+            this.url = body.profile.images['32x32'];
+        }.bind(this));
+        console.log(url);
+    },
     render: function () {
         var classes = classNames(
             'grid',
@@ -38,10 +49,12 @@ var Grid = React.createClass({
                                            showFavorites={this.props.showFavorites}
                                            showRemixes={this.props.showRemixes}
                                            showViews={this.props.showViews}
+                                           showAvatar={this.props.showAvatar}
                                            type={'project'}
                                            href={href}
                                            title={item.title}
                                            src={item.image}
+                                           avatar={this.getAvatar(item.author.username)}
                                            creator={item.author.username}
                                            loves={item.stats.loves}
                                            favorites={item.stats.favorites}

src/components/thumbnail/thumbnail.jsx

@@ -14,11 +14,13 @@ var Thumbnail = React.createClass({
             href: '#',
             title: 'Project',
             src: '',
+            avatar: '',
             type: 'project',
             showLoves: false,
             showFavorites: false,
             showRemixes: false,
             showViews: false,
+            showAvatar: false,
             linkTitle: true,
             explore: false,
             alt: ''
@@ -32,6 +34,13 @@ var Thumbnail = React.createClass({
             {'explore': this.props.explore}
         );
         var extra = [];
+        if (this.props.avatar && this.props.showAvatar) {
+            extra.push(
+                <a className="creator-image" href={'/users/' + this.props.creator + '/'}>
+                    <img src={this.props.avatar} alt={this.props.creator} />
+                </a>
+            );
+        }
         if (this.props.creator) {
             extra.push(
                 <div key="creator" className="thumbnail-creator">

src/views/explore/explore.jsx

@@ -139,7 +139,8 @@ var Explore = injectIntl(React.createClass({
                               explore={true}
                               showLoves={false}
                               showFavorites={false}
-                              showViews={false} />
+                              showViews={false}
+                              showAvatar={true}/>
                         <SubNavigation className='load'>
                             <button onClick={this.getExploreMore}>
                                 <li>

src/views/explore/explore.scss

@@ -77,9 +77,13 @@ $base-bg: $ui-white;
     #projectBox {
         border-top: 2px solid;
         border-color: $active-gray;
-        background-color: $ui-white;
+        background-color: $ui-gray;
         padding-bottom: 30px;
         width: 100%;
+
+        .grid .flex-row {
+            justify-content: space-around;
+        }
     }
 
     .load button {
@@ -92,4 +96,35 @@ $base-bg: $ui-white;
             color: $header-gray;
         }
     }
+
+    .thumbnail {
+        $project-width: 220px;
+        $project-height: 208px;
+        margin-left: 8px;
+        padding: 0;
+
+        &.project {
+            margin-bottom: 16px;
+            border-radius: 4px;
+            width: $project-width;
+            height: $project-height;
+
+            .thumbnail-image {
+                margin: 8px auto;
+                width: 204px;
+                height: 152px;
+
+                img {
+                    border: 0;
+                    border-radius: 4px;
+                }
+            }
+
+            .thumbnail-title,
+            .thumbnail-creator {
+                margin: 0 auto;
+                width: 204px;
+            }
+        }
+    }
 }