commit changes

src/_colors.scss

@@ -11,6 +11,7 @@ $background-color: hsla(0, 0, 99, 1); //#FDFDFD
 /* UI Secondary Colors */
 $ui-aqua: hsla(170, 70, 50, 1); //#26D9BB
 $ui-purple: hsla(265, 55, 55, 1); //#824DCB
+$ui-yellow: hsla(45, 100, 50, 1); //#FFBF00
 $ui-white: #fff;
 
 $ui-border: hsla(0, 0, 85, 1); //#D9D9D9

src/components/grid/grid.jsx

@@ -12,6 +12,7 @@ var Grid = React.createClass({
         return {
             items: require('./grid.json'),
             itemType: 'projects',
+            explore: false,
             showLoves: false,
             showFavorites: false,
             showRemixes: false,
@@ -32,6 +33,7 @@ var Grid = React.createClass({
                         if (this.props.itemType == 'projects') {
                             return (
                                 <Thumbnail key={item.id}
+                                           explore={this.props.explore}
                                            showLoves={this.props.showLoves}
                                            showFavorites={this.props.showFavorites}
                                            showRemixes={this.props.showRemixes}
@@ -50,6 +52,7 @@ var Grid = React.createClass({
                         else {
                             return (
                                 <Thumbnail key={item.id}
+                                           explore={this.props.explore}
                                            type={'gallery'}
                                            href={href}
                                            title={item.title}

src/components/grid/grid.scss

@@ -1,4 +1,5 @@
 @import "../../frameless";
+@import "../../colors";
 
 .grid {
     display: inline-block;
@@ -20,21 +21,37 @@
     .thumbnail {
         padding: 12px;
 
-        &.project {
+        &:not(.explore) {
-            width: $project-width;
+            &.project {
-
-            img {
                 width: $project-width;
-                height: $project-height;
+
+                img {
+                    width: $project-width;
+                    height: $project-height;
+                }
+            }
+
+            &.gallery {
+                width: $gallery-width;
+
+                img {
+                    width: $gallery-width;
+                    height: $gallery-height;
+                }
             }
         }
 
-        &.gallery {
+        &.explore {
-            width: $gallery-width;
+            &.project {
+                box-shadow: 0 0 3px $box-shadow-gray;
+                background-color: $ui-white;
+                width: 220px;
+                height: 208px;
 
-            img {
+                img {
-                width: $gallery-width;
+                    width: 204px;
-                height: $gallery-height;
+                    height: 152px;
+                }
             }
         }
     }

src/components/thumbnail/thumbnail.jsx

@@ -20,6 +20,7 @@ var Thumbnail = React.createClass({
             showRemixes: false,
             showViews: false,
             linkTitle: true,
+            explore: false,
             alt: ''
         };
     },
@@ -27,7 +28,8 @@ var Thumbnail = React.createClass({
         var classes = classNames(
             'thumbnail',
             this.props.type,
-            this.props.className
+            this.props.className,
+            {'explore': this.props.explore}
         );
         var extra = [];
         if (this.props.creator) {

src/views/explore/explore.jsx

@@ -7,8 +7,8 @@ var render = require('../../lib/render.jsx');
 var api = require('../../lib/api');
 
 var Page = require('../../components/page/www/page.jsx');
-var Box = require('../../components/box/box.jsx');
 var Tabs = require('../../components/tabs/tabs.jsx');
+var TitleBanner = require('../../components/title-banner/title-banner.jsx');
 var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
 var Grid = require('../../components/grid/grid.jsx');
 
@@ -59,7 +59,7 @@ var Explore = injectIntl(React.createClass({
     },
     getExploreMore: function () {
         var qText = '&q=' + this.props.acceptableTabs[this.props.category] || '*';
-        
+
         api({
             uri: '/search/' + this.props.itemType +
                  '?limit=' + this.props.loadNumber +
@@ -116,34 +116,38 @@ var Explore = injectIntl(React.createClass({
         return (
             <div>
                 <div className='outer'>
-                    <Box title={formatMessage({id: 'general.explore'})}>
+                    <TitleBanner className="masthead">
-                        <SubNavigation className='categories'>
+                        <div className="inner">
-                            {this.getBubble('all')}
+                            <h1>Explore</h1>
-                            {this.getBubble('animations')}
-                            {this.getBubble('art')}
-                            {this.getBubble('games')}
-                            {this.getBubble('music')}
-                            {this.getBubble('stories')}
-                        </SubNavigation>
-                        <Tabs>
-                            {this.getTab('projects')}
-                            {this.getTab('studios')}
-                        </Tabs>
-                        <div id='projectBox' key='projectBox'>
-                            <Grid items={this.state.loaded}
-                                  itemType={this.props.itemType}
-                                  showLoves={false}
-                                  showFavorites={false}
-                                  showViews={false} />
-                            <SubNavigation className='load'>
-                                <button onClick={this.getExploreMore}>
-                                    <li>
-                                        <FormattedMessage id='general.loadMore' />
-                                    </li>
-                                </button>
-                            </SubNavigation>
                         </div>
-                    </Box>
+                    </TitleBanner>
+                    <Tabs>
+                        {this.getTab('projects')}
+                        {this.getTab('studios')}
+                    </Tabs>
+                    <SubNavigation className='categories'>
+                        {this.getBubble('all')}
+                        {this.getBubble('animations')}
+                        {this.getBubble('art')}
+                        {this.getBubble('games')}
+                        {this.getBubble('music')}
+                        {this.getBubble('stories')}
+                    </SubNavigation>
+                    <div id='projectBox' key='projectBox'>
+                        <Grid items={this.state.loaded}
+                              itemType={this.props.itemType}
+                              explore={true}
+                              showLoves={false}
+                              showFavorites={false}
+                              showViews={false} />
+                        <SubNavigation className='load'>
+                            <button onClick={this.getExploreMore}>
+                                <li>
+                                    <FormattedMessage id='general.loadMore' />
+                                </li>
+                            </button>
+                        </SubNavigation>
+                    </div>
                 </div>
             </div>
 

src/views/explore/explore.scss

@@ -4,6 +4,36 @@
 $base-bg: $ui-white;
 
 #view {
+    padding: 0;
+}
+
+.outer {
+    .title-banner {
+        &.masthead {
+            margin-bottom: 0;
+            background-color: $ui-yellow;
+            padding: 0;
+
+            h1 {
+                text-align: center;
+                color: $ui-white;
+                font-size: 3rem;
+            }
+
+            p {
+                margin: 0;
+                width: $cols6;
+                text-align: left;
+                color: $ui-white;
+
+                a {
+                    border-bottom: 1px solid $ui-white;
+                    color: $ui-white;
+                }
+            }
+        }
+    }
+
     .box {
         display: block;
         margin-right: auto;
@@ -13,7 +43,7 @@ $base-bg: $ui-white;
         .box-content {
             padding: 0;
         }
-    }   
+    }
 
     .categories {
         display: inline-block;
@@ -26,20 +56,20 @@ $base-bg: $ui-white;
             opacity: .75;
             background-color: $ui-white;
             color: $header-gray;
-    
+
             &:hover {
                 opacity: 1;
                 border-color: $active-dark-gray;
             }
-        }
 
-        li.active {
+            &.active {
-            opacity: 1;
-            border-color: $active-dark-gray;
-
-            &:hover {
                 opacity: 1;
                 border-color: $active-dark-gray;
+
+                &:hover {
+                    opacity: 1;
+                    border-color: $active-dark-gray;
+                }
             }
         }
     }