Refact components. More generic directives names

Leonardo Merlin
1 parent 6ad695da
Showing 37 changed files with 1584 additions and 1105 deletions Show diff stats
src/app/components/article-bar/article-bar.directive.js
src/app/components/article-bar/article-bar.html
src/app/components/article-bar/article-bar.scss
src/app/components/article-box/article-box.directive.js
src/app/components/article-box/article-box.html
src/app/components/article-box/article-box.scss
src/app/components/article-content/article-content.directive.js
src/app/components/article-content/article-content.scss
src/app/components/article-grid/article-grid.directive.js
src/app/components/article-grid/article-grid.html
src/app/components/article-grid/article-grid.scss
src/app/components/article-preview/article-preview.directive.js
src/app/components/article-preview/article-preview.html
src/app/components/article-preview/article-preview.scss
src/app/components/articleBar/articleBar.directive.js
src/app/components/articleBar/articleBar.html
src/app/components/articleBar/articleBar.scss
src/app/components/auth/auth.service.js
src/app/components/category-list/category-list.directive.js
src/app/components/category-list/category-list.html
@@ -0,0 +1,68 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('dialoga')
+    .directive('articleBar', articleBar);
+
+  /** @ngInject */
+  function articleBar() {
+    var directive = {
+      restrict: 'E',
+      templateUrl: 'app/components/article-bar/article-bar.html',
+      scope: {
+        category: '=',
+        categories: '='
+      },
+      controller: ArticleBarController,
+      controllerAs: 'vm',
+      bindToController: true
+    };
+
+    return directive;
+
+    /** @ngInject */
+    function ArticleBarController($scope, $rootScope, $state, $log) {
+      $log.debug('ArticleBarController');
+
+      var vm = this;
+
+      vm.$scope = $scope;
+      vm.$rootScope = $rootScope;
+      vm.$state = $state;
+      vm.theme = 'blue';
+
+      // if(!vm.category) {
+      //   throw 'article bar without category';
+      // }
+
+      // if(!vm.categories) {
+      //   throw 'article bar without categories list';
+      // }
+
+      vm.currentCategory = vm.category;
+
+      vm.$scope.$watch('vm.currentCategory', function(newValue, oldValue){
+        if(newValue !== oldValue){
+          vm.$state.go('inicio', {
+            tema: newValue.slug
+          }, {
+            location: true
+          });
+        }
+      });
+
+      vm.goBack = function (){
+        var vm = this;
+        var prevState = vm.$rootScope.$previousState;
+        if(prevState && prevState.state.name){
+          vm.$state.go(prevState.state.name, prevState.params);
+        } else {
+          vm.$state.go('inicio');
+        }
+      };
+    }
+
+  }
+
+})();
@@ -0,0 +1,23 @@
+<div class="article-bar" ng-class="vm.theme">
+    <div class="navbar">
+      <div class="navbar-header">
+        <button class="article-bar--item btn btn-link" ng-click="vm.goBack()">
+          <!-- <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> -->
+          <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
+          Voltar
+        </button>
+      </div>
+      <div class="navbar-left" ng-if="vm.category">
+        <button class="article-bar--item article-bar--category-button btn btn-link">
+          <span class="icon" ng-class="'icon-tema-' + vm.category.slug"></span>
+          <span class="category-name">{{::vm.category.name}}</span>
+        </button>
+      </div>
+      <div class="navbar-right" ng-if="vm.categories">
+        <label for="selectCategory" class="control-label sr-only" title="Selecione uma opção para acessar os programas do tema">Temas:</label>
+        <select id="selectCategory" name="selectCategory" class="article-bar--item form-control" ng-model="vm.currentCategory" ng-options="category.name for category in vm.categories track by category.slug">
+        </select>
+      </div>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,52 @@
+.article-bar {
+    position: relative;
+    background-color: #0042b1;
+
+    .btn {
+        color: #fff;
+        font-weight: bold;
+    }
+
+    &--item {
+        margin: 8px 0;
+
+        @media (max-width: $screen-xs) {
+            margin: 8px;
+        }
+
+    }
+
+    &--category-button {
+        position: relative;
+        width: 125px;
+        text-align: right;
+        margin-left: 10px;
+        font-size: 24px;
+        line-height: 20px;
+        font-family: 'Open Sans';
+
+        .icon {
+            display: inline-block;
+            margin: -40px -35px -40px -50px;
+            transform: scale(.37);
+        }
+    }
+
+    .navbar {
+        margin-bottom: 0;
+    }
+
+    .navbar-right {
+        margin-right: 15px;
+    }
+
+    @each $category, $color in $categories {
+        &.#{$category} {
+            background-color: $color;
+        }
+    }
+
+    .contraste & {
+        background-color: #262626;
+    }
+}
@@ -0,0 +1,84 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('dialoga')
+    .directive('articleBox', articleBox);
+
+  /** @ngInject */
+  function articleBox($rootScope) {
+
+    /** @ngInject */
+    function ArticleBoxController(ArticleService, $scope, $state, Slug, $log) {
+      $log.debug('ArticleBoxController');
+
+      var vm = this;
+      vm.ArticleService = ArticleService;
+      vm.$scope = $scope;
+      vm.$state = $state;
+      vm.Slug = Slug;
+      vm.$log = $log;
+
+      vm.init();
+    }
+
+    ArticleBoxController.prototype.init = function () {
+      var vm = this;
+
+      if(!vm.article.slug){
+        vm.article.slug = vm.Slug.slugify(vm.article.title);
+      }
+
+      if(!vm.category){
+        vm.category = vm.article.categories[0];
+      }
+
+      if(!vm.banner){
+        vm.banner = {
+          src: $rootScope.basePath + vm.article.image.url,
+          alt: 'Imagem de destaque do conteúdo'
+        };
+      }
+
+      // if(vm.article.color && !vm.article.bgColor){
+      //   // 15% more darker
+      //   vm.article.colorDarker = window.ColorLuminance(vm.article.color, 0.15);
+      // }
+    };
+
+    ArticleBoxController.prototype.showContent = function () {
+      var vm = this;
+
+      vm.$state.go('programa-conheca', {
+        slug: vm.article.slug
+      }, {
+        location: true
+      });
+    };
+
+    ArticleBoxController.prototype.showPreview = function () {
+      var vm = this;
+
+      vm.$state.go('programa', {
+        slug: vm.article.slug
+      }, {
+        location: true
+      });
+    };
+
+    var directive = {
+      restrict: 'E',
+      templateUrl: 'app/components/article-box/article-box.html',
+      scope: {
+        article: '='
+      },
+      controller: ArticleBoxController,
+      controllerAs: 'vm',
+      bindToController: true
+    };
+
+
+    return directive;
+  }
+
+})();
@@ -0,0 +1,18 @@
+<article class="article-box" ng-click="vm.showPreview()" ng-class="vm.category.slug">
+  <div>
+    <h2 class="article-box--category">{{vm.category.name}}</h2>
+    <div class="article-box--image-wrapper">
+      <!-- <img class="article-box--image img-responsive" ng-src="{{vm.banner.src}}" alt="{{vm.banner.alt}}" /> -->
+      <div class="article-box--image" ng-style="{'background-image':'url( {{vm.banner.src}} )'}"></div>
+    </div>
+    <div class="article-box--title">
+      <h1>{{::vm.article.title}}</h1>
+    </div>
+    <div class="article-box--abstract" ng-bind-html="vm.article.abstract"></div>
+    <div class="button--themed">
+      <button class="btn btn-block">
+        Participe
+      </button>
+    </div>
+  </div>
+</article>
@@ -0,0 +1,146 @@
+$article-box-space: 20px;
+
+.article-box {
+    cursor: pointer;
+    background-color: #fff;
+    margin-top: $article-box-space;
+    margin-bottom: $article-box-space;
+    border-radius: 3px;
+    overflow: hidden;
+
+    .contraste & {
+        color: #fff;
+        background-color: #262626;
+    }
+
+    &--category {
+        font-size: 14px;
+        font-weight: bold;
+        text-transform: uppercase;
+        line-height: 22px;
+        display: block;
+        height: 30px;
+        margin: 0;
+        padding: 5px $article-box-space;
+        color: #ffffff;
+
+        @each $category, $color in $categories {
+            .#{$category} & {
+                background-color: $color;
+            }
+        }
+
+        .contraste & {
+            background-color: #262626;
+        }
+    }
+
+    &--title {
+
+        padding: 0 $article-box-space;
+
+        h1 {
+            font-size: 18px;
+            font-weight: bold;
+            margin: 0 0 $article-box-space 0;
+            display: table-cell;
+            vertical-align: middle;
+
+            // Altura das linhas do abstract
+            $hLine: 20px;
+            // default
+            height: $hLine * 2;
+
+            @media (max-width: $screen-xs) {
+                // height: $hLine * 3;
+                height: auto;
+            }
+
+            @media (min-width: $screen-xs + 1) {
+                // height: $hLine * 2;
+                height: auto;
+            }
+
+            @media (min-width: $screen-sm + 1) {
+                height: $hLine * 2;
+            }
+
+            @media (min-width: $screen-md + 1) {
+                height: $hLine * 2;
+            }
+        }
+    }
+
+    &--abstract {
+        padding: 0 $article-box-space;
+        display: table-cell;
+        vertical-align: middle;
+
+        // Altura das linhas do abstract
+        $pLine: 20px;
+        // 1 linha: 19px -> 20
+        // 2 linhas: 38px -> 40
+        // 3 linhas: 57px -> 60
+        // 4 linhas: 76px -> 80
+
+        height: $pLine * 2; // default
+
+        @media (max-width: $screen-xs) {
+            // height: $pLine * 4;
+            height: auto;
+        }
+
+        @media (min-width: $screen-xs + 1) {
+            // height: $pLine * 3;
+            height: auto;
+        }
+
+        @media (min-width: $screen-sm + 1) {
+            height: $pLine * 4;
+        }
+
+        @media (min-width: $screen-md + 1) {
+            height: $pLine * 3;
+        }
+
+        p { margin: 0; }
+    }
+
+    &--image-wrapper {
+        position: relative;
+        // width: 100%;
+        // width: 370px;
+        // height: 170px;
+
+        overflow: hidden;
+        // text-align: center;
+        min-height: 170px;
+    }
+
+    &--image {
+        min-height: 170px;
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+
+        -webkit-transition: all $time ease-in-out;
+        -moz-transition: all $time ease-in-out;
+        -o-transition: all $time ease-in-out;
+        transition: all $time ease-in-out;
+    }
+
+    &:hover {
+        background-color: #d9d9d9;
+
+        .article-box--image {
+            -webkit-transform: scale($scale); /* prefixo para browsers webkit */
+            -moz-transform: scale($scale); /* prefixo para browsers gecko */
+            -o-transform: scale($scale); /* prefixo para opera */
+            transform: scale($scale);
+        }
+
+        .contraste & {
+            background-color: #262626;
+        }
+    }
+}
@@ -0,0 +1,15 @@
+.article-content {
+    h2 {
+        font-size: 38px;
+        font-weight: 500;
+        margin-bottom: 40px;
+        padding-bottom: 20px;
+
+        small {
+            display: block;
+            font-size: 16px;
+            padding-top: 5px;
+            text-transform: none;
+        }
+    }
+}
@@ -0,0 +1,322 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('dialoga')
+    .directive('articleGrid', articleGrid);
+
+  /** @ngInject */
+  function articleGrid() {
+
+    /** @ngInject */
+    function ArticleGridController($scope, $rootScope, $element, ArticleService, $location, $filter, $log) {
+      $log.debug('ArticleGridController');
+
+      // alias
+      var vm = this;
+
+      // dependencies
+      vm.$scope = $scope;
+      vm.$rootScope = $rootScope;
+      vm.$element = $element;
+      vm.ArticleService = ArticleService;
+      vm.$location = $location;
+      vm.$filter = $filter;
+      vm.$log = $log;
+      vm.defaultLimit = 6;
+
+      // initialization
+      vm.init();
+    }
+
+    ArticleGridController.prototype.init = function() {
+      var vm = this;
+
+      vm.ArticleService.getPrograms(function(programs){
+        vm.articles = programs;
+      });
+
+      vm.ArticleService.getCategories(function(categories){
+        vm.categories = categories;
+      });
+
+      vm.orderCriteries = [
+        { label: 'Título', name: 'titulo' },
+        { label: 'Tema', name: 'tema' },
+        { label: 'Aleatório', name: 'aleatorio' }
+      ];
+
+      vm.filtredArticleList = vm.getFiltredArticles();
+      vm.search = vm.$location.search();
+
+      // Add initial values for the filter
+      vm.query = (vm.search && vm.search.filtro) ? vm.search.filtro : null;
+      vm.limitTo = (vm.search && vm.search.limite) ? parseInt(vm.search.limite, 10) : vm.defaultLimit;
+      vm.orderCriteria = (vm.search && vm.search.ordem) ? { name: vm.search.ordem } : null;
+      vm.reverse = (vm.search && vm.search.reverso) ? true : false;
+
+      // vm.selectedCategory = (vm.search && vm.search.tema) ? vm.getCategoryBySlug(vm.search.tema) : null;
+      if (vm.search && vm.search.tema) {
+        var slug = vm.search.tema;
+        vm.ArticleService.getCategoryBySlug(slug, function(category){
+          vm.selectedCategory = category;
+        }, function(error){
+          vm.$log.error('Error when try to "getCategoryBySlug"', error);
+        });
+      }
+
+      if (!angular.equals({}, vm.search)) {
+        var $el = vm.$element;
+        angular.element('body').animate({scrollTop: $el.offset().top}, 'slow');
+      }
+
+      // update window location params
+      vm.$scope.$on('change-selectedCategory', function(event, selectedCategory){
+        vm.selectedCategory = selectedCategory;
+      });
+
+      vm.$scope.$watch('vm.query', function(newValue/*, oldValue*/) {
+        vm.search.filtro = newValue ? newValue : null;
+        vm.$location.search('filtro', vm.search.filtro);
+        if(vm.search.filtro){
+          vm.limitTo = vm.articles.length;
+        }else{
+          vm.limitTo = vm.defaultLimit;
+        }
+        vm.filtredArticleList = vm.getFiltredArticles();
+      });
+
+      vm.$scope.$watch('vm.limitTo', function(newValue/*, oldValue*/) {
+        vm.search.limite = (newValue && newValue !== vm.defaultLimit)  ? newValue : null;
+        vm.$location.search('limite', vm.search.limite);
+        vm.filtredArticleList = vm.getFiltredArticles();
+      });
+
+      vm.$scope.$watch('vm.selectedCategory', function(newValue/*, oldValue*/) {
+        vm.search.tema = newValue ? newValue.slug : null;
+        vm.$location.search('tema', vm.search.tema);
+        if(vm.search.tema){
+          vm.limitTo = vm.articles.length;
+        }else{
+          vm.limitTo = vm.defaultLimit;
+        }
+        vm.filtredArticleList = vm.getFiltredArticles();
+      });
+
+      vm.$scope.$watch('vm.orderCriteria', function(newValue/*, oldValue*/) {
+        vm.search.ordem = (newValue && newValue.name) ? newValue.name : null;
+        vm.$location.search('ordem', vm.search.ordem);
+        vm.filtredArticleList = vm.getFiltredArticles();
+      });
+
+      vm.$scope.$watch('vm.reverse', function(newValue/*, oldValue*/) {
+        vm.search.reverso = newValue ? newValue : null;
+        vm.$location.search('reverso', vm.search.reverso);
+        vm.filtredArticleList = vm.getFiltredArticles();
+      });
+
+    };
+
+    ArticleGridController.prototype.resetFilterValues = function() {
+      var vm = this;
+
+      vm.query = null;
+      vm.limitTo = vm.defaultLimit;
+      vm.selectedCategory = null;
+      vm.orderCriteria = null;
+    };
+
+    ArticleGridController.prototype.getIconClasses = function(category) {
+      var vm = this;
+
+      vm.$log.debug('[TODO] getIconClasses of category:', category);
+      return 'glyphicon glyphicon-exclamation-sign';
+    };
+
+    ArticleGridController.prototype.getCategoryBySlug = function(categorySlug) {
+      var vm = this;
+      var result = null;
+
+      angular.forEach(vm.categories, function(value/*, key*/) {
+        if (value.slug === categorySlug) {
+          result = value;
+        }
+      });
+
+      return result;
+    };
+
+    ArticleGridController.prototype.showAll = function($event) {
+      var vm = this;
+
+      $event.stopPropagation();
+
+      vm.resetFilterValues();
+      vm.limitTo = vm.articles.length;
+    };
+
+    ArticleGridController.prototype.getFiltredArticles = function() {
+      var vm = this;
+
+      if(!vm.articles){
+        vm.$log.warn('No articles loaded yet. Abort.');
+        return null;
+      }
+
+      var input = vm.articles;
+      var output = input;
+      var query = vm.query;
+      var selectedCategory = vm.selectedCategory;
+      var orderCriteria = vm.orderCriteria ? vm.orderCriteria : { name : 'aleatorio'};
+      var filter = vm.$filter('filter');
+      var orderBy = vm.$filter('orderBy');
+      var limitTo = vm.$filter('limitTo');
+      var limit = vm.limitTo ? vm.limitTo : 4;
+
+      if (selectedCategory) {
+        output = _filterByCategory(output, selectedCategory);
+      }
+
+      if (query) {
+        output = filter(output, query, false);
+      }
+
+      switch (orderCriteria.name) {
+        case 'titulo':
+          output = orderBy(output, 'title', vm.reverse);
+          break;
+        case 'tema':
+          output = orderBy(output, 'categories[0].name', vm.reverse);
+          break;
+        case 'more_participants':
+          vm.$log.info('Criteria not handled yet: ', orderCriteria);
+          break;
+        case 'aleatorio':
+          // shuffling
+          // if (!vm._isShuffled){
+          output = vm.filterShuffle(output);
+          //   vm._isShuffled = true;
+          // }
+
+          if (vm.reverse) {
+            output = output.slice().reverse();
+          }
+
+          break;
+        default:
+          vm.$log.warn('Criteria not matched: ', orderCriteria);
+          break;
+      }
+
+      output = limitTo(output, limit);
+
+      return output;
+    };
+
+    ArticleGridController.prototype.filterShuffle = function(input) {
+      var result = [];
+      var resultByCategory = {};
+
+      // divide by categories
+      for (var i = 0; i < input.length; i++) {
+        var program = input[i];
+        var categorySlug = program.categories[0].slug;
+
+        if (!resultByCategory[categorySlug]) {
+          resultByCategory[categorySlug] = [];
+        }
+
+        resultByCategory[categorySlug].push(program);
+      }
+
+      // shuffle each array
+      var prop = null;
+      var categoryWithPrograms = null;
+      for (prop in resultByCategory) {
+        if (resultByCategory.hasOwnProperty(prop)) {
+          categoryWithPrograms = resultByCategory[prop];
+          resultByCategory[prop] = shuffle(categoryWithPrograms);
+        }
+      }
+
+      // Concat all into result array
+      // > while has program at Lists on resultByCategory
+      var hasProgram = true;
+      while (hasProgram) {
+
+        var foundProgram = false;
+        // each categoryList with array of program
+        prop = null;
+        categoryWithPrograms = null;
+        for (prop in resultByCategory) {
+
+          if (resultByCategory.hasOwnProperty(prop)) {
+            categoryWithPrograms = resultByCategory[prop];
+
+            if (categoryWithPrograms.length > 0) {
+              var pivotProgram = categoryWithPrograms.pop();
+              result.push(pivotProgram);
+              foundProgram = true;
+            }
+          }
+        }
+
+        if (!foundProgram) {
+          hasProgram = false;
+        }
+      }
+
+      return result;
+    };
+
+    var directive = {
+      restrict: 'E',
+      templateUrl: 'app/components/article-grid/article-grid.html',
+      controller: ArticleGridController,
+      controllerAs: 'vm',
+      bindToController: true
+    };
+
+    return directive;
+  }
+
+  function _filterByCategory (input, category) {
+    input = input || [];
+
+    if (!category) {
+      // no filter
+      return input;
+    }
+
+    var out = [];
+    for (var i = 0; i < input.length; i++) {
+      var program = input[i];
+      if (program.categories[0].slug === category.slug) {
+        out.push(program);
+      }
+    }
+
+    return out;
+  }
+
+  // -> Fisher–Yates shuffle algorithm
+  function shuffle (array) {
+    var currentIndex = array.length, temporaryValue, randomIndex ;
+
+    // While there remain elements to shuffle...
+    while (0 !== currentIndex) {
+
+      // Pick a remaining element...
+      randomIndex = Math.floor(Math.random() * currentIndex);
+      currentIndex -= 1;
+
+      // And swap it with the current element.
+      temporaryValue = array[currentIndex];
+      array[currentIndex] = array[randomIndex];
+      array[randomIndex] = temporaryValue;
+    }
+
+    return array;
+  }
+
+})();
@@ -0,0 +1,50 @@
+<article class="article-grid">
+  <header class="header">
+    <h2>Conheça os programas <span class="small">({{vm.filtredArticleList.length}}/{{vm.articles.length}})</span></h2>
+    <button type="button" class="btn btn-link" ng-click="vm.showAll($event)">
+      <span class="glyphicon glyphicon-chevron-right"></span> Ver todos os {{vm.articles.length}} programas
+    </button>
+  </header>
+  <div>
+    <div class="col-sm-12">
+      <aside class="form-inline">
+        <div class="row">
+          <div class="col-xs-6 col-sm-7 col-md-9">
+            <label for="articleQueryFilter" class="control-label sr-only">Filtrar programas:</label>
+            <input id="articleQueryFilter" type="search" class="form-control" ng-model="vm.query" placeholder="Filtrar programas" aria-label="Filtrar programas" >
+          </div>
+
+          <!-- <label for="selectCategoryFilter" class="control-label sr-only">Filtrar por tema:</label>
+          <select id="selectCategoryFilter" name="selectCategoryFilter" class="form-control" ng-model="vm.categoryFilter" ng-options="category.name for category in vm.categories track by category.slug">
+            <option value="">-- Filtrar por tema --</option>
+          </select> -->
+
+          <div class="col-xs-6 col-sm-5 col-md-3">
+            <label for="articleOrderByFilter" class="control-label sr-only">Ordernar por:</label>
+            <select id="articleOrderByFilter" name="articleOrderByFilter" class="form-control pull-right" ng-model="vm.orderCriteria" ng-options="orderCriteria.label for orderCriteria in vm.orderCriteries">
+              <option value="">-- Ordernar por: --</option>
+            </select>
+          </div>
+          <!-- <div class="checkbox">
+            <label>
+              <input type="checkbox" ng-model="vm.reverse">
+              Reverso
+            </label>
+          </div> -->
+
+          <!-- <input id="articleLimitFilter" type="number" class="form-control input-sm" size="4" step="2" ng-model="vm.limitTo" aria-label="Limitar" >
+          <label for="articleLimitFilter" class="control-label">Limite</label> -->
+
+        </div>
+      </aside>
+    </div>
+
+    <div ng-repeat="article in vm.filtredArticleList as results">
+      <article-box article="article" class="col-xs-12 col-sm-6"></article-box>
+      <div ng-if="$odd" class="clearfix"></div>
+    </div>
+    <div class="animate-repeat" ng-if="results.length == 0">
+      Nenhum programa encontrado.
+    </div>
+  </div>
+</article>
@@ -0,0 +1,20 @@
+.article-grid {
+    .header {
+        position: relative;
+        height: 40px;
+        margin-bottom: 10px;
+
+        button {
+            position: absolute;
+            right: 0;
+            top: 2px;
+        }
+    }
+
+    .form-inline {
+        input,
+        select {
+            width: 100%;
+        }
+    }
+}
@@ -0,0 +1,74 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('dialoga')
+    .directive('articlePreview', articlePreview);
+
+  /** @ngInject */
+  function articlePreview($rootScope) {
+
+    /** @ngInject */
+    function ArticlePreviewController(ArticleService, $scope, $state, Slug, $log) {
+      $log.debug('ArticlePreviewController');
+
+      var vm = this;
+      vm.ArticleService = ArticleService;
+      vm.$scope = $scope;
+      vm.$state = $state;
+      vm.Slug = Slug;
+      vm.$log = $log;
+
+      vm.init();
+    }
+
+    ArticlePreviewController.prototype.init = function () {
+      var vm = this;
+
+      if(!vm.article.slug){
+        vm.article.slug = vm.Slug.slugify(vm.article.title);
+      }
+
+      if(!vm.category){
+        vm.category = vm.article.categories[0];
+      }
+
+      if(!vm.banner){
+        vm.banner = {
+          src: $rootScope.basePath + vm.article.image.url,
+          alt: 'Imagem de destaque do programa'
+        };
+      }
+
+      // if(vm.article.color && !vm.article.bgColor){
+      //   // 15% more darker
+      //   vm.article.colorDarker = window.ColorLuminance(vm.article.color, 0.15);
+      // }
+    };
+
+    ArticlePreviewController.prototype.showContent = function () {
+      var vm = this;
+
+      vm.$state.go('conheca-o-programa', {
+        slug: vm.article.slug
+      }, {
+        location: true
+      });
+    };
+
+    var directive = {
+      restrict: 'E',
+      templateUrl: 'app/components/article-preview/article-preview.html',
+      scope: {
+        article: '='
+      },
+      controller: ArticlePreviewController,
+      controllerAs: 'vm',
+      bindToController: true
+    };
+
+
+    return directive;
+  }
+
+})();
@@ -0,0 +1,101 @@
+<article class="article-preview" ng-class="vm.category.slug">
+  <header class="article-banner">
+    <img class="article-banner--image" ng-src="{{vm.banner.src}}" alt="{{vm.banner.alt}}">
+    <div class="article-banner--strip">
+      <h1 class="article-banner--title">{{::vm.article.title}}</h1>
+      <p class="article-banner--abstract" ng-bind-html="vm.article.abstract"></p>
+    </div>
+  </header>
+
+  <section class="call-to-action--section">
+    <div class="row show-content-row">
+      <div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
+        <div class="button--themed">
+          <button class="btn btn-block" ng-click="vm.showContent()">Conheça o programa</button>
+        </div>
+      </div>
+    </div>
+    <div class="row proposal-row">
+      <div class="row-height">
+        <div class="col-md-6 col-height">
+          <div class="inside-full-height">
+            <div class="proposal-box make-proposal">
+              <h2 class="proposal-box--title">Faça uma proposta</h2>
+              <p class="proposal-box--text">Qual a sua sugestão para melhorar este programa?</p>
+              <div class="row">
+                <div class="col-xs-8 col-xs-offset-2">
+                  <div class="button--themed">
+                    <button class="btn btn-block" ng-click="vm.goSendProposal()">
+                      Envie sua proposta
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-6 col-height">
+          <div class="inside-full-height">
+            <div class="proposal-box support-proposal">
+              <h2 class="proposal-box--title">Apoie outras propostas</h2>
+              <p class="proposal-box--text">
+                Lorem qual a sua sugestão para melhorar este programa
+                Lorem qual a sua sugestão para melhorar este programa
+                Lorem qual a sua sugestão para melhorar este programa
+                Lorem qual a sua sugestão para melhorar este programa
+                Lorem qual a sua sugestão para melhorar este programa
+                Lorem qual a sua sugestão para melhorar este programa?
+              </p>
+              <div class="col-lg-12">
+                <div class="col-xs-8 col-xs-offset-2 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
+                  <div class="button--themed vote-buttons">
+                    <button class="btn btn-circle vote-buttons-up" ng-click="vm.vote(1)">
+                      <span class="sr-only">Eu <b>apoio</b> esta proposta.</span>
+                      <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+                    </button>
+
+                    <button class="btn btn-circle vote-buttons-down" ng-click="vm.vote(-1)">
+                      <span class="sr-only">Eu <b>não apoio</b> esta proposta.</span>
+                      <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+                    </button>
+
+                    <button class="btn btn-block vote-buttons-skip" ng-click="vm.vote(0)">
+                      <span class="sr-only">Pular esta proposta.</span>
+                      <span class="icon" aria-hidden="true"></span>
+                      Pular
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div class="col-lg-12">
+                <div class="col-xs-8 col-xs-offset-2 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
+                  <div class="text-center">
+                    <button class="btn btn-link" ng-click="vm.showResults()">Resultados</button>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-12">
+                <div class="col-xs-12">
+                  <div class="text-center">
+                    <span>Compartilhe esta proposta</span>
+                    <social-share></social-share>
+                  </div>
+                </div>
+              </div>
+              <div class="clearfix"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="talk-proposal row proposal-row">
+      <div class="row-height">
+        <div class="col-md-12 col-height">
+          <div class="">
+            <h2>Bate-papo virtual com ministr@s</h2>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</article>
@@ -0,0 +1,91 @@
+.article-preview {
+    .article-banner {
+        position: relative;
+    }
+
+    .article-banner--image {
+        width: 100%;
+    }
+
+    .article-banner--strip {
+        color: #fff;
+        position: absolute;
+        bottom: 15%;
+        right: 0;
+        width: 50%;
+        text-align: center;
+
+        @each $category, $color in $categories {
+            .#{$category} & {
+                background-color: $color;
+            }
+        }
+
+        @media (max-width: $screen-sm){
+            position: relative;
+            width: 100%;
+        }
+    }
+
+    .article-banner--title {
+        font-size: 32px;
+        text-transform: uppercase;
+        margin-top: 0;
+        padding-top: 20px;
+    }
+    .article-banner--title,
+    .article-banner--abstract {
+        font-weight: bold;
+    }
+    .article-banner--abstract {
+        padding-bottom: 10px;
+    }
+
+    .show-content-row {
+        .button--themed {
+            .btn {
+                font-size: 38px;
+
+                @media (max-width: $screen-sm){
+                    font-size: 20px;
+                }
+            }
+        }
+    }
+
+    .talk-proposal {
+        margin-top: -20px;
+    }
+
+    .proposal-box {
+
+        // padding: 10px 20px;
+
+        .proposal-box--title {
+            font-size: 38px;
+            font-weight: 400;
+            text-align: center;
+
+            margin-bottom: 20px;
+        }
+
+        .proposal-box--text {
+            font-size: 24px;
+            font-weight: 700;
+            line-height: 1.2;
+            margin-bottom: 20px;
+        }
+
+        @each $category, $color in $categories {
+            .#{$category} & {
+                border-color: $color;
+
+                .proposal-box--title {
+                    color: $color;
+                }
+            }
+        }
+    }
+
+
+}
@@ -1,68 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('dialoga')
-    .directive('articleBar', articleBar);
-
-  /** @ngInject */
-  function articleBar() {
-    var directive = {
-      restrict: 'E',
-      templateUrl: 'app/components/articleBar/articleBar.html',
-      scope: {
-        category: '=',
-        categories: '='
-      },
-      controller: ArticleBarController,
-      controllerAs: 'vm',
-      bindToController: true
-    };
-
-    return directive;
-
-    /** @ngInject */
-    function ArticleBarController($scope, $rootScope, $state, $log) {
-      $log.debug('ArticleBarController');
-
-      var vm = this;
-
-      vm.$scope = $scope;
-      vm.$rootScope = $rootScope;
-      vm.$state = $state;
-      vm.theme = 'blue';
-
-      // if(!vm.category) {
-      //   throw 'article bar without category';
-      // }
-
-      // if(!vm.categories) {
-      //   throw 'article bar without categories list';
-      // }
-
-      vm.currentCategory = vm.category;
-
-      vm.$scope.$watch('vm.currentCategory', function(newValue, oldValue){
-        if(newValue !== oldValue){
-          vm.$state.go('inicio', {
-            tema: newValue.slug
-          }, {
-            location: true
-          });
-        }
-      });
-
-      vm.goBack = function (){
-        var vm = this;
-        var prevState = vm.$rootScope.$previousState;
-        if(prevState && prevState.state.name){
-          vm.$state.go(prevState.state.name, prevState.params);
-        } else {
-          vm.$state.go('inicio');
-        }
-      };
-    }
-
-  }
-
-})();
@@ -1,23 +0,0 @@
-<div class="article-bar" ng-class="vm.theme">
-    <div class="navbar">
-      <div class="navbar-header">
-        <button class="article-bar--item btn btn-link" ng-click="vm.goBack()">
-          <!-- <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> -->
-          <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
-          Voltar
-        </button>
-      </div>
-      <div class="navbar-left" ng-if="vm.category">
-        <button class="article-bar--item article-bar--category-button btn btn-link">
-          <span class="icon" ng-class="'icon-tema-' + vm.category.slug"></span>
-          <span class="category-name">{{::vm.category.name}}</span>
-        </button>
-      </div>
-      <div class="navbar-right" ng-if="vm.categories">
-        <label for="selectCategory" class="control-label sr-only" title="Selecione uma opção para acessar os programas do tema">Temas:</label>
-        <select id="selectCategory" name="selectCategory" class="article-bar--item form-control" ng-model="vm.currentCategory" ng-options="category.name for category in vm.categories track by category.slug">
-        </select>
-      </div>
-    </div>
-  </div>
-</div>
@@ -1,53 +0,0 @@
-.article-bar {
-    position: relative;
-    background-color: #0042b1;
-
-    .btn {
-        color: #fff;
-        font-weight: bold;
-    }
-
-    &--item {
-        margin: 8px 0;
-
-        @media (max-width: $screen-xs) {
-            margin: 8px;
-        }
-
-    }
-
-    &--category-button {
-        position: relative;
-        width: 125px;
-        text-align: right;
-        margin-left: 10px;
-        font-size: 24px;
-        line-height: 20px;
-        font-family: 'Open Sans';
-
-        .icon {
-            position: absolute;
-            top: -34px;
-            left: -34px;
-            transform: scale(.37);
-        }
-    }
-
-    .navbar {
-        margin-bottom: 0;
-    }
-
-    .navbar-right {
-        margin-right: 15px;
-    }
-
-    @each $category, $color in $categories {
-        &.#{$category} {
-            background-color: $color;
-        }
-    }
-
-    .contraste & {
-        background-color: #262626;
-    }
-}
@@ -8,7 +8,7 @@
     .factory('AuthInterceptor', AuthInterceptor);
   /** @ngInject */
