From 2193914650873b6e32c282fefd4e952f17da6a83 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Wed, 15 Jun 2016 09:34:15 -0400
Subject: [PATCH] center align grid while left aligning projects

Fixes #573
---
 src/components/grid/grid.jsx  | 66 +++++++++++++++++------------------
 src/components/grid/grid.scss | 29 +++++++++++----
 2 files changed, 55 insertions(+), 40 deletions(-)

diff --git a/src/components/grid/grid.jsx b/src/components/grid/grid.jsx
index 365b48b7c..e198d2b44 100644
--- a/src/components/grid/grid.jsx
+++ b/src/components/grid/grid.jsx
@@ -25,40 +25,40 @@ var Grid = React.createClass({
         );
         return (
             <div className={classes}>
-              <FlexRow>
-                {this.props.items.map(function (item) {
-                    var href = '/' + this.props.itemType + '/' + item.id + '/';
+                <FlexRow>
+                    {this.props.items.map(function (item) {
+                        var href = '/' + this.props.itemType + '/' + item.id + '/';
 
-                    if (this.props.itemType == 'projects') {
-                        return (
-                            <Thumbnail key={item.id}
-                                       showLoves={this.props.showLoves}
-                                       showFavorites={this.props.showFavorites}
-                                       showRemixes={this.props.showRemixes}
-                                       showViews={this.props.showViews}
-                                       type={'project'}
-                                       href={href}
-                                       title={item.title}
-                                       src={item.image}
-                                       creator={item.creator}
-                                       loves={item.stats.loves}
-                                       favorites={item.stats.favorites}
-                                       remixes={item.stats.remixes}
-                                       views={item.stats.views}  />
-                        );
-                    }
-                    else {
-                        return (
-                            <Thumbnail key={item.id}
-                                       type={'gallery'}
-                                       href={href}
-                                       title={item.title}
-                                       src={item.image}
-                                       owner={item.owner}  />
-                        );
-                    }
-                }.bind(this))}
-              </FlexRow>
+                        if (this.props.itemType == 'projects') {
+                            return (
+                                <Thumbnail key={item.id}
+                                           showLoves={this.props.showLoves}
+                                           showFavorites={this.props.showFavorites}
+                                           showRemixes={this.props.showRemixes}
+                                           showViews={this.props.showViews}
+                                           type={'project'}
+                                           href={href}
+                                           title={item.title}
+                                           src={item.image}
+                                           creator={item.creator}
+                                           loves={item.stats.loves}
+                                           favorites={item.stats.favorites}
+                                           remixes={item.stats.remixes}
+                                           views={item.stats.views}  />
+                            );
+                        }
+                        else {
+                            return (
+                                <Thumbnail key={item.id}
+                                           type={'gallery'}
+                                           href={href}
+                                           title={item.title}
+                                           src={item.image}
+                                           owner={item.owner}  />
+                            );
+                        }
+                    }.bind(this))}
+                </FlexRow>
             </div>
         );
     }
diff --git a/src/components/grid/grid.scss b/src/components/grid/grid.scss
index 2ae47c418..1f72e99d5 100644
--- a/src/components/grid/grid.scss
+++ b/src/components/grid/grid.scss
@@ -2,16 +2,25 @@
 
 .grid {
     display: inline-block;
-    padding: 12px;
-    justify-content: space-around;
-    align-items: center;
+    width: 100%;
+
+    $project-width: 200px;
+    $project-height: 150px;
+
+    $gallery-width: 200px;
+    $gallery-height: 118px;
+
+    .flex-row {
+        margin: 0 auto;
+        padding: 12px;
+        width: (96px + (4 * $project-width)) / $em;
+        justify-content: flex-start;
+    }
 
     .thumbnail {
         padding: 12px;
 
         &.project {
-            $project-width: 200px;
-            $project-height: 150px;
             width: $project-width;
 
             img {
@@ -21,8 +30,6 @@
         }
 
         &.gallery {
-            $gallery-width: 200px;
-            $gallery-height: 118px;
             width: $gallery-width;
 
             img {
@@ -40,4 +47,12 @@
     @media only screen and (max-width: $tablet - 1) {
         flex-direction: column;
     }
+
+    @media only screen and (max-width: $desktop - 1) {
+        .flex-row {
+            padding: 12px 0;
+            width: 100%;
+            justify-content: space-around;
+        }
+    }
 }