Merge branch 'refact-content' into merlin

Leonardo Merlin
2 parents 9d6d9600 b3f250f4
Showing 12 changed files with 160 additions and 120 deletions Show diff stats
src/app/components/auth/auth.service.js
src/app/components/breadcrumb/breadcrumb.scss
src/app/components/navbar/navbar.scss
src/app/components/proposal-ranking/proposal-ranking-list.scss
src/app/components/proposal-ranking/proposal-ranking.directive.js
src/app/components/proposal-ranking/proposal-ranking.html
src/app/components/proposal-stats/proposal-stats.directive.js
src/app/components/proposal-stats/proposal-stats.html
src/app/components/proposal-stats/proposal-stats.scss
src/app/index.scss
src/app/pages/programas/programa.html
src/app/pages/programas/programas.scss
@@ -110,26 +110,26 @@
     };
   }
  
-  /** @ngInject */
-  function AuthResolver($q, $rootScope, $state){
-    return {
-      resolve: function () {
-        var deferred = $q.defer();
-        var unwatch = $rootScope.$watch('currentUser', function (currentUser) {
-          if (angular.isDefined(currentUser)) {
-            if (currentUser) {
-              deferred.resolve(currentUser);
-            } else {
-              deferred.reject();
-              // TODO: too many responsibilities?
-              $state.go('login');
-            }
-            unwatch();
-          }
-        });
-        return deferred.promise;
-      }
-    };
-  }
+  // /** @ngInject */
+  // function AuthResolver($q, $rootScope, $state){
+  //   return {
+  //     resolve: function () {
+  //       var deferred = $q.defer();
+  //       var unwatch = $rootScope.$watch('currentUser', function (currentUser) {
+  //         if (angular.isDefined(currentUser)) {
+  //           if (currentUser) {
+  //             deferred.resolve(currentUser);
+  //           } else {
+  //             deferred.reject();
+  //             // TODO: too many responsibilities?
+  //             $state.go('login');
+  //           }
+  //           unwatch();
+  //         }
+  //       });
+  //       return deferred.promise;
+  //     }
+  //   };
+  // }
  
 })();
@@ -2,4 +2,9 @@
     .breadcrumb > li + li:before {
         content: '>';
     }
+
+    .contraste & .breadcrumb {
+        background-color: #000;
+        border: 1px solid #fff;
+    }
 }
@@ -23,4 +23,12 @@
     .navbar-toggle .icon-bar {
         background-color: #333;
     }
+
+    .contraste & {
+        .nav > li > a:hover,
+        .nav > li > a:focus {
+            color: #000;
+        }
+
+    }
 }
@@ -61,6 +61,22 @@
         }
     }
  