-  function AuthService($http, $rootScope, Session, AUTH_EVENTS, api, $log) {
+  function AuthService($http, $rootScope, Session, AUTH_EVENTS, API, $log) {
     var service = {
       login: login,
@@ -21,7 +21,7 @@
     return service;
     function login (credentials) {
-      var url = api.host + '/api/v1/login';
+      var url = API.host + '/api/v1/login';
       var encodedData = 'login=' + credentials.username + '&password=' + credentials.password;
       return $http
@@ -0,0 +1,77 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('dialoga')
+    .directive('categoryList', categoryList);
+
+  /** @ngInject */
+  function categoryList() {
+
+    /** @ngInject */
+    function CategoryListController($rootScope, ArticleService, $location, $log) {
+      $log.debug('CategoryListController');
+
+      // alias
+      var vm = this;
+
+      // dependencies
+      vm.$rootScope = $rootScope;
+      vm.ArticleService = ArticleService;
+      vm.$location = $location;
+      vm.$log = $log;
+      vm.defaultLimit = 6;
+
+      // initialization
+      vm.init();
+    }
+
+    CategoryListController.prototype.init = function() {
+      var vm = this;
+
+      vm.selectedCategory = null;
+      vm.ArticleService.getCategories(function(categories){
+        vm.categories = categories;
+
+      });
+
+      vm.search = vm.$location.search();
+      if (vm.search && vm.search.tema) {
+        var slug = vm.search.tema;
+        vm.ArticleService.getCategoryBySlug(slug, function(category){
+          vm.selectedCategory = category;
+        }, function(error){
+          vm.$log.error('Error when try to "getCategoryBySlug"', error);
+        });
+      }
+    };
+
+    CategoryListController.prototype.selectCategory = function(category, $event) {
+      var vm = this;
+
+      // prevent glitch
+      $event.stopPropagation();
+
+      if (category !== vm.selectedCategory) {
+        // selected new filter
+        vm.selectedCategory = category;
+      } else {
+        vm.selectedCategory = null;
+      }
+
+      // send event to all controllers
+      vm.$rootScope.$broadcast('change-selectedCategory', vm.selectedCategory);
+    };
+
+    var directive = {
+      restrict: 'E',
+      templateUrl: 'app/components/category-list/category-list.html',
+      controller: CategoryListController,
+      controllerAs: 'categoryListCtrl',
+      bindToController: true
+    };
+
+    return directive;
+  }
+
+})();
@@ -0,0 +1,17 @@
+<div class="category-list">
+  <nav class="navigation">
+    <h3 class="category-list--title"><b>Programas</b> por Tema</h3>
+    <div class="list-group category-list" ng-class="categoryListCtrl.selectedCategory.slug">
+      <button type="button" class="list-group-item category-list--item"
+        ng-repeat="category in categoryListCtrl.categories"
+        ng-class="{active: categoryListCtrl.selectedCategory.slug === category.slug}"
+        ng-click="categoryListCtrl.selectCategory(category, $event)">
+
+        <span class="category-list--icon-circle" ng-class="category.slug"></span>
+        <span class="category-list--icon icon" ng-class="'icon-tema-' + category.slug"></span>
+        <span class="category-list--label">{{::category.name}}</span>
+        <span class="category-list--icon--right glyphicon glyphicon-chevron-right"></span>
+      </button>
+    </div>
+  </nav>
+</div>
@@ -0,0 +1,111 @@
+.category-list {
+    .category-list--title {
+        color: #ffffff;
+        font-size: 16px;
+        margin: 0;
+        padding: 20px;
+        background-color: #484848;
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+        overflow: hidden;
+    }
+
+
+    .category-list--group {
+    }
+
+    .category-list--item {
+        position: relative;
+        text-transform: uppercase;
+        font-weight: bold;
+        padding: 0;
+        height: 68px;
+        overflow: hidden;
+    }
+
+    .category-list--label {
+        margin-left: 70px;
+        margin-right: 30px;
+        display: inline-block;
+        z-index: 99999;
+    }
+
+    &--icon-circle {
+        width: 48px;
+        height: 48px;
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        // border: 1px solid #fff;
+        border-radius: 48px;
+
+        -webkit-transition: -webkit-transform 0.2s ease-in-out;
+        -moz-transition: -moz-transform 0.2s ease-in-out;
+        -o-transition: -o-transform 0.2s ease-in-out;
+        transition: transform 0.2s ease-in-out;
+
+        // -webkit-transition: all 0.2s ease-in-out;
+        // -moz-transition: all 0.2s ease-in-out;
+        // -o-transition: all 0.2s ease-in-out;
+        // transition: all 0.2s ease-in-out;
+
+        z-index: 0;
+
+        .active & {
+            z-index: -1;
+
+            @media (max-width: $screen-xs) {
+                transform: scale(20);
+            }
+
+            @media (min-width: $screen-xs + 1) {
+                transform: scale(40);
+            }
+
+            @media (min-width: $screen-sm + 1) {
+                transform: scale(20);
+            }
+
+            // @media (min-width: $screen-md + 1) {
+            //     transform: scale(20);
+            // }
+        }
+
+        @each $category, $color in $categories {
+            &.#{$category} {
+                background-color: $color;
+            }
+        }
+    }
+
+    .category-list--icon {
+        position: absolute;
+        top: -16px;
+        left: -14px;
+        transform: scale(0.35);
+    }
+
+    .category-list--icon--right {
+        position: absolute;
+        right: 9px;
+        top: 50%;
+        margin-top: -9px;
+        transform: scale(1.4);
+    }
+
+    .list-group-item.active,
+    .list-group-item.active:hover,
+    .list-group-item.active:focus {
+        background-color: #f5f5f5;
+    }
+
+    // @each $category, $color in $categories {
+    //     &.#{$category} {
+    //         .list-group-item.active,
+    //         .list-group-item.active:hover,
+    //         .list-group-item.active:focus {
+    //             background-color: $color;
+    //         }
+    //     }
+    // }
+}
@@ -1,99 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('dialoga')
-    .directive('programaBox', programaBox);
-
-  /** @ngInject */
-  function programaBox($rootScope) {
-
-    /** @ngInject */
-    function ProgramaController(ArticleService, $scope, $state, Slug, $log) {
-      $log.debug('ProgramaController');
-
-      var vm = this;
-      vm.ArticleService = ArticleService;
-      vm.$scope = $scope;
-      vm.$state = $state;
-      vm.Slug = Slug;
-      vm.$log = $log;
-
-      vm.init();
-    }
-
-    ProgramaController.prototype.init = function () {
-      var vm = this;
-
-      if(!vm.program.slug){
-        vm.program.slug = vm.Slug.slugify(vm.program.title);
-      }
-
-      if(!vm.category){
-        vm.category = vm.program.categories[0];
-      }
-
-      if(!vm.banner){
-        vm.banner = {
-          src: $rootScope.basePath + vm.program.image.url,
-          alt: 'Imagem de destaque do programa'
-        };
-      }
-
-      vm.displayType = vm.display;
-
-      // if(vm.program.color && !vm.program.bgColor){
-      //   // 15% more darker
-      //   vm.program.colorDarker = window.ColorLuminance(vm.program.color, 0.15);
-      // }
-    };
-
-    ProgramaController.prototype.isDisplay = function (display) {
-      return this.display === display;
-    };
-
-    ProgramaController.prototype.isDisplayBox = function () {
-      return this.isDisplay('box');
-    };
-
-    ProgramaController.prototype.isDisplayPreview = function () {
-      return this.isDisplay('preview');
-    };
-
-    ProgramaController.prototype.showContent = function () {
-      var vm = this;
-
-      vm.$state.go('programa-conheca', {
-        slug: vm.program.slug
-      }, {
-        location: true
-      });
-    };
-
-    ProgramaController.prototype.showPreview = function () {
-      var vm = this;
-
-      vm.$state.go('programa', {
-        slug: vm.program.slug
-      }, {
-        location: true
-      });
-    };
-
-    var directive = {
-      restrict: 'E',
-      templateUrl: 'app/components/programa/programa.html',
-      scope: {
-        program: '=',
-        display: '='
-      },
-      controller: ProgramaController,
-      controllerAs: 'vm',
-      bindToController: true
-    };
-
-
-    return directive;
-  }
-
-})();
@@ -1,122 +0,0 @@
-<div ng-if="vm.program" class="{{vm.category.slug}}">
-  <article ng-if="vm.displayType == 'box'" class="program-box" ng-click="vm.showPreview()">
-    <div>
-      <h2 class="program-box--category">{{vm.category.name}}</h2>
-      <div class="program-box--image-wrapper">
-        <!-- <img class="program-box--image img-responsive" ng-src="{{vm.banner.src}}" alt="{{vm.banner.alt}}" /> -->
-        <div class="program-box--image" ng-style="{'background-image':'url( {{vm.banner.src}} )'}"></div>
-      </div>
-      <div class="program-box--title">
-        <h1>{{::vm.program.title}}</h1>
-      </div>
-      <div class="program-box--abstract" ng-bind-html="vm.program.abstract"></div>
-      <div class="button--themed">
-        <button class="btn btn-block">
-          Participe
-        </button>
-      </div>
-    </div>
-  </article>
-
-  <article ng-if="vm.displayType == 'preview'" class="program-preview">
-    <header class="program-banner">
-      <img class="program-banner--image" ng-src="{{vm.banner.src}}" alt="{{vm.banner.alt}}">
-      <div class="program-banner--strip">
-        <h1 class="program-banner--title">{{::vm.program.title}}</h1>
-        <p class="program-banner--abstract" ng-bind-html="vm.program.abstract"></p>
-      </div>
-    </header>
-
-    <section class="call-to-action--section">
-      <div class="row show-content-row">
-        <div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
-          <div class="button--themed">
-            <button class="btn btn-block" ng-click="vm.showContent()">Conheça o programa</button>
-          </div>
-        </div>
-      </div>
-      <div class="row proposal-row">
-        <div class="row-height">
-          <div class="col-md-6 col-height">
-            <div class="inside-full-height">
-              <div class="proposal-box make-proposal">
-                <h2 class="proposal-box--title">Faça uma proposta</h2>
-                <p class="proposal-box--text">Qual a sua sugestão para melhorar este programa?</p>
-                <div class="row">
-                  <div class="col-xs-8 col-xs-offset-2">
-                    <div class="button--themed">
-                      <button class="btn btn-block" ng-click="vm.goSendProposal()">
-                        Envie sua proposta
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-md-6 col-height">
-            <div class="inside-full-height">
-              <div class="proposal-box support-proposal">
-                <h2 class="proposal-box--title">Apoie outras propostas</h2>
-                <p class="proposal-box--text">
-                  Lorem qual a sua sugestão para melhorar este programa
-                  Lorem qual a sua sugestão para melhorar este programa
-                  Lorem qual a sua sugestão para melhorar este programa
-                  Lorem qual a sua sugestão para melhorar este programa
-                  Lorem qual a sua sugestão para melhorar este programa
-                  Lorem qual a sua sugestão para melhorar este programa?
-                </p>
-                <div class="col-lg-12">
-                  <div class="col-xs-8 col-xs-offset-2 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
-                    <div class="button--themed vote-buttons">
-                      <button class="btn btn-circle vote-buttons-up" ng-click="vm.vote(1)">
-                        <span class="sr-only">Eu <b>apoio</b> esta proposta.</span>
-                        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
-                      </button>
-
-                      <button class="btn btn-circle vote-buttons-down" ng-click="vm.vote(-1)">
-                        <span class="sr-only">Eu <b>não apoio</b> esta proposta.</span>
-                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
-                      </button>
-
-                      <button class="btn btn-block vote-buttons-skip" ng-click="vm.vote(0)">
-                        <span class="sr-only">Pular esta proposta.</span>
-                        <span class="icon" aria-hidden="true"></span>
-                        Pular
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-lg-12">
-                  <div class="col-xs-8 col-xs-offset-2 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
-                    <div class="text-center">
-                      <button class="btn btn-link" ng-click="vm.showResults()">Resultados</button>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-12">
-                  <div class="col-xs-12">
-                    <div class="text-center">
-                      <span>Compartilhe esta proposta</span>
-                      <social-share></social-share>
-                    </div>
-                  </div>
-                </div>
-                <div class="clearfix"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="talk-proposal row proposal-row">
-        <div class="row-height">
-          <div class="col-md-12 col-height">
-            <div class="">
-              <h2>Bate-papo virtual com ministr@s</h2>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  </article>
-</div>
@@ -1,409 +0,0 @@
-// Variables
-$program-box-space: 20px;
-$scale: 1.1;
-$time: .2s;
-$darken: 15%;
-
-// Commons
-.button--themed {
-    padding: $program-box-space;
-    .btn {
-        color: #fff;
-        font-weight: bold;
-        padding: 15px 0;
-        border-left: 0;
-        border-right: 0;
-        border-top: 0;
-        border-radius: 6px;
-
-        -webkit-transition: all $time ease-in-out;
-        -moz-transition: all $time ease-in-out;
-        -o-transition: all $time ease-in-out;
-        transition: all $time ease-in-out;
-
-        @each $category, $color in $categories {
-            .#{$category} & {
-                background-color: $color;
-                border-bottom: 3px solid darken($color, $darken);
-            }
-        }
-
-        &:hover,
-        &:focus {
-            @each $category, $color in $categories {
-                .#{$category} & {
-                    background-color: darken($color, $darken);
-                }
-            }
-        }
-
-        .contraste & {
-            color: #262626;
-            background-color: #fff;
-        }
-    }
-
-    .btn-circle {
-        width: 64px;
-        height: 64px;
-        border-radius: 100%;
-    }
-
-    // &.vote-buttons {
-    //     padding-bottom: 40px;
-    // }
-
-    .btn.vote-buttons-up {
-        float: right;
-        margin-right: 10px;
-        background-color: #32dbb5;
-        border-bottom: 3px solid #1da485;
-
-        &:hover,
-        &:focus {
-            background-color: #1da485;
-        }
-    }
-
-    .btn.vote-buttons-down {
-        float: left;
-        margin-left: 10px;
-        background-color: #db4127;
-        border-bottom: 3px solid #9c2d1a;
-
-        &:hover,
-        &:focus {
-            background-color: #9c2d1a;
-        }
-
-
-        // @media (max-width: $screen-sm) {
-        //     margin-left:
-        // }
-    }
-
-    .vote-buttons-up,
-    .vote-buttons-down {
-        font-size: 30px;
-        margin-bottom: 20px;
-    }
-}
-
-
-.program-box {
-    cursor: pointer;
-    background-color: #fff;
-    margin-top: $program-box-space;
-    margin-bottom: $program-box-space;
-    border-radius: 3px;
-    overflow: hidden;
-
-    .contraste & {
-        color: #fff;
-        background-color: #262626;
-    }
-
-    &--category {
-        font-size: 14px;
-        font-weight: bold;
-        text-transform: uppercase;
-        line-height: 22px;
-        display: block;
-        height: 30px;
-        margin: 0;
-        padding: 5px $program-box-space;
-        color: #ffffff;
-
-        @each $category, $color in $categories {
-            .#{$category} & {
-                background-color: $color;
-            }
-        }
-
-        .contraste & {
-            background-color: #262626;
-        }
-    }
-
-    &--title {
-
-        padding: 0 $program-box-space;
-
-        h1 {
-            font-size: 18px;
-            font-weight: bold;
-            margin: 0 0 $program-box-space 0;
-            display: table-cell;
-            vertical-align: middle;
-
-            // Altura das linhas do abstract
-            $hLine: 20px;
-            // default
-            height: $hLine * 2;
-
-            @media (max-width: $screen-xs) {
-                // height: $hLine * 3;
-                height: auto;
-            }
-
-            @media (min-width: $screen-xs + 1) {
-                // height: $hLine * 2;
-                height: auto;
-            }
-
-            @media (min-width: $screen-sm + 1) {
-                height: $hLine * 2;
-            }
-
-            @media (min-width: $screen-md + 1) {
-                height: $hLine * 2;
-            }
-        }
-    }
-
-    &--abstract {
-        padding: 0 $program-box-space;
-        display: table-cell;
-        vertical-align: middle;
-
-        // Altura das linhas do abstract
-        $pLine: 20px;
-        // 1 linha: 19px -> 20
-        // 2 linhas: 38px -> 40
-        // 3 linhas: 57px -> 60
-        // 4 linhas: 76px -> 80
-
-        height: $pLine * 2; // default
-
-        @media (max-width: $screen-xs) {
-            // height: $pLine * 4;
-            height: auto;
-        }
-
-        @media (min-width: $screen-xs + 1) {
-            // height: $pLine * 3;
-            height: auto;
-        }
-
-        @media (min-width: $screen-sm + 1) {
-            height: $pLine * 4;
-        }
-
-        @media (min-width: $screen-md + 1) {
-            height: $pLine * 3;
-        }
-
-        p { margin: 0; }
-    }
-
-    &--image-wrapper {
-        position: relative;
-        // width: 100%;
-        // width: 370px;
-        // height: 170px;
-
-        overflow: hidden;
-        // text-align: center;
-        min-height: 170px;
-    }
-
-    &--image {
-        min-height: 170px;
-        background-position: center;
-        background-size: cover;
-        background-repeat: no-repeat;
-
-        -webkit-transition: all $time ease-in-out;
-        -moz-transition: all $time ease-in-out;
-        -o-transition: all $time ease-in-out;
-        transition: all $time ease-in-out;
-    }
-
-    &:hover {
-        background-color: #d9d9d9;
-
-        .program-box--image {
-            -webkit-transform: scale($scale); /* prefixo para browsers webkit */
-            -moz-transform: scale($scale); /* prefixo para browsers gecko */
-            -o-transform: scale($scale); /* prefixo para opera */
-            transform: scale($scale);
-        }
-
-        .contraste & {
-            background-color: #262626;
-        }
-    }
-}
-
-.program-preview {
-    .program-banner {
-        position: relative;
-    }
-
-    .program-banner--image {
-        width: 100%;
-    }
-
-    .program-banner--strip {
-        color: #fff;
-        position: absolute;
-        bottom: 15%;
-        right: 0;
-        width: 50%;
-        text-align: center;
-
-        @each $category, $color in $categories {
-            .#{$category} & {
-                background-color: $color;
-            }
-        }
-
-        @media (max-width: $screen-sm){
-            position: relative;
-            width: 100%;
-        }
-    }
-
-    .program-banner--title {
-        font-size: 32px;
-        text-transform: uppercase;
-        margin-top: 0;
-        padding-top: 20px;
-    }
-    .program-banner--title,
-    .program-banner--abstract {
-        font-weight: bold;
-    }
-    .program-banner--abstract {
-        padding-bottom: 10px;
-    }
-}
-
-.show-content-row {
-    .button--themed {
-        .btn {
-            font-size: 38px;
-
-            @media (max-width: $screen-sm){
-                font-size: 20px;
-            }
-        }
-    }
-}
-
-.row-height {
-    display: table;
-    table-layout: fixed;
-    height: 100%;
-    width: 100%;
-    border-spacing: 20px;
-
-    @media (max-width: $screen-sm) {
-        display: block;
-    }
-
-    // @media (min-width: $screen-sm + 1) {
-    //     height: $hLine * 2;
-    // }
-
-    // @media (min-width: $screen-md + 1) {
-    //     height: $hLine * 2;
-    // }
-}
-
-.col-height {
-    display: table-cell;
-    float: none;
-    height: 100%;
-    vertical-align: top;
-
-    border: 1px solid #000;
-    border-radius: 3px;
-
-    @each $category, $color in $categories {
-        .#{$category} & {
-            border-color: $color;
-        }
-    }
-
-    @media (max-width: $screen-sm){
-        display: block;
-        border: none;
-    }
-}
-
-.inside {
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-
-.inside-full-height {
-    height: 100%;
-    margin-top: 0;
-    margin-bottom: 0;
-
-
-    @media (max-width: $screen-sm) {
-        border: 1px solid;
-        border-radius: 3px;
-        padding: 20px;
-        margin: 10px 0;
-
-        @each $category, $color in $categories {
-            .#{$category} & {
-                border-color: $color;
-            }
-        }
-    }
-}
-
-
-.talk-proposal {
-    margin-top: -20px;
-}
-
-.proposal-box {
-
-    // padding: 10px 20px;
-
-    .proposal-box--title {
-        font-size: 38px;
-        font-weight: 400;
-        text-align: center;
-
-        margin-bottom: 20px;
-    }
-
-    .proposal-box--text {
-        font-size: 24px;
-        font-weight: 700;
-        line-height: 1.2;
-        margin-bottom: 20px;
-    }
-
-    @each $category, $color in $categories {
-        .#{$category} & {
-            border-color: $color;
-
-            .proposal-box--title {
-                color: $color;
-            }
-        }
-    }
-}
-
-.program-content {
-    h2 {
-        font-size: 38px;
-        font-weight: 500;
-        margin-bottom: 40px;
-        padding-bottom: 20px;
-
-        small {
-            display: block;
-            font-size: 16px;
-            padding-top: 5px;
-            text-transform: none;
-        }
-    }
-}
@@ -1,74 +0,0 @@
-<div id="lista-de-programas" class="row">
-  <div class="col-sm-4 col-md-3">
-    <div class="category-list">
-      <nav class="navigation">
-        <h3 class="category-list--title"><b>Programas</b> por Tema</h3>
-        <div class="list-group category-list" ng-class="vm.categoryFilter.slug">
-          <button type="button" class="list-group-item category-list--item"
-            ng-repeat="category in vm.categories"
-            ng-class="{active: vm.categoryFilter.slug === category.slug}"
-            ng-click="vm.filterByCategory(category, $event)">
-
-            <span class="category-list--icon-circle" ng-class="category.slug"></span>
-            <span class="category-list--icon icon" ng-class="'icon-tema-' + category.slug"></span>
-            <span class="category-list--label">{{::category.name}}</span>
-            <span class="category-list--icon--right glyphicon glyphicon-chevron-right"></span>
-          </button>
-        </div>
-      </nav>
-    </div>
-  </div>
-
-  <div class="col-sm-8 col-md-9">
-    <article class="program-list">
-      <header class="header">
-        <h2>Conheça os programas <span class="small">({{vm.filtredProgramList.length}}/{{::vm.programs.length}})</span></h2>
-        <button type="button" class="btn btn-link" ng-click="vm.showAll($event)">
-          <span class="glyphicon glyphicon-chevron-right"></span> Ver todos os {{::vm.programs.length}} programas
-        </button>
-      </header>
-      <div>
-        <div class="col-sm-12">
-          <aside class="form-inline">
-            <div class="row">
-              <div class="col-xs-6 col-sm-7 col-md-9">
-                <label for="programListFilter" class="control-label sr-only">Filtrar programas:</label>
-                <input id="programListFilter" type="search" class="form-control" ng-model="vm.query" placeholder="Filtrar programas" aria-label="Filtrar programas" >
-              </div>
-
-              <!-- <label for="selectCategoryFilter" class="control-label sr-only">Filtrar por tema:</label>
-              <select id="selectCategoryFilter" name="selectCategoryFilter" class="form-control" ng-model="vm.categoryFilter" ng-options="category.name for category in vm.categories track by category.slug">
-                <option value="">-- Filtrar por tema --</option>
-              </select> -->
-
-              <div class="col-xs-6 col-sm-5 col-md-3">
-                <label for="selectOrderBy" class="control-label sr-only">Ordernar por:</label>
-                <select id="selectOrderBy" name="selectOrderBy" class="form-control pull-right" ng-model="vm.orderCriteria" ng-options="orderCriteria.label for orderCriteria in vm.orderCriteries">
-                  <option value="">-- Ordernar por: --</option>
-                </select>
-              </div>
-              <!-- <div class="checkbox">
-                <label>
-                  <input type="checkbox" ng-model="vm.reverse">
-                  Reverso
-                </label>
-              </div> -->
-
-              <!-- <input id="programListLimit" type="number" class="form-control input-sm" size="4" step="2" ng-model="vm.limitTo" aria-label="Limitar" >
-              <label for="programListLimit" class="control-label">Limite</label> -->
-
-            </div>
-          </aside>
-        </div>
-
-        <div ng-repeat="program in vm.filtredProgramList as results">
-          <programa-box program="program" display="'box'" class="col-xs-12 col-sm-6"></programa-box>
-          <div ng-if="$odd" class="clearfix"></div>
-        </div>
-        <div class="animate-repeat" ng-if="results.length == 0">
-          Nenhum programa encontrado.
-        </div>
-      </div>
-    </article>
-  </div>
-</div>
@@ -1,132 +0,0 @@
-.program-list {
-    .header {
-        position: relative;
-        height: 40px;
-        margin-bottom: 10px;
-
-        button {
-            position: absolute;
-            right: 0;
-            top: 2px;
-        }
-    }
-
-    .form-inline {
-        input,
-        select {
-            width: 100%;
-        }
-    }
-}
-
-.category-list {
-    .category-list--title {
-        color: #ffffff;
-        font-size: 16px;
-        margin: 0;
-        padding: 20px;
-        background-color: #484848;
-        border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
-        overflow: hidden;
-    }
-
-
-    .category-list--group {
-    }
-
-    .category-list--item {
-        position: relative;
-        text-transform: uppercase;
-        font-weight: bold;
-        padding: 0;
-        height: 68px;
-        overflow: hidden;
-    }
-
-    .category-list--label {
-        margin-left: 70px;
-        margin-right: 30px;
-        display: inline-block;
-        z-index: 99999;
-    }
-
-    &--icon-circle {
-        width: 48px;
-        height: 48px;
-        position: absolute;
-        top: 10px;
-        left: 10px;
-        // border: 1px solid #fff;
-        border-radius: 48px;
-
-        -webkit-transition: -webkit-transform 0.2s ease-in-out;
-        -moz-transition: -moz-transform 0.2s ease-in-out;
-        -o-transition: -o-transform 0.2s ease-in-out;
-        transition: transform 0.2s ease-in-out;
-
-        // -webkit-transition: all 0.2s ease-in-out;
-        // -moz-transition: all 0.2s ease-in-out;
-        // -o-transition: all 0.2s ease-in-out;
-        // transition: all 0.2s ease-in-out;
-
-        z-index: 0;
-
-        .active & {
-            z-index: -1;
-
-            @media (max-width: $screen-xs) {
-                transform: scale(20);
-            }
-
-            @media (min-width: $screen-xs + 1) {
-                transform: scale(40);
-            }
-
-            @media (min-width: $screen-sm + 1) {
-                transform: scale(20);
-            }
-
-            // @media (min-width: $screen-md + 1) {
-            //     transform: scale(20);
-            // }
-        }
-
-        @each $category, $color in $categories {
-            &.#{$category} {
-                background-color: $color;
-            }
-        }
-    }
-
-    .category-list--icon {
-        position: absolute;
-        top: -16px;
-        left: -14px;
-        transform: scale(0.35);
-    }
-
-    .category-list--icon--right {
-        position: absolute;
-        right: 9px;
-        top: 50%;
-        margin-top: -9px;
-        transform: scale(1.4);
-    }
-
-    .list-group-item.active,
-    .list-group-item.active:hover,
-    .list-group-item.active:focus {
-        background-color: #f5f5f5;
-    }
-
-    // @each $category, $color in $categories {
-    //     &.#{$category} {
-    //         .list-group-item.active,
-    //         .list-group-item.active:hover,
-    //         .list-group-item.active:focus {
-    //             background-color: $color;
-    //         }
-    //     }
-    // }
-}
@@ -57,7 +57,7 @@
           'footer': { templateUrl: 'app/pages/footer/footer.html' }
         }
       })
