Small improvements to sync with new design / layout

Leonardo Merlin
1 parent 77f90fa2
Showing 9 changed files with 190 additions and 46 deletions Show diff stats
src/app/components/a11y-bar/a11y-bar.html
src/app/components/a11y-bar/a11y-bar.scss
src/app/components/auth-user/auth-user.html
src/app/components/auth-user/auth-user.scss
src/app/components/proposal-ranking/proposal-ranking-carousel.scss
src/app/components/proposal-ranking/proposal-ranking.directive.js
src/app/components/proposal-ranking/proposal-ranking.html
src/app/components/proposal-related/proposal-related.directive.js
src/app/components/proposal-related/proposal-related.html
@@ -4,27 +4,27 @@
       <div class="col-sm-6">
         <ul class="skip-links list-inline list-unstyled">
           <li>
-            <a accesskey="1" href="#content" id="skip-to-content" ng-click="focusOn('#content', $event)">
+            <a class="color-theme-common-fg" accesskey="1" href="#content" id="skip-to-content" ng-click="focusOn('#content', $event)">
               Ir para o conteúdo
-              <span>1</span>
+              <span class="color-theme-common-bg">1</span>
             </a>
           </li>
           <li>
-            <a accesskey="2" href="#navigation" id="skip-to-navigation" ng-click="focusOn('#navigation', $event)">
+            <a class="color-theme-common-fg" accesskey="2" href="#navigation" id="skip-to-navigation" ng-click="focusOn('#navigation', $event)">
               Ir para o menu
-              <span>2</span>
+              <span class="color-theme-common-bg">2</span>
             </a>
           </li>
           <li>
-            <a accesskey="3" href="#search" id="skip-to-search" ng-click="focusOn('#search', $event)">
+            <a class="color-theme-common-fg" accesskey="3" href="#search" id="skip-to-search" ng-click="focusOn('#search', $event)">
               Ir para a busca
-              <span>3</span>
+              <span class="color-theme-common-bg">3</span>
             </a>
           </li>
           <li>
-            <a accesskey="4" href="#footer" id="skip-to-footer" ng-click="focusOn('#footer', $event)">
+            <a class="color-theme-common-fg" accesskey="4" href="#footer" id="skip-to-footer" ng-click="focusOn('#footer', $event)">
               Ir para o rodapé
-              <span>4</span>
+              <span class="color-theme-common-bg">4</span>
             </a>
           </li>
         </ul>
@@ -33,13 +33,13 @@
       <div class="col-sm-6">
         <ul class="action-links list-inline list-unstyled pull-right">
           <li>
-            <a id="siteaction-accessibility" href="#" title="Acessibilidade" accesskey="5" ng-click="actionAccessibility()">Acessibilidade</a>
+            <a id="siteaction-accessibility" class="color-theme-common-fg" href="#" title="Acessibilidade" accesskey="5" ng-click="actionAccessibility()">Acessibilidade</a>
           </li>
           <li>
-            <a id="siteaction-contrast" href="#" title="Alto Contraste" accesskey="6" ng-click="actionContrast()">Alto Contraste</a>
+            <a id="siteaction-contrast" class="color-theme-common-fg" href="#" title="Alto Contraste" accesskey="6" ng-click="actionContrast()">Alto Contraste</a>
           </li>
           <li>
-            <a id="siteaction-sitemap" ui-sref="mapa-do-site" title="Mapa do Site" accesskey="7" ng-click="actionSitemap()">Mapa do Site</a>
+            <a id="siteaction-sitemap" class="color-theme-common-fg" ui-sref="mapa-do-site" title="Mapa do Site" accesskey="7" ng-click="actionSitemap()">Mapa do Site</a>
           </li>
         </ul>
       </div>
@@ -2,7 +2,12 @@
     font-size: 12px;
     padding: 5px 0;
     span {
-        background-color: #eee;
-        padding: 0 3px;
+        color: #fff;
+        padding: 0 5px;
+    }
+
+    .action-links {
+        text-transform: uppercase;
+        border-bottom: 1px dotted #262626;
     }
 }
@@ -8,7 +8,7 @@
   <div ng-if="!vm.currentUser">
     <button type="button" class="btn btn-link pull-right" ui-sref="entrar">
       <!-- <span class="icon icon-user" aria-hidden="true"></span> -->
