working category navigation and filtering

2015-07-23 01:07:41 -03:00
parent 8f0a758603
commit 5a765f4e54
6 changed files with 144 additions and 69 deletions
--- 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(){
--- 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}
--- 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>
--- 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>
        );
    }
--- 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 {
--- 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;
      }