Download as
Browse Code »

Commit b035251af8a0f5b6982474a8b54b6978b78d4f5d

Authored by Leonardo Merlin
1 parent 6ad695da
Exists in master and in 8 other branches css-list, feature-captcha, feature-proposal-vote, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

Refact components. More generic directives names

Showing 37 changed files with 1584 additions and 1105 deletions   Show diff stats
src/app/components/article-bar/article-bar.directive.js 0 → 100644
  Diff comments   View file @b035251
... ... @@ -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 +})();
... ...
src/app/components/article-bar/article-bar.html 0 → 100644
  Diff comments   View file @b035251
... ... @@ -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>
... ...
src/app/components/article-bar/article-bar.scss 0 → 100644
  Diff comments   View file @b035251
... ... @@ -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 +}
... ...
src/app/components/article-box/article-box.directive.js 0 → 100644
  Diff comments   View file @b035251
... ... @@ -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 +})();
... ...
src/app/components/article-box/article-box.html 0 → 100644
  Diff comments   View file @b035251
... ... @@ -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>
... ...
src/app/components/article-box/article-box.scss 0 → 100644
  Diff comments   View file @b035251
... ... @@ -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 +}
... ...
src/app/components/article-content/article-content.directive.js 0 → 100644
  Diff comments   View file @b035251
src/app/components/article-content/article-content.scss 0 → 100644
  Diff comments   View file @b035251
... ... @@ -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 +}
... ...
src/app/components/article-grid/article-grid.directive.js 0 → 100644
  Diff comments   View file @b035251
... ... @@ -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 +})();
... ...
src/app/components/article-grid/article-grid.html 0 → 100644
  Diff comments   View file @b035251
... ... @@ -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>
... ...
src/app/components/article-grid/article-grid.scss 0 → 100644
  Diff comments   View file @b035251
... ... @@ -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 +}
... ...
src/app/components/article-preview/article-preview.directive.js 0 → 100644
  Diff comments   View file @b035251
... ... @@ -0,0 +1,74 @@
  1 +(function() {
  2 + 'use strict';
  3 +
  4 + angular
  5 + .module('dialoga')
  6 + .directive('articlePreview', articlePreview);
  7 +
  8 + /** @ngInject */
  9 + function articlePreview($rootScope) {
  10 +
  11 + /** @ngInject */
  12 + function ArticlePreviewController(ArticleService, $scope, $state, Slug, $log) {
  13 + $log.debug('ArticlePreviewController');
  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 + ArticlePreviewController.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 programa'
  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 + ArticlePreviewController.prototype.showContent = function () {
  50 + var vm = this;
  51 +
  52 + vm.$state.go('conheca-o-programa', {
  53 + slug: vm.article.slug
  54 + }, {
  55 + location: true
  56 + });
  57 + };
  58 +
  59 + var directive = {
  60 + restrict: 'E',
  61 + templateUrl: 'app/components/article-preview/article-preview.html',
  62 + scope: {
  63 + article: '='
  64 + },
  65 + controller: ArticlePreviewController,
  66 + controllerAs: 'vm',
  67 + bindToController: true
  68 + };
  69 +
  70 +
  71 + return directive;
  72 + }
  73 +
  74 +})();
... ...
src/app/components/article-preview/article-preview.html 0 → 100644
  Diff comments   View file @b035251
... ... @@ -0,0 +1,101 @@
  1 +<article class="article-preview" ng-class="vm.category.slug">
  2 + <header class="article-banner">
  3 + <img class="article-banner--image" ng-src="{{vm.banner.src}}" alt="{{vm.banner.alt}}">
  4 + <div class="article-banner--strip">
  5 + <h1 class="article-banner--title">{{::vm.article.title}}</h1>
  6 + <p class="article-banner--abstract" ng-bind-html="vm.article.abstract"></p>
  7 + </div>
  8 + </header>
  9 +
  10 + <section class="call-to-action--section">
  11 + <div class="row show-content-row">
  12 + <div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
  13 + <div class="button--themed">
  14 + <button class="btn btn-block" ng-click="vm.showContent()">Conheça o programa</button>
  15 + </div>
  16 + </div>
  17 + </div>
  18 + <div class="row proposal-row">
  19 + <div class="row-height">
  20 + <div class="col-md-6 col-height">
  21 + <div class="inside-full-height">
  22 + <div class="proposal-box make-proposal">
  23 + <h2 class="proposal-box--title">Faça uma proposta</h2>
  24 + <p class="proposal-box--text">Qual a sua sugestão para melhorar este programa?</p>
  25 + <div class="row">
  26 + <div class="col-xs-8 col-xs-offset-2">
  27 + <div class="button--themed">
  28 + <button class="btn btn-block" ng-click="vm.goSendProposal()">
  29 + Envie sua proposta
  30 + </button>
  31 + </div>
  32 + </div>
  33 + </div>
  34 + </div>
  35 + </div>
  36 + </div>
  37 + <div class="col-md-6 col-height">
  38 + <div class="inside-full-height">
  39 + <div class="proposal-box support-proposal">
  40 + <h2 class="proposal-box--title">Apoie outras propostas</h2>
  41 + <p class="proposal-box--text">
  42 + Lorem qual a sua sugestão para melhorar este programa
  43 + Lorem qual a sua sugestão para melhorar este programa
  44 + Lorem qual a sua sugestão para melhorar este programa
  45 + Lorem qual a sua sugestão para melhorar este programa
  46 + Lorem qual a sua sugestão para melhorar este programa
  47 + Lorem qual a sua sugestão para melhorar este programa?
  48 + </p>
  49 + <div class="col-lg-12">
  50 + <div class="col-xs-8 col-xs-offset-2 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
  51 + <div class="button--themed vote-buttons">
  52 + <button class="btn btn-circle vote-buttons-up" ng-click="vm.vote(1)">
  53 + <span class="sr-only">Eu <b>apoio</b> esta proposta.</span>
  54 + <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
  55 + </button>
  56 +
  57 + <button class="btn btn-circle vote-buttons-down" ng-click="vm.vote(-1)">
  58 + <span class="sr-only">Eu <b>não apoio</b> esta proposta.</span>
  59 + <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
  60 + </button>
  61 +
  62 + <button class="btn btn-block vote-buttons-skip" ng-click="vm.vote(0)">
  63 + <span class="sr-only">Pular esta proposta.</span>
  64 + <span class="icon" aria-hidden="true"></span>
  65 + Pular
  66 + </button>
  67 + </div>
  68 + </div>
  69 + </div>
  70 + <div class="col-lg-12">
  71 + <div class="col-xs-8 col-xs-offset-2 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
  72 + <div class="text-center">
  73 + <button class="btn btn-link" ng-click="vm.showResults()">Resultados</button>
  74 + </div>
  75 + </div>
  76 + </div>
  77 + <div class="col-md-12">
  78 + <div class="col-xs-12">
  79 + <div class="text-center">
  80 + <span>Compartilhe esta proposta</span>
  81 + <social-share></social-share>
  82 + </div>
  83 + </div>
  84 + </div>
  85 + <div class="clearfix"></div>
  86 + </div>
  87 + </div>
  88 + </div>
  89 + </div>
  90 + </div>
  91 + <div class="talk-proposal row proposal-row">
  92 + <div class="row-height">
  93 + <div class="col-md-12 col-height">
  94 + <div class="">
  95 + <h2>Bate-papo virtual com ministr@s</h2>
  96 + </div>
  97 + </div>
  98 + </div>
  99 + </div>
  100 + </section>
  101 +</article>
... ...
src/app/components/article-preview/article-preview.scss 0 → 100644
  Diff comments   View file @b035251
... ... @@ -0,0 +1,91 @@
  1 +.article-preview {
  2 + .article-banner {
  3 + position: relative;
  4 + }
  5 +
  6 + .article-banner--image {
  7 + width: 100%;
  8 + }
  9 +
  10 + .article-banner--strip {
  11 + color: #fff;
  12 + position: absolute;
  13 + bottom: 15%;
  14 + right: 0;
  15 + width: 50%;
  16 + text-align: center;
  17 +
  18 + @each $category, $color in $categories {
  19 + .#{$category} & {
  20 + background-color: $color;
  21 + }
  22 + }
  23 +
  24 + @media (max-width: $screen-sm){
  25 + position: relative;
  26 + width: 100%;
  27 + }
  28 + }
  29 +
  30 + .article-banner--title {
  31 + font-size: 32px;
  32 + text-transform: uppercase;
  33 + margin-top: 0;
  34 + padding-top: 20px;
  35 + }
  36 + .article-banner--title,
  37 + .article-banner--abstract {
  38 + font-weight: bold;
  39 + }
  40 + .article-banner--abstract {
  41 + padding-bottom: 10px;
  42 + }
  43 +
  44 + .show-content-row {
  45 + .button--themed {
  46 + .btn {
  47 + font-size: 38px;
  48 +
  49 + @media (max-width: $screen-sm){
  50 + font-size: 20px;
  51 + }
  52 + }
  53 + }
  54 + }
  55 +
  56 + .talk-proposal {
  57 + margin-top: -20px;
  58 + }
  59 +
  60 + .proposal-box {
  61 +
  62 + // padding: 10px 20px;
  63 +
  64 + .proposal-box--title {
  65 + font-size: 38px;
  66 + font-weight: 400;
  67 + text-align: center;
  68 +
  69 + margin-bottom: 20px;
  70 + }
  71 +
  72 + .proposal-box--text {
  73 + font-size: 24px;
  74 + font-weight: 700;
  75 + line-height: 1.2;
  76 + margin-bottom: 20px;
  77 + }
  78 +
  79 + @each $category, $color in $categories {
  80 + .#{$category} & {
  81 + border-color: $color;
  82 +
  83 + .proposal-box--title {
  84 + color: $color;
  85 + }
  86 + }
  87 + }
  88 + }
  89 +
  90 +
  91 +}