-      .state('programa-conheca', {
+      .state('conheca-o-programa', {
         url: '/programa/:slug/conheca-o-programa',
         views: {
           'header': { templateUrl: 'app/pages/header/header.html' },
@@ -18,7 +18,7 @@
     $rootScope.$on('$stateChangeStart', function(event, next) {
       if (!next.data || !next.data.authorizedRoles) {
-        $log.debug('runAuth: public url/state');
+        $log.debug('[RUN] Auth: public url/state');
         return;
       }
@@ -37,7 +37,7 @@
       }
     });
-    $log.debug('runAuth end.');
+    $log.debug('[RUN] Auth end.');
   }
   /** @ngInject */
@@ -75,7 +75,7 @@
       }
     };
-    $log.debug('runAccessibility end.');
+    $log.debug('[RUN] Accessibility end.');
   }
   /** @ngInject */
@@ -86,11 +86,11 @@
   }
   /** @ngInject */
-  function runPath($rootScope, api, $window, $log) {
+  function runPath($rootScope, API, $window, $log) {
     var isProduction = (/^http:\/\/dialoga\.gov\.br\//.test($window.location.href));
-    $rootScope.basePath = isProduction ? api.hostProd :  api.hostHom;
+    $rootScope.basePath = isProduction ? API.hostProd :  API.hostHom;
-    $log.debug('runPath end.');
+    $log.debug('[RUN] Path end.');
   }
   /** @ngInject */
@@ -122,7 +122,7 @@
   /** @ngInject */
   function runBlock($log) {
-    $log.debug('runBlock end.');
+    $log.debug('[RUN] Block end.');
   }
 })();
