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 {
	@@ -2,4 +2,9 @@		@@ -2,4 +2,9 @@
2	.breadcrumb > li + li:before {	2	.breadcrumb > li + li:before {
3	content: '>';	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,4 +23,12 @@
23	.navbar-toggle .icon-bar {	23	.navbar-toggle .icon-bar {
24	background-color: #333;	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,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	// override bootstrap	80	// override bootstrap
65	.table-striped > tbody > tr:nth-of-type(odd) {	81	.table-striped > tbody > tr:nth-of-type(odd) {
66	// impar	82	// impar
	@@ -8,46 +8,12 @@		@@ -8,46 +8,12 @@
8	/** @ngInject */	8	/** @ngInject */
9	function proposalStats() {	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	var directive = {	11	var directive = {
38	restrict: 'E',	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	return directive;	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 @@		@@ -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	+}
	@@ -25,7 +25,7 @@		@@ -25,7 +25,7 @@
25	<h1 class="program-preview--title color-theme-fg">{{::pageProgramaContent.article.title}}</h1>	25	<h1 class="program-preview--title color-theme-fg">{{::pageProgramaContent.article.title}}</h1>
26	</div>	26	</div>
27	<div class="col-md-8">	27	<div class="col-md-8">
28	- <div class="program-preview--box">	28	+ <div class="program-preview--box contraste-box">
29	<div class="program-preview--banner" ng-style="{'background-image':'url( {{::pageProgramaContent.banner.src}} )'}"></div>	29	<div class="program-preview--banner" ng-style="{'background-image':'url( {{::pageProgramaContent.banner.src}} )'}"></div>
30	<div class="program-preview--box--content-wrapper">	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">	31	<div class="program-preview--icon icon-wrapper-rounded color-theme-bg" ng-class="pageProgramaContent.category.slug">