... ...
src/app/components/articleBar/articleBar.directive.js
View file @6ad695d
... ... @@ -1,68 +0,0 @@
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/articleBar/articleBar.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   -})();
src/app/components/articleBar/articleBar.html
View file @6ad695d
... ... @@ -1,23 +0,0 @@
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>
src/app/components/articleBar/articleBar.scss
View file @6ad695d
... ... @@ -1,53 +0,0 @@
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   - position: absolute;
30   - top: -34px;
31   - left: -34px;
32   - transform: scale(.37);
33   - }
34   - }
35   -
36   - .navbar {
37   - margin-bottom: 0;
38   - }
39   -
40   - .navbar-right {
41   - margin-right: 15px;
42   - }
43   -
44   - @each $category, $color in $categories {
45   - &.#{$category} {
46   - background-color: $color;
47   - }
48   - }
49   -
50   - .contraste & {
51   - background-color: #262626;
52   - }
53   -}
src/app/components/auth/auth.service.js
  Diff comments   View file @b035251
... ... @@ -8,7 +8,7 @@
8 8 .factory('AuthInterceptor', AuthInterceptor);
9 9  
10 10 /** @ngInject */
11   - function AuthService($http, $rootScope, Session, AUTH_EVENTS, api, $log) {
  11 + function AuthService($http, $rootScope, Session, AUTH_EVENTS, API, $log) {
12 12  
13 13 var service = {
14 14 login: login,
... ... @@ -21,7 +21,7 @@
21 21 return service;
22 22  
23 23 function login (credentials) {
24   - var url = api.host + '/api/v1/login';
  24 + var url = API.host + '/api/v1/login';
25 25 var encodedData = 'login=' + credentials.username + '&password=' + credentials.password;
26 26  
27 27 return $http
... ...
src/app/components/category-list/category-list.directive.js 0 → 100644
  Diff comments   View file @b035251
... ... @@ -0,0 +1,77 @@
  1 +(function() {
  2 + 'use strict';
  3 +
  4 + angular
  5 + .module('dialoga')
  6 + .directive('categoryList', categoryList);
  7 +
  8 + /** @ngInject */
  9 + function categoryList() {
  10 +
  11 + /** @ngInject */
  12 + function CategoryListController($rootScope, ArticleService, $location, $log) {
  13 + $log.debug('CategoryListController');
  14 +
  15 + // alias
  16 + var vm = this;
  17 +
  18 + // dependencies
  19 + vm.$rootScope = $rootScope;
  20 + vm.ArticleService = ArticleService;
  21 + vm.$location = $location;
  22 + vm.$log = $log;
  23 + vm.defaultLimit = 6;
  24 +
  25 + // initialization
  26 + vm.init();
  27 + }
  28 +
  29 + CategoryListController.prototype.init = function() {
  30 + var vm = this;
  31 +
  32 + vm.selectedCategory = null;
  33 + vm.ArticleService.getCategories(function(categories){
  34 + vm.categories = categories;
  35 +
  36 + });
  37 +
  38 + vm.search = vm.$location.search();
  39 + if (vm.search && vm.search.tema) {
  40 + var slug = vm.search.tema;
  41 + vm.ArticleService.getCategoryBySlug(slug, function(category){
  42 + vm.selectedCategory = category;
  43 + }, function(error){
  44 + vm.$log.error('Error when try to "getCategoryBySlug"', error);
  45 + });
  46 + }
  47 + };
  48 +
  49 + CategoryListController.prototype.selectCategory = function(category, $event) {
  50 + var vm = this;
  51 +
  52 + // prevent glitch
  53 + $event.stopPropagation();
  54 +
  55 + if (category !== vm.selectedCategory) {
  56 + // selected new filter
  57 + vm.selectedCategory = category;
  58 + } else {
  59 + vm.selectedCategory = null;
  60 + }
  61 +
  62 + // send event to all controllers
  63 + vm.$rootScope.$broadcast('change-selectedCategory', vm.selectedCategory);
  64 + };
  65 +
  66 + var directive = {
  67 + restrict: 'E',
  68 + templateUrl: 'app/components/category-list/category-list.html',
  69 + controller: CategoryListController,
  70 + controllerAs: 'categoryListCtrl',
  71 + bindToController: true
  72 + };
  73 +
  74 + return directive;
  75 + }
  76 +
  77 +})();
... ...
src/app/components/category-list/category-list.html 0 → 100644
  Diff comments   View file @b035251
... ... @@ -0,0 +1,17 @@
  1 +<div class="category-list">
  2 + <nav class="navigation">
  3 + <h3 class="category-list--title"><b>Programas</b> por Tema</h3>
  4 + <div class="list-group category-list" ng-class="categoryListCtrl.selectedCategory.slug">
  5 + <button type="button" class="list-group-item category-list--item"
  6 + ng-repeat="category in categoryListCtrl.categories"
  7 + ng-class="{active: categoryListCtrl.selectedCategory.slug === category.slug}"
  8 + ng-click="categoryListCtrl.selectCategory(category, $event)">
  9 +
  10 + <span class="category-list--icon-circle" ng-class="category.slug"></span>
  11 + <span class="category-list--icon icon" ng-class="'icon-tema-' + category.slug"></span>
  12 + <span class="category-list--label">{{::category.name}}</span>
  13 + <span class="category-list--icon--right glyphicon glyphicon-chevron-right"></span>
  14 + </button>
  15 + </div>
  16 + </nav>
  17 +</div>
... ...
src/app/components/category-list/category-list.scss 0 → 100644
  Diff comments   View file @b035251
... ... @@ -0,0 +1,111 @@
  1 +.category-list {
  2 + .category-list--title {
  3 + color: #ffffff;
  4 + font-size: 16px;
  5 + margin: 0;
  6 + padding: 20px;
  7 + background-color: #484848;
  8 + border-top-left-radius: 5px;
  9 + border-top-right-radius: 5px;
  10 + overflow: hidden;
  11 + }
  12 +
  13 +
  14 + .category-list--group {
  15 + }
  16 +
  17 + .category-list--item {
  18 + position: relative;
  19 + text-transform: uppercase;
  20 + font-weight: bold;
  21 + padding: 0;
  22 + height: 68px;
  23 + overflow: hidden;
  24 + }
  25 +
  26 + .category-list--label {
  27 + margin-left: 70px;
  28 + margin-right: 30px;
  29 + display: inline-block;
  30 + z-index: 99999;
  31 + }
  32 +
  33 + &--icon-circle {
  34 + width: 48px;
  35 + height: 48px;
  36 + position: absolute;
  37 + top: 10px;
  38 + left: 10px;
  39 + // border: 1px solid #fff;
  40 + border-radius: 48px;
  41 +
  42 + -webkit-transition: -webkit-transform 0.2s ease-in-out;
  43 + -moz-transition: -moz-transform 0.2s ease-in-out;
  44 + -o-transition: -o-transform 0.2s ease-in-out;
  45 + transition: transform 0.2s ease-in-out;
  46 +
  47 + // -webkit-transition: all 0.2s ease-in-out;
  48 + // -moz-transition: all 0.2s ease-in-out;
  49 + // -o-transition: all 0.2s ease-in-out;
  50 + // transition: all 0.2s ease-in-out;
  51 +
  52 + z-index: 0;
  53 +
  54 + .active & {
  55 + z-index: -1;
  56 +
  57 + @media (max-width: $screen-xs) {
  58 + transform: scale(20);
  59 + }
  60 +
  61 + @media (min-width: $screen-xs + 1) {
  62 + transform: scale(40);
  63 + }
  64 +
  65 + @media (min-width: $screen-sm + 1) {
  66 + transform: scale(20);
  67 + }
  68 +
  69 + // @media (min-width: $screen-md + 1) {
  70 + // transform: scale(20);
  71 + // }
  72 + }
  73 +
  74 + @each $category, $color in $categories {
  75 + &.#{$category} {
  76 + background-color: $color;
  77 + }
  78 + }
  79 + }
  80 +
  81 + .category-list--icon {
  82 + position: absolute;
  83 + top: -16px;
  84 + left: -14px;
  85 + transform: scale(0.35);
  86 + }
  87 +
  88 + .category-list--icon--right {
  89 + position: absolute;
  90 + right: 9px;
  91 + top: 50%;
  92 + margin-top: -9px;
  93 + transform: scale(1.4);
  94 + }
  95 +
  96 + .list-group-item.active,
  97 + .list-group-item.active:hover,
  98 + .list-group-item.active:focus {
  99 + background-color: #f5f5f5;
  100 + }
  101 +
  102 + // @each $category, $color in $categories {
  103 + // &.#{$category} {
  104 + // .list-group-item.active,
  105 + // .list-group-item.active:hover,
  106 + // .list-group-item.active:focus {
  107 + // background-color: $color;
  108 + // }
  109 + // }
  110 + // }
  111 +}
... ...
src/app/components/programa/programa.directive.js
View file @6ad695d
... ... @@ -1,99 +0,0 @@
1   -(function() {
2   - 'use strict';
3   -
4   - angular
5   - .module('dialoga')
6   - .directive('programaBox', programaBox);
7   -
8   - /** @ngInject */
9   - function programaBox($rootScope) {
10   -
11   - /** @ngInject */
12   - function ProgramaController(ArticleService, $scope, $state, Slug, $log) {
13   - $log.debug('ProgramaController');
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   - ProgramaController.prototype.init = function () {
26   - var vm = this;
27   -
28   - if(!vm.program.slug){
29   - vm.program.slug = vm.Slug.slugify(vm.program.title);
30   - }
31   -
32   - if(!vm.category){
33   - vm.category = vm.program.categories[0];
34   - }
35   -
36   - if(!vm.banner){
37   - vm.banner = {
38   - src: $rootScope.basePath + vm.program.image.url,
39   - alt: 'Imagem de destaque do programa'
40   - };
41   - }
42   -
43   - vm.displayType = vm.display;
44   -
45   - // if(vm.program.color && !vm.program.bgColor){
46   - // // 15% more darker
47   - // vm.program.colorDarker = window.ColorLuminance(vm.program.color, 0.15);
48   - // }
49   - };
50   -
51   - ProgramaController.prototype.isDisplay = function (display) {
52   - return this.display === display;
53   - };
54   -
55   - ProgramaController.prototype.isDisplayBox = function () {
56   - return this.isDisplay('box');
57   - };
58   -
59   - ProgramaController.prototype.isDisplayPreview = function () {
60   - return this.isDisplay('preview');
61   - };
62   -
63   - ProgramaController.prototype.showContent = function () {
64   - var vm = this;
65   -
66   - vm.$state.go('programa-conheca', {
67   - slug: vm.program.slug
68   - }, {
69   - location: true
70   - });
71   - };
72   -
73   - ProgramaController.prototype.showPreview = function () {
74   - var vm = this;
75   -
76   - vm.$state.go('programa', {
77   - slug: vm.program.slug
78   - }, {
79   - location: true
80   - });
81   - };
82   -
83   - var directive = {
84   - restrict: 'E',
85   - templateUrl: 'app/components/programa/programa.html',
86   - scope: {
87   - program: '=',
88   - display: '='
89   - },
90   - controller: ProgramaController,
91   - controllerAs: 'vm',
92   - bindToController: true
93   - };
94   -
95   -
96   - return directive;
97   - }
98   -
99   -})();
src/app/components/programa/programa.html
View file @6ad695d
... ... @@ -1,122 +0,0 @@
1   -<div ng-if="vm.program" class="{{vm.category.slug}}">
2   - <article ng-if="vm.displayType == 'box'" class="program-box" ng-click="vm.showPreview()">
3   - <div>
4   - <h2 class="program-box--category">{{vm.category.name}}</h2>
5   - <div class="program-box--image-wrapper">
6   - <!-- <img class="program-box--image img-responsive" ng-src="{{vm.banner.src}}" alt="{{vm.banner.alt}}" /> -->
7   - <div class="program-box--image" ng-style="{'background-image':'url( {{vm.banner.src}} )'}"></div>
8   - </div>
9   - <div class="program-box--title">
10   - <h1>{{::vm.program.title}}</h1>
11   - </div>
12   - <div class="program-box--abstract" ng-bind-html="vm.program.abstract"></div>
13   - <div class="button--themed">
14   - <button class="btn btn-block">
15   - Participe
16   - </button>
17   - </div>
18   - </div>
19   - </article>
20   -
21   - <article ng-if="vm.displayType == 'preview'" class="program-preview">
22   - <header class="program-banner">
23   - <img class="program-banner--image" ng-src="{{vm.banner.src}}" alt="{{vm.banner.alt}}">
24   - <div class="program-banner--strip">
25   - <h1 class="program-banner--title">{{::vm.program.title}}</h1>
26   - <p class="program-banner--abstract" ng-bind-html="vm.program.abstract"></p>
27   - </div>
28   - </header>
29   -
30   - <section class="call-to-action--section">
31   - <div class="row show-content-row">
32   - <div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
33   - <div class="button--themed">
34   - <button class="btn btn-block" ng-click="vm.showContent()">Conheça o programa</button>
35   - </div>
36   - </div>
37   - </div>
38   - <div class="row proposal-row">
39   - <div class="row-height">
40   - <div class="col-md-6 col-height">
41   - <div class="inside-full-height">
42   - <div class="proposal-box make-proposal">
43   - <h2 class="proposal-box--title">Faça uma proposta</h2>
44   - <p class="proposal-box--text">Qual a sua sugestão para melhorar este programa?</p>
45   - <div class="row">
46   - <div class="col-xs-8 col-xs-offset-2">
47   - <div class="button--themed">
48   - <button class="btn btn-block" ng-click="vm.goSendProposal()">
49   - Envie sua proposta
50   - </button>
51   - </div>
52   - </div>
53   - </div>
54   - </div>
55   - </div>
56   - </div>
57   - <div class="col-md-6 col-height">
58   - <div class="inside-full-height">
59   - <div class="proposal-box support-proposal">
60   - <h2 class="proposal-box--title">Apoie outras propostas</h2>
61   - <p class="proposal-box--text">
62   - Lorem qual a sua sugestão para melhorar este programa
63   - Lorem qual a sua sugestão para melhorar este programa
64   - Lorem qual a sua sugestão para melhorar este programa
65   - Lorem qual a sua sugestão para melhorar este programa
66   - Lorem qual a sua sugestão para melhorar este programa
67   - Lorem qual a sua sugestão para melhorar este programa?
68   - </p>
69   - <div class="col-lg-12">
70   - <div class="col-xs-8 col-xs-offset-2 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
71   - <div class="button--themed vote-buttons">
72   - <button class="btn btn-circle vote-buttons-up" ng-click="vm.vote(1)">
73   - <span class="sr-only">Eu <b>apoio</b> esta proposta.</span>
74   - <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
75   - </button>
76   -
77   - <button class="btn btn-circle vote-buttons-down" ng-click="vm.vote(-1)">
78   - <span class="sr-only">Eu <b>não apoio</b> esta proposta.</span>
79   - <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
80   - </button>
81   -
82   - <button class="btn btn-block vote-buttons-skip" ng-click="vm.vote(0)">
83   - <span class="sr-only">Pular esta proposta.</span>
84   - <span class="icon" aria-hidden="true"></span>
85   - Pular
86   - </button>
87   - </div>
88   - </div>
89   - </div>
90   - <div class="col-lg-12">
91   - <div class="col-xs-8 col-xs-offset-2 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
92   - <div class="text-center">
93   - <button class="btn btn-link" ng-click="vm.showResults()">Resultados</button>
94   - </div>
95   - </div>
96   - </div>
97   - <div class="col-md-12">
98   - <div class="col-xs-12">
99   - <div class="text-center">
100   - <span>Compartilhe esta proposta</span>
101   - <social-share></social-share>
102   - </div>
103   - </div>
104   - </div>
105   - <div class="clearfix"></div>
106   - </div>
107   - </div>
108   - </div>
109   - </div>
110   - </div>
111   - <div class="talk-proposal row proposal-row">
112   - <div class="row-height">
113   - <div class="col-md-12 col-height">
114   - <div class="">
115   - <h2>Bate-papo virtual com ministr@s</h2>
116   - </div>
117   - </div>
118   - </div>
119   - </div>
120   - </section>
121   - </article>
122   -</div>
src/app/components/programa/programa.scss
View file @6ad695d
... ... @@ -1,409 +0,0 @@
1   -// Variables
2   -$program-box-space: 20px;
3   -$scale: 1.1;
4   -$time: .2s;
5   -$darken: 15%;
6   -
7   -// Commons
8   -.button--themed {
9   - padding: $program-box-space;
10   - .btn {
11   - color: #fff;
12   - font-weight: bold;
13   - padding: 15px 0;
14   - border-left: 0;
15   - border-right: 0;
16   - border-top: 0;
17   - border-radius: 6px;
18   -
19   - -webkit-transition: all $time ease-in-out;
20   - -moz-transition: all $time ease-in-out;
21   - -o-transition: all $time ease-in-out;
22   - transition: all $time ease-in-out;
23   -
24   - @each $category, $color in $categories {
25   - .#{$category} & {
26   - background-color: $color;
27   - border-bottom: 3px solid darken($color, $darken);
28   - }
29   - }
30   -
31   - &:hover,
32   - &:focus {
33   - @each $category, $color in $categories {
34   - .#{$category} & {
35   - background-color: darken($color, $darken);
36   - }
37   - }
38   - }
39   -
40   - .contraste & {
41   - color: #262626;
42   - background-color: #fff;
43   - }
44   - }
45   -
46   - .btn-circle {
47   - width: 64px;
48   - height: 64px;
49   - border-radius: 100%;
50   - }
51   -
52   - // &.vote-buttons {
53   - // padding-bottom: 40px;
54   - // }
55   -
56   - .btn.vote-buttons-up {
57   - float: right;
58   - margin-right: 10px;
59   - background-color: #32dbb5;
60   - border-bottom: 3px solid #1da485;
61   -
62   - &:hover,
63   - &:focus {
64   - background-color: #1da485;
65   - }
66   - }
67   -
68   - .btn.vote-buttons-down {
69   - float: left;
70   - margin-left: 10px;
71   - background-color: #db4127;
72   - border-bottom: 3px solid #9c2d1a;
73   -
74   - &:hover,
75   - &:focus {
76   - background-color: #9c2d1a;
77   - }
78   -
79   -
80   - // @media (max-width: $screen-sm) {
81   - // margin-left:
82   - // }
83   - }
84   -
85   - .vote-buttons-up,
86   - .vote-buttons-down {
87   - font-size: 30px;
88   - margin-bottom: 20px;
89   - }
90   -}
91   -
92   -
93   -.program-box {
94   - cursor: pointer;
95   - background-color: #fff;
96   - margin-top: $program-box-space;
97   - margin-bottom: $program-box-space;
98   - border-radius: 3px;
99   - overflow: hidden;
100   -
101   - .contraste & {
102   - color: #fff;
103   - background-color: #262626;
104   - }
105   -
106   - &--category {
107   - font-size: 14px;
108   - font-weight: bold;
109   - text-transform: uppercase;
110   - line-height: 22px;
111   - display: block;
112   - height: 30px;
113   - margin: 0;
114   - padding: 5px $program-box-space;
115   - color: #ffffff;
116   -
117   - @each $category, $color in $categories {
118   - .#{$category} & {
119   - background-color: $color;
120   - }
121   - }
122   -
123   - .contraste & {
124   - background-color: #262626;
125   - }
126   - }
127   -
128   - &--title {
129   -
130   - padding: 0 $program-box-space;
131   -
132   - h1 {
133   - font-size: 18px;
134   - font-weight: bold;
135   - margin: 0 0 $program-box-space 0;
136   - display: table-cell;
137   - vertical-align: middle;
138   -
139   - // Altura das linhas do abstract
140   - $hLine: 20px;
141   - // default
142   - height: $hLine * 2;
143   -
144   - @media (max-width: $screen-xs) {
145   - // height: $hLine * 3;
146   - height: auto;
147   - }
148   -
149   - @media (min-width: $screen-xs + 1) {
150   - // height: $hLine * 2;
151   - height: auto;
152   - }
153   -
154   - @media (min-width: $screen-sm + 1) {
155   - height: $hLine * 2;
156   - }
157   -
158   - @media (min-width: $screen-md + 1) {
159   - height: $hLine * 2;
160   - }
161   - }
162   - }
163   -
164   - &--abstract {
165   - padding: 0 $program-box-space;
166   - display: table-cell;
167   - vertical-align: middle;
168   -
169   - // Altura das linhas do abstract
170   - $pLine: 20px;
171   - // 1 linha: 19px -> 20
172   - // 2 linhas: 38px -> 40
173   - // 3 linhas: 57px -> 60
174   - // 4 linhas: 76px -> 80
175   -
176   - height: $pLine * 2; // default
177   -
178   - @media (max-width: $screen-xs) {
179   - // height: $pLine * 4;
180   - height: auto;
181   - }
182   -
183   - @media (min-width: $screen-xs + 1) {
184   - // height: $pLine * 3;
185   - height: auto;
186   - }
187   -
188   - @media (min-width: $screen-sm + 1) {
189   - height: $pLine * 4;
190   - }
191   -
192   - @media (min-width: $screen-md + 1) {
193   - height: $pLine * 3;
194   - }
195   -
196   - p { margin: 0; }
197   - }
198   -
199   - &--image-wrapper {
200   - position: relative;
201   - // width: 100%;
202   - // width: 370px;
203   - // height: 170px;
204   -
205   - overflow: hidden;
206   - // text-align: center;
207   - min-height: 170px;
208   - }
209   -
210   - &--image {
211   - min-height: 170px;
212   - background-position: center;
213   - background-size: cover;
214   - background-repeat: no-repeat;
215   -
216   - -webkit-transition: all $time ease-in-out;
217   - -moz-transition: all $time ease-in-out;
218   - -o-transition: all $time ease-in-out;
219   - transition: all $time ease-in-out;
220   - }
221   -
222   - &:hover {
223   - background-color: #d9d9d9;
224   -
225   - .program-box--image {
226   - -webkit-transform: scale($scale); /* prefixo para browsers webkit */
227   - -moz-transform: scale($scale); /* prefixo para browsers gecko */
228   - -o-transform: scale($scale); /* prefixo para opera */
229   - transform: scale($scale);
230   - }
231   -
232   - .contraste & {
233   - background-color: #262626;
234   - }
235   - }
236   -}
237   -
238   -.program-preview {
239   - .program-banner {
240   - position: relative;
241   - }
242   -
243   - .program-banner--image {
244   - width: 100%;
245   - }
246   -
247   - .program-banner--strip {
248   - color: #fff;
249   - position: absolute;
250   - bottom: 15%;
251   - right: 0;
252   - width: 50%;
253   - text-align: center;
254   -
255   - @each $category, $color in $categories {
256   - .#{$category} & {
257   - background-color: $color;
258   - }
259   - }
260   -
261   - @media (max-width: $screen-sm){
262   - position: relative;
263   - width: 100%;
264   - }
265   - }
266   -
267   - .program-banner--title {
268   - font-size: 32px;
269   - text-transform: uppercase;
270   - margin-top: 0;
271   - padding-top: 20px;
272   - }
273   - .program-banner--title,
274   - .program-banner--abstract {
275   - font-weight: bold;
276   - }
277   - .program-banner--abstract {
278   - padding-bottom: 10px;
279   - }
280   -}
281   -
282   -.show-content-row {
283   - .button--themed {
284   - .btn {
285   - font-size: 38px;
286   -
287   - @media (max-width: $screen-sm){
288   - font-size: 20px;
289   - }
290   - }
291   - }
292   -}
293   -
294   -.row-height {
295   - display: table;
296   - table-layout: fixed;
297   - height: 100%;
298   - width: 100%;
299   - border-spacing: 20px;
300   -
301   - @media (max-width: $screen-sm) {
302   - display: block;
303   - }
304   -
305   - // @media (min-width: $screen-sm + 1) {
306   - // height: $hLine * 2;
307   - // }
308   -
309   - // @media (min-width: $screen-md + 1) {
310   - // height: $hLine * 2;
311   - // }
312   -}
313   -
314   -.col-height {
315   - display: table-cell;
316   - float: none;
317   - height: 100%;
318   - vertical-align: top;
319   -
320   - border: 1px solid #000;
321   - border-radius: 3px;
322   -
323   - @each $category, $color in $categories {
324   - .#{$category} & {
325   - border-color: $color;
326   - }
327   - }
328   -
329   - @media (max-width: $screen-sm){
330   - display: block;
331   - border: none;
332   - }
333   -}
334   -
335   -.inside {
336   - margin-top: 20px;
337   - margin-bottom: 20px;
338   -}
339   -
340   -.inside-full-height {
341   - height: 100%;
342   - margin-top: 0;
343   - margin-bottom: 0;
344   -
345   -
346   - @media (max-width: $screen-sm) {
347   - border: 1px solid;
348   - border-radius: 3px;
349   - padding: 20px;
350   - margin: 10px 0;
351   -
352   - @each $category, $color in $categories {
353   - .#{$category} & {
354   - border-color: $color;
355   - }
356   - }
357   - }
358   -}
359   -
360   -
361   -.talk-proposal {
362   - margin-top: -20px;
363   -}
364   -
365   -.proposal-box {
366   -
367   - // padding: 10px 20px;
368   -
369   - .proposal-box--title {
370   - font-size: 38px;
371   - font-weight: 400;
372   - text-align: center;
373   -
374   - margin-bottom: 20px;
375   - }
376   -
377   - .proposal-box--text {
378   - font-size: 24px;
379   - font-weight: 700;
380   - line-height: 1.2;
381   - margin-bottom: 20px;
382   - }
383   -
384   - @each $category, $color in $categories {
385   - .#{$category} & {
386   - border-color: $color;
387   -
388   - .proposal-box--title {
389   - color: $color;
390   - }
391   - }
392   - }
393   -}
394   -
395   -.program-content {
396   - h2 {
397   - font-size: 38px;
398   - font-weight: 500;
399   - margin-bottom: 40px;
400   - padding-bottom: 20px;
401   -
402   - small {
403   - display: block;
404   - font-size: 16px;
405   - padding-top: 5px;
406   - text-transform: none;
407   - }
408   - }
409   -}
src/app/components/programas/programas.html
View file @6ad695d
... ... @@ -1,74 +0,0 @@
1   -<div id="lista-de-programas" class="row">
2   - <div class="col-sm-4 col-md-3">
3   - <div class="category-list">
4   - <nav class="navigation">
5   - <h3 class="category-list--title"><b>Programas</b> por Tema</h3>
6   - <div class="list-group category-list" ng-class="vm.categoryFilter.slug">
7   - <button type="button" class="list-group-item category-list--item"
8   - ng-repeat="category in vm.categories"
9   - ng-class="{active: vm.categoryFilter.slug === category.slug}"
10   - ng-click="vm.filterByCategory(category, $event)">
11   -
12   - <span class="category-list--icon-circle" ng-class="category.slug"></span>
13   - <span class="category-list--icon icon" ng-class="'icon-tema-' + category.slug"></span>
14   - <span class="category-list--label">{{::category.name}}</span>
15   - <span class="category-list--icon--right glyphicon glyphicon-chevron-right"></span>
16   - </button>
17   - </div>
18   - </nav>
19   - </div>
20   - </div>
21   -
22   - <div class="col-sm-8 col-md-9">
23   - <article class="program-list">
24   - <header class="header">
25   - <h2>Conheça os programas <span class="small">({{vm.filtredProgramList.length}}/{{::vm.programs.length}})</span></h2>
26   - <button type="button" class="btn btn-link" ng-click="vm.showAll($event)">
27   - <span class="glyphicon glyphicon-chevron-right"></span> Ver todos os {{::vm.programs.length}} programas
28   - </button>
29   - </header>
30   - <div>
31   - <div class="col-sm-12">
32   - <aside class="form-inline">
33   - <div class="row">
34   - <div class="col-xs-6 col-sm-7 col-md-9">
35   - <label for="programListFilter" class="control-label sr-only">Filtrar programas:</label>
36   - <input id="programListFilter" type="search" class="form-control" ng-model="vm.query" placeholder="Filtrar programas" aria-label="Filtrar programas" >
37   - </div>
38   -
39   - <!-- <label for="selectCategoryFilter" class="control-label sr-only">Filtrar por tema:</label>
40   - <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">
41   - <option value="">-- Filtrar por tema --</option>
42   - </select> -->
43   -
44   - <div class="col-xs-6 col-sm-5 col-md-3">
45   - <label for="selectOrderBy" class="control-label sr-only">Ordernar por:</label>
46   - <select id="selectOrderBy" name="selectOrderBy" class="form-control pull-right" ng-model="vm.orderCriteria" ng-options="orderCriteria.label for orderCriteria in vm.orderCriteries">
47   - <option value="">-- Ordernar por: --</option>
48   - </select>
49   - </div>
50   - <!-- <div class="checkbox">
51   - <label>
52   - <input type="checkbox" ng-model="vm.reverse">
53   - Reverso
54   - </label>
55   - </div> -->
56   -
57   - <!-- <input id="programListLimit" type="number" class="form-control input-sm" size="4" step="2" ng-model="vm.limitTo" aria-label="Limitar" >
58   - <label for="programListLimit" class="control-label">Limite</label> -->
59   -
60   - </div>
61   - </aside>
62   - </div>
63   -
64   - <div ng-repeat="program in vm.filtredProgramList as results">
65   - <programa-box program="program" display="'box'" class="col-xs-12 col-sm-6"></programa-box>
66   - <div ng-if="$odd" class="clearfix"></div>
67   - </div>
68   - <div class="animate-repeat" ng-if="results.length == 0">
69   - Nenhum programa encontrado.
70   - </div>
71   - </div>
72   - </article>
73   - </div>
74   -</div>
src/app/components/programas/programas.scss
View file @6ad695d
... ... @@ -1,132 +0,0 @@
1   -.program-list {
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   -}
21   -
22   -.category-list {
23   - .category-list--title {
24   - color: #ffffff;
25   - font-size: 16px;
26   - margin: 0;
27   - padding: 20px;
28   - background-color: #484848;
29   - border-top-left-radius: 5px;
30   - border-top-right-radius: 5px;
31   - overflow: hidden;
32   - }
33   -
34   -
35   - .category-list--group {
36   - }
37   -
38   - .category-list--item {
39   - position: relative;
40   - text-transform: uppercase;
41   - font-weight: bold;
42   - padding: 0;
43   - height: 68px;
44   - overflow: hidden;
45   - }
46   -
47   - .category-list--label {
48   - margin-left: 70px;
49   - margin-right: 30px;
50   - display: inline-block;
51   - z-index: 99999;
52   - }
53   -
54   - &--icon-circle {
55   - width: 48px;
56   - height: 48px;
57   - position: absolute;
58   - top: 10px;
59   - left: 10px;
60   - // border: 1px solid #fff;
61   - border-radius: 48px;
62   -
63   - -webkit-transition: -webkit-transform 0.2s ease-in-out;
64   - -moz-transition: -moz-transform 0.2s ease-in-out;
65   - -o-transition: -o-transform 0.2s ease-in-out;
66   - transition: transform 0.2s ease-in-out;
67   -
68   - // -webkit-transition: all 0.2s ease-in-out;
69   - // -moz-transition: all 0.2s ease-in-out;
70   - // -o-transition: all 0.2s ease-in-out;
71   - // transition: all 0.2s ease-in-out;
72   -
73   - z-index: 0;
74   -
75   - .active & {
76   - z-index: -1;
77   -
78   - @media (max-width: $screen-xs) {
79   - transform: scale(20);
80   - }
81   -
82   - @media (min-width: $screen-xs + 1) {
83   - transform: scale(40);
84   - }
85   -
86   - @media (min-width: $screen-sm + 1) {
87   - transform: scale(20);
88   - }
89   -
90   - // @media (min-width: $screen-md + 1) {
91   - // transform: scale(20);
92   - // }
93   - }
94   -
95   - @each $category, $color in $categories {
96   - &.#{$category} {
97   - background-color: $color;
98   - }
99   - }
100   - }
101   -
102   - .category-list--icon {
103   - position: absolute;
104   - top: -16px;
105   - left: -14px;
106   - transform: scale(0.35);
107   - }
108   -
109   - .category-list--icon--right {
110   - position: absolute;
111   - right: 9px;
112   - top: 50%;
113   - margin-top: -9px;
114   - transform: scale(1.4);
115   - }
116   -
117   - .list-group-item.active,
118   - .list-group-item.active:hover,
119   - .list-group-item.active:focus {
120   - background-color: #f5f5f5;
121   - }
122   -
123   - // @each $category, $color in $categories {
124   - // &.#{$category} {
125   - // .list-group-item.active,
126   - // .list-group-item.active:hover,
127   - // .list-group-item.active:focus {
128   - // background-color: $color;
129   - // }
130   - // }
131   - // }
132   -}
src/app/index.route.js
  Diff comments   View file @b035251
