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 73  
74 74 // 2. focus on input search at home.
75 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 116 $rootScope.scrollTo = function(target, $event) {
... ...
src/app/index.scss
  Diff comments   View file @2b6de36
... ... @@ -280,6 +280,7 @@ body {
280 280 .color-theme-bg { background-color: $color;}
281 281 .color-theme-bg-complementar-1 { background-color: map-get($categories-complementary-1, $category);}
282 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 285 .contraste & .color-theme-fg { color: #fff; }
285 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 6 .controller('ProgramaPageController', ProgramaPageController);
7 7  
8 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 10 var vm = this;
11 11  
12 12 vm.DialogaService = DialogaService;
... ... @@ -18,7 +18,6 @@
18 18 vm.$scope = $scope;
19 19 vm.$rootScope = $rootScope;
20 20 vm.$element = $element;
21   - vm.$timeout = $timeout;
22 21 vm.$sce = $sce;
23 22 vm.$log = $log;
24 23  
... ... @@ -56,9 +55,10 @@
56 55 var slug = vm.$state.params.slug;
57 56  
58 57 if (!slug) {
59   - vm.$log.error('slug not defined.');
  58 + vm.$log.warn('slug not defined.');
60 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 64 vm.DialogaService.getProgramBySlug(slug, function(article) {
... ... @@ -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 82 vm.article.bodyTrusted = vm.$sce.trustAsHtml(vm.article.body);
83 83 }
84 84  
85   -
86 85 vm.loadingTopProposals = true;
87 86 vm.DialogaService.getProposalsByTopicId(vm.article.id, {
88 87 'limit': 5
... ... @@ -93,18 +92,31 @@
93 92 vm.proposalsTopFive = vm.proposals.slice(0, 5);
94 93 vm.proposalsTopRated = vm.proposals.slice(0, 3);
95 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 105 }, function(error) {
97 106 vm.$log.error(error);
98 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 122 vm.loading = false;
... ... @@ -137,7 +149,7 @@
137 149  
138 150 vm.error = error;
139 151  
140   - if (vm.error.code === 400){
  152 + if (vm.error.code === 400) {
141 153 // Bad Request
142 154 vm.error.message = '';
143 155 vm.error.message += 'Não foi possível enviar a proposta.<br>';
... ... @@ -154,6 +166,7 @@
154 166 ProgramaPageController.prototype.loadProposalById = function(proposal_id) {
155 167 var vm = this;
156 168  
  169 + vm.loadingProposalBox = true;
157 170 vm.DialogaService.getProposalById(proposal_id, {
158 171 'limit': '1'
159 172 }, vm._handleSuccessOnGetProposal.bind(vm), vm._handleErrorOnGetProposal.bind(vm));
... ... @@ -162,6 +175,7 @@
162 175 ProgramaPageController.prototype.loadRandomProposal = function() {
163 176 var vm = this;
164 177  
  178 + vm.loadingProposalBox = true;
165 179 vm.DialogaService.getProposalsByTopicId(vm.article.id, {
166 180 'order': 'random()',
167 181 'limit': '1',
... ... @@ -181,12 +195,7 @@
181 195  
182 196 // scroll to focused proposal
183 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 213 ProgramaPageController.prototype.vote = function(proposal_id, value) {
205 214 var vm = this;
206 215  
207   - if(vm.article.archived === true){
  216 + if (vm.article.archived) {
208 217 vm.$log.info('Article archived. Abort.');
209 218 return;
210 219 }
... ... @@ -226,7 +235,7 @@
226 235  
227 236 response.error = true;
228 237 vm.$scope.$broadcast('proposal-box:vote-response', response);
229   - }).finally(function(response){
  238 + }).finally(function(response) {
230 239 vm.$log.debug('voteProposal finally', response);
231 240  
232 241 });
... ... @@ -245,7 +254,7 @@
245 254 ProgramaPageController.prototype.showProposalForm = function() {
246 255 var vm = this;
247 256  
248   - if(vm.article.archived === true){
  257 + if (vm.article.archived) {
249 258 vm.$log.info('Article archived. Abort.');
250 259 return;
251 260 }
... ... @@ -279,14 +288,14 @@
279 288 ProgramaPageController.prototype.toggleContentVisibility = function() {
280 289 var $sectionContent = angular.element('.section-content');
281 290  
282   - if(!$sectionContent || $sectionContent.length === 0){
  291 + if (!$sectionContent || $sectionContent.length === 0) {
283 292 vm.$log.warn('".section-content" not found.');
284 293 return;
285 294 }
286 295  
287   - if($sectionContent.is(':visible')){
  296 + if ($sectionContent.is(':visible')) {
288 297 $sectionContent.slideUp();
289   - }else{
  298 + }else {
290 299 $sectionContent.slideDown();
291 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 28 <!-- Preview > coluna da esquerda -->
29 29 <div class="col-md-8">
30 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 40 <div class="program-preview--box--content-wrapper">
33 41 <div class="program-preview--icon icon-wrapper-rounded color-theme-bg" ng-class="pagePrograma.category.slug">
34 42 <span class="icon" ng-class="'icon-tema-' + pagePrograma.category.slug"></span>
... ... @@ -60,7 +68,7 @@
60 68 </div>
61 69 <!-- Preview > coluna da direita -->
62 70 <div class="col-md-4">
63   - <div class="row">
  71 + <div class="row" ng-if="!pagePrograma.article.archived">
64 72 <!-- Top Proposals -->
65 73 <div>
66 74 <!-- Loading Top Proposals -->
... ... @@ -76,7 +84,7 @@
76 84 </div>
77 85 </div>
78 86 <!-- Proposal Box -->
79   - <div ng-if="!pagePrograma.article.archived">
  87 + <div>
80 88 <div class="col-xs-12" ng-if="!pagePrograma.loadingProposalBox && pagePrograma.randomProposal" ng-class="{'focused-proposal': !!pagePrograma.search.proposal_id}">
81 89 <h3 class="color-theme-fg">Apoie outras propostas</h3>
82 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 109 </div>
102 110 </div>
103 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 119 </div>
105 120 </article>
106 121 </div>
... ... @@ -181,10 +196,8 @@
181 196 <div class="row">
182 197 <div class="col-sm-12">
183 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 201 </div>
189 202 <span class="archived-banner--title1">As propostas para este programa já foram</span>
190 203 <br/>
... ... @@ -210,7 +223,19 @@
210 223 <div class="sub-section" ng-repeat="proposal in pagePrograma.proposalsTopRated">
211 224 <div class="container">
212 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 239 <h3 class="color-theme-fg">{{($index+1)}}a proposta mais votada:</h3>
215 240 <p>{{::proposal.abstract}}</p>
216 241  
... ... @@ -222,6 +247,7 @@
222 247 </div>
223 248 </button>
224 249 </div>
  250 + <br>
225 251 </div>
226 252 </div>
227 253 </div>
... ...
src/app/pages/programas/programas.scss
  Diff comments   View file @2b6de36
... ... @@ -182,6 +182,47 @@
182 182 .proposal-extended-section-header {
183 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 227 #section-archived-banner {
187 228 position: relative;
... ... @@ -189,6 +230,7 @@
189 230 color: #fff;
190 231  
191 232 margin-top: 30px;
  233 + margin-bottom: 20px;
192 234  
193 235 h2 {
194 236 font-size: 28px;
... ... @@ -208,19 +250,6 @@
208 250 .program-banner--icon {
209 251 float: left;
210 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 255 .archived-banner--title2 {
... ... @@ -234,7 +263,6 @@
234 263 font-weight: bold;
235 264 }
236 265 .sub-section{
237   - padding: 20px 0;
238 266 &:nth-child(odd) {
239 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