Download as
Browse Code »

Commit 2b6de365c8e682cc3391cddd1dcf4f8f39090801

Authored by Leonardo Merlin
1 parent 569edc6f
Exists in master and in 6 other branches feature-captcha, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

Add 'respondido' icon and update 'programa' page.

Showing 7 changed files with 143 additions and 78 deletions   Show diff stats
src/app/index.run.js
  Diff comments   View file @2b6de36
@@ -73,43 +73,44 @@ @@ -73,43 +73,44 @@
73 73
74 // 2. focus on input search at home. 74 // 2. focus on input search at home.
75 promise.then(function(){ 75 promise.then(function(){
76 -  
77 - findElAsync('input[type="search"]:visible', function ($el) {  
78 - // scroll  
79 - angular.element('html,body').animate({scrollTop: $el.offset().top}, 'fast');  
80 - // focus  
81 - $el.focus();  
82 - }); 76 + $rootScope.findElAsyncAndFocus('input[type="search"]:visible');
83 }); 77 });
84 } 78 }
  79 + };
85 80
86 - // use jQuery and $interval to find element async.  
87 - function findElAsync(query, cb, delay, max_exec) {  
88 - delay = delay || 200;  
89 - max_exec = max_exec || 20;  
90 - var count_exec = 0;  
91 -  
92 - var stop = null;  
93 - stop = $interval(function() {  
94 - var $el = angular.element(query);  
95 -  
96 - if ($el && $el.length > 0) {  
97 - cb($el);  
98 - }else {  
99 - $log.debug('[findElAsync] element not found.');  
100 - } 81 + $rootScope.findElAsyncAndFocus = function (query, delay, max_exec) {
  82 + return $rootScope.findElAsync(query, function($el){
  83 + // scroll
  84 + angular.element('html,body').animate({scrollTop: $el.offset().top}, 'fast');
  85 + // focus
  86 + $el.focus();
  87 + }, delay, max_exec);
  88 + };
101 89
102 - count_exec++; 90 + $rootScope.findElAsync = function (query, cb, delay, max_exec) {
  91 + // use jQuery and $interval to find element async.
  92 + delay = delay || 200;
  93 + max_exec = max_exec || 20;
  94 + var count_exec = 0;
  95 +
  96 + var stop = null;
  97 + stop = $interval(function() {
  98 + var $el = angular.element(query);
  99 +
  100 + if ($el && $el.length > 0) {
  101 + cb($el);
  102 + }else {
  103 + $log.debug('[findElAsync] element not found.');
  104 + }
103 105
104 - if (count_exec >= max_exec){  
105 - $interval.cancel(stop);  
106 - stop = undefined;  
107 - } 106 + count_exec++;
108 107
109 - }, delay);  
110 - } 108 + if (count_exec >= max_exec){
  109 + $interval.cancel(stop);
  110 + stop = undefined;
  111 + }
111 112
112 - $log.debug('TODO: focusOnSearch'); 113 + }, delay);
113 }; 114 };
114 115
115 $rootScope.scrollTo = function(target, $event) { 116 $rootScope.scrollTo = function(target, $event) {
src/app/index.scss
  Diff comments   View file @2b6de36
@@ -280,6 +280,7 @@ body { @@ -280,6 +280,7 @@ body {
280 .color-theme-bg { background-color: $color;} 280 .color-theme-bg { background-color: $color;}
281 .color-theme-bg-complementar-1 { background-color: map-get($categories-complementary-1, $category);} 281 .color-theme-bg-complementar-1 { background-color: map-get($categories-complementary-1, $category);}
282 .color-theme-bg-complementar-2 { background-color: map-get($categories-complementary-2, $category);} 282 .color-theme-bg-complementar-2 { background-color: map-get($categories-complementary-2, $category);}
  283 + .img-mask--background { background-color: fade-out($color, 0.5); }
283 284
284 .contraste & .color-theme-fg { color: #fff; } 285 .contraste & .color-theme-fg { color: #fff; }
285 .contraste & .color-theme-bg { background-color: #000;} 286 .contraste & .color-theme-bg { background-color: #000;}
src/app/pages/programas/programa.controller.js
  Diff comments   View file @2b6de36
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 .controller('ProgramaPageController', ProgramaPageController); 6 .controller('ProgramaPageController', ProgramaPageController);
7 7
8 /** @ngInject */ 8 /** @ngInject */
9 - function ProgramaPageController(DialogaService, PATH, VOTE_OPTIONS, PROPOSAL_STATUS, $state, $location, $scope, $rootScope, $element, $timeout, $sce, $log) { 9 + function ProgramaPageController(DialogaService, PATH, VOTE_OPTIONS, PROPOSAL_STATUS, $state, $location, $scope, $rootScope, $element, $sce, $log) {
10 var vm = this; 10 var vm = this;
11 11
12 vm.DialogaService = DialogaService; 12 vm.DialogaService = DialogaService;
@@ -18,7 +18,6 @@ @@ -18,7 +18,6 @@
18 vm.$scope = $scope; 18 vm.$scope = $scope;
19 vm.$rootScope = $rootScope; 19 vm.$rootScope = $rootScope;
20 vm.$element = $element; 20 vm.$element = $element;
21 - vm.$timeout = $timeout;  
22 vm.$sce = $sce; 21 vm.$sce = $sce;
23 vm.$log = $log; 22 vm.$log = $log;
24 23
@@ -56,9 +55,10 @@ @@ -56,9 +55,10 @@
56 var slug = vm.$state.params.slug; 55 var slug = vm.$state.params.slug;
57 56
58 if (!slug) { 57 if (!slug) {
59 - vm.$log.error('slug not defined.'); 58 + vm.$log.warn('slug not defined.');
60 vm.$log.info('Rollback to home page.'); 59 vm.$log.info('Rollback to home page.');
61 - vm.$state.go('inicio', {}, {location: true}); 60 + vm.$state.go('inicio', {}, {location: 'replace'});
  61 + return;
62 } 62 }
63 63
64 vm.DialogaService.getProgramBySlug(slug, function(article) { 64 vm.DialogaService.getProgramBySlug(slug, function(article) {
@@ -78,11 +78,10 @@ @@ -78,11 +78,10 @@
78 }; 78 };
79 } 79 }
80 80
81 - if(vm.article.body && !vm.article.bodyTrusted){ 81 + if (vm.article.body && !vm.article.bodyTrusted) {
82 vm.article.bodyTrusted = vm.$sce.trustAsHtml(vm.article.body); 82 vm.article.bodyTrusted = vm.$sce.trustAsHtml(vm.article.body);
83 } 83 }
84 84
85 -  
86 vm.loadingTopProposals = true; 85 vm.loadingTopProposals = true;
87 vm.DialogaService.getProposalsByTopicId(vm.article.id, { 86 vm.DialogaService.getProposalsByTopicId(vm.article.id, {
88 'limit': 5 87 'limit': 5
@@ -93,18 +92,31 @@ @@ -93,18 +92,31 @@
93 vm.proposalsTopFive = vm.proposals.slice(0, 5); 92 vm.proposalsTopFive = vm.proposals.slice(0, 5);
94 vm.proposalsTopRated = vm.proposals.slice(0, 3); 93 vm.proposalsTopRated = vm.proposals.slice(0, 3);
95 vm.loadingTopProposals = false; 94 vm.loadingTopProposals = false;
  95 +
  96 + if (vm.article.archived) {
  97 +
  98 + // show 'respostas e compromissos',
  99 + // ONLY IF the proposal is below or equal 3th position.
  100 + if (vm.search.proposal_id) {
  101 + // TODO:
  102 + vm.$log.error('Not implemented yet.');
  103 + }
  104 + }
96 }, function(error) { 105 }, function(error) {
97 vm.$log.error(error); 106 vm.$log.error(error);
98 vm.loadingTopProposals = false; 107 vm.loadingTopProposals = false;
99 }); 108 });
100 109
101 -  
102 - vm.loadingProposalBox = true;  
103 - if (vm.search.proposal_id) {  
104 - vm.loadProposalById(vm.search.proposal_id);  
105 - }else {  
106 - // random proposal  
107 - vm.loadRandomProposal(); 110 + // load content of 'proposal-box'
  111 + if (!vm.article.archived) {
  112 +
  113 + if (vm.search.proposal_id) {
  114 + // load the proposal and set focus on proposal-box
  115 + vm.loadProposalById(vm.search.proposal_id);
  116 + }else {
  117 + // load a random proposal at proposal-box
  118 + vm.loadRandomProposal();
  119 + }
108 } 120 }
109 121
110 vm.loading = false; 122 vm.loading = false;
@@ -137,7 +149,7 @@ @@ -137,7 +149,7 @@
137 149
138 vm.error = error; 150 vm.error = error;
139 151
140 - if (vm.error.code === 400){ 152 + if (vm.error.code === 400) {
141 // Bad Request 153 // Bad Request
142 vm.error.message = ''; 154 vm.error.message = '';
143 vm.error.message += 'Não foi possível enviar a proposta.<br>'; 155 vm.error.message += 'Não foi possível enviar a proposta.<br>';
@@ -154,6 +166,7 @@ @@ -154,6 +166,7 @@
154 ProgramaPageController.prototype.loadProposalById = function(proposal_id) { 166 ProgramaPageController.prototype.loadProposalById = function(proposal_id) {
155 var vm = this; 167 var vm = this;
156 168
  169 + vm.loadingProposalBox = true;
157 vm.DialogaService.getProposalById(proposal_id, { 170 vm.DialogaService.getProposalById(proposal_id, {
158 'limit': '1' 171 'limit': '1'
159 }, vm._handleSuccessOnGetProposal.bind(vm), vm._handleErrorOnGetProposal.bind(vm)); 172 }, vm._handleSuccessOnGetProposal.bind(vm), vm._handleErrorOnGetProposal.bind(vm));
@@ -162,6 +175,7 @@ @@ -162,6 +175,7 @@
162 ProgramaPageController.prototype.loadRandomProposal = function() { 175 ProgramaPageController.prototype.loadRandomProposal = function() {
163 var vm = this; 176 var vm = this;
164 177
  178 + vm.loadingProposalBox = true;
165 vm.DialogaService.getProposalsByTopicId(vm.article.id, { 179 vm.DialogaService.getProposalsByTopicId(vm.article.id, {
166 'order': 'random()', 180 'order': 'random()',
167 'limit': '1', 181 'limit': '1',
@@ -181,12 +195,7 @@ @@ -181,12 +195,7 @@
181 195
182 // scroll to focused proposal 196 // scroll to focused proposal
183 if (vm.search.proposal_id) { 197 if (vm.search.proposal_id) {
184 - vm.$timeout(function() {  
185 - var target = angular.element('.focused-proposal');  
186 - if (target && target.length > 0) {  
187 - angular.element('html,body').animate({scrollTop: target.offset().top}, 'fast');  
188 - }  
189 - }, 300); 198 + vm.$rootScope.findElAsyncAndFocus('.focused-proposal');
190 } 199 }
191 }; 200 };
192 201
@@ -204,7 +213,7 @@ @@ -204,7 +213,7 @@
204 ProgramaPageController.prototype.vote = function(proposal_id, value) { 213 ProgramaPageController.prototype.vote = function(proposal_id, value) {
205 var vm = this; 214 var vm = this;
206 215
207 - if(vm.article.archived === true){ 216 + if (vm.article.archived) {
208 vm.$log.info('Article archived. Abort.'); 217 vm.$log.info('Article archived. Abort.');
209 return; 218 return;
210 } 219 }
@@ -226,7 +235,7 @@ @@ -226,7 +235,7 @@
226 235
227 response.error = true; 236 response.error = true;
228 vm.$scope.$broadcast('proposal-box:vote-response', response); 237 vm.$scope.$broadcast('proposal-box:vote-response', response);
229 - }).finally(function(response){ 238 + }).finally(function(response) {
230 vm.$log.debug('voteProposal finally', response); 239 vm.$log.debug('voteProposal finally', response);
231 240
232 }); 241 });
@@ -245,7 +254,7 @@ @@ -245,7 +254,7 @@
245 ProgramaPageController.prototype.showProposalForm = function() { 254 ProgramaPageController.prototype.showProposalForm = function() {
246 var vm = this; 255 var vm = this;
247 256
248 - if(vm.article.archived === true){ 257 + if (vm.article.archived) {
249 vm.$log.info('Article archived. Abort.'); 258 vm.$log.info('Article archived. Abort.');
250 return; 259 return;
251 } 260 }
@@ -279,14 +288,14 @@ @@ -279,14 +288,14 @@
279 ProgramaPageController.prototype.toggleContentVisibility = function() { 288 ProgramaPageController.prototype.toggleContentVisibility = function() {
280 var $sectionContent = angular.element('.section-content'); 289 var $sectionContent = angular.element('.section-content');
281 290
282 - if(!$sectionContent || $sectionContent.length === 0){ 291 + if (!$sectionContent || $sectionContent.length === 0) {
283 vm.$log.warn('".section-content" not found.'); 292 vm.$log.warn('".section-content" not found.');
284 return; 293 return;
285 } 294 }
286 295
287 - if($sectionContent.is(':visible')){ 296 + if ($sectionContent.is(':visible')) {
288 $sectionContent.slideUp(); 297 $sectionContent.slideUp();
289 - }else{ 298 + }else {
290 $sectionContent.slideDown(); 299 $sectionContent.slideDown();
291 angular.element('html,body').animate({scrollTop: $sectionContent.offset().top}, 'fast'); 300 angular.element('html,body').animate({scrollTop: $sectionContent.offset().top}, 'fast');
292 } 301 }
src/app/pages/programas/programa.html
  Diff comments   View file @2b6de36
@@ -28,7 +28,15 @@ @@ -28,7 +28,15 @@
28 <!-- Preview > coluna da esquerda --> 28 <!-- Preview > coluna da esquerda -->
29 <div class="col-md-8"> 29 <div class="col-md-8">
30 <div class="program-preview--box contraste-box"> 30 <div class="program-preview--box contraste-box">
31 - <div class="program-preview--banner" ng-style="{'background-image':'url( {{::pagePrograma.banner.src}} )'}"></div> 31 + <div class="program-preview--banner" ng-style="{'background-image':'url( {{::pagePrograma.banner.src}} )'}">
  32 + <div ng-if="pagePrograma.article.archived" class="img-mask--background">
  33 + <div class="icon icon-programa-respondido">
  34 + <div class="icon-circle">
  35 + <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
  36 + </div>
  37 + </div>
  38 + </div>
  39 + </div>
32 <div class="program-preview--box--content-wrapper"> 40 <div class="program-preview--box--content-wrapper">
33 <div class="program-preview--icon icon-wrapper-rounded color-theme-bg" ng-class="pagePrograma.category.slug"> 41 <div class="program-preview--icon icon-wrapper-rounded color-theme-bg" ng-class="pagePrograma.category.slug">
34 <span class="icon" ng-class="'icon-tema-' + pagePrograma.category.slug"></span> 42 <span class="icon" ng-class="'icon-tema-' + pagePrograma.category.slug"></span>
@@ -60,7 +68,7 @@ @@ -60,7 +68,7 @@
60 </div> 68 </div>
61 <!-- Preview > coluna da direita --> 69 <!-- Preview > coluna da direita -->
62 <div class="col-md-4"> 70 <div class="col-md-4">
63 - <div class="row"> 71 + <div class="row" ng-if="!pagePrograma.article.archived">
64 <!-- Top Proposals --> 72 <!-- Top Proposals -->
65 <div> 73 <div>
66 <!-- Loading Top Proposals --> 74 <!-- Loading Top Proposals -->
@@ -76,7 +84,7 @@ @@ -76,7 +84,7 @@
76 </div> 84 </div>
77 </div> 85 </div>
78 <!-- Proposal Box --> 86 <!-- Proposal Box -->
79 - <div ng-if="!pagePrograma.article.archived"> 87 + <div>
80 <div class="col-xs-12" ng-if="!pagePrograma.loadingProposalBox && pagePrograma.randomProposal" ng-class="{'focused-proposal': !!pagePrograma.search.proposal_id}"> 88 <div class="col-xs-12" ng-if="!pagePrograma.loadingProposalBox && pagePrograma.randomProposal" ng-class="{'focused-proposal': !!pagePrograma.search.proposal_id}">
81 <h3 class="color-theme-fg">Apoie outras propostas</h3> 89 <h3 class="color-theme-fg">Apoie outras propostas</h3>
82 <proposal-box proposal="pagePrograma.randomProposal" topic="pagePrograma.article" category="pagePrograma.category" show-vote="true" focus="{{pagePrograma.search.proposal_id}}" do-vote="pagePrograma.vote(proposal_id, value)" archived="pagePrograma.article.archived"></proposal-box> 90 <proposal-box proposal="pagePrograma.randomProposal" topic="pagePrograma.article" category="pagePrograma.category" show-vote="true" focus="{{pagePrograma.search.proposal_id}}" do-vote="pagePrograma.vote(proposal_id, value)" archived="pagePrograma.article.archived"></proposal-box>
@@ -101,6 +109,13 @@ @@ -101,6 +109,13 @@
101 </div> 109 </div>
102 </div> 110 </div>
103 </div> 111 </div>
  112 + <div class="row" ng-if="pagePrograma.article.archived">
  113 + <!-- Archived buttons nav -->
  114 + <div class="col-sm-12">
  115 + <div class="teste" ng-repeat="proposal in pagePrograma.proposalsTopRated">
  116 + </div>
  117 + </div>
  118 + </div>
104 </div> 119 </div>
105 </article> 120 </article>
106 </div> 121 </div>
@@ -181,10 +196,8 @@ @@ -181,10 +196,8 @@
181 <div class="row"> 196 <div class="row">
182 <div class="col-sm-12"> 197 <div class="col-sm-12">
183 <h2> 198 <h2>
184 - <div class="program-banner--icon-container" aria-hidden="true">  
185 - <div class="program-banner--icon icon-wrapper-rounded color-bg-white" ng-class="pagePrograma.category.slug">  
186 - <span class="icon" ng-class="'icon-discussion'"></span>  
187 - </div> 199 + <div class="program-banner--icon" aria-hidden="true">
  200 + <div class="icon icon-respostas"></div>
188 </div> 201 </div>
189 <span class="archived-banner--title1">As propostas para este programa já foram</span> 202 <span class="archived-banner--title1">As propostas para este programa já foram</span>
190 <br/> 203 <br/>
@@ -210,7 +223,19 @@ @@ -210,7 +223,19 @@
210 <div class="sub-section" ng-repeat="proposal in pagePrograma.proposalsTopRated"> 223 <div class="sub-section" ng-repeat="proposal in pagePrograma.proposalsTopRated">
211 <div class="container"> 224 <div class="container">
212 <div class="row"> 225 <div class="row">
213 - <div class="col-sm-12"> 226 + <div class="col-sm-4 col-md-3">
  227 + <div class="img-mask--container" ng-style="{'background-image':'url( {{::pagePrograma.banner.src}} )'}">
  228 + <div class="img-mask--background">
  229 + <div class="icon icon-programa-respondido">
  230 + <div class="icon-circle">
  231 + <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
  232 + </div>
  233 + </div>
  234 + </div>
  235 + </div>
  236 + </div>
  237 + <div class="col-sm-8 col-md-9">
  238 + <br>
214 <h3 class="color-theme-fg">{{($index+1)}}a proposta mais votada:</h3> 239 <h3 class="color-theme-fg">{{($index+1)}}a proposta mais votada:</h3>
215 <p>{{::proposal.abstract}}</p> 240 <p>{{::proposal.abstract}}</p>
216 241
@@ -222,6 +247,7 @@ @@ -222,6 +247,7 @@
222 </div> 247 </div>
223 </button> 248 </button>
224 </div> 249 </div>
  250 + <br>
225 </div> 251 </div>
226 </div> 252 </div>
227 </div> 253 </div>
src/app/pages/programas/programas.scss
  Diff comments   View file @2b6de36
@@ -182,6 +182,47 @@ @@ -182,6 +182,47 @@
182 .proposal-extended-section-header { 182 .proposal-extended-section-header {
183 position: relative; 183 position: relative;
184 } 184 }
  185 +
  186 + .img-mask--container {
  187 + position: relative;
  188 + background-position: center;
  189 + background-size: cover;
  190 + }
  191 +
  192 + .img-mask--background {
  193 + width: 100%;
  194 + height: 100%;
  195 + text-align: center;
  196 +
  197 + .icon-circle{
  198 + position: absolute;
  199 + left: 50%;
  200 + margin-left: -15px;
  201 + bottom: -10px;
  202 + width: 31px;
  203 + height: 31px;
  204 + }
  205 +
  206 + .glyphicon {
  207 + position: relative;
  208 + top: -2px;
  209 + color: #fff;
  210 + background-color: #3FC869;
  211 + padding: 6px 5px 5px 6px;
  212 + border-radius: 100%;
  213 + }
  214 +
  215 + .icon-programa-respondido {
  216 + transform: scale(0.8);
  217 + }
  218 + }
  219 +
  220 + .program-preview--banner .icon-programa-respondido {
  221 + position: relative;
  222 + top: 50%;
  223 + margin-top: -100px;
  224 + transform: scale(1);
  225 + }
185 226
186 #section-archived-banner { 227 #section-archived-banner {
187 position: relative; 228 position: relative;
@@ -189,6 +230,7 @@ @@ -189,6 +230,7 @@
189 color: #fff; 230 color: #fff;
190 231
191 margin-top: 30px; 232 margin-top: 30px;
  233 + margin-bottom: 20px;
192 234
193 h2 { 235 h2 {
194 font-size: 28px; 236 font-size: 28px;
@@ -208,19 +250,6 @@ @@ -208,19 +250,6 @@
208 .program-banner--icon { 250 .program-banner--icon {
209 float: left; 251 float: left;
210 margin-right: 20px; 252 margin-right: 20px;
211 - width: 85px;  
212 - height: 85px;  
213 - overflow: hidden;  
214 -  
215 - .icon-discussion {  
216 - position: relative;  
217 - top: -3px;  
218 - left: -3px;  
219 - display: block;  
220 - width: 85px;  
221 - height: 85px;  
222 - background: red;  
223 - }  
224 } 253 }
225 254
226 .archived-banner--title2 { 255 .archived-banner--title2 {
@@ -234,7 +263,6 @@ @@ -234,7 +263,6 @@
234 font-weight: bold; 263 font-weight: bold;
235 } 264 }
236 .sub-section{ 265 .sub-section{
237 - padding: 20px 0;  
238 &:nth-child(odd) { 266 &:nth-child(odd) {
239 background-color: #f1f1f1; 267 background-color: #f1f1f1;
240 } 268 }
src/assets/images/icons/programa-respondido.png 0 → 100644
View file @2b6de36

4.29 KB
src/assets/images/icons/respostas.png 0 → 100644
View file @2b6de36

2.02 KB