... ... @@ -57,7 +57,7 @@
57 57 'footer': { templateUrl: 'app/pages/footer/footer.html' }
58 58 }
59 59 })
60   - .state('programa-conheca', {
  60 + .state('conheca-o-programa', {
61 61 url: '/programa/:slug/conheca-o-programa',
62 62 views: {
63 63 'header': { templateUrl: 'app/pages/header/header.html' },
... ...
src/app/index.run.js
  Diff comments   View file @b035251
... ... @@ -18,7 +18,7 @@
18 18 $rootScope.$on('$stateChangeStart', function(event, next) {
19 19  
20 20 if (!next.data || !next.data.authorizedRoles) {
21   - $log.debug('runAuth: public url/state');
  21 + $log.debug('[RUN] Auth: public url/state');
22 22 return;
23 23 }
24 24  
... ... @@ -37,7 +37,7 @@
37 37 }
38 38 });
39 39  
40   - $log.debug('runAuth end.');
  40 + $log.debug('[RUN] Auth end.');
41 41 }
42 42  
43 43 /** @ngInject */
... ... @@ -75,7 +75,7 @@
75 75 }
76 76 };
77 77  
78   - $log.debug('runAccessibility end.');
  78 + $log.debug('[RUN] Accessibility end.');
79 79 }
80 80  
81 81 /** @ngInject */
... ... @@ -86,11 +86,11 @@
86 86 }
87 87  
88 88 /** @ngInject */
89   - function runPath($rootScope, api, $window, $log) {
  89 + function runPath($rootScope, API, $window, $log) {
90 90 var isProduction = (/^http:\/\/dialoga\.gov\.br\//.test($window.location.href));
91   - $rootScope.basePath = isProduction ? api.hostProd : api.hostHom;
  91 + $rootScope.basePath = isProduction ? API.hostProd : API.hostHom;
92 92  
93   - $log.debug('runPath end.');
  93 + $log.debug('[RUN] Path end.');
94 94 }
95 95  
96 96 /** @ngInject */
... ... @@ -122,7 +122,7 @@
122 122  
123 123 /** @ngInject */
124 124 function runBlock($log) {
125   - $log.debug('runBlock end.');
  125 + $log.debug('[RUN] Block end.');
126 126 }
127 127  
128 128 })();
... ...
src/app/index.scss
  Diff comments   View file @b035251
