Commit 0c7d6a011aec682d3cdb58c36d22003816f7abcc

Authored by Leonardo Merlin
1 parent 36b6847c

Update: program page - sync (2)

1 # Dialoga App 1 # Dialoga App
2 2
  3 +Start development:
  4 +
  5 +```bash
  6 +# dev with no proxy (local data)
  7 +gulp serve
  8 +json-server data.js -p 9000 -w data.js
  9 +
  10 +# dev with proxy to hom server
  11 +gulp serve --target="http://hom.login.dialoga.gov.br"
  12 +
  13 +# dev with proxy to production server
  14 +gulp serve --target="http://login.dialoga.gov.br"
  15 +```
  16 +
3 # Project Decisions 17 # Project Decisions
4 18
5 - [generator-gulp-angular](https://github.com/Swiip/generator-gulp-angular) 19 - [generator-gulp-angular](https://github.com/Swiip/generator-gulp-angular)
src/app/components/a11y-bar/a11y-bar.html
@@ -4,25 +4,25 @@ @@ -4,25 +4,25 @@
4 <div class="col-sm-6"> 4 <div class="col-sm-6">
5 <ul class="skip-links list-inline list-unstyled"> 5 <ul class="skip-links list-inline list-unstyled">
6 <li> 6 <li>
7 - <a accesskey="1" href="#content" id="skip-to-content" ng-click="skipToContent($event)"> 7 + <a accesskey="1" href="#content" id="skip-to-content" ng-click="focusOn('#content', $event)">
8 Ir para o conteúdo 8 Ir para o conteúdo
9 <span>1</span> 9 <span>1</span>
10 </a> 10 </a>
11 </li> 11 </li>
12 <li> 12 <li>
13 - <a accesskey="2" href="#navigation" id="skip-to-navigation" ng-click="skipToNavigation($event)"> 13 + <a accesskey="2" href="#navigation" id="skip-to-navigation" ng-click="focusOn('#navigation', $event)">
14 Ir para o menu 14 Ir para o menu
15 <span>2</span> 15 <span>2</span>
16 </a> 16 </a>
17 </li> 17 </li>
18 <li> 18 <li>
19 - <a accesskey="3" href="#search" id="skip-to-search" ng-click="skipToSearch($event)"> 19 + <a accesskey="3" href="#search" id="skip-to-search" ng-click="focusOn('#search', $event)">
20 Ir para a busca 20 Ir para a busca
21 <span>3</span> 21 <span>3</span>
22 </a> 22 </a>
23 </li> 23 </li>
24 <li> 24 <li>
25 - <a accesskey="4" href="#footer" id="skip-to-footer" ng-click="skipToFooter($event)"> 25 + <a accesskey="4" href="#footer" id="skip-to-footer" ng-click="focusOn('#footer', $event)">
26 Ir para o rodapé 26 Ir para o rodapé
27 <span>4</span> 27 <span>4</span>
28 </a> 28 </a>
src/app/components/article-grid/article-grid.html
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <header class="header"> 2 <header class="header">
3 <h2>Conheça os programas <span class="small">({{vm.filtredArticleList.length}}/{{vm.articles.length}})</span></h2> 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)"> 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 5 + <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Ver todos os {{vm.articles.length}} programas
6 </button> 6 </button>
7 </header> 7 </header>
8 <div> 8 <div>
src/app/components/proposal-ranking/proposal-ranking-carousel.scss 0 → 100644
@@ -0,0 +1,77 @@ @@ -0,0 +1,77 @@
  1 +.proposal-ranking {
  2 + // both: carousel and list
  3 +}
  4 +
  5 +.proposal-ranking--carousel {
  6 + background-color: #f1f1f1;
  7 +
  8 + &-top {
  9 + position: relative;
  10 + color: #fff;
  11 + font-weight: bold;
  12 + font-size: 18px;
  13 + padding: 5px 10px;
  14 +
  15 +
  16 + &-triggers {
  17 + position: absolute;
  18 + right: 5px;
  19 + top: 5px;
  20 +
  21 + li {
  22 + border: 1px solid #fff;
  23 + border-radius: 100%;
  24 + width: 15px;
  25 + height: 15px;
  26 + margin-right: 5px;
  27 +
  28 + cursor: pointer;
  29 +
  30 + &.active {
  31 + background-color: #fff;
  32 + }
  33 + }
  34 + }
  35 + }
  36 +
  37 + &-middle {
  38 + position: relative;
  39 + padding: 25px 30px;
  40 +
  41 + .content {
  42 + position: relative;
  43 + z-index: 2;
  44 + }
  45 +
  46 + &-watermark {
  47 + position: absolute;
  48 + bottom: 1px;
  49 + left: -5px;
  50 + color: #ddd;
  51 + font-size: 150px;
  52 + font-weight: bold;
  53 + line-height: 116px;
  54 + z-index: 1;
  55 +
  56 + }
  57 + }
  58 +
  59 + &-bottom {
  60 + position: relative;
  61 + color: #fff;
  62 + padding: 10px;
  63 + font-weight: bold;
  64 + cursor: pointer;
  65 + z-index: 10;
  66 +
  67 + &-icon {
  68 + .glyphicon {
  69 + position: relative;
  70 + top: -2px;
  71 + background-color: #fff;
  72 + padding: 6px 5px 5px 6px;
  73 + border-radius: 100%;
  74 + }
  75 + }
  76 + }
  77 +}
