From f27e99f1a4afa34d61091f044051d494a802cc5d Mon Sep 17 00:00:00 2001
From: Technoboy10 <technoboy10@fake.email>
Date: Mon, 22 Aug 2016 11:21:08 -0600
Subject: [PATCH] move card styling to grid.scss, use card as default grid
 style

---
 src/components/grid/grid.jsx           |   3 -
 src/components/grid/grid.scss          | 118 ++++++++++++++++---------
 src/components/thumbnail/thumbnail.jsx |   4 +-
 src/views/explore/explore.scss         |  95 --------------------
 src/views/search/search.scss           |  97 --------------------
 5 files changed, 76 insertions(+), 241 deletions(-)

diff --git a/src/components/grid/grid.jsx b/src/components/grid/grid.jsx
index 6764484f5..93572840d 100644
--- a/src/components/grid/grid.jsx
+++ b/src/components/grid/grid.jsx
@@ -12,7 +12,6 @@ var Grid = React.createClass({
         return {
             items: require('./grid.json'),
             itemType: 'projects',
-            cards: false,
             showLoves: false,
             showFavorites: false,
             showRemixes: false,
@@ -34,7 +33,6 @@ var Grid = React.createClass({
                         if (this.props.itemType == 'projects') {
                             return (
                                 <Thumbnail key={item.id}
-                                           cards={this.props.cards}
                                            showLoves={this.props.showLoves}
                                            showFavorites={this.props.showFavorites}
                                            showRemixes={this.props.showRemixes}
@@ -56,7 +54,6 @@ var Grid = React.createClass({
                         else {
                             return (
                                 <Thumbnail key={item.id}
-                                           cards={this.props.cards}
                                            type={'gallery'}
                                            href={href}
                                            title={item.title}
diff --git a/src/components/grid/grid.scss b/src/components/grid/grid.scss
index cd18c2c13..88734b987 100644
--- a/src/components/grid/grid.scss
+++ b/src/components/grid/grid.scss
@@ -5,8 +5,8 @@
     display: inline-block;
     width: 100%;
 
-    $project-width: 200px;
-    $project-height: 150px;
+    $project-width: 220px;
+    $project-height: 208px;
 
     $gallery-width: 200px;
     $gallery-height: 118px;
@@ -14,58 +14,81 @@
     .flex-row {
         margin: 0 auto;
         padding: 12px;
-        width: (96px + (4 * $project-width)) / $em;
-        justify-content: flex-start;
-    }
+        width: $cols12;
+        justify-content: space-between;    }
 
     .thumbnail {
-        padding: 12px;
+        padding: 0;
 
-        &:not(.cards) {
-            &.project {
-                width: $project-width;
-
-                img {
-                    width: $project-width;
-                    height: $project-height;
-                }
-            }
-
-            &.gallery {
-                width: $gallery-width;
-
-                img {
-                    width: $gallery-width;
-                    height: $gallery-height;
-                }
-            }
-        }
-
-        &.cards {
-            &.project {
-                box-shadow: 0 0 3px $box-shadow-gray;
-                background-color: $ui-white;
-                width: 220px;
-                height: 208px;
+        &.project {
+            margin-bottom: 16px;
+            border-radius: 4px;
+            box-shadow: 0 0 3px $box-shadow-gray;
+            background-color: $ui-white;
+            width: $project-width;
+            height: $project-height;
+
+            .thumbnail-image {
+                margin: 8px auto;
+                width: 204px;
+                height: 152px;
 
                 img {
+                    margin: 0 auto;
+                    border: 0;
+                    border-radius: 4px;
                     width: 204px;
                     height: 152px;
                 }
             }
+        }
 
-            &.gallery {
-                box-shadow: 0 0 3px $box-shadow-gray;
-                background-color: $ui-white;
-                width: 220px;
-                height: 164px;
+        &.gallery {
+            margin-bottom: 16px;
+            border-radius: 4px;
+            box-shadow: 0 0 3px $box-shadow-gray;
+            background-color: $ui-white;
+            width: $project-width;
+            height: 164px;
+
+            .thumbnail-image {
+                margin: 8px auto;
+                width: 204px;
+                height: 120px;
 
                 img {
+                    border: 0;
+                    border-radius: 4px;
                     width: 204px;
                     height: 120px;
                 }
             }
         }
+
+        .thumbnail-info {
+            margin: 0 auto;
+            width: 204px;
+
+            .creator-image {
+                float: left;
+
+                img {
+                    margin-right: 8px;
+                    border-radius: 4px;
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+
+            .thumbnail-title {
+                float: left;
+                max-width: 164px;
+
+                .thumbnail-creator a {
+                    color: $type-gray;
+                }
+            }
+        }
     }
 
     &.column {
@@ -73,15 +96,24 @@
         justify-content: center;
     }
 
-    @media only screen and (max-width: $tablet - 1) {
-        flex-direction: column;
+    //4 columns
+    @media only screen and (max-width: $mobile - 1) {
+        .flex-row {
+            width: $cols4;
+        }
     }
 
-    @media only screen and (max-width: $desktop - 1) {
+    //6 columns
+    @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
         .flex-row {
-            padding: 12px 0;
-            width: 100%;
-            justify-content: space-around;
+            width: $cols6;
+        }
+    }
+
+    // 8 columns
+    @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+        .flex-row {
+            width: $cols9;
         }
     }
 }
diff --git a/src/components/thumbnail/thumbnail.jsx b/src/components/thumbnail/thumbnail.jsx
index 8e4ac7a01..ce96cf529 100644
--- a/src/components/thumbnail/thumbnail.jsx
+++ b/src/components/thumbnail/thumbnail.jsx
@@ -21,7 +21,6 @@ var Thumbnail = React.createClass({
             showViews: false,
             showAvatar: false,
             linkTitle: true,
-            cards: false,
             alt: ''
         };
     },
@@ -29,8 +28,7 @@ var Thumbnail = React.createClass({
         var classes = classNames(
             'thumbnail',
             this.props.type,
-            this.props.className,
-            {'cards': this.props.cards}
+            this.props.className
         );
         var extra = [];
         var info = [];
diff --git a/src/views/explore/explore.scss b/src/views/explore/explore.scss
index 1fcc33936..fcc3e5944 100644
--- a/src/views/explore/explore.scss
+++ b/src/views/explore/explore.scss
@@ -40,12 +40,6 @@ $base-bg: $ui-white;
         width: 8.75rem;
     }
 
-    .tab-background {
-        box-shadow: 0 0 1px $box-shadow-gray;
-        background-color: $ui-white;
-        width: 100%;
-    }
-
     .tabs {
         width: 58.75rem;
     }
@@ -117,84 +111,11 @@ $base-bg: $ui-white;
         padding-bottom: 32px;
         width: 100%;
 
-        .grid .flex-row {
-            width: $cols12;
-            justify-content: space-between;
-        }
-
         .button {
             display: block;
             margin: 0 auto;
         }
     }
-
-
-    .thumbnail {
-        $project-width: 220px;
-        $project-height: 208px;
-        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;
-                }
-            }
-        }
-
-        &.gallery {
-            margin-bottom: 16px;
-            border-radius: 4px;
-            width: $project-width;
-            height: $project-height;
-
-            .thumbnail-image {
-                margin: 8px auto;
-                width: 204px;
-                height: 120px;
-
-                img {
-                    border: 0;
-                    border-radius: 4px;
-                }
-            }
-        }
-
-        .thumbnail-info {
-            margin: 0 auto;
-            width: 204px;
-
-            .creator-image {
-                float: left;
-
-                img {
-                    margin-right: 8px;
-                    border-radius: 4px;
-                    width: 32px;
-                    height: 32px;
-                }
-            }
-
-            .thumbnail-title {
-                float: left;
-                max-width: 164px;
-
-                .thumbnail-creator a {
-                    color: $type-gray;
-                }
-            }
-        }
-    }
 }
 
 //4 columns
@@ -207,14 +128,6 @@ $base-bg: $ui-white;
         .sort-controls {
             width: $cols4;
         }
-
-        #projectBox {
-            .grid {
-                .flex-row {
-                    width: $cols4;
-                }
-            }
-        }
     }
 }
 
@@ -228,14 +141,6 @@ $base-bg: $ui-white;
         .sort-controls {
             width: $cols6;
         }
-
-        #projectBox {
-            .grid {
-                .flex-row {
-                    width: $cols6;
-                }
-            }
-        }
     }
 }
 
diff --git a/src/views/search/search.scss b/src/views/search/search.scss
index 032c3b43b..0a9d4f583 100644
--- a/src/views/search/search.scss
+++ b/src/views/search/search.scss
@@ -128,84 +128,11 @@ $base-bg: $ui-white;
         padding-bottom: 32px;
         width: 100%;
 
-        .grid .flex-row {
-            width: $cols12;
-            justify-content: space-between;
-        }
-
         .button {
             display: block;
             margin: 0 auto;
         }
     }
-
-
-    .thumbnail {
-        $project-width: 220px;
-        $project-height: 208px;
-        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;
-                }
-            }
-        }
-
-        &.gallery {
-            margin-bottom: 16px;
-            border-radius: 4px;
-            width: $project-width;
-            height: $project-height;
-
-            .thumbnail-image {
-                margin: 8px auto;
-                width: 204px;
-                height: 120px;
-
-                img {
-                    border: 0;
-                    border-radius: 4px;
-                }
-            }
-        }
-
-        .thumbnail-info {
-            margin: 0 auto;
-            width: 204px;
-
-            .creator-image {
-                float: left;
-
-                img {
-                    margin-right: 8px;
-                    border-radius: 4px;
-                    width: 32px;
-                    height: 32px;
-                }
-            }
-
-            .thumbnail-title {
-                float: left;
-                max-width: 164px;
-
-                .thumbnail-creator a {
-                    color: $type-gray;
-                }
-            }
-        }
-    }
 }
 
 //4 columns
@@ -226,14 +153,6 @@ $base-bg: $ui-white;
         .sort-controls {
             width: $cols4;
         }
-
-        #projectBox {
-            .grid {
-                .flex-row {
-                    width: $cols4;
-                }
-            }
-        }
     }
 }
 
@@ -248,14 +167,6 @@ $base-bg: $ui-white;
         .sort-controls {
             width: $cols6;
         }
-
-        #projectBox {
-            .grid {
-                .flex-row {
-                    width: $cols6;
-                }
-            }
-        }
     }
 }
 
@@ -269,13 +180,5 @@ $base-bg: $ui-white;
         .sort-controls {
             width: $cols8;
         }
-
-        #projectBox {
-            .grid {
-                .flex-row {
-                    width: $cols9;
-                }
-            }
-        }
     }
 }