... ... @@ -25,6 +25,12 @@ $gray: #f1f1f1;
25 25 $categories: (saude: #3449b7, seguranca-publica: #e34748, educacao: #f39720, reducao-da-pobreza: #3ebb8f, cultura: #a63738);
26 26 $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.");
27 27  
  28 +// Programs
  29 +$scale: 1.1;
  30 +$time: .2s;
  31 +$darken: 15%;
  32 +
  33 +
28 34 // -------------
29 35  
30 36 body {
... ... @@ -53,11 +59,89 @@ body {
53 59 z-index: 2;
54 60 }
55 61  
56   -.browsehappy {
57   - margin: 0.2em 0;
58   - background: #ccc;
59   - color: #000;
60   - padding: 0.2em 0;
  62 +// Commons
  63 +.button--themed {
  64 + padding: 20px;
  65 + .btn {
  66 + color: #fff;
  67 + font-weight: bold;
  68 + padding: 15px 0;
  69 + border-left: 0;
  70 + border-right: 0;
  71 + border-top: 0;
  72 + border-radius: 6px;
  73 +
  74 + -webkit-transition: all $time ease-in-out;
  75 + -moz-transition: all $time ease-in-out;
  76 + -o-transition: all $time ease-in-out;
  77 + transition: all $time ease-in-out;
  78 +
  79 + @each $category, $color in $categories {
  80 + .#{$category} & {
  81 + background-color: $color;
  82 + border-bottom: 3px solid darken($color, $darken);
  83 + }
  84 + }
  85 +
  86 + &:hover,
  87 + &:focus {
  88 + @each $category, $color in $categories {
  89 + .#{$category} & {
  90 + background-color: darken($color, $darken);
  91 + }
  92 + }
  93 + }
  94 +
  95 + .contraste & {
  96 + color: #262626;
  97 + background-color: #fff;
  98 + }
  99 + }
  100 +
  101 + .btn-circle {
  102 + width: 64px;
  103 + height: 64px;
  104 + border-radius: 100%;
  105 + }
  106 +
  107 + // &.vote-buttons {
  108 + // padding-bottom: 40px;
  109 + // }
  110 +
  111 + .btn.vote-buttons-up {
  112 + float: right;
  113 + margin-right: 10px;
  114 + background-color: #32dbb5;
  115 + border-bottom: 3px solid #1da485;
  116 +
  117 + &:hover,
  118 + &:focus {
  119 + background-color: #1da485;
  120 + }
  121 + }
  122 +
  123 + .btn.vote-buttons-down {
  124 + float: left;
  125 + margin-left: 10px;
  126 + background-color: #db4127;
  127 + border-bottom: 3px solid #9c2d1a;
  128 +
  129 + &:hover,
  130 + &:focus {
  131 + background-color: #9c2d1a;
  132 + }
  133 +
  134 +
  135 + // @media (max-width: $screen-sm) {
  136 + // margin-left:
  137 + // }
  138 + }
  139 +
  140 + .vote-buttons-up,
  141 + .vote-buttons-down {
  142 + font-size: 30px;
  143 + margin-bottom: 20px;
  144 + }
61 145 }
62 146  
63 147 // Hack to fix "Barra do Brasil"
... ...
src/app/layout.scss 0 → 100644
  Diff comments   View file @b035251
... ... @@ -0,0 +1,65 @@
  1 +.row-height {
  2 + display: table;
  3 + table-layout: fixed;
  4 + height: 100%;
  5 + width: 100%;
  6 + border-spacing: 20px;
  7 +
  8 + @media (max-width: $screen-sm) {
  9 + display: block;
  10 + }
  11 +
  12 + // @media (min-width: $screen-sm + 1) {
  13 + // height: $hLine * 2;
  14 + // }
  15 +
  16 + // @media (min-width: $screen-md + 1) {
  17 + // height: $hLine * 2;
  18 + // }
  19 +}
  20 +
  21 +.col-height {
  22 + display: table-cell;
  23 + float: none;
  24 + height: 100%;
  25 + vertical-align: top;
  26 +
  27 + border: 1px solid #000;
  28 + border-radius: 3px;
  29 +
  30 + @each $category, $color in $categories {
  31 + .#{$category} & {
  32 + border-color: $color;
  33 + }
  34 + }
  35 +
  36 + @media (max-width: $screen-sm){
  37 + display: block;
  38 + border: none;
  39 + }
  40 +}
  41 +
  42 +.inside {
  43 + margin-top: 20px;
  44 + margin-bottom: 20px;
  45 +}
  46 +
  47 +.inside-full-height {
  48 + height: 100%;
  49 + margin-top: 0;
  50 + margin-bottom: 0;
  51 +
  52 +
  53 + @media (max-width: $screen-sm) {
  54 + border: 1px solid;
  55 + border-radius: 3px;
  56 + padding: 20px;
  57 + margin: 10px 0;
  58 +
  59 + @each $category, $color in $categories {
  60 + .#{$category} & {
  61 + border-color: $color;
  62 + }
  63 + }
  64 + }
  65 +}