src/app/components/proposal-ranking/proposal-ranking-list.scss 0 → 100644
@@ -0,0 +1,82 @@ @@ -0,0 +1,82 @@
  1 +.proposal-ranking {
  2 + // both: carousel and list
  3 +}
  4 +
  5 +.proposal-ranking--list {
  6 + table {
  7 + border-radius: 4px;
  8 + overflow: hidden;
  9 + }
  10 +
  11 + thead {
  12 + th{
  13 + color: #fff;
  14 + background-color: #606060;
  15 + &:first-child {
  16 + background-color: #484848;
  17 + text-align: right;
  18 + width: 160px;
  19 + padding-right: 20px;
  20 + }
  21 + }
  22 +
  23 + .btn-question {
  24 + color: #484848;
  25 + background-color: #fff;
  26 + display: inline-block;
  27 + text-align: center;
  28 + width: 22px;
  29 + height: 22px;
  30 + margin-left: 10px;
  31 + padding: 0;
  32 + border-radius: 100%;
  33 + }
  34 +
  35 + .popover {
  36 + color: #484848;
  37 + }
  38 + }
  39 +
  40 + tbody {
  41 + tr {
  42 + background-color: #fff;
  43 + }
  44 +
  45 + td {
  46 + &:first-child {
  47 + font-size: 22px;
  48 + font-weight: bold;
  49 + padding: 0;
  50 + text-align: right;
  51 + }
  52 + }
  53 +
  54 + .position {
  55 + display: block;
  56 + width: 100%;
  57 + margin: 20px 0;
  58 + padding: 5px 20px;
  59 + border-top-right-radius: 4px;
  60 + border-bottom-right-radius: 4px;
  61 + }
  62 + }
  63 +
  64 + // override bootstrap
  65 + .table-striped > tbody > tr:nth-of-type(odd) {
  66 + // impar
  67 + background-color: #eaeaea;
  68 +
  69 + .position {
  70 + background-color: #fff;
  71 + }
  72 + }
  73 +
  74 + .table-striped > tbody > tr:nth-of-type(even) {
  75 + // par
  76 + background-color: #fff;
  77 +
  78 + .position {
  79 + background-color: #eaeaea;
  80 + }
  81 + }
  82 +}