@@ -25,6 +25,12 @@ $gray: #f1f1f1;
 $categories: (saude: #3449b7, seguranca-publica: #e34748, educacao: #f39720, reducao-da-pobreza: #3ebb8f, cultura: #a63738);
 $categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) é universal, integral e de responsabilidade do Governo Federal, estados e municípios. Atende a todos os brasileiros.", seguranca-publica: "A segurança pública é um direito fundamental dos cidadãos. A proteção da vida, a disseminação da cultura da paz e a integração dos órgãos e instituições municipais, estaduais e federais são os maiores compromissos dessa política pública.", educacao: "Uma pátria educadora se faz com oportunidades para todos. Nos últimos anos, o Brasil criou esse caminho de oportunidades. Ampliamos o acesso à educação em todos os níveis de ensino – da creche à pós-graduação – e para todos os brasileiros, independentemente de sua classe social. E ainda há muito a fazer. O Plano Nacional de Educação (PNE) estabelece novas metas para que o governo federal trabalhe em parceria com a sociedade, com os estados e os municípios na construção de um futuro melhor. Queremos agora um salto na qualidade do ensino.", reducao-da-pobreza: "Com o esforço do Brasil para reduzir a pobreza e a desigualdade, 36 milhões de pessoas superaram a miséria na última década e o país saiu do Mapa da Fome das Nações Unidas.", cultura: "O que nos singulariza no conjunto das nações é, em última instância, nossa cultura. É por ela que nos identificamos como brasileiros de norte a sul deste país. Uma grande nação precisa ter um desenvolvimento cultural à altura de sua grandeza, contemplando as dimensões simbólica, econômica e cidadã da cultura, que são parte central do projeto de um país democrático e plural. A pluralidade é nossa singularidade.");