... ...
src/app/pages/article/article.service.js
  Diff comments   View file @b035251
... ... @@ -6,12 +6,12 @@
6 6 .factory('ArticleService', ArticleService);
7 7  
8 8 /** @ngInject */
9   - function ArticleService($http, $q, $rootScope, UtilService, Slug, $log) {
  9 + function ArticleService($http, $q, $rootScope, API, UtilService, Slug, $log) {
10 10 $log.debug('ArticleService');
11 11  
12   - var idArticleHome = '103358';
13   - var idArticleAbout = '108073';
14   - var idArticleTerms = '107880';
  12 + var idArticleHome = API.articleId.home;
  13 + var idArticleAbout = API.articleId.about;
  14 + var idArticleTerms = API.articleId.terms;
15 15  
16 16 var _savedAbstract = null;
17 17  
... ... @@ -22,6 +22,9 @@
22 22 getTerms: getTerms,
23 23 getArticleById: getArticleById,
24 24 getArticleBySlug: getArticleBySlug,
  25 + getCategories: getCategories,
  26 + getCategoryBySlug: getCategoryBySlug,
  27 + getPrograms: getPrograms,
25 28 getContentById: getContentById,
26 29 setHomeAbstract: setHomeAbstract,
27 30 getHomeAbstract: getHomeAbstract
... ... @@ -89,6 +92,34 @@
89 92 }, cbError);
90 93 }
91 94  
  95 + function getCategories (cbSuccess, cbError) {
  96 + return getHome(function(data){
  97 + cbSuccess(data.article.categories);
  98 + }, cbError);
  99 + }
  100 +
  101 + function getCategoryBySlug (slug, cbSuccess, cbError) {
  102 + return getHome(function (data){
  103 + var result = null;
  104 +
  105 + for (var i = data.article.categories.length - 1; i >= 0; i--) {
  106 + var category = data.article.categories[i];
  107 + if (category.slug === slug) {
  108 + result = category;
  109 + break;
  110 + }
  111 + }
  112 +
  113 + cbSuccess(result);
  114 + }, cbError);
  115 + }
  116 +
  117 + function getPrograms (cbSuccess, cbError) {
  118 + return getHome(function(data){
  119 + cbSuccess(data.article.children);
  120 + }, cbError);
  121 + }
  122 +