src/app/components/proposal-ranking/proposal-ranking.directive.js
@@ -6,15 +6,17 @@ @@ -6,15 +6,17 @@
6 .directive('proposalRanking', proposalRanking); 6 .directive('proposalRanking', proposalRanking);
7 7
8 /** @ngInject */ 8 /** @ngInject */
9 - function proposalRanking($rootScope) { 9 + function proposalRanking() {
10 10
11 /** @ngInject */ 11 /** @ngInject */
12 - function ProposalRankingController(ArticleService, $scope, $log) { 12 + function ProposalRankingController(ArticleService, $scope, $element, $timeout, $log) {
13 $log.debug('ProposalRankingController'); 13 $log.debug('ProposalRankingController');
14 14
15 var vm = this; 15 var vm = this;
16 vm.ArticleService = ArticleService; 16 vm.ArticleService = ArticleService;
17 vm.$scope = $scope; 17 vm.$scope = $scope;
  18 + vm.$element = $element;
  19 + vm.$timeout = $timeout;
18 vm.$log = $log; 20 vm.$log = $log;
19 21
20 vm.init(); 22 vm.init();
@@ -24,27 +26,74 @@ @@ -24,27 +26,74 @@
24 // initial values 26 // initial values
25 var vm = this; 27 var vm = this;
26 28
  29 + vm.activeIndex = 1;
  30 + vm.attachedPopover = false;
  31 + vm.loading = false;
  32 +
  33 + if(!angular.isNumber(vm.limit)){
  34 + vm.limit = parseInt(vm.limit);
  35 + }
  36 +
27 vm.loadData(); 37 vm.loadData();
28 }; 38 };
29 39
30 ProposalRankingController.prototype.loadData = function () { 40 ProposalRankingController.prototype.loadData = function () {
31 // async values 41 // async values
32 - // var vm = this; 42 + var vm = this;
  43 +
  44 + vm.loading = true;
  45 +
  46 + // simulate delay
  47 + vm.$timeout(function(){
  48 + vm.loading = false;
  49 + }, 2000);
  50 + };
  51 +
  52 + ProposalRankingController.prototype.switchProposal = function (index) {
  53 + var vm = this;
33 54
  55 + if(index > 0 && index <= limit) {
  56 + vm.activeIndex = index;
  57 + }else{
  58 + vm.$log.warn('[switchProposal] "index" not handled:', index);
  59 + }
34 }; 60 };
35 61
36 ProposalRankingController.prototype.showProposals = function () { 62 ProposalRankingController.prototype.showProposals = function () {
37 var vm = this; 63 var vm = this;
38 64
39 - // notify parents 65 + // notify parents - handled by parents
40 vm.$scope.$emit('see-proposals'); 66 vm.$scope.$emit('see-proposals');
41 }; 67 };
42 68
  69 + ProposalRankingController.prototype.showPopover = function ($event) {
  70 + var vm = this;
  71 +
  72 + $event.stopPropagation();
  73 +
  74 + var target = $event.target;
  75 + var elPopover = angular.element(target);
  76 +
  77 + if(!vm.attachedPopover){
  78 + elPopover.popover({
  79 + html: true,
  80 + placement: 'top',
  81 + animation: true,
  82 + title: 'Regra de posição das propostas',
  83 + content: '<p>É calculada pelo saldo de interações das propostas (curtidas - não curtidas) dividido pela diferença de exibições entre elas.</p><p>O objetivo dessa correção é compensar o saldo de interações e a diferença de exibições das propostas que não tiveram muitas oportunidades de visualização ou das propostas que tiveram mais oportunidades de visualização que a média.</p><p>Com essa correção, é possível comparar propostas que entraram em diferentes momentos, durante todo o período da consulta.</p>'
  84 + });
  85 + vm.attachedPopover = true;
  86 + }
  87 +
  88 +
  89 + elPopover.popover('toggle');
  90 + };
  91 +
43 var directive = { 92 var directive = {
44 restrict: 'E', 93 restrict: 'E',
45 templateUrl: 'app/components/proposal-ranking/proposal-ranking.html', 94 templateUrl: 'app/components/proposal-ranking/proposal-ranking.html',
46 scope: { 95 scope: {
47 - limit: '=', 96 + limit: '&',
48 display: '=' 97 display: '='
49 }, 98 },
50 controller: ProposalRankingController, 99 controller: ProposalRankingController,
src/app/components/proposal-ranking/proposal-ranking.html
1 <div class="proposal-ranking"> 1 <div class="proposal-ranking">
2 - <div class="proposal-ranking--carousel"> 2 +
  3 + <div class="proposal-ranking--carousel" ng-if="vm.display==='carousel'">
3 <div class="proposal-ranking--carousel-top color-theme-bg"> 4 <div class="proposal-ranking--carousel-top color-theme-bg">
4 <div class="proposal-ranking--carousel-position"> 5 <div class="proposal-ranking--carousel-position">
5 <span>1º</span> 6 <span>1º</span>
6 <span>Lugar</span> 7 <span>Lugar</span>
7 </div> 8 </div>
8 - <div class="proposal-ranking--carousel-triggers"> 9 + <div class="proposal-ranking--carousel-top-triggers">
9 <ul class="list-inline"> 10 <ul class="list-inline">
10 - <li class="active"></li>  
11 - <li></li>  
12 - <li></li> 11 + <li ng-class="{'active': vm.activeIndex === 1}" ng-click="vm.switchProposal(1)"></li>
  12 + <li ng-class="{'active': vm.activeIndex === 2}" ng-click="vm.switchProposal(2)"></li>
  13 + <li ng-class="{'active': vm.activeIndex === 3}" ng-click="vm.switchProposal(3)"></li>
13 </ul> 14 </ul>
14 </div> 15 </div>
15 </div> 16 </div>
@@ -17,11 +18,67 @@ @@ -17,11 +18,67 @@
17 <div class="content"> 18 <div class="content">
18 <p>Lorem ipsum dolor sit amet, an qui alia constituam. Forensibus scripserit pri at, sit et dolorum ancillae. Ad sea quas utamur salutandi, illud veritus propriae mea ut. Ius no timeam intellegat liberavisse, eum suscipit pertinax ad. Illum graeci postulant et pro, at clita facete quo, cibo liber ad pri.</p> 19 <p>Lorem ipsum dolor sit amet, an qui alia constituam. Forensibus scripserit pri at, sit et dolorum ancillae. Ad sea quas utamur salutandi, illud veritus propriae mea ut. Ius no timeam intellegat liberavisse, eum suscipit pertinax ad. Illum graeci postulant et pro, at clita facete quo, cibo liber ad pri.</p>
19 </div> 20 </div>
  21 + <div class="proposal-ranking--carousel-middle-watermark"><span>1º</span></div>
20 </div> 22 </div>
21 <div class="proposal-ranking--carousel-bottom color-theme-common-bg" ng-click="vm.showProposals()"> 23 <div class="proposal-ranking--carousel-bottom color-theme-common-bg" ng-click="vm.showProposals()">
22 - <div class="proposal-ranking--carousel-icon">  
23 - <span class="glyphicon glyphicon-chevron-down"></span> 24 + <div class="proposal-ranking--carousel-bottom-icon">
  25 + <span>Veja as propostas mais vortadas</span>
  26 + <span class="glyphicon glyphicon-chevron-down pull-right color-theme-common-fg"></span>
24 </div> 27 </div>
25 </div> 28 </div>
26 </div> 29 </div>
  30 +
  31 + <div class="proposal-ranking--list" ng-if="vm.display==='list'">
  32 +
  33 + <div class="table-responsive" ng-if="vm.loading">
  34 + <div class="table-responsive">Carregando...</div>
  35 + </div>
  36 + <div class="table-responsive" ng-if="!vm.loading">
  37 + <table class="table table-striped">
  38 + <thead>
  39 + <tr>
  40 + <th>
  41 + Colocação
  42 + <button type="button" class="btn btn-link btn-question" ng-click="vm.showPopover($event)">?</button>
  43 + </th>
  44 + <th>123 PROPOSTAS</th>
  45 + </tr>
  46 + </thead>
  47 + <tbody>
  48 + <tr>
  49 + <td class="color-theme-fg">
  50 + <span class="position">1º</span>
  51 + </td>
  52 + <td>
  53 + <div class="row">
  54 + <div class="col-xs-12">Conteúdo</div>
  55 + <div class="col-md-6">
  56 + <button type="button" class="btn btn-link">
  57 + Avalie esta proposta
  58 + <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  59 + <!-- <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> -->
  60 + </button>
  61 + </div>
  62 + <div class="col-md-6">
  63 + <proposal-ranking views="'1'"></proposal-ranking>
  64 + </div>
  65 + </div>
  66 + </td>
  67 + </tr>
  68 + <tr>
  69 + <td class="color-theme-fg">
  70 + <span class="position">2º</span>
  71 + </td>
  72 + <td>
  73 + <div class="row">
  74 + <div class="col-xs-12">Conteúdo</div>
  75 + <div class="col-md-6">Avalie esta proposta</div>
  76 + <div class="col-md-6">[STATS]</div>
  77 + </div>
  78 + </td>
  79 + </tr>
  80 + </tbody>
  81 + </table>
  82 + </div>
  83 + </div>
27 </div> 84 </div>
src/app/components/proposal-ranking/proposal-ranking.scss
@@ -1,14 +0,0 @@ @@ -1,14 +0,0 @@
1 -.proposal-ranking {  
2 - // both: carousel and list  
3 -}  
4 -  
5 -.proposal-ranking--carousel {  
6 - background-color: #eee;  
7 -  
8 - .proposal-ranking--carousel-top {  
9 - color: #fff;  
10 - font-weight: bold;  
11 - font-size: 18px;  
12 - padding: 5px 10px;  
13 - }  
14 -}  
src/app/components/proposal-related/proposal-related.directive.js 0 → 100644
src/app/components/proposal-related/proposal-related.html 0 → 100644
src/app/components/proposal-related/proposal-related.scss 0 → 100644
src/app/components/proposal-stats/proposal-stats.directive.js 0 → 100644
@@ -0,0 +1,54 @@ @@ -0,0 +1,54 @@
  1 +(function() {
  2 + 'use strict';
  3 +
  4 + angular
  5 + .module('dialoga')
  6 + .directive('proposalStats', proposalStats);
  7 +
  8 + /** @ngInject */
  9 + function proposalStats() {
  10 +
  11 + /** @ngInject */
  12 + function ProposalStatsController($log) {
  13 + $log.debug('ProposalStatsController');
  14 +
  15 + var vm = this;
  16 + vm.$log = $log;
  17 +
  18 + vm.init();
  19 + }
  20 +
  21 + ProposalStatsController.prototype.init = function () {
  22 + // initial values
  23 + var vm = this;
  24 +
  25 + vm.views = vm.views ? parseInt(vm.views) : 0;
  26 + vm.up = vm.up ? parseInt(vm.up) : 0;
  27 + vm.down = vm.down ? parseInt(vm.down) : 0;
  28 +
  29 + vm.loadData();
  30 + };
  31 +
  32 + ProposalStatsController.prototype.loadData = function () {
  33 + // async values
  34 + // var vm = this;
  35 + };
  36 +
  37 + var directive = {
  38 + restrict: 'E',
  39 + templateUrl: 'app/components/proposal-stats/proposal-stats.html',
  40 + scope: {
  41 + views: '&',
  42 + up: '&',
  43 + down: '&'
  44 + },
  45 + controller: ProposalStatsController,
  46 + controllerAs: 'vm',
  47 + bindToController: true
  48 + };
  49 +
  50 +
  51 + return directive;
  52 + }
  53 +
  54 +})();
src/app/components/proposal-stats/proposal-stats.html 0 → 100644
@@ -0,0 +1,14 @@ @@ -0,0 +1,14 @@
  1 +<ul class="list-inline">
  2 + <li>
  3 + <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
  4 + <span>{{vm.views}}</span>
  5 + </li>
  6 + <li>
  7 + <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
  8 + <span>{{vm.up}}</span>
  9 + </li>
  10 + <li>
  11 + <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
  12 + <span>{{vm.down}}</span>
  13 + </li>
  14 +</ul>
src/app/index.run.js
@@ -52,23 +52,6 @@ @@ -52,23 +52,6 @@
52 angular.element(bodyEl).toggleClass('contraste', !!state); 52 angular.element(bodyEl).toggleClass('contraste', !!state);
53 } 53 }
54 54
55 - $rootScope.skipToContent = function() {  
56 - angular.element('#content').attr('tabIndex', -1).focus();  
57 - };  
58 -  
59 - $rootScope.skipToNavigation = function() {  
60 - angular.element('#navigation').attr('tabIndex', -1).focus();  
61 - };  
62 -  
63 - $rootScope.skipToSearch = function() {  
64 - // angular.element('#search').attr('tabIndex', -1).focus();  
65 - angular.element('#articleQueryFilter').attr('tabIndex', -1).focus();  
66 - };  
67 -  
68 - $rootScope.skipToFooter = function() {  
69 - angular.element('#footer').attr('tabIndex', -1).focus();  
70 - };  
71 -  
72 $rootScope.actionContrast = function() { 55 $rootScope.actionContrast = function() {
73 // toggle contrast 56 // toggle contrast
74 contrast = !contrast; 57 contrast = !contrast;
@@ -76,24 +59,37 @@ @@ -76,24 +59,37 @@
76 adjustContrast(contrast); 59 adjustContrast(contrast);
77 }; 60 };
78 61
79 - $rootScope.focusMainContent = function($event) { 62 + $rootScope.focusOn = function(elId, $event) {
  63 + var el = angular.element(elId);
  64 + $rootScope.scrollTo(el, $event);
  65 + el.attr('tabIndex', -1).focus();
  66 + };
80 67
81 - // prevent skip link from redirecting  
82 - if ($event) { $event.preventDefault(); } 68 + $rootScope.focusMainContent = function($event) {
83 69
84 var mainContentArea = document.querySelector('[role="main"]'); 70 var mainContentArea = document.querySelector('[role="main"]');
85 71
86 if (mainContentArea) { 72 if (mainContentArea) {
87 $timeout(function() { 73 $timeout(function() {
88 - var $el = angular.element(mainContentArea);  
89 -  
90 - angular.element('body').animate({scrollTop: $el.offset().top}, 'slow');  
91 - }, 90); 74 + $rootScope.scrollTo(mainContentArea, $event);
  75 + }, 90); // force queue
92 } else { 76 } else {
93 $log.warn('role="main" not found.'); 77 $log.warn('role="main" not found.');
94 } 78 }
95 }; 79 };
96 80
  81 + $rootScope.scrollTo = function(target, $event) {
  82 +
  83 + // prevent skip link from redirecting
  84 + if ($event) { $event.preventDefault(); }
  85 +
  86 + if(angular.isString(target)){
  87 + target = angular.element(target);
  88 + }
  89 +
  90 + angular.element('body').animate({scrollTop: target.offset().top}, 'fast');
  91 + };
  92 +
97 $log.debug('[RUN] Accessibility end.'); 93 $log.debug('[RUN] Accessibility end.');
98 } 94 }
99 95
src/app/index.scss
@@ -140,16 +140,15 @@ body { @@ -140,16 +140,15 @@ body {
140 // Theme 140 // Theme
141 @each $category, $color in $categories { 141 @each $category, $color in $categories {
142 .#{$category} { 142 .#{$category} {
143 - .color-theme-fg {  
144 - color: $color;  
145 - }  
146 -  
147 - .color-theme-bg {  
148 - background-color: $color;  
149 - } 143 + .color-theme-fg { color: $color; }
  144 + .color-theme-bg { background-color: $color;}
150 } 145 }
151 } 146 }
152 147
  148 +$common-color: #5E739E;
  149 +.color-theme-common-fg {color: $common-color; }
  150 +.color-theme-common-bg {background-color: $common-color; }
  151 +