+// Programs
+$scale: 1.1;
+$time: .2s;
+$darken: 15%;
+
+
 // -------------
 body {
@@ -53,11 +59,89 @@ body {
   z-index: 2;
 }
-.browsehappy {
-  margin: 0.2em 0;
-  background: #ccc;
-  color: #000;
-  padding: 0.2em 0;
+// Commons
+.button--themed {
+    padding: 20px;
+    .btn {
+        color: #fff;
+        font-weight: bold;
+        padding: 15px 0;
+        border-left: 0;
+        border-right: 0;
+        border-top: 0;
+        border-radius: 6px;
+
+        -webkit-transition: all $time ease-in-out;
+        -moz-transition: all $time ease-in-out;
+        -o-transition: all $time ease-in-out;
+        transition: all $time ease-in-out;
+
+        @each $category, $color in $categories {
+            .#{$category} & {
+                background-color: $color;
+                border-bottom: 3px solid darken($color, $darken);
+            }
+        }
+
+        &:hover,
+        &:focus {
+            @each $category, $color in $categories {
+                .#{$category} & {
+                    background-color: darken($color, $darken);
+                }
+            }
+        }
+
+        .contraste & {
+            color: #262626;
+            background-color: #fff;
+        }
+    }
+
+    .btn-circle {
+        width: 64px;
+        height: 64px;
+        border-radius: 100%;
+    }
+
+    // &.vote-buttons {
+    //     padding-bottom: 40px;
+    // }
+
+    .btn.vote-buttons-up {
+        float: right;
+        margin-right: 10px;
+        background-color: #32dbb5;
+        border-bottom: 3px solid #1da485;
+
+        &:hover,
+        &:focus {
+            background-color: #1da485;
+        }
+    }
+
+    .btn.vote-buttons-down {
+        float: left;
+        margin-left: 10px;
+        background-color: #db4127;
+        border-bottom: 3px solid #9c2d1a;
+
+        &:hover,
+        &:focus {
+            background-color: #9c2d1a;
+        }
+
+
+        // @media (max-width: $screen-sm) {
+        //     margin-left:
+        // }
+    }
+
+    .vote-buttons-up,
+    .vote-buttons-down {
+        font-size: 30px;
+        margin-bottom: 20px;
+    }
 }
 // Hack to fix "Barra do Brasil"
@@ -0,0 +1,65 @@
+.row-height {
+    display: table;
+    table-layout: fixed;
+    height: 100%;
+    width: 100%;
+    border-spacing: 20px;
+
+    @media (max-width: $screen-sm) {
+        display: block;
+    }
+
+    // @media (min-width: $screen-sm + 1) {
+    //     height: $hLine * 2;
+    // }
+
+    // @media (min-width: $screen-md + 1) {
+    //     height: $hLine * 2;
+    // }
+}
+
+.col-height {
+    display: table-cell;
+    float: none;
+    height: 100%;
+    vertical-align: top;
+
+    border: 1px solid #000;
+    border-radius: 3px;
+
+    @each $category, $color in $categories {
+        .#{$category} & {
+            border-color: $color;
+        }
+    }
+
+    @media (max-width: $screen-sm){
+        display: block;
+        border: none;
+    }
+}
+
+.inside {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.inside-full-height {
+    height: 100%;
+    margin-top: 0;
+    margin-bottom: 0;
+
+
+    @media (max-width: $screen-sm) {
+        border: 1px solid;
+        border-radius: 3px;
+        padding: 20px;
+        margin: 10px 0;
+
+        @each $category, $color in $categories {
+            .#{$category} & {
+                border-color: $color;
+            }
+        }
+    }
+}
@@ -6,12 +6,12 @@
     .factory('ArticleService', ArticleService);
   /** @ngInject */