-      <span class="glyphicon glyphicon-user"></span>
+      <!-- <span class="glyphicon glyphicon-user"></span> -->
       Entrar
     </button>
   </div>
 .auth-user {
-
+    button {
+        font-weight: bold;
+    }
 }
@@ -4,26 +4,29 @@
  
 .proposal-ranking--carousel {
     background-color: #f1f1f1;
+    border-radius: 5px;
+    overflow: hidden;
  
     &-top {
         position: relative;
         color: #fff;
         font-weight: bold;
-        font-size: 18px;
-        padding: 5px 10px;
+        font-size: 25px;
+        padding: 20px 15px;
  
  
         &-triggers {
             position: absolute;
-            right: 5px;
-            top: 5px;
+            right: 15px;
+            top: 20px;
  
-            li {
+            button {
                 border: 1px solid #fff;
                 border-radius: 100%;
                 width: 15px;
                 height: 15px;
                 margin-right: 5px;
+                background-color: transparent;
  
                 cursor: pointer;
  
@@ -37,6 +40,12 @@
     &-middle {
         position: relative;
         padding: 25px 30px;
+        cursor: pointer;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
  
         .content {
             position: relative;
@@ -65,6 +74,10 @@
         z-index: 10;
  
         &-icon {
+            position: absolute;
+            top: 10px;
+            right: 15px;
+
             .glyphicon {
                 position: relative;
                 top: -2px;
@@ -26,7 +26,7 @@
       // initial values
       var vm = this;
  
-      vm.activeIndex = 1;
+      vm.activeIndex = 0;
       vm.loading = false;
  
       if(angular.isDefined(vm.limit) && angular.isString(vm.limit)){
@@ -59,14 +59,14 @@
           votes_for: 1780
         },{
           id: 935,
-          abstract: 'Magni sunt ut molestiae. A porro et quod saepe placeat amet nihil. Aut ut id voluptatem doloribus quia.',
+          abstract: 'Aut fuga magni adipisci. Recusandae ipsum distinctio omnis ut illum. Magni sunt ut molestiae.',
           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.',
+          abstract: 'Recusandae ipsum distinctio omnis ut illum. Magni sunt ut molestiae. Aut fuga magni adipisci.',
           effective_support: 0.1572052401746725,
           hits: 9181,
           votes_against: 612,
@@ -82,10 +82,22 @@
       }, 2000);
     };
  
+    ProposalRankingController.prototype.swipeLeft = function () {
+      var vm = this;
+
+      vm.activeIndex = (vm.activeIndex < vm.limit - 1) ? ++vm.activeIndex : 0;
+    };
+
+    ProposalRankingController.prototype.swipeRight = function () {
+      var vm = this;
+
+      vm.activeIndex = (vm.activeIndex > 0) ? --vm.activeIndex : vm.limit - 1;
+    };
+
     ProposalRankingController.prototype.switchProposal = function (index) {
       var vm = this;
  
-      if(index > 0 && index <= vm.limit) {
+      if(index >= 0 && index < vm.limit) {
         vm.activeIndex = index;
       }else{
         vm.$log.warn('[switchProposal] "index" not handled:', index);
 <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">
-        <span>1º</span>
-        <span>Lugar</span>
-      </div>
-      <div class="proposal-ranking--carousel-top-triggers">
-        <ul class="list-inline">
-          <li ng-class="{'active': vm.activeIndex === 1}" ng-click="vm.switchProposal(1)"></li>
-          <li ng-class="{'active': vm.activeIndex === 2}" ng-click="vm.switchProposal(2)"></li>
-          <li ng-class="{'active': vm.activeIndex === 3}" ng-click="vm.switchProposal(3)"></li>
-        </ul>
-      </div>
+  <div class="proposal-ranking--carousel" ng-if="vm.display === 'carousel'">
+    <div ng-if="!vm.proposals">
+      Carregando...
     </div>
-    <div class="proposal-ranking--carousel-middle">
-      <div class="content">
-        <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>
+    <div ng-if="vm.proposals">
+      <div class="proposal-ranking--carousel-top color-theme-bg">
+        <div class="proposal-ranking--carousel-position" ng-repeat="proposal in vm.proposals">
+          <span ng-show="vm.activeIndex === $index">{{::($index+1)}}º</span>
+          <span ng-show="vm.activeIndex === $index">Lugar</span>
+        </div>
+        <div class="proposal-ranking--carousel-top-triggers" ng-if="vm.proposals">
+          <ul class="list-inline">
+            <li class="item-dot" ng-repeat="proposal in vm.proposals">
+              <button type="button" ng-class="{'active': vm.activeIndex === $index}" ng-click="vm.switchProposal($index)" title="Apersentar proposta na posição {{$index}}"></button>
+            </li>
+          </ul>
+        </div>
       </div>
-      <div class="proposal-ranking--carousel-middle-watermark"><span>1º</span></div>
-    </div>
-    <div class="proposal-ranking--carousel-bottom color-theme-common-bg" ng-click="vm.showProposals()">
-      <div class="proposal-ranking--carousel-bottom-icon">
-        <span>Veja as propostas mais vortadas</span>
-        <span class="glyphicon glyphicon-chevron-down pull-right color-theme-common-fg"></span>
+      <div class="proposal-ranking--carousel-middle" ng-swipe-left="vm.swipeLeft()" ng-swipe-right="vm.swipeRight()">
+        <div ng-repeat="proposal in vm.proposals" class="animation-swipe">
+          <div class="content">
+            <div ng-show="vm.activeIndex === $index">{{::proposal.abstract}}</div>
+          </div>
+          <div class="proposal-ranking--carousel-middle-watermark" ng-show="vm.activeIndex === $index">
+            <span>{{::($index+1)}}º</span>
+          </div>
+        </div>
+      </div>
+      <div class="proposal-ranking--carousel-bottom color-theme-common-bg" ng-click="vm.showProposals()">
+        <div>Veja as propostas mais vortadas</div>
+        <div class="proposal-ranking--carousel-bottom-icon">
+          <span class="glyphicon glyphicon-chevron-down pull-right color-theme-common-fg"></span>
+        </div>
       </div>
     </div>
   </div>
@@ -0,0 +1,100 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('dialoga')
+    .directive('proposalRelated', proposalRelated);
+
+  /** @ngInject */
+  function proposalRelated() {
+
+    /** @ngInject */
+    function ProposalRelatedController(ArticleService, $scope, $element, $timeout, $log) {
+      $log.debug('ProposalRelatedController');
+
+      var vm = this;
+      vm.ArticleService = ArticleService;
+      vm.$scope = $scope;
+      vm.$element = $element;
+      vm.$timeout = $timeout;
+      vm.$log = $log;
+
+      vm.init();
+    }
+
+    ProposalRelatedController.prototype.init = function () {
+      // initial values
+      var vm = this;
+
+      vm.activeIndex = 1;
+      vm.loading = false;
+
+      if(angular.isDefined(vm.limit) && angular.isString(vm.limit)){
+        vm.limit = parseInt(vm.limit);
+      }else{
+        vm.limit = 3;
+      }
+
+      vm.loadData();
+    };
+
+    ProposalRelatedController.prototype.loadData = function () {
+      // async values
+      var vm = this;
+
+      vm.loading = true;
+
+      // 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);
+    };
+
+    var directive = {
+      restrict: 'E',
+      templateUrl: 'app/components/proposal-related/proposal-related.html',
+      scope: {
+        article: '='
+      },
+      controller: ProposalRelatedController,
+      controllerAs: 'vm',
+      bindToController: true
+    };
+
+
+    return directive;
+  }
+
+})();
@@ -0,0 +1,3 @@
+<div class="proposal-related">
+  Proposta
+</div>
...	...	@@ -4,27 +4,27 @@
4	4	<div class="col-sm-6">
5	5	<ul class="skip-links list-inline list-unstyled">
6	6	<li>
7		- <a accesskey="1" href="#content" id="skip-to-content" ng-click="focusOn('#content', $event)">
	7	+ <a class="color-theme-common-fg" accesskey="1" href="#content" id="skip-to-content" ng-click="focusOn('#content', $event)">
8	8	Ir para o conteúdo
9		- <span>1</span>
	9	+ <span class="color-theme-common-bg">1</span>
10	10	</a>
11	11	</li>
12	12	<li>
13		- <a accesskey="2" href="#navigation" id="skip-to-navigation" ng-click="focusOn('#navigation', $event)">
	13	+ <a class="color-theme-common-fg" accesskey="2" href="#navigation" id="skip-to-navigation" ng-click="focusOn('#navigation', $event)">
14	14	Ir para o menu
15		- <span>2</span>
	15	+ <span class="color-theme-common-bg">2</span>
16	16	</a>
17	17	</li>
18	18	<li>
19		- <a accesskey="3" href="#search" id="skip-to-search" ng-click="focusOn('#search', $event)">
	19	+ <a class="color-theme-common-fg" accesskey="3" href="#search" id="skip-to-search" ng-click="focusOn('#search', $event)">
20	20	Ir para a busca
21		- <span>3</span>
	21	+ <span class="color-theme-common-bg">3</span>
22	22	</a>
23	23	</li>
24	24	<li>
25		- <a accesskey="4" href="#footer" id="skip-to-footer" ng-click="focusOn('#footer', $event)">
	25	+ <a class="color-theme-common-fg" accesskey="4" href="#footer" id="skip-to-footer" ng-click="focusOn('#footer', $event)">
26	26	Ir para o rodapé
27		- <span>4</span>
	27	+ <span class="color-theme-common-bg">4</span>
28	28	</a>
29	29	</li>
30	30	</ul>
...	...	@@ -33,13 +33,13 @@
33	33	<div class="col-sm-6">
34	34	<ul class="action-links list-inline list-unstyled pull-right">
35	35	<li>
36		- <a id="siteaction-accessibility" href="#" title="Acessibilidade" accesskey="5" ng-click="actionAccessibility()">Acessibilidade</a>
	36	+ <a id="siteaction-accessibility" class="color-theme-common-fg" href="#" title="Acessibilidade" accesskey="5" ng-click="actionAccessibility()">Acessibilidade</a>
37	37	</li>
38	38	<li>
39		- <a id="siteaction-contrast" href="#" title="Alto Contraste" accesskey="6" ng-click="actionContrast()">Alto Contraste</a>
	39	+ <a id="siteaction-contrast" class="color-theme-common-fg" href="#" title="Alto Contraste" accesskey="6" ng-click="actionContrast()">Alto Contraste</a>
40	40	</li>
41	41	<li>
42		- <a id="siteaction-sitemap" ui-sref="mapa-do-site" title="Mapa do Site" accesskey="7" ng-click="actionSitemap()">Mapa do Site</a>
	42	+ <a id="siteaction-sitemap" class="color-theme-common-fg" ui-sref="mapa-do-site" title="Mapa do Site" accesskey="7" ng-click="actionSitemap()">Mapa do Site</a>
43	43	</li>
44	44	</ul>
45	45	</div>
...	...
...	...	@@ -2,7 +2,12 @@
2	2	font-size: 12px;
3	3	padding: 5px 0;
4	4	span {
5		- background-color: #eee;
6		- padding: 0 3px;
	5	+ color: #fff;
	6	+ padding: 0 5px;
	7	+ }
	8	+
	9	+ .action-links {
	10	+ text-transform: uppercase;
	11	+ border-bottom: 1px dotted #262626;
7	12	}
8	13	}
...	...
...	...	@@ -8,7 +8,7 @@
8	8	<div ng-if="!vm.currentUser">
9	9	<button type="button" class="btn btn-link pull-right" ui-sref="entrar">
10	10	<!-- <span class="icon icon-user" aria-hidden="true"></span> -->
11		- <span class="glyphicon glyphicon-user"></span>
	11	+ <!-- <span class="glyphicon glyphicon-user"></span> -->
12	12	Entrar
13	13	</button>
14	14	</div>
...	...
1	1	.auth-user {
2		-
	2	+ button {
	3	+ font-weight: bold;
	4	+ }
3	5	}
...	...
...	...	@@ -4,26 +4,29 @@
4	4
5	5	.proposal-ranking--carousel {
6	6	background-color: #f1f1f1;
	7	+ border-radius: 5px;
	8	+ overflow: hidden;
7	9
8	10	&-top {
9	11	position: relative;
10	12	color: #fff;
11	13	font-weight: bold;
12		- font-size: 18px;
13		- padding: 5px 10px;
	14	+ font-size: 25px;
	15	+ padding: 20px 15px;
14	16
15	17
16	18	&-triggers {
17	19	position: absolute;
18		- right: 5px;
19		- top: 5px;
	20	+ right: 15px;
	21	+ top: 20px;
20	22
21		- li {
	23	+ button {
22	24	border: 1px solid #fff;
23	25	border-radius: 100%;
24	26	width: 15px;
25	27	height: 15px;
26	28	margin-right: 5px;
	29	+ background-color: transparent;
27	30
28	31	cursor: pointer;
29	32
...	...	@@ -37,6 +40,12 @@
37	40	&-middle {
38	41	position: relative;
39	42	padding: 25px 30px;
	43	+ cursor: pointer;
	44	+ -webkit-user-select: none;
	45	+ -khtml-user-select: none;
	46	+ -moz-user-select: none;
	47	+ -ms-user-select: none;
	48	+ user-select: none;
40	49
41	50	.content {
42	51	position: relative;
...	...	@@ -65,6 +74,10 @@
65	74	z-index: 10;
66	75
67	76	&-icon {
	77	+ position: absolute;
	78	+ top: 10px;
	79	+ right: 15px;
	80	+
68	81	.glyphicon {
69	82	position: relative;
70	83	top: -2px;
...	...
...	...	@@ -26,7 +26,7 @@
26	26	// initial values
27	27	var vm = this;
28	28
29		- vm.activeIndex = 1;
	29	+ vm.activeIndex = 0;
30	30	vm.loading = false;
31	31
32	32	if(angular.isDefined(vm.limit) && angular.isString(vm.limit)){
...	...	@@ -59,14 +59,14 @@
59	59	votes_for: 1780
60	60	},{
61	61	id: 935,
62		- abstract: 'Magni sunt ut molestiae. A porro et quod saepe placeat amet nihil. Aut ut id voluptatem doloribus quia.',
	62	+ abstract: 'Aut fuga magni adipisci. Recusandae ipsum distinctio omnis ut illum. Magni sunt ut molestiae.',
63	63	effective_support: 0.1572052401746725,
64	64	hits: 8602,
65	65	votes_against: 7005,
66	66	votes_for: 8728
67	67	},{
68	68	id: 1008,
69		- abstract: 'Cum quas assumenda nihil delectus eos. Minus fugit velit voluptatem nisi nam esse ut id.',
	69	+ abstract: 'Recusandae ipsum distinctio omnis ut illum. Magni sunt ut molestiae. Aut fuga magni adipisci.',
70	70	effective_support: 0.1572052401746725,
71	71	hits: 9181,
72	72	votes_against: 612,
...	...	@@ -82,10 +82,22 @@
82	82	}, 2000);
83	83	};
84	84
	85	+ ProposalRankingController.prototype.swipeLeft = function () {
	86	+ var vm = this;
	87	+
	88	+ vm.activeIndex = (vm.activeIndex < vm.limit - 1) ? ++vm.activeIndex : 0;
	89	+ };
	90	+
	91	+ ProposalRankingController.prototype.swipeRight = function () {
	92	+ var vm = this;
	93	+
	94	+ vm.activeIndex = (vm.activeIndex > 0) ? --vm.activeIndex : vm.limit - 1;
	95	+ };
	96	+
85	97	ProposalRankingController.prototype.switchProposal = function (index) {
86	98	var vm = this;
87	99
88		- if(index > 0 && index <= vm.limit) {
	100	+ if(index >= 0 && index < vm.limit) {
89	101	vm.activeIndex = index;
90	102	}else{
91	103	vm.$log.warn('[switchProposal] "index" not handled:', index);
...	...
1	1	<div class="proposal-ranking contraste-box">
2		- <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-position">
5		- <span>1º</span>
6		- <span>Lugar</span>
7		- </div>
8		- <div class="proposal-ranking--carousel-top-triggers">
9		- <ul class="list-inline">
10		- <li ng-class="{'active': vm.activeIndex === 1}" ng-click="vm.switchProposal(1)"></li>
11		- <li ng-class="{'active': vm.activeIndex === 2}" ng-click="vm.switchProposal(2)"></li>
12		- <li ng-class="{'active': vm.activeIndex === 3}" ng-click="vm.switchProposal(3)"></li>
13		- </ul>
14		- </div>
	2	+ <div class="proposal-ranking--carousel" ng-if="vm.display === 'carousel'">
	3	+ <div ng-if="!vm.proposals">
	4	+ Carregando...
15	5	</div>
16		- <div class="proposal-ranking--carousel-middle">
17		- <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>
	6	+ <div ng-if="vm.proposals">
	7	+ <div class="proposal-ranking--carousel-top color-theme-bg">
	8	+ <div class="proposal-ranking--carousel-position" ng-repeat="proposal in vm.proposals">
	9	+ <span ng-show="vm.activeIndex === $index">{{::($index+1)}}º</span>
	10	+ <span ng-show="vm.activeIndex === $index">Lugar</span>
	11	+ </div>
	12	+ <div class="proposal-ranking--carousel-top-triggers" ng-if="vm.proposals">
	13	+ <ul class="list-inline">
	14	+ <li class="item-dot" ng-repeat="proposal in vm.proposals">
	15	+ <button type="button" ng-class="{'active': vm.activeIndex === $index}" ng-click="vm.switchProposal($index)" title="Apersentar proposta na posição {{$index}}"></button>
	16	+ </li>
	17	+ </ul>
	18	+ </div>
19	19	</div>
20		- <div class="proposal-ranking--carousel-middle-watermark"><span>1º</span></div>
21		- </div>
22		- <div class="proposal-ranking--carousel-bottom color-theme-common-bg" ng-click="vm.showProposals()">
23		- <div class="proposal-ranking--carousel-bottom-icon">
24		- <span>Veja as propostas mais vortadas</span>
25		- <span class="glyphicon glyphicon-chevron-down pull-right color-theme-common-fg"></span>
	20	+ <div class="proposal-ranking--carousel-middle" ng-swipe-left="vm.swipeLeft()" ng-swipe-right="vm.swipeRight()">
	21	+ <div ng-repeat="proposal in vm.proposals" class="animation-swipe">
	22	+ <div class="content">
	23	+ <div ng-show="vm.activeIndex === $index">{{::proposal.abstract}}</div>
	24	+ </div>
	25	+ <div class="proposal-ranking--carousel-middle-watermark" ng-show="vm.activeIndex === $index">
	26	+ <span>{{::($index+1)}}º</span>
	27	+ </div>
	28	+ </div>
	29	+ </div>
	30	+ <div class="proposal-ranking--carousel-bottom color-theme-common-bg" ng-click="vm.showProposals()">
	31	+ <div>Veja as propostas mais vortadas</div>
	32	+ <div class="proposal-ranking--carousel-bottom-icon">
	33	+ <span class="glyphicon glyphicon-chevron-down pull-right color-theme-common-fg"></span>
	34	+ </div>
26	35	</div>
27	36	</div>
28	37	</div>
...	...
...	...	@@ -0,0 +1,100 @@
	1	+(function() {
	2	+ 'use strict';
	3	+
	4	+ angular
	5	+ .module('dialoga')
	6	+ .directive('proposalRelated', proposalRelated);
	7	+
	8	+ /** @ngInject */
	9	+ function proposalRelated() {
	10	+
	11	+ /** @ngInject */
	12	+ function ProposalRelatedController(ArticleService, $scope, $element, $timeout, $log) {
	13	+ $log.debug('ProposalRelatedController');
	14	+
	15	+ var vm = this;
	16	+ vm.ArticleService = ArticleService;
	17	+ vm.$scope = $scope;
	18	+ vm.$element = $element;
	19	+ vm.$timeout = $timeout;
	20	+ vm.$log = $log;
	21	+
	22	+ vm.init();
	23	+ }
	24	+
	25	+ ProposalRelatedController.prototype.init = function () {
	26	+ // initial values
	27	+ var vm = this;
	28	+
	29	+ vm.activeIndex = 1;
	30	+ vm.loading = false;
	31	+
	32	+ if(angular.isDefined(vm.limit) && angular.isString(vm.limit)){
	33	+ vm.limit = parseInt(vm.limit);
	34	+ }else{
	35	+ vm.limit = 3;
	36	+ }
	37	+
	38	+ vm.loadData();
	39	+ };
	40	+
	41	+ ProposalRelatedController.prototype.loadData = function () {
	42	+ // async values
	43	+ var vm = this;
	44	+
	45	+ vm.loading = true;
	46	+
	47	+ // simulate delay
	48	+ vm.$timeout(function(){
	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	+ }
	82	+ }, 2000);
	83	+ };
	84	+
	85	+ var directive = {
	86	+ restrict: 'E',
	87	+ templateUrl: 'app/components/proposal-related/proposal-related.html',
	88	+ scope: {
	89	+ article: '='
	90	+ },
	91	+ controller: ProposalRelatedController,
	92	+ controllerAs: 'vm',
	93	+ bindToController: true
	94	+ };
	95	+
	96	+
	97	+ return directive;
	98	+ }
	99	+
	100	+})();
...	...
...	...	@@ -0,0 +1,3 @@
	1	+<div class="proposal-related">
	2	+ Proposta
	3	+</div>
...	...