From 5a765f4e545e4ce2f25e68aa6acd23191b5df614 Mon Sep 17 00:00:00 2001
From: Gil Barbara <gilbarbara@gmail.com>
Date: Thu, 23 Jul 2015 01:07:41 -0300
Subject: [PATCH] working category navigation and filtering

---
 app/index.html                     |  4 +-
 app/scripts/App.jsx                | 43 +++++++++++--------
 app/scripts/components/Header.jsx  | 28 ++++++++-----
 app/scripts/components/Logo.jsx    | 26 ++++++++----
 app/styles/components/_header.scss | 46 +++++++++++++--------
 app/styles/components/_logos.scss  | 66 ++++++++++++++++++++++--------
 6 files changed, 144 insertions(+), 69 deletions(-)

diff --git a/app/index.html b/app/index.html
index 50a7131..a093567 100644
--- a/app/index.html
+++ b/app/index.html
@@ -22,8 +22,8 @@
 
 <div id="react"></div>
 
-<!-- build:js /assets/main.min.js -->
-<script src="assets/main.js"></script>
+<!-- build:js /assets/app.min.js -->
+<script src="assets/app.js"></script>
 <!-- endbuild -->
 <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
diff --git a/app/scripts/App.jsx b/app/scripts/App.jsx
index fcdc2ca..ec5fe2e 100644
--- a/app/scripts/App.jsx
+++ b/app/scripts/App.jsx
@@ -1,4 +1,5 @@
 var React  = require('react'),
+    Isvg   = require('react-inlinesvg'),
     Header = require('./components/Header'),
     Footer = require('./components/Footer'),
     Loader = require('./components/Loader'),