-  function ArticleService($http, $q, $rootScope, UtilService, Slug, $log) {
+  function ArticleService($http, $q, $rootScope, API, UtilService, Slug, $log) {
     $log.debug('ArticleService');
-    var idArticleHome = '103358';
-    var idArticleAbout = '108073';
-    var idArticleTerms = '107880';
+    var idArticleHome = API.articleId.home;
+    var idArticleAbout = API.articleId.about;
+    var idArticleTerms = API.articleId.terms;
     var _savedAbstract = null;
@@ -22,6 +22,9 @@
       getTerms: getTerms,
       getArticleById: getArticleById,
       getArticleBySlug: getArticleBySlug,
+      getCategories: getCategories,
+      getCategoryBySlug: getCategoryBySlug,
+      getPrograms: getPrograms,
       getContentById: getContentById,
       setHomeAbstract: setHomeAbstract,
       getHomeAbstract: getHomeAbstract
@@ -89,6 +92,34 @@
       }, cbError);
     }
+    function getCategories (cbSuccess, cbError) {
+      return getHome(function(data){
+        cbSuccess(data.article.categories);
+      }, cbError);
+    }
+
+    function getCategoryBySlug (slug, cbSuccess, cbError) {
+      return getHome(function (data){
+        var result = null;
+
+        for (var i = data.article.categories.length - 1; i >= 0; i--) {
+          var category = data.article.categories[i];
+          if (category.slug === slug) {
+            result = category;
+            break;
+          }
+        }
+
+        cbSuccess(result);
+      }, cbError);
+    }
+
+    function getPrograms (cbSuccess, cbError) {
+      return getHome(function(data){
+        cbSuccess(data.article.children);
+      }, cbError);
+    }
+
     function getContentById (contentId, cbSuccess, cbError) {
       return getArticleById(contentId, {
         fields: 'id,body&content_type=ProposalsDiscussionPlugin::Topic'
@@ -99,7 +130,7 @@
       return getArticleById(idArticleHome, {
         fields: 'id,children,categories,abstract,title,image,url,setting,position',
         private_token: 'null'
-      }, _handleCategoryColors(cbSuccess), cbError);
+      }, _handleCategory(cbSuccess), cbError);
     }
     function getAbout (cbSuccess, cbError) {
@@ -110,20 +141,23 @@
       return getArticleById(idArticleTerms, {}, cbSuccess, cbError);
     }
-    function _handleCategoryColors (cbSuccess) {
+    function _handleCategory (cbSuccess) {
       // var darkFactor = 0.15;
       return function (data) {
-        // if(data.article.categories){
-        //   var categories = data.article.categories;
+        if(data.article.categories){
+          // var categories = data.article.categories;
+          // Handle Category Data
+
+          // Handle Category Colors
         //   for (var i = categories.length - 1; i >= 0; i--) {
         //     var category = categories[i];
         //     if(category.color && !category.bgColor){
         //       category.colorDarker = $window.ColorLuminance(category.color, 0.15);
         //     }
         //   };
-        // }
+        }
         cbSuccess(data);
       };
     }
@@ -28,6 +28,13 @@
 <section class="section-gray section-space-up" ng-if="pageInicio.article">
   <div class="container">
-    <programa-list article="pageInicio.article"></programa-list>
+    <div id="lista-de-programas" class="row">
+      <div class="col-sm-4 col-md-3">
+        <category-list></category-list>
+      </div>
+      <div class="col-sm-8 col-md-9">
+        <article-grid></article-grid>
+      </div>
+    </div>
   </div>
 </section>
 <div class="container page--conheca-o-programa">
-  <div ng-if="pageProgramaContent.program && pageProgramaContent.categories">
-    <article-bar category="pageProgramaContent.program.categories[0]" categories="pageProgramaContent.categories"></article-bar>
+  <div ng-if="pageProgramaContent.article && pageProgramaContent.categories">
+    <article-bar category="pageProgramaContent.article.categories[0]" categories="pageProgramaContent.categories"></article-bar>
   </div>
-  <div ng-if="!pageProgramaContent.program.body">
+  <div ng-if="!pageProgramaContent.article.body">
     <div ng-if="!pageProgramaContent.error" class="alert alert-info" role="alert">Carregando detalhes sobre o progama...</div>
     <div ng-if="pageProgramaContent.error" class="alert alert-warning" role="alert">{{pageProgramaContent}}</div>
   </div>
-  <div ng-if="pageProgramaContent.program.body">
+  <div ng-if="pageProgramaContent.article.body">
     <article class="program-content">
       <div>
-        <section ng-bind-html="pageProgramaContent.program.body"></section>
+        <section ng-bind-html="pageProgramaContent.article.body"></section>
       </div>
     </article>
-    <aside class="program--aside"ng-class="pageProgramaContent.program.categories[0].slug">
+    <aside class="program--aside"ng-class="pageProgramaContent.article.categories[0].slug">
       <div class="col-sm-6" >
         <div class="button--themed">
           <button class="btn btn-block" ng-click="pageProgramaContent.goToPreview()">
@@ -0,0 +1,81 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('dialoga')
+    .controller('ProgramaContentPageController', ProgramaContentPageController);
+
+  /** @ngInject */
+  function ProgramaContentPageController(ArticleService, $state, $location, $scope, $rootScope, $log) {
+    $log.debug('ProgramaContentPageController');
+
+    var vm = this;
+
+    vm.ArticleService = ArticleService;
+    vm.$state = $state;
+    vm.$location = $location;
+    vm.$scope = $scope;
+    vm.$rootScope = $rootScope;
+    vm.$log = $log;
+
+    vm.init();
+  }
+
+  ProgramaContentPageController.prototype.init = function () {
+    var vm = this;
+
+    var params = vm.$state.params;
+    var slug = params.slug;
+
+    vm.article = null;
+    vm.categories = null;
+    vm.currentCategory = null;
+    vm.loading = true;
+    vm.error = false;
+
+    vm.ArticleService.getCategories(function(categories){
+      vm.categories = categories;
+    }, function (error) {
+      vm.error = error;
+      vm.$log.error(error);
+    });
+
+    vm.ArticleService.getArticleBySlug(slug, function(article){
+      vm.article = article;
+      vm.currentCategory = vm.article.categories[0];
+
+      vm.loadContent();
+
+    }, function (error) {
+      vm.$log.error(error);
+      vm.$log.info('Rollback to home page.');
+      vm.$state.go('inicio', {}, {location: true});
+    });
+  };
+
+  ProgramaContentPageController.prototype.loadContent = function () {
+    var vm = this;
+
+    vm.loading = true;
+    if(!vm.article.body){
+      vm.ArticleService.getContentById(vm.article.id, function (data) {
+        vm.article.body = data.article.body;
+        vm.loading = false;
+      }, function (error) {
+        vm.loading = false;
+        vm.error = error;
+      });
+    }
+    vm.loading = false;
+  };
+
+  ProgramaContentPageController.prototype.goToPreview = function () {
+    var vm = this;
+
+    vm.$state.go('programa', {
+      slug: vm.article.slug
+    }, {
+      location: true
+    });
+  };
+})();
@@ -1,81 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('dialoga')
-    .controller('ProgramaContentPageController', ProgramaContentPageController);
-
-  /** @ngInject */
-  function ProgramaContentPageController(ArticleService, $state, $location, $scope, $rootScope, $log) {
-    $log.debug('ProgramaContentPageController');
-
-    var vm = this;
-
-    vm.ArticleService = ArticleService;
-    vm.$state = $state;
-    vm.$location = $location;
-    vm.$scope = $scope;
-    vm.$rootScope = $rootScope;
-    vm.$log = $log;
-
-    vm.init();
-  }
-
-  ProgramaContentPageController.prototype.init = function () {
-    var vm = this;
-
-    var params = vm.$state.params;
-    var slug = params.slug;
-
-    vm.program = null;
-    vm.categories = null;
-    vm.currentCategory = null;
-    vm.loading = true;
-    vm.error = false;
-
-    vm.ArticleService.getHome(function(data){
-      vm.categories = data.article.categories;
-    }, function (error) {
-      vm.error = error;
-      vm.$log.error(error);
-    });
-
-    vm.ArticleService.getArticleBySlug(slug, function(program){
-      vm.program = program;
-      vm.currentCategory = vm.program.categories[0];
-
-      vm.loadContent();
-
-    }, function (error) {
-      vm.$log.error(error);
-      vm.$log.info('Rollback to home page.');
-      vm.$state.go('inicio', {}, {location: true});
-    });
-  };
-
-  ProgramaContentPageController.prototype.loadContent = function () {
-    var vm = this;
-
-    vm.loading = true;
-    if(!vm.program.body){
-      vm.ArticleService.getContentById(vm.program.id, function (data) {
-        vm.program.body = data.article.body;
-        vm.loading = false;
-      }, function (error) {
-        vm.loading = false;
-        vm.error = error;
-      });
-    }
-    vm.loading = false;
-  };
-
-  ProgramaContentPageController.prototype.goToPreview = function () {
-    var vm = this;
-
-    vm.$state.go('programa', {
-      slug: vm.program.slug
-    }, {
-      location: true
-    });
-  };
-})();
@@ -27,33 +27,33 @@
     var params = vm.$state.params;
     var slug = params.slug;
-    vm.program = null;
+    vm.article = null;
     vm.categories = null;
     vm.currentCategory = null;
     vm.loading = true;
     vm.error = false;