153 152
154 // Hack to fix "Barra do Brasil" 153 // Hack to fix "Barra do Brasil"
155 #barra-brasil .brasil-flag { 154 #barra-brasil .brasil-flag {
src/app/pages/footer/footer.html
@@ -3,7 +3,8 @@ @@ -3,7 +3,8 @@
3 <div class="row"> 3 <div class="row">
4 <div class="col-xs-12 text-center"> 4 <div class="col-xs-12 text-center">
5 <a id="termos-de-uso" ui-sref="termos-de-uso">Termos de uso</a> 5 <a id="termos-de-uso" ui-sref="termos-de-uso">Termos de uso</a>
6 - </div> 6 + <a href="#header" class="pull-right" ng-click="scrollTo('#header')">Voltar para o topo</a>
  7 + </div>
7 </div> 8 </div>
8 </div> 9 </div>
9 </div> 10 </div>
src/app/pages/header/header.html
1 -<header class="container"> 1 +<header id="header" class="container">
2 2
3 <div class="row"> 3 <div class="row">
4 <div class="col-sm-12"> 4 <div class="col-sm-12">
src/app/pages/programas/programa-content.controller.js
@@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
21 vm.init(); 21 vm.init();
22 } 22 }
23 23
24 - ProgramaContentPageController.prototype.init = function () { 24 + ProgramaContentPageController.prototype.init = function() {
25 var vm = this; 25 var vm = this;
26 26
27 var params = vm.$state.params; 27 var params = vm.$state.params;
@@ -33,18 +33,19 @@ @@ -33,18 +33,19 @@
33 vm.slug = params.slug; 33 vm.slug = params.slug;
34 34
35 vm.loadData(); 35 vm.loadData();
  36 + vm.attachListeners();
36 }; 37 };
37 38
38 - ProgramaContentPageController.prototype.loadData = function () { 39 + ProgramaContentPageController.prototype.loadData = function() {
39 var vm = this; 40 var vm = this;
40 41
41 - vm.ArticleService.getArticleBySlug(vm.slug, function(article){ 42 + vm.ArticleService.getArticleBySlug(vm.slug, function(article) {
42 vm.article = article; 43 vm.article = article;
43 vm.category = vm.article.categories[0]; 44 vm.category = vm.article.categories[0];
44 45
45 vm.$rootScope.contentTitle = vm.article.title; 46 vm.$rootScope.contentTitle = vm.article.title;
46 47
47 - if(!vm.banner){ 48 + if (!vm.banner) {
48 vm.banner = { 49 vm.banner = {
49 src: vm.$rootScope.basePath + vm.article.image.url, 50 src: vm.$rootScope.basePath + vm.article.image.url,
50 alt: 'Imagem de destaque do conteúdo' 51 alt: 'Imagem de destaque do conteúdo'
@@ -53,22 +54,30 @@ @@ -53,22 +54,30 @@
53 54
54 vm.loadContent(); 55 vm.loadContent();
55 56
56 - }, function (error) { 57 + }, function(error) {
57 vm.$log.error(error); 58 vm.$log.error(error);
58 vm.$log.info('Rollback to home page.'); 59 vm.$log.info('Rollback to home page.');
59 vm.$state.go('inicio', {}, {location: true}); 60 vm.$state.go('inicio', {}, {location: true});
60 }); 61 });
61 }; 62 };
62 63
63 - ProgramaContentPageController.prototype.loadContent = function () { 64 + ProgramaContentPageController.prototype.attachListeners = function() {
  65 + var vm = this;
  66 +
  67 + vm.$scope.$on('see-proposals', function() {
  68 + vm.$log.warn('TODO: handle see proposals / ranking');
  69 + });
  70 + };
  71 +
  72 + ProgramaContentPageController.prototype.loadContent = function() {
64 var vm = this; 73 var vm = this;
65 74
66 vm.loading = true; 75 vm.loading = true;
67 - if(!vm.article.body){  
68 - vm.ArticleService.getContentById(vm.article.id, function (data) { 76 + if (!vm.article.body) {
  77 + vm.ArticleService.getContentById(vm.article.id, function(data) {
69 vm.article.body = data.article.body; 78 vm.article.body = data.article.body;
70 vm.loading = false; 79 vm.loading = false;
71 - }, function (error) { 80 + }, function(error) {
72 vm.loading = false; 81 vm.loading = false;
73 vm.error = error; 82 vm.error = error;
74 }); 83 });
@@ -76,7 +85,7 @@ @@ -76,7 +85,7 @@
76 vm.loading = false; 85 vm.loading = false;
77 }; 86 };
78 87
79 - ProgramaContentPageController.prototype.makeProposal = function () { 88 + ProgramaContentPageController.prototype.makeProposal = function() {
80 var vm = this; 89 var vm = this;
81 90
82 vm.$log.warn('Not implemented yet: "makeProposal"'); 91 vm.$log.warn('Not implemented yet: "makeProposal"');
src/app/pages/programas/programa.html
1 -<div class="container page--conheca-o-programa">  
2 - <div ng-if="pageProgramaContent.article && pageProgramaContent.article.title">  
3 - <div ncy-breadcrumb></div>  
4 - </div> 1 +<div class="page--conheca-o-programa">
  2 + <section>
  3 + <div class="container">
  4 + <div ng-if="pageProgramaContent.article && pageProgramaContent.article.title">
  5 + <div ncy-breadcrumb></div>
  6 + </div>
  7 + </div>
  8 + </section>
5 9
6 - <div ng-if="!pageProgramaContent.article.body">  
7 - <div ng-if="!pageProgramaContent.error" class="alert alert-info" role="alert">Carregando detalhes sobre o progama...</div>  
8 - <div ng-if="pageProgramaContent.error" class="alert alert-warning" role="alert">{{pageProgramaContent}}</div>  
9 - </div> 10 + <section>
  11 + <div class="container">
  12 + <div ng-if="!pageProgramaContent.article.body">
  13 + <div ng-if="!pageProgramaContent.error" class="alert alert-info" role="alert">Carregando detalhes sobre o progama...</div>
  14 + <div ng-if="pageProgramaContent.error" class="alert alert-warning" role="alert">{{pageProgramaContent}}</div>
  15 + </div>
  16 + </div>
  17 + </section>
10 18
11 <div ng-if="pageProgramaContent.article.body" ng-class="pageProgramaContent.category.slug"> 19 <div ng-if="pageProgramaContent.article.body" ng-class="pageProgramaContent.category.slug">
12 - <article class="program-preview">  
13 - <div class="row">  
14 - <div class="col-md-12">  
15 - <h1 class="program-preview--title color-theme-fg">{{::pageProgramaContent.article.title}}</h1>  
16 - </div>  
17 - <div class="col-md-8">  
18 - <div class="program-preview--box">  
19 - <div class="program-preview--banner" ng-style="{'background-image':'url( {{::pageProgramaContent.banner.src}} )'}"></div>  
20 - <div class="program-preview--box--content-wrapper">  
21 - <div class="program-preview--icon icon-wrapper-rounded color-theme-bg" ng-class="pageProgramaContent.category.slug">  
22 - <span class="icon" ng-class="'icon-tema-' + pageProgramaContent.category.slug"></span>  
23 - </div>  
24 - <div class="program-preview--abstract color-theme-fg">  
25 - <h2>{{::stripHtml(pageProgramaContent.article.abstract)}}</h2>  
26 - </div>  
27 - <div class="program-preview--abstract-details">  
28 - <p>Lorem ipsum dolor sit amet, ea veniam mucius ocurreret vix, ius ex nisl vidisse partiendo. Blandit nominavi cum ei, paulo quaestio his ei, eum minim salutandi in. Civibus albucius in quo, et eam posse facilisis. Debet suavitate sea ut, his ei feugiat fastidii eleifend. Quo ex quando maiestatis voluptatum, mel te perpetua maiestatis, sit ceteros legendos deserunt ea. Enim dolores moderatius eu pro, ad quo ignota aliquid meliore.</p>  
29 - </div>  
30 - <div class="program-preview--share">  
31 - <ul class="list-inline">  
32 - <li>Compartilhe este programa:</li>  
33 - <li><social-share class="program-preview--share-directive"></social-share></li>  
34 - </ul>  
35 - </div>  
36 - <div class="program-preview--make-proposal">  
37 - <div class="row">  
38 - <div class="col-sm-6">  
39 - <div class="button--themed">  
40 - <button type="button" class="btn btn-block" ng-click="pageProgramaContent.makeProposal()">Faça uma proposta</button> 20 + <section>
  21 + <div class="container">
  22 + <article class="program-preview">
  23 + <div class="row">
  24 + <div class="col-md-12">
  25 + <h1 class="program-preview--title color-theme-fg">{{::pageProgramaContent.article.title}}</h1>
  26 + </div>
  27 + <div class="col-md-8">
  28 + <div class="program-preview--box">
  29 + <div class="program-preview--banner" ng-style="{'background-image':'url( {{::pageProgramaContent.banner.src}} )'}"></div>
  30 + <div class="program-preview--box--content-wrapper">
  31 + <div class="program-preview--icon icon-wrapper-rounded color-theme-bg" ng-class="pageProgramaContent.category.slug">
  32 + <span class="icon" ng-class="'icon-tema-' + pageProgramaContent.category.slug"></span>
  33 + </div>
  34 + <div class="program-preview--abstract color-theme-fg">
  35 + <h2>{{::stripHtml(pageProgramaContent.article.abstract)}}</h2>
  36 + </div>
  37 + <div class="program-preview--abstract-details">
  38 + <p>Lorem ipsum dolor sit amet, ea veniam mucius ocurreret vix, ius ex nisl vidisse partiendo. Blandit nominavi cum ei, paulo quaestio his ei, eum minim salutandi in. Civibus albucius in quo, et eam posse facilisis. Debet suavitate sea ut, his ei feugiat fastidii eleifend. Quo ex quando maiestatis voluptatum, mel te perpetua maiestatis, sit ceteros legendos deserunt ea. Enim dolores moderatius eu pro, ad quo ignota aliquid meliore.</p>
  39 + </div>
  40 + <div class="program-preview--share">
  41 + <ul class="list-inline">
  42 + <li>Compartilhe este programa:</li>
  43 + <li><social-share class="program-preview--share-directive"></social-share></li>
  44 + </ul>
  45 + </div>
  46 + <div class="program-preview--make-proposal">
  47 + <div class="row">
  48 + <div class="col-sm-6">
  49 + <div class="button--themed">
  50 + <button type="button" class="btn btn-block" ng-click="pageProgramaContent.makeProposal()">Faça uma proposta</button>
  51 + </div>
  52 + </div>
41 </div> 53 </div>
42 </div> 54 </div>
43 </div> 55 </div>
44 </div> 56 </div>
45 </div> 57 </div>
46 - </div>  
47 - </div>  
48 - <div class="col-md-4">  
49 - <div class="row">  
50 - <div class="col-xs-12">  
51 - <h3 class="color-theme-fg">Propostas mais votadas</h3>  
52 - <proposal-ranking limit="3" display="carousel"></proposal-ranking>  
53 - </div>  
54 - <div class="col-xs-12">  
55 - <h3 class="color-theme-fg">Propostas nesse programa</h3>  
56 - <proposal-related article="pageProgramaContent.article"></proposal-related> 58 + <div class="col-md-4">
  59 + <div class="row">
  60 + <div class="col-xs-12">
  61 + <h3 class="color-theme-fg">Propostas mais votadas</h3>
  62 + <proposal-ranking limit="'3'" display="'carousel'"></proposal-ranking>
  63 + </div>
  64 + <div class="col-xs-12">
  65 + <h3 class="color-theme-fg">Propostas nesse programa</h3>
  66 + <proposal-related article="pageProgramaContent.article"></proposal-related>
  67 + </div>
  68 + </div>
57 </div> 69 </div>
58 </div> 70 </div>
  71 + </article>
  72 + </div>
  73 + </section>
  74 +
  75 + <section class="proposal-ranking-section">
  76 + <div class="container">
  77 + <div class="proposal-ranking-section-header">
  78 + <h3 class="color-theme-fg">Resultados de propostas mais votadas</h3>
  79 + </div>
  80 + <div class="proposal-ranking-section-table">
  81 + <proposal-ranking limit="'5'" display="'list'"></proposal-ranking>
59 </div> 82 </div>
60 </div> 83 </div>
61 - </article> 84 + </section>
  85 +
62 <article class="program-content"> 86 <article class="program-content">
63 <div class="row"> 87 <div class="row">
64 <section ng-bind-html="pageProgramaContent.article.body"></section> 88 <section ng-bind-html="pageProgramaContent.article.body"></section>
65 </div> 89 </div>
66 </article> 90 </article>
67 - <aside class="program--aside"ng-class="pageProgramaContent.article.categories[0].slug">  
68 - <div class="col-sm-6" >  
69 - <div class="button--themed">  
70 - <button class="btn btn-block" ng-click="pageProgramaContent.goToPreview()">  
71 - <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>  
72 - Participe  
73 - </button>  
74 - </div>  
75 - </div>  
76 - <div class="col-sm-6">  
77 - <social-share></social-share>  
78 - </div>  
79 - </aside>  
80 </div> 91 </div>
81 </div> 92 </div>
src/app/pages/programas/programas.scss
@@ -11,7 +11,7 @@ @@ -11,7 +11,7 @@
11 11
12 .program-preview--box { 12 .program-preview--box {
13 position: relative; 13 position: relative;
14 - background: #eee; 14 + background: #f1f1f1;
15 } 15 }
16 16
17 .program-preview--banner { 17 .program-preview--banner {
@@ -55,4 +55,10 @@ @@ -55,4 +55,10 @@
55 h3 { 55 h3 {
56 margin-top: 0; 56 margin-top: 0;
57 } 57 }
  58 +
  59 +}
  60 +
  61 +.proposal-ranking-section {
  62 + background-color: #f1f1f1;
  63 + margin: 30px 0;
58 } 64 }