+    .abstract {
+        color: #393939;
+        font-size: 18px;
+    }
+
+    .row-actions {
+        padding-top: 20px;
+    }
+
+    .btn-rate {
+        padding: 0;
+        font-size: 20px;
+        font-weight: bold;
+        text-decoration: blink;
+    }
+
     // override bootstrap
     .table-striped > tbody > tr:nth-of-type(odd) {
         // impar
@@ -27,11 +27,12 @@
       var vm = this;
  
       vm.activeIndex = 1;
-      vm.attachedPopover = false;
       vm.loading = false;
  
-      if(!angular.isNumber(vm.limit)){
+      if(angular.isDefined(vm.limit) && angular.isString(vm.limit)){
         vm.limit = parseInt(vm.limit);
+      }else{
+        vm.limit = 3;
       }
  
       vm.loadData();
@@ -46,13 +47,45 @@
       // simulate delay
       vm.$timeout(function(){
         vm.loading = false;
+
+        // Fake Data
+        // vm.proposals = vm.ArticleService.getProposals();
+        vm.proposals = [{
+          id: 4159,
+          abstract: 'Ut odio unde porro in. Aut fuga magni adipisci. Recusandae ipsum distinctio omnis ut illum.',
+          effective_support: 0.1572052401746725,
+          hits: 4159,
+          votes_against: 3779,
+          votes_for: 1780
+        },{
+          id: 935,
+          abstract: 'Magni sunt ut molestiae. A porro et quod saepe placeat amet nihil. Aut ut id voluptatem doloribus quia.',
+          effective_support: 0.1572052401746725,
+          hits: 8602,
+          votes_against: 7005,
+          votes_for: 8728
+        },{
+          id: 1008,
+          abstract: 'Cum quas assumenda nihil delectus eos. Minus fugit velit voluptatem nisi nam esse ut id.',
+          effective_support: 0.1572052401746725,
+          hits: 9181,
+          votes_against: 612,
+          votes_for: 1786
+        }];
+
+        if(vm.display === 'list'){
+          // wait until DOM be created
+          vm.$timeout(function(){
+            attachPopover.call(vm);
+          }, 20);
+        }
       }, 2000);
     };
  
     ProposalRankingController.prototype.switchProposal = function (index) {
       var vm = this;
  
-      if(index > 0 && index <= limit) {
+      if(index > 0 && index <= vm.limit) {
         vm.activeIndex = index;
       }else{
         vm.$log.warn('[switchProposal] "index" not handled:', index);
@@ -66,28 +99,18 @@
       vm.$scope.$emit('see-proposals');
     };
  
-    ProposalRankingController.prototype.showPopover = function ($event) {
+    function attachPopover(){
       var vm = this;
  
-      $event.stopPropagation();
-
-      var target = $event.target;
-      var elPopover = angular.element(target);
-
-      if(!vm.attachedPopover){
-        elPopover.popover({
-          html: true,
-          placement: 'top',
-          animation: true,
-          title: 'Regra de posição das propostas',
-          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>'
-        });
-        vm.attachedPopover = true;
-      }
-
-
-      elPopover.popover('toggle');
-    };
+      vm.popover = angular.element(vm.$element.find('.btn-question'));
+      vm.popover.popover({
+        html: true,
+        placement: 'top',
+        animation: true,
+        title: 'Regra de posição das propostas',
+        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>'
+      });
+    }
  
     var directive = {
       restrict: 'E',
-<div class="proposal-ranking">
-
+<div class="proposal-ranking contraste-box">
   <div class="proposal-ranking--carousel" ng-if="vm.display==='carousel'">
     <div class="proposal-ranking--carousel-top color-theme-bg">
       <div class="proposal-ranking--carousel-position">
@@ -33,50 +32,42 @@
     <div class="table-responsive" ng-if="vm.loading">
       <div class="table-responsive">Carregando...</div>
     </div>
-    <div class="table-responsive" ng-if="!vm.loading">
+    <div class="table-responsive" ng-if="!vm.loading && vm.proposals">
       <table class="table table-striped">
         <thead>
           <tr>
             <th>
               Colocação
-              <button type="button" class="btn btn-link btn-question" ng-click="vm.showPopover($event)">?</button>
+              <button type="button" class="btn btn-link btn-question">?</button>
             </th>
             <th>123 PROPOSTAS</th>
           </tr>
         </thead>
         <tbody>
-          <tr>
+          <tr ng-repeat="proposal in vm.proposals">
+
             <td class="color-theme-fg">
-              <span class="position">1º</span>
+              <span class="position">{{::($index+1)}}º</span>
             </td>
             <td>
               <div class="row">
-                <div class="col-xs-12">Conteúdo</div>
-                <div class="col-md-6">
-                  <button type="button" class="btn btn-link">
+                <div class="col-xs-12">
+                  <span class="abstract">{{proposal.abstract}}</span>
+                </div>
+              </div>
+              <div class="row row-actions">
+                <div class="col-md-9">
+                  <button type="button" class="btn btn-link btn-rate color-theme-common-fg">
                     Avalie esta proposta
                     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
-                    <!-- <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> -->
                   </button>
                 </div>
-                <div class="col-md-6">
-                  <proposal-ranking views="'1'"></proposal-ranking>
+                <div class="col-md-3">
+                  <proposal-stats views="{{::proposal.hits}}" up="{{::proposal.votes_for}}" down="{{::proposal.votes_against}}"></proposal-stats>
                 </div>
               </div>
             </td>
           </tr>
-          <tr>
-            <td class="color-theme-fg">
-              <span class="position">2º</span>
-            </td>
-            <td>
-              <div class="row">
-                <div class="col-xs-12">Conteúdo</div>
-                <div class="col-md-6">Avalie esta proposta</div>
-                <div class="col-md-6">[STATS]</div>
-              </div>
-            </td>
-          </tr>
         </tbody>
       </table>
     </div>
@@ -8,46 +8,12 @@
   /** @ngInject */
   function proposalStats() {
  
-    /** @ngInject */
-    function ProposalStatsController($log) {
-      $log.debug('ProposalStatsController');
-
-      var vm = this;
-      vm.$log = $log;
-
-      vm.init();
-    }
-
-    ProposalStatsController.prototype.init = function () {
-      // initial values
-      var vm = this;
-
-      vm.views = vm.views ? parseInt(vm.views) : 0;
-      vm.up = vm.up ? parseInt(vm.up) : 0;
-      vm.down = vm.down ? parseInt(vm.down) : 0;
-
-      vm.loadData();
-    };
-
-    ProposalStatsController.prototype.loadData = function () {
-      // async values
-      // var vm = this;
-    };
-
     var directive = {
       restrict: 'E',
-      templateUrl: 'app/components/proposal-stats/proposal-stats.html',
-      scope: {
-        views: '&',
-        up: '&',
-        down: '&'
-      },
-      controller: ProposalStatsController,
-      controllerAs: 'vm',
-      bindToController: true
+      templateUrl: 'app/components/proposal-stats/proposal-stats.html'
+      // no scope. Use the parent scope.
     };
  
-
     return directive;
   }
  
-<ul class="list-inline">
-  <li>
-    <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
-    <span>{{vm.views}}</span>
-  </li>
-  <li>
-    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
-    <span>{{vm.up}}</span>
-  </li>
-  <li>
-    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
-    <span>{{vm.down}}</span>
-  </li>
-</ul>
+<div class="proposal-stats">
+  <ul class="list-inline">
+    <li class="proposal-stats-views">
+      <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
+      <span>{{proposal.hits}}</span>
+    </li>
+    <li class="proposal-stats-up">
+      <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+      <span>{{proposal.votes_for}}</span>
+    </li>
+    <li class="proposal-stats-down">
+      <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+      <span>{{proposal.votes_against}}</span>
+    </li>
+  </ul>
+</div>
@@ -0,0 +1,15 @@
+.proposal-stats {
+    font-weight: bold;
+
+    .list-inline {
+        margin: 10px 0;
+    }
+
+    li {
+        margin: 0 5px;
+    }
+
+    &-views {}
+    &-up .glyphicon {color: #4ac97a; }
+    &-down .glyphicon {color: #ef4a68; }
+}
@@ -142,6 +142,9 @@ body {
     .#{$category} {
         .color-theme-fg { color: $color; }
         .color-theme-bg { background-color: $color;}
+
+        .contraste & .color-theme-fg { color: #fff; }
+        .contraste & .color-theme-bg { background-color: #000;}
     }
 }
  
@@ -149,6 +152,13 @@ $common-color: #5E739E;
 .color-theme-common-fg {color: $common-color; }
 .color-theme-common-bg {background-color: $common-color; }
  
+// Contraste
+.contraste {
+    .color-theme-common-fg {color: #fff; }
+    .color-theme-common-bg {background-color: #000; }
+    .contraste-box {background-color: #000; border: 1px solid #fff;}
+}
+
  
 // Hack to fix "Barra do Brasil"
 #barra-brasil .brasil-flag {
@@ -25,7 +25,7 @@
               <h1 class="program-preview--title color-theme-fg">{{::pageProgramaContent.article.title}}</h1>
             </div>
             <div class="col-md-8">
-              <div class="program-preview--box">
+              <div class="program-preview--box contraste-box">
                 <div class="program-preview--banner" ng-style="{'background-image':'url( {{::pageProgramaContent.banner.src}} )'}"></div>
                 <div class="program-preview--box--content-wrapper">
                   <div class="program-preview--icon icon-wrapper-rounded color-theme-bg" ng-class="pageProgramaContent.category.slug">
@@ -11,7 +11,7 @@
  
     .program-preview--box {
         position: relative;
-        background: #f1f1f1;
+        background-color: #f1f1f1;
     }
  
     .program-preview--banner {
@@ -40,6 +40,10 @@
             left: -6px;
             transform: scale($icon-scale);
         }
+
+        .contraste & {
+            border: 1px solid #fff;
+        }
     }
  
     .program-preview--box--content-wrapper {
...	...	@@ -110,26 +110,26 @@
110	110	};
111	111	}
112	112
113		- /** @ngInject */
114		- function AuthResolver($q, $rootScope, $state){
115		- return {
116		- resolve: function () {
117		- var deferred = $q.defer();
118		- var unwatch = $rootScope.$watch('currentUser', function (currentUser) {
119		- if (angular.isDefined(currentUser)) {
120		- if (currentUser) {
121		- deferred.resolve(currentUser);
122		- } else {
123		- deferred.reject();
124		- // TODO: too many responsibilities?
125		- $state.go('login');
126		- }
127		- unwatch();
128		- }
129		- });
130		- return deferred.promise;
131		- }
132		- };
133		- }
	113	+ // /** @ngInject */
	114	+ // function AuthResolver($q, $rootScope, $state){
	115	+ // return {
	116	+ // resolve: function () {
	117	+ // var deferred = $q.defer();
	118	+ // var unwatch = $rootScope.$watch('currentUser', function (currentUser) {
	119	+ // if (angular.isDefined(currentUser)) {
	120	+ // if (currentUser) {
	121	+ // deferred.resolve(currentUser);
	122	+ // } else {
	123	+ // deferred.reject();
	124	+ // // TODO: too many responsibilities?
	125	+ // $state.go('login');
	126	+ // }
	127	+ // unwatch();
	128	+ // }
	129	+ // });
	130	+ // return deferred.promise;
	131	+ // }
	132	+ // };
	133	+ // }
134	134
135	135	})();
...	...
...	...	@@ -2,4 +2,9 @@
2	2	.breadcrumb > li + li:before {
3	3	content: '>';
4	4	}
	5	+
	6	+ .contraste & .breadcrumb {
	7	+ background-color: #000;
	8	+ border: 1px solid #fff;
	9	+ }
5	10	}
...	...
...	...	@@ -23,4 +23,12 @@
23	23	.navbar-toggle .icon-bar {
24	24	background-color: #333;
25	25	}
	26	+
	27	+ .contraste & {
	28	+ .nav > li > a:hover,
	29	+ .nav > li > a:focus {
	30	+ color: #000;
	31	+ }
	32	+
	33	+ }
26	34	}
...	...
...	...	@@ -61,6 +61,22 @@
61	61	}
62	62	}
63	63
	64	+ .abstract {
	65	+ color: #393939;
	66	+ font-size: 18px;
	67	+ }
	68	+
	69	+ .row-actions {
	70	+ padding-top: 20px;
	71	+ }
	72	+
	73	+ .btn-rate {
	74	+ padding: 0;
	75	+ font-size: 20px;
	76	+ font-weight: bold;
	77	+ text-decoration: blink;
	78	+ }
	79	+
64	80	// override bootstrap
65	81	.table-striped > tbody > tr:nth-of-type(odd) {
66	82	// impar
...	...
...	...	@@ -27,11 +27,12 @@
27	27	var vm = this;
28	28
29	29	vm.activeIndex = 1;
30		- vm.attachedPopover = false;
31	30	vm.loading = false;
32	31
33		- if(!angular.isNumber(vm.limit)){
	32	+ if(angular.isDefined(vm.limit) && angular.isString(vm.limit)){
34	33	vm.limit = parseInt(vm.limit);
	34	+ }else{
	35	+ vm.limit = 3;
35	36	}
36	37
37	38	vm.loadData();
...	...	@@ -46,13 +47,45 @@
46	47	// simulate delay
47	48	vm.$timeout(function(){
48	49	vm.loading = false;
	50	+
	51	+ // Fake Data
	52	+ // vm.proposals = vm.ArticleService.getProposals();
	53	+ vm.proposals = [{
	54	+ id: 4159,
	55	+ abstract: 'Ut odio unde porro in. Aut fuga magni adipisci. Recusandae ipsum distinctio omnis ut illum.',
	56	+ effective_support: 0.1572052401746725,
	57	+ hits: 4159,
	58	+ votes_against: 3779,
	59	+ votes_for: 1780
	60	+ },{
	61	+ id: 935,
	62	+ abstract: 'Magni sunt ut molestiae. A porro et quod saepe placeat amet nihil. Aut ut id voluptatem doloribus quia.',
	63	+ effective_support: 0.1572052401746725,
	64	+ hits: 8602,
	65	+ votes_against: 7005,
	66	+ votes_for: 8728
	67	+ },{
	68	+ id: 1008,
	69	+ abstract: 'Cum quas assumenda nihil delectus eos. Minus fugit velit voluptatem nisi nam esse ut id.',
	70	+ effective_support: 0.1572052401746725,
	71	+ hits: 9181,
	72	+ votes_against: 612,
	73	+ votes_for: 1786
	74	+ }];
	75	+
	76	+ if(vm.display === 'list'){
	77	+ // wait until DOM be created
	78	+ vm.$timeout(function(){
	79	+ attachPopover.call(vm);
	80	+ }, 20);
	81	+ }
49	82	}, 2000);
50	83	};
51	84
52	85	ProposalRankingController.prototype.switchProposal = function (index) {
53	86	var vm = this;
54	87
55		- if(index > 0 && index <= limit) {
	88	+ if(index > 0 && index <= vm.limit) {
56	89	vm.activeIndex = index;
57	90	}else{
58	91	vm.$log.warn('[switchProposal] "index" not handled:', index);
...	...	@@ -66,28 +99,18 @@
66	99	vm.$scope.$emit('see-proposals');
67	100	};
68	101
69		- ProposalRankingController.prototype.showPopover = function ($event) {
	102	+ function attachPopover(){
70	103	var vm = this;
71	104
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		- };
	105	+ vm.popover = angular.element(vm.$element.find('.btn-question'));
	106	+ vm.popover.popover({
	107	+ html: true,
	108	+ placement: 'top',
	109	+ animation: true,
	110	+ title: 'Regra de posição das propostas',
	111	+ 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>'
	112	+ });
	113	+ }
91	114
92	115	var directive = {
93	116	restrict: 'E',
...	...
1		-<div class="proposal-ranking">
2		-
	1	+<div class="proposal-ranking contraste-box">
3	2	<div class="proposal-ranking--carousel" ng-if="vm.display==='carousel'">
4	3	<div class="proposal-ranking--carousel-top color-theme-bg">
5	4	<div class="proposal-ranking--carousel-position">
...	...	@@ -33,50 +32,42 @@
33	32	<div class="table-responsive" ng-if="vm.loading">
34	33	<div class="table-responsive">Carregando...</div>
35	34	</div>
36		- <div class="table-responsive" ng-if="!vm.loading">
	35	+ <div class="table-responsive" ng-if="!vm.loading && vm.proposals">
37	36	<table class="table table-striped">
38	37	<thead>
39	38	<tr>
40	39	<th>
41	40	Colocação
42		- <button type="button" class="btn btn-link btn-question" ng-click="vm.showPopover($event)">?</button>
	41	+ <button type="button" class="btn btn-link btn-question">?</button>
43	42	</th>
44	43	<th>123 PROPOSTAS</th>
45	44	</tr>
46	45	</thead>
47	46	<tbody>
48		- <tr>
	47	+ <tr ng-repeat="proposal in vm.proposals">
	48	+
49	49	<td class="color-theme-fg">
50		- <span class="position">1º</span>
	50	+ <span class="position">{{::($index+1)}}º</span>
51	51	</td>
52	52	<td>
53	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">
	54	+ <div class="col-xs-12">
	55	+ <span class="abstract">{{proposal.abstract}}</span>
	56	+ </div>
	57	+ </div>
	58	+ <div class="row row-actions">
	59	+ <div class="col-md-9">
	60	+ <button type="button" class="btn btn-link btn-rate color-theme-common-fg">
57	61	Avalie esta proposta
58	62	<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
59		- <!-- <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> -->
60	63	</button>
61	64	</div>
62		- <div class="col-md-6">
63		- <proposal-ranking views="'1'"></proposal-ranking>
	65	+ <div class="col-md-3">
	66	+ <proposal-stats views="{{::proposal.hits}}" up="{{::proposal.votes_for}}" down="{{::proposal.votes_against}}"></proposal-stats>
64	67	</div>
65	68	</div>
66	69	</td>
67	70	</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	71	</tbody>
81	72	</table>
82	73	</div>
...	...
...	...	@@ -8,46 +8,12 @@
8	8	/** @ngInject */
9	9	function proposalStats() {
10	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	11	var directive = {
38	12	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
	13	+ templateUrl: 'app/components/proposal-stats/proposal-stats.html'
	14	+ // no scope. Use the parent scope.
48	15	};
49	16
50		-
51	17	return directive;
52	18	}
53	19
...	...
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>
	1	+<div class="proposal-stats">
	2	+ <ul class="list-inline">
	3	+ <li class="proposal-stats-views">
	4	+ <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
	5	+ <span>{{proposal.hits}}</span>
	6	+ </li>
	7	+ <li class="proposal-stats-up">
	8	+ <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
	9	+ <span>{{proposal.votes_for}}</span>
	10	+ </li>
	11	+ <li class="proposal-stats-down">
	12	+ <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
	13	+ <span>{{proposal.votes_against}}</span>
	14	+ </li>
	15	+ </ul>
	16	+</div>
...	...
...	...	@@ -0,0 +1,15 @@
	1	+.proposal-stats {
	2	+ font-weight: bold;
	3	+
	4	+ .list-inline {
	5	+ margin: 10px 0;
	6	+ }
	7	+
	8	+ li {
	9	+ margin: 0 5px;
	10	+ }
	11	+
	12	+ &-views {}
	13	+ &-up .glyphicon {color: #4ac97a; }
	14	+ &-down .glyphicon {color: #ef4a68; }
	15	+}
...	...
...	...	@@ -142,6 +142,9 @@ body {
142	142	.#{$category} {
143	143	.color-theme-fg { color: $color; }
144	144	.color-theme-bg { background-color: $color;}
	145	+
	146	+ .contraste & .color-theme-fg { color: #fff; }
	147	+ .contraste & .color-theme-bg { background-color: #000;}
145	148	}
146	149	}
147	150
...	...	@@ -149,6 +152,13 @@ $common-color: #5E739E;
149	152	.color-theme-common-fg {color: $common-color; }
150	153	.color-theme-common-bg {background-color: $common-color; }
151	154
	155	+// Contraste
	156	+.contraste {
	157	+ .color-theme-common-fg {color: #fff; }
	158	+ .color-theme-common-bg {background-color: #000; }
	159	+ .contraste-box {background-color: #000; border: 1px solid #fff;}
	160	+}
	161	+
152	162
153	163	// Hack to fix "Barra do Brasil"
154	164	#barra-brasil .brasil-flag {
...	...