-    vm.ArticleService.getHome(function(data){
-      vm.categories = data.article.categories;
+    vm.ArticleService.getCategories(function(categories){
+      vm.categories = categories;
     }, function (error) {
       vm.error = error;
       vm.$log.error(error);
     });
-    vm.ArticleService.getArticleBySlug(slug, function(program){
-      vm.program = program;
-      vm.currentCategory = vm.program.categories[0];
+    vm.ArticleService.getArticleBySlug(slug, function(article){
+      vm.article = article;
+      vm.currentCategory = vm.article.categories[0];
       // load proposals
       // vm.ArticleService.getRandomProposal(program.id, function(proposal){
-      //   vm.program.proposal = proposal;
+      //   vm.article.proposal = proposal;
       // }, function (error){
       //   vm.$log.error(error);
       // });
       // load events
       // vm.ArticleService.getEvents(program.id, function(proposal){
-      //   vm.program.proposal = proposal;
+      //   vm.article.proposal = proposal;
       // }, function (error){
       //   vm.$log.error(error);
       // });
 <div class="container">
-  <div ng-if="pagePrograma.program && pagePrograma.categories">
-    <article-bar category="pagePrograma.program.categories[0]" categories="pagePrograma.categories"></article-bar>
+  <div ng-if="pagePrograma.article && pagePrograma.categories">
+    <article-bar category="pagePrograma.article.categories[0]" categories="pagePrograma.categories"></article-bar>
   </div>
-  <div ng-if="!pagePrograma.program">
+  <div ng-if="!pagePrograma.article">
     <div class="alert alert-info" role="alert">Carregando informações sobre o progama</div>
   </div>
-  <div ng-if="pagePrograma.program && pagePrograma.categories">
-    <programa-box program="pagePrograma.program" display="'preview'"></programa-box>
+  <div ng-if="pagePrograma.article && pagePrograma.categories">
+    <article-preview article="pagePrograma.article"></article-preview>
   </div>
 </div>
@@ -0,0 +1,68 @@		@@ -0,0 +1,68 @@
	1	+(function() {
	2	+ 'use strict';
	3	+
	4	+ angular
	5	+ .module('dialoga')
	6	+ .directive('articleBar', articleBar);
	7	+
	8	+ /** @ngInject */
	9	+ function articleBar() {
	10	+ var directive = {
	11	+ restrict: 'E',
	12	+ templateUrl: 'app/components/article-bar/article-bar.html',
	13	+ scope: {
	14	+ category: '=',
	15	+ categories: '='
	16	+ },
	17	+ controller: ArticleBarController,
	18	+ controllerAs: 'vm',
	19	+ bindToController: true
	20	+ };
	21	+
	22	+ return directive;
	23	+
	24	+ /** @ngInject */
	25	+ function ArticleBarController($scope, $rootScope, $state, $log) {
	26	+ $log.debug('ArticleBarController');
	27	+
	28	+ var vm = this;
	29	+
	30	+ vm.$scope = $scope;
	31	+ vm.$rootScope = $rootScope;
	32	+ vm.$state = $state;
	33	+ vm.theme = 'blue';
	34	+
	35	+ // if(!vm.category) {
	36	+ // throw 'article bar without category';
	37	+ // }
	38	+
	39	+ // if(!vm.categories) {
	40	+ // throw 'article bar without categories list';
	41	+ // }
	42	+
	43	+ vm.currentCategory = vm.category;
	44	+
	45	+ vm.$scope.$watch('vm.currentCategory', function(newValue, oldValue){
	46	+ if(newValue !== oldValue){
	47	+ vm.$state.go('inicio', {
	48	+ tema: newValue.slug
	49	+ }, {
	50	+ location: true
	51	+ });
	52	+ }
	53	+ });
	54	+
	55	+ vm.goBack = function (){
	56	+ var vm = this;
	57	+ var prevState = vm.$rootScope.$previousState;
	58	+ if(prevState && prevState.state.name){
	59	+ vm.$state.go(prevState.state.name, prevState.params);
	60	+ } else {
	61	+ vm.$state.go('inicio');
	62	+ }
	63	+ };
	64	+ }
	65	+
	66	+ }
	67	+
	68	+})();
@@ -0,0 +1,23 @@		@@ -0,0 +1,23 @@
	1	+<div class="article-bar" ng-class="vm.theme">
	2	+ <div class="navbar">
	3	+ <div class="navbar-header">
	4	+ <button class="article-bar--item btn btn-link" ng-click="vm.goBack()">
	5	+ <!-- <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> -->
	6	+ <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
	7	+ Voltar
	8	+ </button>
	9	+ </div>
	10	+ <div class="navbar-left" ng-if="vm.category">
	11	+ <button class="article-bar--item article-bar--category-button btn btn-link">
	12	+ <span class="icon" ng-class="'icon-tema-' + vm.category.slug"></span>
	13	+ <span class="category-name">{{::vm.category.name}}</span>
	14	+ </button>
	15	+ </div>
	16	+ <div class="navbar-right" ng-if="vm.categories">
	17	+ <label for="selectCategory" class="control-label sr-only" title="Selecione uma opção para acessar os programas do tema">Temas:</label>
	18	+ <select id="selectCategory" name="selectCategory" class="article-bar--item form-control" ng-model="vm.currentCategory" ng-options="category.name for category in vm.categories track by category.slug">
	19	+ </select>
	20	+ </div>
	21	+ </div>
	22	+ </div>
	23	+</div>
@@ -0,0 +1,52 @@		@@ -0,0 +1,52 @@
	1	+.article-bar {
	2	+ position: relative;
	3	+ background-color: #0042b1;
	4	+
	5	+ .btn {
	6	+ color: #fff;
	7	+ font-weight: bold;
	8	+ }
	9	+
	10	+ &--item {
	11	+ margin: 8px 0;
	12	+
	13	+ @media (max-width: $screen-xs) {
	14	+ margin: 8px;
	15	+ }
	16	+
	17	+ }
	18	+
	19	+ &--category-button {
	20	+ position: relative;
	21	+ width: 125px;
	22	+ text-align: right;
	23	+ margin-left: 10px;
	24	+ font-size: 24px;
	25	+ line-height: 20px;
	26	+ font-family: 'Open Sans';
	27	+
	28	+ .icon {
	29	+ display: inline-block;
	30	+ margin: -40px -35px -40px -50px;
	31	+ transform: scale(.37);
	32	+ }
	33	+ }
	34	+
	35	+ .navbar {
	36	+ margin-bottom: 0;
	37	+ }
	38	+
	39	+ .navbar-right {
	40	+ margin-right: 15px;
	41	+ }
	42	+
	43	+ @each $category, $color in $categories {
	44	+ &.#{$category} {
	45	+ background-color: $color;
	46	+ }
	47	+ }
	48	+
	49	+ .contraste & {
	50	+ background-color: #262626;
	51	+ }
	52	+}
@@ -0,0 +1,84 @@		@@ -0,0 +1,84 @@
	1	+(function() {
	2	+ 'use strict';
	3	+
	4	+ angular
	5	+ .module('dialoga')
	6	+ .directive('articleBox', articleBox);
	7	+
	8	+ /** @ngInject */
	9	+ function articleBox($rootScope) {
	10	+
	11	+ /** @ngInject */
	12	+ function ArticleBoxController(ArticleService, $scope, $state, Slug, $log) {
	13	+ $log.debug('ArticleBoxController');
	14	+
	15	+ var vm = this;
	16	+ vm.ArticleService = ArticleService;
	17	+ vm.$scope = $scope;
	18	+ vm.$state = $state;
	19	+ vm.Slug = Slug;
	20	+ vm.$log = $log;
	21	+
	22	+ vm.init();
	23	+ }
	24	+
	25	+ ArticleBoxController.prototype.init = function () {
	26	+ var vm = this;
	27	+
	28	+ if(!vm.article.slug){
	29	+ vm.article.slug = vm.Slug.slugify(vm.article.title);
	30	+ }
	31	+
	32	+ if(!vm.category){
	33	+ vm.category = vm.article.categories[0];
	34	+ }
	35	+
	36	+ if(!vm.banner){
	37	+ vm.banner = {
	38	+ src: $rootScope.basePath + vm.article.image.url,
	39	+ alt: 'Imagem de destaque do conteúdo'
	40	+ };
	41	+ }
	42	+
	43	+ // if(vm.article.color && !vm.article.bgColor){
	44	+ // // 15% more darker
	45	+ // vm.article.colorDarker = window.ColorLuminance(vm.article.color, 0.15);
	46	+ // }
	47	+ };
	48	+
	49	+ ArticleBoxController.prototype.showContent = function () {
	50	+ var vm = this;
	51	+
	52	+ vm.$state.go('programa-conheca', {
	53	+ slug: vm.article.slug
	54	+ }, {
	55	+ location: true
	56	+ });
	57	+ };
	58	+
	59	+ ArticleBoxController.prototype.showPreview = function () {
	60	+ var vm = this;
	61	+
	62	+ vm.$state.go('programa', {
	63	+ slug: vm.article.slug
	64	+ }, {
	65	+ location: true
	66	+ });
	67	+ };
	68	+
	69	+ var directive = {
	70	+ restrict: 'E',
	71	+ templateUrl: 'app/components/article-box/article-box.html',
	72	+ scope: {
	73	+ article: '='
	74	+ },
	75	+ controller: ArticleBoxController,
	76	+ controllerAs: 'vm',
	77	+ bindToController: true
	78	+ };
	79	+
	80	+
	81	+ return directive;
	82	+ }
	83	+
	84	+})();
@@ -0,0 +1,18 @@		@@ -0,0 +1,18 @@
	1	+<article class="article-box" ng-click="vm.showPreview()" ng-class="vm.category.slug">
	2	+ <div>
	3	+ <h2 class="article-box--category">{{vm.category.name}}</h2>
	4	+ <div class="article-box--image-wrapper">
	5	+ <!-- <img class="article-box--image img-responsive" ng-src="{{vm.banner.src}}" alt="{{vm.banner.alt}}" /> -->
	6	+ <div class="article-box--image" ng-style="{'background-image':'url( {{vm.banner.src}} )'}"></div>
	7	+ </div>
	8	+ <div class="article-box--title">
	9	+ <h1>{{::vm.article.title}}</h1>
	10	+ </div>
	11	+ <div class="article-box--abstract" ng-bind-html="vm.article.abstract"></div>
	12	+ <div class="button--themed">
	13	+ <button class="btn btn-block">
	14	+ Participe
	15	+ </button>
	16	+ </div>
	17	+ </div>
	18	+</article>
@@ -0,0 +1,146 @@		@@ -0,0 +1,146 @@
	1	+$article-box-space: 20px;
	2	+
	3	+.article-box {
	4	+ cursor: pointer;
	5	+ background-color: #fff;
	6	+ margin-top: $article-box-space;
	7	+ margin-bottom: $article-box-space;
	8	+ border-radius: 3px;
	9	+ overflow: hidden;
	10	+
	11	+ .contraste & {
	12	+ color: #fff;
	13	+ background-color: #262626;
	14	+ }
	15	+
	16	+ &--category {
	17	+ font-size: 14px;
	18	+ font-weight: bold;
	19	+ text-transform: uppercase;
	20	+ line-height: 22px;
	21	+ display: block;
	22	+ height: 30px;
	23	+ margin: 0;
	24	+ padding: 5px $article-box-space;
	25	+ color: #ffffff;
	26	+
	27	+ @each $category, $color in $categories {
	28	+ .#{$category} & {
	29	+ background-color: $color;
	30	+ }
	31	+ }
	32	+
	33	+ .contraste & {
	34	+ background-color: #262626;
	35	+ }
	36	+ }
	37	+
	38	+ &--title {
	39	+
	40	+ padding: 0 $article-box-space;
	41	+
	42	+ h1 {
	43	+ font-size: 18px;
	44	+ font-weight: bold;
	45	+ margin: 0 0 $article-box-space 0;
	46	+ display: table-cell;
	47	+ vertical-align: middle;
	48	+
	49	+ // Altura das linhas do abstract
	50	+ $hLine: 20px;
	51	+ // default
	52	+ height: $hLine * 2;
	53	+
	54	+ @media (max-width: $screen-xs) {
	55	+ // height: $hLine * 3;
	56	+ height: auto;
	57	+ }
	58	+
	59	+ @media (min-width: $screen-xs + 1) {
	60	+ // height: $hLine * 2;
	61	+ height: auto;
	62	+ }
	63	+
	64	+ @media (min-width: $screen-sm + 1) {
	65	+ height: $hLine * 2;
	66	+ }
	67	+
	68	+ @media (min-width: $screen-md + 1) {
	69	+ height: $hLine * 2;
	70	+ }
	71	+ }
	72	+ }
	73	+
	74	+ &--abstract {
	75	+ padding: 0 $article-box-space;
	76	+ display: table-cell;
	77	+ vertical-align: middle;
	78	+
	79	+ // Altura das linhas do abstract
	80	+ $pLine: 20px;
	81	+ // 1 linha: 19px -> 20
	82	+ // 2 linhas: 38px -> 40
	83	+ // 3 linhas: 57px -> 60
	84	+ // 4 linhas: 76px -> 80
	85	+
	86	+ height: $pLine * 2; // default
	87	+
	88	+ @media (max-width: $screen-xs) {
	89	+ // height: $pLine * 4;
	90	+ height: auto;
	91	+ }
	92	+
	93	+ @media (min-width: $screen-xs + 1) {
	94	+ // height: $pLine * 3;
	95	+ height: auto;
	96	+ }
	97	+
	98	+ @media (min-width: $screen-sm + 1) {
	99	+ height: $pLine * 4;
	100	+ }
	101	+
	102	+ @media (min-width: $screen-md + 1) {
	103	+ height: $pLine * 3;
	104	+ }
	105	+
	106	+ p { margin: 0; }
	107	+ }
	108	+
	109	+ &--image-wrapper {
	110	+ position: relative;
	111	+ // width: 100%;
	112	+ // width: 370px;
	113	+ // height: 170px;
	114	+
	115	+ overflow: hidden;
	116	+ // text-align: center;
	117	+ min-height: 170px;
	118	+ }
	119	+
	120	+ &--image {
	121	+ min-height: 170px;
	122	+ background-position: center;
	123	+ background-size: cover;
	124	+ background-repeat: no-repeat;
	125	+
	126	+ -webkit-transition: all $time ease-in-out;
	127	+ -moz-transition: all $time ease-in-out;
	128	+ -o-transition: all $time ease-in-out;
	129	+ transition: all $time ease-in-out;
	130	+ }
	131	+
	132	+ &:hover {
	133	+ background-color: #d9d9d9;
	134	+
	135	+ .article-box--image {
	136	+ -webkit-transform: scale($scale); /* prefixo para browsers webkit */
	137	+ -moz-transform: scale($scale); /* prefixo para browsers gecko */
	138	+ -o-transform: scale($scale); /* prefixo para opera */
	139	+ transform: scale($scale);
	140	+ }
	141	+
	142	+ .contraste & {
	143	+ background-color: #262626;
	144	+ }
	145	+ }
	146	+}
@@ -0,0 +1,15 @@		@@ -0,0 +1,15 @@
	1	+.article-content {
	2	+ h2 {
	3	+ font-size: 38px;
	4	+ font-weight: 500;
	5	+ margin-bottom: 40px;
	6	+ padding-bottom: 20px;
	7	+
	8	+ small {
	9	+ display: block;
	10	+ font-size: 16px;
	11	+ padding-top: 5px;
	12	+ text-transform: none;
	13	+ }
	14	+ }
	15	+}
@@ -0,0 +1,322 @@		@@ -0,0 +1,322 @@
	1	+(function() {
	2	+ 'use strict';
	3	+
	4	+ angular
	5	+ .module('dialoga')
	6	+ .directive('articleGrid', articleGrid);
	7	+
	8	+ /** @ngInject */
	9	+ function articleGrid() {
	10	+
	11	+ /** @ngInject */
	12	+ function ArticleGridController($scope, $rootScope, $element, ArticleService, $location, $filter, $log) {
	13	+ $log.debug('ArticleGridController');
	14	+
	15	+ // alias
	16	+ var vm = this;
	17	+
	18	+ // dependencies
	19	+ vm.$scope = $scope;
	20	+ vm.$rootScope = $rootScope;
	21	+ vm.$element = $element;
	22	+ vm.ArticleService = ArticleService;
	23	+ vm.$location = $location;
	24	+ vm.$filter = $filter;
	25	+ vm.$log = $log;
	26	+ vm.defaultLimit = 6;
	27	+
	28	+ // initialization
	29	+ vm.init();
	30	+ }
	31	+
	32	+ ArticleGridController.prototype.init = function() {
	33	+ var vm = this;
	34	+
	35	+ vm.ArticleService.getPrograms(function(programs){
	36	+ vm.articles = programs;
	37	+ });
	38	+
	39	+ vm.ArticleService.getCategories(function(categories){
	40	+ vm.categories = categories;
	41	+ });
	42	+
	43	+ vm.orderCriteries = [
	44	+ { label: 'Título', name: 'titulo' },
	45	+ { label: 'Tema', name: 'tema' },
	46	+ { label: 'Aleatório', name: 'aleatorio' }
	47	+ ];
	48	+
	49	+ vm.filtredArticleList = vm.getFiltredArticles();
	50	+ vm.search = vm.$location.search();
	51	+
	52	+ // Add initial values for the filter
	53	+ vm.query = (vm.search && vm.search.filtro) ? vm.search.filtro : null;
	54	+ vm.limitTo = (vm.search && vm.search.limite) ? parseInt(vm.search.limite, 10) : vm.defaultLimit;
	55	+ vm.orderCriteria = (vm.search && vm.search.ordem) ? { name: vm.search.ordem } : null;
	56	+ vm.reverse = (vm.search && vm.search.reverso) ? true : false;
	57	+
	58	+ // vm.selectedCategory = (vm.search && vm.search.tema) ? vm.getCategoryBySlug(vm.search.tema) : null;
	59	+ if (vm.search && vm.search.tema) {
	60	+ var slug = vm.search.tema;
	61	+ vm.ArticleService.getCategoryBySlug(slug, function(category){
	62	+ vm.selectedCategory = category;
	63	+ }, function(error){
	64	+ vm.$log.error('Error when try to "getCategoryBySlug"', error);
	65	+ });
	66	+ }
	67	+
	68	+ if (!angular.equals({}, vm.search)) {
	69	+ var $el = vm.$element;
	70	+ angular.element('body').animate({scrollTop: $el.offset().top}, 'slow');
	71	+ }
	72	+
	73	+ // update window location params
	74	+ vm.$scope.$on('change-selectedCategory', function(event, selectedCategory){
	75	+ vm.selectedCategory = selectedCategory;
	76	+ });
	77	+
	78	+ vm.$scope.$watch('vm.query', function(newValue/, oldValue/) {
	79	+ vm.search.filtro = newValue ? newValue : null;
	80	+ vm.$location.search('filtro', vm.search.filtro);
	81	+ if(vm.search.filtro){
	82	+ vm.limitTo = vm.articles.length;
	83	+ }else{
	84	+ vm.limitTo = vm.defaultLimit;
	85	+ }
	86	+ vm.filtredArticleList = vm.getFiltredArticles();
	87	+ });
	88	+
	89	+ vm.$scope.$watch('vm.limitTo', function(newValue/, oldValue/) {
	90	+ vm.search.limite = (newValue && newValue !== vm.defaultLimit) ? newValue : null;
	91	+ vm.$location.search('limite', vm.search.limite);
	92	+ vm.filtredArticleList = vm.getFiltredArticles();
	93	+ });
	94	+
	95	+ vm.$scope.$watch('vm.selectedCategory', function(newValue/, oldValue/) {
	96	+ vm.search.tema = newValue ? newValue.slug : null;
	97	+ vm.$location.search('tema', vm.search.tema);
	98	+ if(vm.search.tema){
	99	+ vm.limitTo = vm.articles.length;
	100	+ }else{
	101	+ vm.limitTo = vm.defaultLimit;
	102	+ }
	103	+ vm.filtredArticleList = vm.getFiltredArticles();
	104	+ });
	105	+
	106	+ vm.$scope.$watch('vm.orderCriteria', function(newValue/, oldValue/) {
	107	+ vm.search.ordem = (newValue && newValue.name) ? newValue.name : null;
	108	+ vm.$location.search('ordem', vm.search.ordem);
	109	+ vm.filtredArticleList = vm.getFiltredArticles();
	110	+ });
	111	+
	112	+ vm.$scope.$watch('vm.reverse', function(newValue/, oldValue/) {
	113	+ vm.search.reverso = newValue ? newValue : null;
	114	+ vm.$location.search('reverso', vm.search.reverso);
	115	+ vm.filtredArticleList = vm.getFiltredArticles();
	116	+ });
	117	+
	118	+ };
	119	+
	120	+ ArticleGridController.prototype.resetFilterValues = function() {
	121	+ var vm = this;
	122	+
	123	+ vm.query = null;
	124	+ vm.limitTo = vm.defaultLimit;
	125	+ vm.selectedCategory = null;
	126	+ vm.orderCriteria = null;
	127	+ };
	128	+
	129	+ ArticleGridController.prototype.getIconClasses = function(category) {
	130	+ var vm = this;
	131	+
	132	+ vm.$log.debug('[TODO] getIconClasses of category:', category);
	133	+ return 'glyphicon glyphicon-exclamation-sign';
	134	+ };
	135	+
	136	+ ArticleGridController.prototype.getCategoryBySlug = function(categorySlug) {
	137	+ var vm = this;
	138	+ var result = null;
	139	+
	140	+ angular.forEach(vm.categories, function(value/, key/) {
	141	+ if (value.slug === categorySlug) {
	142	+ result = value;
	143	+ }
	144	+ });
	145	+
	146	+ return result;
	147	+ };
	148	+
	149	+ ArticleGridController.prototype.showAll = function($event) {
	150	+ var vm = this;
	151	+
	152	+ $event.stopPropagation();
	153	+
	154	+ vm.resetFilterValues();
	155	+ vm.limitTo = vm.articles.length;
	156	+ };
	157	+
	158	+ ArticleGridController.prototype.getFiltredArticles = function() {
	159	+ var vm = this;
	160	+
	161	+ if(!vm.articles){
	162	+ vm.$log.warn('No articles loaded yet. Abort.');
	163	+ return null;
	164	+ }
	165	+
	166	+ var input = vm.articles;
	167	+ var output = input;
	168	+ var query = vm.query;
	169	+ var selectedCategory = vm.selectedCategory;
	170	+ var orderCriteria = vm.orderCriteria ? vm.orderCriteria : { name : 'aleatorio'};
	171	+ var filter = vm.$filter('filter');
	172	+ var orderBy = vm.$filter('orderBy');
	173	+ var limitTo = vm.$filter('limitTo');
	174	+ var limit = vm.limitTo ? vm.limitTo : 4;
	175	+
	176	+ if (selectedCategory) {
	177	+ output = _filterByCategory(output, selectedCategory);
	178	+ }
	179	+
	180	+ if (query) {
	181	+ output = filter(output, query, false);
	182	+ }
	183	+
	184	+ switch (orderCriteria.name) {
	185	+ case 'titulo':
	186	+ output = orderBy(output, 'title', vm.reverse);
	187	+ break;
	188	+ case 'tema':
	189	+ output = orderBy(output, 'categories[0].name', vm.reverse);
	190	+ break;
	191	+ case 'more_participants':
	192	+ vm.$log.info('Criteria not handled yet: ', orderCriteria);
	193	+ break;
	194	+ case 'aleatorio':
	195	+ // shuffling
	196	+ // if (!vm._isShuffled){
	197	+ output = vm.filterShuffle(output);
	198	+ // vm._isShuffled = true;
	199	+ // }
	200	+
	201	+ if (vm.reverse) {
	202	+ output = output.slice().reverse();
	203	+ }
	204	+
	205	+ break;
	206	+ default:
	207	+ vm.$log.warn('Criteria not matched: ', orderCriteria);
	208	+ break;
	209	+ }
	210	+
	211	+ output = limitTo(output, limit);
	212	+
	213	+ return output;
	214	+ };
	215	+
	216	+ ArticleGridController.prototype.filterShuffle = function(input) {
	217	+ var result = [];
	218	+ var resultByCategory = {};
	219	+
	220	+ // divide by categories
	221	+ for (var i = 0; i < input.length; i++) {
	222	+ var program = input[i];
	223	+ var categorySlug = program.categories[0].slug;
	224	+
	225	+ if (!resultByCategory[categorySlug]) {
	226	+ resultByCategory[categorySlug] = [];
	227	+ }
	228	+
	229	+ resultByCategory[categorySlug].push(program);
	230	+ }
	231	+
	232	+ // shuffle each array
	233	+ var prop = null;
	234	+ var categoryWithPrograms = null;
	235	+ for (prop in resultByCategory) {
	236	+ if (resultByCategory.hasOwnProperty(prop)) {
	237	+ categoryWithPrograms = resultByCategory[prop];
	238	+ resultByCategory[prop] = shuffle(categoryWithPrograms);
	239	+ }
	240	+ }
	241	+
	242	+ // Concat all into result array
	243	+ // > while has program at Lists on resultByCategory
	244	+ var hasProgram = true;
	245	+ while (hasProgram) {
	246	+
	247	+ var foundProgram = false;
	248	+ // each categoryList with array of program
	249	+ prop = null;
	250	+ categoryWithPrograms = null;
	251	+ for (prop in resultByCategory) {
	252	+
	253	+ if (resultByCategory.hasOwnProperty(prop)) {
	254	+ categoryWithPrograms = resultByCategory[prop];
	255	+
	256	+ if (categoryWithPrograms.length > 0) {
	257	+ var pivotProgram = categoryWithPrograms.pop();
	258	+ result.push(pivotProgram);
	259	+ foundProgram = true;
	260	+ }
	261	+ }
	262	+ }
	263	+
	264	+ if (!foundProgram) {
	265	+ hasProgram = false;
	266	+ }
	267	+ }
	268	+
	269	+ return result;
	270	+ };
	271	+
	272	+ var directive = {
	273	+ restrict: 'E',
	274	+ templateUrl: 'app/components/article-grid/article-grid.html',
	275	+ controller: ArticleGridController,
	276	+ controllerAs: 'vm',
	277	+ bindToController: true
	278	+ };
	279	+
	280	+ return directive;
	281	+ }
	282	+
	283	+ function _filterByCategory (input, category) {
	284	+ input = input \|\| [];
	285	+
	286	+ if (!category) {
	287	+ // no filter
	288	+ return input;
	289	+ }
	290	+
	291	+ var out = [];
	292	+ for (var i = 0; i < input.length; i++) {
	293	+ var program = input[i];
	294	+ if (program.categories[0].slug === category.slug) {
	295	+ out.push(program);
	296	+ }
	297	+ }
	298	+
	299	+ return out;
	300	+ }
	301	+
	302	+ // -> Fisher–Yates shuffle algorithm
	303	+ function shuffle (array) {
	304	+ var currentIndex = array.length, temporaryValue, randomIndex ;
	305	+
	306	+ // While there remain elements to shuffle...
	307	+ while (0 !== currentIndex) {
	308	+
	309	+ // Pick a remaining element...
	310	+ randomIndex = Math.floor(Math.random() * currentIndex);
	311	+ currentIndex -= 1;
	312	+
	313	+ // And swap it with the current element.
	314	+ temporaryValue = array[currentIndex];
	315	+ array[currentIndex] = array[randomIndex];
	316	+ array[randomIndex] = temporaryValue;
	317	+ }
	318	+
	319	+ return array;
	320	+ }
	321	+
	322	+})();
@@ -0,0 +1,50 @@		@@ -0,0 +1,50 @@
	1	+<article class="article-grid">
	2	+ <header class="header">
	3	+ <h2>Conheça os programas <span class="small">({{vm.filtredArticleList.length}}/{{vm.articles.length}})</span></h2>
	4	+ <button type="button" class="btn btn-link" ng-click="vm.showAll($event)">
	5	+ <span class="glyphicon glyphicon-chevron-right"></span> Ver todos os {{vm.articles.length}} programas
	6	+ </button>
	7	+ </header>
	8	+ <div>
	9	+ <div class="col-sm-12">
	10	+ <aside class="form-inline">
	11	+ <div class="row">
	12	+ <div class="col-xs-6 col-sm-7 col-md-9">
	13	+ <label for="articleQueryFilter" class="control-label sr-only">Filtrar programas:</label>
	14	+ <input id="articleQueryFilter" type="search" class="form-control" ng-model="vm.query" placeholder="Filtrar programas" aria-label="Filtrar programas" >
	15	+ </div>
	16	+
	17	+ <!-- <label for="selectCategoryFilter" class="control-label sr-only">Filtrar por tema:</label>
	18	+ <select id="selectCategoryFilter" name="selectCategoryFilter" class="form-control" ng-model="vm.categoryFilter" ng-options="category.name for category in vm.categories track by category.slug">
	19	+ <option value="">-- Filtrar por tema --</option>
	20	+ </select> -->
	21	+
	22	+ <div class="col-xs-6 col-sm-5 col-md-3">
	23	+ <label for="articleOrderByFilter" class="control-label sr-only">Ordernar por:</label>
	24	+ <select id="articleOrderByFilter" name="articleOrderByFilter" class="form-control pull-right" ng-model="vm.orderCriteria" ng-options="orderCriteria.label for orderCriteria in vm.orderCriteries">
	25	+ <option value="">-- Ordernar por: --</option>
	26	+ </select>
	27	+ </div>
	28	+ <!-- <div class="checkbox">
	29	+ <label>
	30	+ <input type="checkbox" ng-model="vm.reverse">
	31	+ Reverso
	32	+ </label>
	33	+ </div> -->
	34	+
	35	+ <!-- <input id="articleLimitFilter" type="number" class="form-control input-sm" size="4" step="2" ng-model="vm.limitTo" aria-label="Limitar" >
	36	+ <label for="articleLimitFilter" class="control-label">Limite</label> -->
	37	+
	38	+ </div>
	39	+ </aside>
	40	+ </div>
	41	+
	42	+ <div ng-repeat="article in vm.filtredArticleList as results">
	43	+ <article-box article="article" class="col-xs-12 col-sm-6"></article-box>
	44	+ <div ng-if="$odd" class="clearfix"></div>
	45	+ </div>
	46	+ <div class="animate-repeat" ng-if="results.length == 0">
	47	+ Nenhum programa encontrado.
	48	+ </div>
	49	+ </div>
	50	+</article>
@@ -0,0 +1,20 @@		@@ -0,0 +1,20 @@
	1	+.article-grid {
	2	+ .header {
	3	+ position: relative;
	4	+ height: 40px;
	5	+ margin-bottom: 10px;
	6	+
	7	+ button {
	8	+ position: absolute;
	9	+ right: 0;
	10	+ top: 2px;
	11	+ }
	12	+ }
	13	+
	14	+ .form-inline {
	15	+ input,
	16	+ select {
	17	+ width: 100%;
	18	+ }
	19	+ }
	20	+}