92 123 function getContentById (contentId, cbSuccess, cbError) {
93 124 return getArticleById(contentId, {
94 125 fields: 'id,body&content_type=ProposalsDiscussionPlugin::Topic'
... ... @@ -99,7 +130,7 @@
99 130 return getArticleById(idArticleHome, {
100 131 fields: 'id,children,categories,abstract,title,image,url,setting,position',
101 132 private_token: 'null'
102   - }, _handleCategoryColors(cbSuccess), cbError);
  133 + }, _handleCategory(cbSuccess), cbError);
103 134 }
104 135  
105 136 function getAbout (cbSuccess, cbError) {
... ... @@ -110,20 +141,23 @@
110 141 return getArticleById(idArticleTerms, {}, cbSuccess, cbError);
111 142 }
112 143  
113   - function _handleCategoryColors (cbSuccess) {
  144 + function _handleCategory (cbSuccess) {
114 145 // var darkFactor = 0.15;
115 146  
116 147 return function (data) {
117   - // if(data.article.categories){
118   - // var categories = data.article.categories;
  148 + if(data.article.categories){
  149 + // var categories = data.article.categories;
119 150  
  151 + // Handle Category Data
  152 +
  153 + // Handle Category Colors
120 154 // for (var i = categories.length - 1; i >= 0; i--) {
121 155 // var category = categories[i];
122 156 // if(category.color && !category.bgColor){
123 157 // category.colorDarker = $window.ColorLuminance(category.color, 0.15);
124 158 // }
125 159 // };
126   - // }
  160 + }
127 161 cbSuccess(data);
128 162 };
129 163 }
... ...
src/app/pages/inicio/inicio.html
  Diff comments   View file @b035251
... ... @@ -28,6 +28,13 @@
28 28  
29 29 <section class="section-gray section-space-up" ng-if="pageInicio.article">
30 30 <div class="container">
31   - <programa-list article="pageInicio.article"></programa-list>
  31 + <div id="lista-de-programas" class="row">
  32 + <div class="col-sm-4 col-md-3">
  33 + <category-list></category-list>
  34 + </div>
  35 + <div class="col-sm-8 col-md-9">
  36 + <article-grid></article-grid>
  37 + </div>
  38 + </div>
32 39 </div>
33 40 </section>
... ...
src/app/pages/programas/conheca-o-programa.html
  Diff comments   View file @b035251
1 1 <div class="container page--conheca-o-programa">
2   - <div ng-if="pageProgramaContent.program && pageProgramaContent.categories">
3   - <article-bar category="pageProgramaContent.program.categories[0]" categories="pageProgramaContent.categories"></article-bar>
  2 + <div ng-if="pageProgramaContent.article && pageProgramaContent.categories">
  3 + <article-bar category="pageProgramaContent.article.categories[0]" categories="pageProgramaContent.categories"></article-bar>
4 4 </div>
5 5  
6   - <div ng-if="!pageProgramaContent.program.body">
  6 + <div ng-if="!pageProgramaContent.article.body">
7 7 <div ng-if="!pageProgramaContent.error" class="alert alert-info" role="alert">Carregando detalhes sobre o progama...</div>
8 8 <div ng-if="pageProgramaContent.error" class="alert alert-warning" role="alert">{{pageProgramaContent}}</div>
9 9 </div>
10 10  
11   - <div ng-if="pageProgramaContent.program.body">
  11 + <div ng-if="pageProgramaContent.article.body">
12 12 <article class="program-content">
13 13 <div>
14   - <section ng-bind-html="pageProgramaContent.program.body"></section>
  14 + <section ng-bind-html="pageProgramaContent.article.body"></section>
15 15 </div>
16 16 </article>
17   - <aside class="program--aside"ng-class="pageProgramaContent.program.categories[0].slug">
  17 + <aside class="program--aside"ng-class="pageProgramaContent.article.categories[0].slug">
18 18 <div class="col-sm-6" >
19 19 <div class="button--themed">
20 20 <button class="btn btn-block" ng-click="pageProgramaContent.goToPreview()">
... ...
src/app/pages/programas/programa-content.controller.js 0 → 100644
  Diff comments   View file @b035251
... ... @@ -0,0 +1,81 @@
  1 +(function() {
  2 + 'use strict';
  3 +
  4 + angular
  5 + .module('dialoga')
  6 + .controller('ProgramaContentPageController', ProgramaContentPageController);
  7 +
  8 + /** @ngInject */
  9 + function ProgramaContentPageController(ArticleService, $state, $location, $scope, $rootScope, $log) {
  10 + $log.debug('ProgramaContentPageController');
  11 +
  12 + var vm = this;
  13 +
  14 + vm.ArticleService = ArticleService;
  15 + vm.$state = $state;
  16 + vm.$location = $location;
  17 + vm.$scope = $scope;
  18 + vm.$rootScope = $rootScope;
  19 + vm.$log = $log;
  20 +
  21 + vm.init();
  22 + }
  23 +
  24 + ProgramaContentPageController.prototype.init = function () {
  25 + var vm = this;
  26 +
  27 + var params = vm.$state.params;
  28 + var slug = params.slug;
  29 +
  30 + vm.article = null;
  31 + vm.categories = null;
  32 + vm.currentCategory = null;
  33 + vm.loading = true;
  34 + vm.error = false;
  35 +
  36 + vm.ArticleService.getCategories(function(categories){
  37 + vm.categories = categories;
  38 + }, function (error) {
  39 + vm.error = error;
  40 + vm.$log.error(error);
  41 + });
  42 +
  43 + vm.ArticleService.getArticleBySlug(slug, function(article){
  44 + vm.article = article;
  45 + vm.currentCategory = vm.article.categories[0];
  46 +
  47 + vm.loadContent();
  48 +
  49 + }, function (error) {
  50 + vm.$log.error(error);
  51 + vm.$log.info('Rollback to home page.');
  52 + vm.$state.go('inicio', {}, {location: true});
  53 + });
  54 + };
  55 +
  56 + ProgramaContentPageController.prototype.loadContent = function () {
  57 + var vm = this;
  58 +
  59 + vm.loading = true;
  60 + if(!vm.article.body){
  61 + vm.ArticleService.getContentById(vm.article.id, function (data) {
  62 + vm.article.body = data.article.body;
  63 + vm.loading = false;
  64 + }, function (error) {
  65 + vm.loading = false;
  66 + vm.error = error;
  67 + });
  68 + }
  69 + vm.loading = false;
  70 + };
  71 +
  72 + ProgramaContentPageController.prototype.goToPreview = function () {
  73 + var vm = this;
  74 +
  75 + vm.$state.go('programa', {
  76 + slug: vm.article.slug
  77 + }, {
  78 + location: true
  79 + });
  80 + };
  81 +})();
... ...
src/app/pages/programas/programa.content.controller.js
View file @6ad695d
... ... @@ -1,81 +0,0 @@
1   -(function() {
2   - 'use strict';
3   -
4   - angular
5   - .module('dialoga')
6   - .controller('ProgramaContentPageController', ProgramaContentPageController);
7   -
8   - /** @ngInject */
9   - function ProgramaContentPageController(ArticleService, $state, $location, $scope, $rootScope, $log) {
10   - $log.debug('ProgramaContentPageController');
11   -
12   - var vm = this;
13   -
14   - vm.ArticleService = ArticleService;
15   - vm.$state = $state;
16   - vm.$location = $location;
17   - vm.$scope = $scope;
18   - vm.$rootScope = $rootScope;
19   - vm.$log = $log;
20   -
21   - vm.init();
22   - }
23   -
24   - ProgramaContentPageController.prototype.init = function () {
25   - var vm = this;
26   -
27   - var params = vm.$state.params;
28   - var slug = params.slug;
29   -
30   - vm.program = null;
31   - vm.categories = null;
32   - vm.currentCategory = null;
33   - vm.loading = true;
34   - vm.error = false;
35   -
36   - vm.ArticleService.getHome(function(data){
37   - vm.categories = data.article.categories;
38   - }, function (error) {
39   - vm.error = error;
40   - vm.$log.error(error);
41   - });
42   -
43   - vm.ArticleService.getArticleBySlug(slug, function(program){
44   - vm.program = program;
45   - vm.currentCategory = vm.program.categories[0];
46   -
47   - vm.loadContent();
48   -
49   - }, function (error) {
50   - vm.$log.error(error);
51   - vm.$log.info('Rollback to home page.');
52   - vm.$state.go('inicio', {}, {location: true});
53   - });
54   - };
55   -
56   - ProgramaContentPageController.prototype.loadContent = function () {
57   - var vm = this;
58   -
59   - vm.loading = true;
60   - if(!vm.program.body){
61   - vm.ArticleService.getContentById(vm.program.id, function (data) {
62   - vm.program.body = data.article.body;
63   - vm.loading = false;
64   - }, function (error) {
65   - vm.loading = false;
66   - vm.error = error;
67   - });
68   - }
69   - vm.loading = false;
70   - };
71   -
72   - ProgramaContentPageController.prototype.goToPreview = function () {
73   - var vm = this;
74   -
75   - vm.$state.go('programa', {
76   - slug: vm.program.slug
77   - }, {
78   - location: true
79   - });
80   - };
81   -})();
src/app/pages/programas/programa.controller.js
  Diff comments   View file @b035251
... ... @@ -27,33 +27,33 @@
27 27 var params = vm.$state.params;
28 28 var slug = params.slug;
29 29  
30   - vm.program = null;
  30 + vm.article = null;
31 31 vm.categories = null;
32 32 vm.currentCategory = null;
33 33 vm.loading = true;
34 34 vm.error = false;
35 35  
36   - vm.ArticleService.getHome(function(data){
37   - vm.categories = data.article.categories;
  36 + vm.ArticleService.getCategories(function(categories){
  37 + vm.categories = categories;
38 38 }, function (error) {
39 39 vm.error = error;
40 40 vm.$log.error(error);
41 41 });
42 42  
43   - vm.ArticleService.getArticleBySlug(slug, function(program){
44   - vm.program = program;
45   - vm.currentCategory = vm.program.categories[0];
  43 + vm.ArticleService.getArticleBySlug(slug, function(article){
  44 + vm.article = article;
  45 + vm.currentCategory = vm.article.categories[0];
46 46  
47 47 // load proposals
48 48 // vm.ArticleService.getRandomProposal(program.id, function(proposal){
49   - // vm.program.proposal = proposal;
  49 + // vm.article.proposal = proposal;
50 50 // }, function (error){
51 51 // vm.$log.error(error);
52 52 // });
53 53  
54 54 // load events
55 55 // vm.ArticleService.getEvents(program.id, function(proposal){
56   - // vm.program.proposal = proposal;
  56 + // vm.article.proposal = proposal;
57 57 // }, function (error){
58 58 // vm.$log.error(error);
59 59 // });
... ...
src/app/pages/programas/programa.html
  Diff comments   View file @b035251
1 1 <div class="container">
2 2  
3   - <div ng-if="pagePrograma.program && pagePrograma.categories">
4   - <article-bar category="pagePrograma.program.categories[0]" categories="pagePrograma.categories"></article-bar>
  3 + <div ng-if="pagePrograma.article && pagePrograma.categories">
  4 + <article-bar category="pagePrograma.article.categories[0]" categories="pagePrograma.categories"></article-bar>
5 5 </div>
6 6  
7   - <div ng-if="!pagePrograma.program">
  7 + <div ng-if="!pagePrograma.article">
8 8 <div class="alert alert-info" role="alert">Carregando informações sobre o progama</div>
9 9 </div>
10 10  
11   - <div ng-if="pagePrograma.program && pagePrograma.categories">
12   - <programa-box program="pagePrograma.program" display="'preview'"></programa-box>
  11 + <div ng-if="pagePrograma.article && pagePrograma.categories">
  12 + <article-preview article="pagePrograma.article"></article-preview>
13 13 </div>
14 14 </div>
15 15  
... ...