@@ -8,12 +9,13 @@ var React  = require('react'),
 var App = React.createClass({
     getInitialState () {
         return {
+            columns: 3,
             logos: json.items,
-            columns: 3
+            category: 'anyone'
         };
     },
-    componentDidMount: function () {
 
+    componentDidMount: function () {
         this
             .getDOMNode()
             .offsetParent
@@ -40,11 +42,16 @@ var App = React.createClass({
     _onClickTag (e) {
         e.preventDefault();
 
-        var el  = e.currentTarget;
-
+        var el = e.currentTarget;
         console.log(el);
     },
 
+    _selectCategory (value) {
+        this.setState({
+            category: value
+        });
+    },
+
     _changeColumns (num) {
         this.setState({
             columns: num
@@ -57,25 +64,29 @@ var App = React.createClass({
 
     render () {
         var state = this.state,
-            logos = [];
+            hidden,
+            logos = [],
+            visible = 0;
 
         state.logos.forEach(function (d, i) {
+            hidden =  state.category !== 'anyone' && d.categories.indexOf(state.category) === -1;
             d.files.forEach(function (f, j) {
-                logos.push(<Logo key={i + '-' + j} info={{
-                    name: d.name,
-                    shortname: d.shortname,
-                    url: d.url,
-                    image: f
-                }}/>);
-            });
-        });
+                logos.push(<Logo key={i + '-' + j} info={d} image={f} hidden={hidden} onClickTag={this._onClickTag}/>);
+
+                if (!hidden) {
+                    visible++;
+                }
+            }, this);
+        }, this);
 
         return (
             <div className="app">
+                <Isvg src="../media/icons.svg" uniquifyIDs={false}/>
+
                 <div className="container">
-                    <Header logos={state.logos} columns={state.columns}
-                            onClickChangeColumns={this._onClickChangeColumns}
-                            onClickTag={this._onClickTag}/>
+                    <Header logos={state.logos} columns={state.columns} visible={visible}
+                            onClickChangeColumns={this._onClickChangeColumns} onClickTag={this._onClickTag}
+                            category={state.category} selectCategory={this._selectCategory}/>
                     <main>
                         <ul className={'logos col-' + state.columns}>
                             {logos}
diff --git a/app/scripts/components/Header.jsx b/app/scripts/components/Header.jsx
index bd3fa77..151871c 100644
--- a/app/scripts/components/Header.jsx
+++ b/app/scripts/components/Header.jsx
@@ -2,7 +2,8 @@ var React    = require('react/addons'),
     lodash   = require('lodash'),
     Colors   = require('../utils/Colors'),
     ScaleLog = require('../utils/ScaleLog'),
-    config   = require('../config');
+    config   = require('../config'),
+    Icon     = require('./Icon');
 
 var Header = React.createClass({
     mixins: [React.addons.PureRenderMixin],
@@ -11,12 +12,13 @@ var Header = React.createClass({
         columns: React.PropTypes.number.isRequired,
         logos: React.PropTypes.array.isRequired,
         onClickChangeColumns: React.PropTypes.func.isRequired,
-        onClickTag: React.PropTypes.func.isRequired
+        onClickTag: React.PropTypes.func.isRequired,
+        selectCategory: React.PropTypes.func.isRequired,
+        visible: React.PropTypes.number.isRequired
     },
 
     getInitialState () {
         return {
-            category: 'developers',
             ready: false,
             showCategoriesMenu: false
         };
@@ -41,7 +43,7 @@ var Header = React.createClass({
                 });
             });
 
-            categories = this._sortObject(categories, 'value');
+            categories = [{key: 'anyone', value: 0}].concat(this._sortObject(categories, 'value'));
         }
 
         if (config.features.tags) {
@@ -110,7 +112,9 @@ var Header = React.createClass({
         e.preventDefault();
 
         var el = e.currentTarget;
-        console.log(el);
+
+        this.props.selectCategory(el.dataset.value);
+        this._toggleCategoriesMenu();
     },
 
     _toggleCategoriesMenu () {
@@ -120,9 +124,9 @@ var Header = React.createClass({
     },
 
     render () {
-        var props = this.props,
-            state = this.state,
-            categories = state.category,
+        var props      = this.props,
+            state      = this.state,
+            categories = props.category,
             tags,
             style;
 
@@ -150,10 +154,12 @@ var Header = React.createClass({
             if (config.features.categories) {
                 categories = (
                     <span className="categories">
-                    <a href="#" className="categories__toggle" onClick={this._onClickShowCategories}>{state.category}</a>
+                    <a href="#" className="categories__toggle"
+                       onClick={this._onClickShowCategories}>{props.category} <Icon id="caret-down"/></a>
                     <ul className="categories__menu">
                         {state.categories.map((d, i) => {
-                            return (<li key={i} data-value={d.value}><a href="#" onClick={this._onClickSelectCategory}>{d.key}<span className="svg-check"></span></a></li>);
+                            return (<li key={i}><a href="#" onClick={this._onClickSelectCategory} data-value={d.key}>{d.key}
+                            {d.key === props.category ? <Icon id="check"/> : ''}</a></li>);
                         })}
                     </ul>
                 </span>
@@ -165,7 +171,7 @@ var Header = React.createClass({
             <header className={state.showCategoriesMenu ? 'show-menu' : ''}>
                 <img src="media/svg-porn.svg" className="logo"/>
 
-                <h3>A collection of svg logos for {categories}</h3>
+                <h3>A collection of {props.visible} svg logos for {categories}</h3>
 
                 <ul className="menu">
                     <li><span className="title">Columns</span>
diff --git a/app/scripts/components/Logo.jsx b/app/scripts/components/Logo.jsx
index a72c8e0..5bc49d7 100644
--- a/app/scripts/components/Logo.jsx
+++ b/app/scripts/components/Logo.jsx
@@ -4,23 +4,35 @@ var Logo = React.createClass({
     mixins: [React.addons.PureRenderMixin],
 
     propTypes: {
-        info: React.PropTypes.object.isRequired
+        image: React.PropTypes.string.isRequired,
+        hidden: React.PropTypes.bool.isRequired,
+        info: React.PropTypes.object.isRequired,
+        onClickTag: React.PropTypes.func.isRequired
     },
 
     toggleInfo (e) {
         var el = e.currentTarget;
-        el.parentNode.classList.toggle('visible');
+        el.classList.toggle('show-info');
     },
 
     render () {
-        var info = this.props.info;
+        var props = this.props,
+            info  = this.props.info;
         return (
-            <li>
+            <li className={props.hidden ? 'hidden' : ''} onMouseEnter={this.toggleInfo} onMouseLeave={this.toggleInfo}>
                 <a href={info.url} target="_blank" className="logo-item">
-                    <img src={'../logos/' + info.image} alt={info.name} className={info.shotname}
-                         onMouseEnter={this.toggleInfo} onMouseLeave={this.toggleInfo}/>
-                    <span className="name">{info.name}</span>
+                    <img src={'../logos/' + this.props.image} alt={info.name} className={info.shotname}/>
                 </a>
+
+                <div className="info">
+                    <h5><a href={info.url} target="_blank">{info.name}</a></h5>
+
+                    <div className="tags">{
+                        info.tags.map((t, i) => {
+                            return (<a key={i} href="#" onClick={props.onClickTag} data-tag={t}>#{t}</a>);
+                        })
+                    }</div>
+                </div>
             </li>
         );
     }
diff --git a/app/styles/components/_header.scss b/app/styles/components/_header.scss
index 5459d85..5de609e 100644
--- a/app/styles/components/_header.scss
+++ b/app/styles/components/_header.scss
@@ -42,11 +42,13 @@ header {
   .categories {
     display: inline-block;
     position: relative;
-    width: 165px;
 
     &__toggle {
-      padding: 0 26px 0 8px;
+      display: flex;
+      justify-content: space-between;
+      padding: 0 8px;
       position: relative;
+      text-align: right;
       text-decoration: none;
 
       &:before {
@@ -59,15 +61,14 @@ header {
         width: 100%;
       }
 
-      &:after {
-        border-color: $link-color transparent transparent;
-        border-radius: 3px;
-        border-style: solid;
-        border-width: 12px 8px 0;
-        content: '';
-        position: absolute;
-        right: 3px;
-        top: 10px;
+      svg {
+        margin-left: 5px;
+        position: relative;
+        top: 4px;
+
+        @include md {
+          top: 7px;
+        }
       }
     }
 
@@ -83,17 +84,30 @@ header {
       transform: translateY(5%) scaleY(0);
       transform-origin: top;
       transition: all 0.2s ease-in-out;
-      width: 100%;
-      z-index: 100;
+      width: 140px;
+      z-index: 20;
+
+      @include md {
+        width: 180px;
+      }
 
       > li {
         a {
-          background-color: rgba($link-color, 1);
+          background-color: $link-color;
           color: #fff;
-          display: block;
+          display: flex;
+          justify-content: space-between;
           padding: 5px 8px;
           text-align: left;
           text-decoration: none;
+
+          svg {
+            margin-top: 2px;
+
+            @include md {
+              margin-top: 5px;
+            }
+          }
         }
       }
     }
@@ -110,7 +124,7 @@ header {
     right: 0;
     top: 0;
     transition: all 0.2s ease-in;
-    z-index: 20;
+    z-index: 10;
   }
 
   .menu {
diff --git a/app/styles/components/_logos.scss b/app/styles/components/_logos.scss
index e96decb..1a5adaf 100644
--- a/app/styles/components/_logos.scss
+++ b/app/styles/components/_logos.scss
@@ -11,7 +11,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
-    padding: 8vh 1vh;
+    padding: 7rem 1rem;
     position: relative;
     text-align: center;
     width: 100%;
@@ -24,31 +24,63 @@
       width: percentage(1/3);
     }
 
-    a {
-      display: block;
-      outline: none;
-      transition: all 0.2s;
-      width: 100%;
+    &.hidden {
+      display: none;
+    }
 
-      &.visible {
-        .name {
-          color: #444;
-        }
+    &.show-info {
+      h5 a {
+        color: #444;
+      }
+
+      .tags a {
+        color: #777;
       }
     }
 
-    .name {
-      bottom: 0;
+    a {
       color: $bg-color;
-      font-size: 2rem;
-      font-weight: bold;
+      outline: none;
+      text-decoration: none;
+      transition: all 0.2s;
+
+      &.logo-item {
+        display: block;
+        width: 100%;
+      }
+    }
+
+    .info {
+      bottom: 0;
       left: 0;
       position: absolute;
       right: 0;
-      text-decoration: none;
       transition: color 0.3s;
     }
 
+    h5 {
+      color: $bg-color;
+      font-size: 2rem;
+      margin: 0;
+    }
+
+    .tags {
+      display: flex;
+      flex-flow: row;
+      justify-content: center;
+      margin-top: 4px;
+
+      > a {
+        + a {
+          margin-left: 4px;
+        }
+
+        &:hover {
+          color: $link-color;
+        }
+      }
+    }
+
     img {
       display: block;
       margin: 0 auto;
@@ -63,7 +95,7 @@
         width: 100% !important;
       }
 
-      a {
+      .logo-item {
         margin-bottom: 5rem;
         margin-top: 5rem;
       }
@@ -82,7 +114,7 @@
         width: percentage(1/2) !important;
       }
 
-      a {
+      .logo-item {
         margin-bottom: 3rem;
         margin-top: 3rem;
       }