Commit 62bdd5f029e9abebd238d76ae71f716f9361be64

Authored by Leonardo Merlin
1 parent fec8b78e

Fix #295 - box size constrain 'solved' with JS re-calculations

js/handlebars-helpers.js
... ... @@ -37,10 +37,12 @@ define(['handlebars'], function(Handlebars){
37 37 }
38 38 category = category + '</div>' +
39 39 '<div class="box-body">' +
40   - '<img src="' + options.hash['host'] + proposal.image.url + '" alt="Imagem de apresentação do programa."/>' +
  40 + // '<div class="box__image">' + '<img src="' + options.hash['host'] + proposal.image.url + '" alt="Imagem de apresentação do programa."/>' + '</div>' +
  41 + '<div class="box__image" style="background-image:url(' + (options.hash['host'] + proposal.image.url) + ')"></div>' +
41 42 '<div class="box__title">' + proposal.title + '</div>' +
42 43 (proposal.abstract ? '<div class="box__abstract">' + proposal.abstract + '</div>' : '') +
43   - '<span class="button participe">OPINE NESTE PROGRAMA</span></div>';
  44 + '<div class="box__footer">' + '<span class="button participe">OPINE NESTE PROGRAMA</span>' + '</div>' +
  45 + '</div>';
44 46 // element = element + options.fn(proposal);
45 47  
46 48 element = element + category;
... ...
js/jquery.equalHeights.js 0 → 100644
... ... @@ -0,0 +1,31 @@
  1 +$.fn.equalHeights = function(px) {
  2 + 'use strict';
  3 +
  4 + var currentTallest = 0;
  5 + $(this).each(function(index, item){
  6 + var $item = $(item);
  7 + $item.height('auto'); // force a 'recalc' height
  8 +
  9 + if ($item.height() > currentTallest) { currentTallest = $item.height(); }
  10 + if (!px && Number.prototype.pxToEm) { currentTallest = currentTallest.pxToEm(); } //use ems unless px is specified
  11 + // for ie6, set height since min-height isn't supported
  12 + if (typeof(document.body.style.minHeight) === 'undefined') { $item.css({'height': currentTallest}); }
  13 + $item.css({'height': currentTallest});
  14 + });
  15 + return this;
  16 +};
  17 +
  18 +// just in case you need it...
  19 +// $.fn.equalWidths = function(px) {
  20 +// $(this).each(function(){
  21 +// var currentWidest = 0;
  22 +// $(this).children().each(function(i){
  23 +// if($(this).width() > currentWidest) { currentWidest = $(this).width(); }
  24 +// });
  25 +// if(!px && Number.prototype.pxToEm) currentWidest = currentWidest.pxToEm(); //use ems unless px is specified
  26 +// // for ie6, set width since min-width isn't supported
  27 +// if (typeof(document.body.style.minHeight) === "undefined") { $(this).children().css({'width': currentWidest}); }
  28 +// $(this).children().css({'min-width': currentWidest});
  29 +// });
  30 +// return this;
  31 +// };
0 32 \ No newline at end of file
... ...
js/main.js
... ... @@ -150,453 +150,457 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
150 150 $loading.hide();
151 151 $('.support-proposal .alert').show();
152 152 });
153   - },
154   -
155   - loadRanking: function($resultsContainer, topic_id, page) {
156   - $resultsContainer.find('.loading').show();
157   - $resultsContainer.find('.results-content').hide();
158   -
159   - var per_page = 10;
160   - var url = host + '/api/v1/proposals_discussion_plugin/' + topic_id + '/ranking' + '?private_token=' + Main.private_token + '&per_page='+per_page+'&page='+page;
161   - $.getJSON(url).done(function( data, stats, xhr ) {
162   - data.pagination = {
163   - total: parseInt(xhr.getResponseHeader('Total')),
164   - per_page: parseInt(xhr.getResponseHeader('Per-Page')),
165   - page: page,
166   - };
167   -
168   - $resultsContainer.html(resultsTemplate(data));
169   - $resultsContainer.find('.loading').hide();
170   - $resultsContainer.find('.results-content').show();
171   - $(".timeago").timeago();
172   - $resultsContainer.show();
173   -
174   - $('.footable').footable();
175   -
176   - if(data.pagination.total > data.pagination.per_page) {
177   - $resultsContainer.find('.paging').pagination({
178   - items: data.pagination.total,
179   - itemsOnPage: data.pagination.per_page,
180   - currentPage: data.pagination.page,
181   - prevText: '«',
182   - nextText: '»',
183   - cssStyle: 'compact-theme',
184   - onPageClick: function(page, e) {
185   - Main.loadRanking($resultsContainer, topic_id, page);
186   - e.preventDefault();
187   - }
188   - });
189   - }
190   - $resultsContainer.find('.abstract-text .truncated').click(function() {
191   - $(this).toggleClass('truncated');
  153 + },
  154 + loadRanking: function($resultsContainer, topic_id, page) {
  155 + $resultsContainer.find('.loading').show();
  156 + $resultsContainer.find('.results-content').hide();
  157 +
  158 + var per_page = 10;
  159 + var url = host + '/api/v1/proposals_discussion_plugin/' + topic_id + '/ranking' + '?private_token=' + Main.private_token + '&per_page='+per_page+'&page='+page;
  160 + $.getJSON(url).done(function( data, stats, xhr ) {
  161 + data.pagination = {
  162 + total: parseInt(xhr.getResponseHeader('Total')),
  163 + per_page: parseInt(xhr.getResponseHeader('Per-Page')),
  164 + page: page,
  165 + };
  166 +
  167 + $resultsContainer.html(resultsTemplate(data));
  168 + $resultsContainer.find('.loading').hide();
  169 + $resultsContainer.find('.results-content').show();
  170 + $(".timeago").timeago();
  171 + $resultsContainer.show();
  172 +
  173 + $('.footable').footable();
  174 +
  175 + if(data.pagination.total > data.pagination.per_page) {
  176 + $resultsContainer.find('.paging').pagination({
  177 + items: data.pagination.total,
  178 + itemsOnPage: data.pagination.per_page,
  179 + currentPage: data.pagination.page,
  180 + prevText: '«',
  181 + nextText: '»',
  182 + cssStyle: 'compact-theme',
  183 + onPageClick: function(page, e) {
  184 + Main.loadRanking($resultsContainer, topic_id, page);
  185 + e.preventDefault();
  186 + }
192 187 });
193   -
194   - // scroll to the end
195   - $('html, body').animate({
196   - scrollTop: $(document).height()
197   - }, 'fast');
  188 + }
  189 + $resultsContainer.find('.abstract-text .truncated').click(function() {
  190 + $(this).toggleClass('truncated');
198 191 });
199   - $('.experience-proposal-container').hide();
200   - $('.talk-proposal-container').hide();
201   - },
202 192  
203   - loginCallback: function(loggedIn, token, user) {
204   - logged_in = loggedIn;
205   - $('.login .message').text('');
206   - var requireLoginContainer = loginButton.closest('.require-login-container');
  193 + // scroll to the end
  194 + $('html, body').animate({
  195 + scrollTop: $(document).height()
  196 + }, 'fast');
  197 + });
  198 + $('.experience-proposal-container').hide();
  199 + $('.talk-proposal-container').hide();
  200 + },
  201 + loginCallback: function(loggedIn, token, user) {
  202 + logged_in = loggedIn;
  203 + $('.login .message').text('');
  204 + var requireLoginContainer = loginButton.closest('.require-login-container');
207 205  
208   - if(logged_in) {
209   - Main.showLogout();
210   - if(token){
211   - Main.private_token = token;
212   - }
213   - requireLoginContainer = $('.require-login-container');
214   - requireLoginContainer.find('.require-login').show();
215   - requireLoginContainer.find('.require-login .message').show();
216   - requireLoginContainer.find('.login-container').hide();
217   - $.cookie('_dialoga_session', Main.private_token);
218   - } else if (user) {
219   - var loginContainer = requireLoginContainer.find('.login-container');
220   - loginContainer.show();
221   - loginContainer.find('.new-user').click();
222   - var signupForm = loginContainer.find('#signup-form');
223   - signupForm.find("#user_email").val(user.email);
224   - signupForm.find("#user_name").val(user.login);
225   - signupForm.find("#user_oauth_providers").val(user.oauth_providers);
226   - //signupForm.find(".password").hide();
227   - //signupForm.find(".password-confirmation").hide();
228   - } else {
229   - requireLoginContainer.find('.require-login').hide();
230   - requireLoginContainer.find('.login-container').show();
231   - Main.showLogin();
232   - }
233   - },
234   - guid: function() {
235   - function s4() {
236   - return Math.floor((1 + Math.random()) * 0x10000)
237   - .toString(16)
238   - .substring(1);
  206 + if(logged_in) {
  207 + Main.showLogout();
  208 + if(token){
  209 + Main.private_token = token;
239 210 }
240   - return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
241   - },
242   - display_article: function(article_id, backTo) {
243   - var url = host + '/api/v1/articles/' + article_id + '?private_token=' + Main.private_token;
244   - $.getJSON(url).done(function( data ) {
245   - $('#article-container .article-content').html(articleTemplate(data.article));
246   - $('#article-container').show();
247   - $('#proposal-categories').hide();
248   - $('#proposal-group').hide();
249   - $('nav').hide();
250   - $('#content').hide();
251   - $('#article-container .go-back').attr('href', backTo);
252   - });
253   - },
254   - // inicio Eduardo
255   - randomProposalByTheme: function(themeClasses) {
256   - $('#proposal-group .proposal-list .proposal-item').hide();
257   - $.each(themeClasses, function(i, themeClass) {
258   - var proposalsByTheme = $('#proposal-group .proposal-list .proposal-item').find('.' + themeClass);
259   - var randomizedIndex = Math.floor(Math.random() * proposalsByTheme.length);
260   - var proposalToShow = $(proposalsByTheme[randomizedIndex]).parents().filter('.proposal-item');
261   - $(proposalToShow).show();
262   - });
263   - },
264   - display_category_tab: function(){
265   - // $('#proposal-group').hide();
266   - this.randomProposalByTheme(['category-saude', 'category-seguranca-publica', 'category-educacao', 'category-reducao-da-pobreza']);
267   - $('#proposal-group').show(); /* Show random proposals*/
268   - $('.content').addClass('background'); /* Add class background */
269   - $('#proposal-categories').show();
270   - $('#nav-proposal-categories a').addClass('active');
271   - $('#nav-proposal-group a').removeClass('active');
272   - $('.proposal-category-items').hide();
273   - $('.proposal-category .arrow-box').hide();
274   - $('.proposal-detail').hide();
275   - $('#article-container').hide();
276   -
277   - $('#content').show();
278   - $('nav').show();
279   - },
280   - display_proposals_tab: function(){
281   - // $('#proposal-categories').hide();
282   - // this.randomProposalByTheme(['category-saude', 'category-seguranca-publica', 'category-educacao', 'category-reducao-da-pobreza']);
283   - $('.proposal-item').show(); /* Show all programs */
284   - $('#proposal-group').show();
285   - $('#proposal-categories').show();
286   - $('.proposal-category-items').hide();
287   - $('#nav-proposal-group a').addClass('active');
288   - $('#nav-proposal-categories a').removeClass('active');
289   - $('#content').show();
290   - $('#article-container').hide();
291   - $('nav').show();
292   - $('html, body').animate({ scrollTop: $('#proposal-group').offset().top }, 'fast');
293   - },
294   - // fim Eduardo
295   - display_proposal: function(proposal_id){
296   - $('#proposal-categories').hide();
297   - $('#proposal-group').hide();
298   - $('.proposal-category-items').hide(); /* Hide Category Items */
299   - $('.content').removeClass('background'); /* Remove class background*/
300   - $('nav').hide();
301   - $('#content').hide();
302   - $('#article-container').hide();
303   - // $('.make-proposal-form').hide();
304   - // $('.login-container').hide();
305   - $('.proposal-detail').hide(); // hide all proposals
306   - // $('.proposal-detail-base').hide();
307   - $proposal = $('#' + proposal_id);
308   - $proposal.find('.proposal-detail-base').hide();
309   - $proposal.show();
310   - $proposal.find('.proposal-header').show();
311   - $proposal.find('.make-proposal-container').show();
312   - $proposal.find('.support-proposal-container').show();
313   - $proposal.find('.results-container').hide();
314   - $proposal.find('.results-container .loading').hide();
315   - $proposal.find('.results-container .results-content').hide();
316   - $proposal.find('.experience-proposal-container').show();
317   - $proposal.find('.talk-proposal-container').show();
318   - $proposal.find('.calendar').hide();
319   - var active_category = '';
320   - switch($proposal.find('.categories').attr('class')) {
321   - case 'categories saude':
322   - active_category = 'saude';
323   - break;
324   - case 'categories educacao':
325   - active_category = 'educacao';
326   - break;
327   - case 'categories seguranca-publica':
328   - active_category = 'seguranca-publica';
329   - break;
330   - case 'categories reducao-da-pobreza':
331   - active_category = 'reducao-da-pobreza';
332   - break;
333   - }
334   -
335   - $proposal.find('.calendar.' + active_category).show();
336   - $proposal.find('.calendar').slick();
337   -
338   - var topic_id = proposal_id.split('-').pop();
339   - this.loadRandomProposal(topic_id);
340   - },
341   - display_proposal_detail: function(proposal_id){
342   - $('.content').removeClass('background'); /* Remove class background */
  211 + requireLoginContainer = $('.require-login-container');
  212 + requireLoginContainer.find('.require-login').show();
  213 + requireLoginContainer.find('.require-login .message').show();
  214 + requireLoginContainer.find('.login-container').hide();
  215 + $.cookie('_dialoga_session', Main.private_token);
  216 + } else if (user) {
  217 + var loginContainer = requireLoginContainer.find('.login-container');
  218 + loginContainer.show();
  219 + loginContainer.find('.new-user').click();
  220 + var signupForm = loginContainer.find('#signup-form');
  221 + signupForm.find("#user_email").val(user.email);
  222 + signupForm.find("#user_name").val(user.login);
  223 + signupForm.find("#user_oauth_providers").val(user.oauth_providers);
  224 + //signupForm.find(".password").hide();
  225 + //signupForm.find(".password-confirmation").hide();
  226 + } else {
  227 + requireLoginContainer.find('.require-login').hide();
  228 + requireLoginContainer.find('.login-container').show();
  229 + Main.showLogin();
  230 + }
  231 + },
  232 + guid: function() {
  233 + function s4() {
  234 + return Math.floor((1 + Math.random()) * 0x10000)
  235 + .toString(16)
  236 + .substring(1);
  237 + }
  238 + return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
  239 + },
  240 + display_article: function(article_id, backTo) {
  241 + var url = host + '/api/v1/articles/' + article_id + '?private_token=' + Main.private_token;
  242 + $.getJSON(url).done(function( data ) {
  243 + $('#article-container .article-content').html(articleTemplate(data.article));
  244 + $('#article-container').show();
343 245 $('#proposal-categories').hide();
344 246 $('#proposal-group').hide();
345 247 $('nav').hide();
346 248 $('#content').hide();
347   - $('#article-container').hide();
348   - $proposal = $('#proposal-item-' + proposal_id);
349   - $proposal.find('.proposal-header').hide();
350   - $proposal.find('.make-proposal-container').hide();
351   - $proposal.find('.support-proposal-container').hide();
352   - $proposal.find('.results-container').hide();
353   - $proposal.find('.experience-proposal-container').hide();
354   - $proposal.find('.talk-proposal-container').hide();
355   - $proposal.find('.body').show();
356   - $proposal.show();
357   -
358   - var url = host + '/api/v1/articles/' + proposal_id + '?private_token=' + Main.private_token + '&fields=id,body&content_type=ProposalsDiscussionPlugin::Topic';
359   - $.getJSON(url).done(function( data ) {
360   - $('#proposal-item-' + proposal_id + ' .body-content').replaceWith(data.article.body);
361   - })
362   - .fail(function( jqxhr, textStatus, error ) {
363   - var err = textStatus + ', ' + error;
364   - console.log( 'Request Failed: ' + err );
365   - });
366   - },
367   - display_proposal_by_category: function(item){
368   - var $item = $('#' + item);
369   -
370   - if($item.hasClass('proposal-category-items')){
371   - //Display Topics or Discussion by category
372   - $('nav').show();
373   - $('#content').show();
374   - $('#proposal-categories').show();
375   - $('#nav-proposal-categories a').addClass('active');
376   - $('#nav-proposal-group a').removeClass('active');
377   - $('#proposal-group').hide(); /* Hide section "Programas" */
378   - $('.content').addClass('background'); /* Add class background */
379   - $('.proposal-category-items').hide();
380   - $('.proposal-detail').hide();
381   - $item.toggle( 'blind', 200, function () {
382   - var itemOffset = $item.offset();
383   - if(itemOffset){
384   - $('html, body').animate({ scrollTop: itemOffset.top }, 'fast');
385   - }
386   - } );
387   - $('.proposal-category .arrow-box').hide();
388   - var categorySlug = $item.data('category');
389   - $('#proposal-category-' + categorySlug).find('.arrow-box').show();
390   -
391   - }
392   - },
393   - addBarraDoGoverno: function(){
394   -
395   - if( BARRA_ADDED ) { return; }
396   -
397   - var HTML_BODY_PREPEND = '' +
398   - '<div id="barra-brasil" style="background:#7F7F7F; height: 20px; padding:0 0 0 10px;display:block;"> ' +
399   - '<ul id="menu-barra-temp" style="list-style:none;">' +
400   - '<li style="display:inline; float:left;padding-right:10px; margin-right:10px; border-right:1px solid #EDEDED"><a href="http://brasil.gov.br" style="font-family:sans,sans-serif; text-decoration:none; color:white;">Portal do Governo Brasileiro</a></li> ' +
401   - '<li><a style="font-family:sans,sans-serif; text-decoration:none; color:white;" href="http://epwg.governoeletronico.gov.br/barra/atualize.html">Atualize sua Barra de Governo</a></li>' +
402   - '</ul>' +
403   - '</div>';
404   -
405   - var HTML_BODY_APPEND = ''+
406   - '<footer id="footer-brasil"></footer>' +
407   - '<script defer="defer" src="http://barra.brasil.gov.br/barra.js" type="text/javascript"></script>';
408   -
409   - var STYLE_TEMA_AZUL = '' +
410   - '<style>'+
411   - '#footer-brasil {'+
412   - 'background: none repeat scroll 0% 0% #0042b1;'+
413   - 'padding: 1em 0px;'+
414   - 'max-width: 100%;'+
415   - 'margin-top: 40px;'+
416   - '}'+
417   - '#barra-brasil ul {'+
418   - 'width: auto;'+
419   - '}'+
420   - '<style>';
  249 + $('#article-container .go-back').attr('href', backTo);
  250 + });
  251 + },
  252 + // inicio Eduardo
  253 + randomProposalByTheme: function(themeClasses) {
  254 + $('#proposal-group .proposal-list .proposal-item').hide();
  255 + $.each(themeClasses, function(i, themeClass) {
  256 + var proposalsByTheme = $('#proposal-group .proposal-list .proposal-item').find('.' + themeClass);
  257 + var randomizedIndex = Math.floor(Math.random() * proposalsByTheme.length);
  258 + var proposalToShow = $(proposalsByTheme[randomizedIndex]).parents().filter('.proposal-item');
  259 + $(proposalToShow).show();
  260 + });
  261 + },
  262 + display_category_tab: function(){
  263 + // $('#proposal-group').hide();
  264 + this.randomProposalByTheme(['category-saude', 'category-seguranca-publica', 'category-educacao', 'category-reducao-da-pobreza']);
  265 + $('#proposal-group').show(); /* Show random proposals*/
  266 + $('.content').addClass('background'); /* Add class background */
  267 + $('#proposal-categories').show();
  268 + $('#nav-proposal-categories a').addClass('active');
  269 + $('#nav-proposal-group a').removeClass('active');
  270 + $('.proposal-category-items').hide();
  271 + $('.proposal-category .arrow-box').hide();
  272 + $('.proposal-detail').hide();
  273 + $('#article-container').hide();
  274 +
  275 + $('#content').show();
  276 + $('nav').show();
  277 +
  278 + this.computeBoxHeight();
  279 + },
  280 + display_proposals_tab: function(){
  281 + // $('#proposal-categories').hide();
  282 + // this.randomProposalByTheme(['category-saude', 'category-seguranca-publica', 'category-educacao', 'category-reducao-da-pobreza']);
  283 + $('.proposal-item').show(); /* Show all programs */
  284 + $('#proposal-group').show();
  285 + $('#proposal-categories').show();
  286 + $('.proposal-category-items').hide();
  287 + $('#nav-proposal-group a').addClass('active');
  288 + $('#nav-proposal-categories a').removeClass('active');
  289 + $('#content').show();
  290 + $('#article-container').hide();
  291 + $('nav').show();
  292 + $('html, body').animate({ scrollTop: $('#proposal-group').offset().top }, 'fast');
  293 +
  294 + this.computeBoxHeight();
  295 + },
  296 + // fim Eduardo
  297 + display_proposal: function(proposal_id){
  298 + $('#proposal-categories').hide();
  299 + $('#proposal-group').hide();
  300 + $('.proposal-category-items').hide(); /* Hide Category Items */
  301 + $('.content').removeClass('background'); /* Remove class background*/
  302 + $('nav').hide();
  303 + $('#content').hide();
  304 + $('#article-container').hide();
  305 + // $('.make-proposal-form').hide();
  306 + // $('.login-container').hide();
  307 + $('.proposal-detail').hide(); // hide all proposals
  308 + // $('.proposal-detail-base').hide();
  309 + $proposal = $('#' + proposal_id);
  310 + $proposal.find('.proposal-detail-base').hide();
  311 + $proposal.show();
  312 + $proposal.find('.proposal-header').show();
  313 + $proposal.find('.make-proposal-container').show();
  314 + $proposal.find('.support-proposal-container').show();
  315 + $proposal.find('.results-container').hide();
  316 + $proposal.find('.results-container .loading').hide();
  317 + $proposal.find('.results-container .results-content').hide();
  318 + $proposal.find('.experience-proposal-container').show();
  319 + $proposal.find('.talk-proposal-container').show();
  320 + $proposal.find('.calendar').hide();
  321 + var active_category = '';
  322 + switch($proposal.find('.categories').attr('class')) {
  323 + case 'categories saude':
  324 + active_category = 'saude';
  325 + break;
  326 + case 'categories educacao':
  327 + active_category = 'educacao';
  328 + break;
  329 + case 'categories seguranca-publica':
  330 + active_category = 'seguranca-publica';
  331 + break;
  332 + case 'categories reducao-da-pobreza':
  333 + active_category = 'reducao-da-pobreza';
  334 + break;
  335 + }
  336 +
  337 + $proposal.find('.calendar.' + active_category).show();
  338 + $proposal.find('.calendar').slick();
  339 +
  340 + var topic_id = proposal_id.split('-').pop();
  341 + this.loadRandomProposal(topic_id);
  342 + },
  343 + display_proposal_detail: function(proposal_id){
  344 + $('.content').removeClass('background'); /* Remove class background */
  345 + $('#proposal-categories').hide();
  346 + $('#proposal-group').hide();
  347 + $('nav').hide();
  348 + $('#content').hide();
  349 + $('#article-container').hide();
  350 + $proposal = $('#proposal-item-' + proposal_id);
  351 + $proposal.find('.proposal-header').hide();
  352 + $proposal.find('.make-proposal-container').hide();
  353 + $proposal.find('.support-proposal-container').hide();
  354 + $proposal.find('.results-container').hide();
  355 + $proposal.find('.experience-proposal-container').hide();
  356 + $proposal.find('.talk-proposal-container').hide();
  357 + $proposal.find('.body').show();
  358 + $proposal.show();
  359 +
  360 + var url = host + '/api/v1/articles/' + proposal_id + '?private_token=' + Main.private_token + '&fields=id,body&content_type=ProposalsDiscussionPlugin::Topic';
  361 + $.getJSON(url).done(function( data ) {
  362 + $('#proposal-item-' + proposal_id + ' .body-content').replaceWith(data.article.body);
  363 + })
  364 + .fail(function( jqxhr, textStatus, error ) {
  365 + var err = textStatus + ', ' + error;
  366 + console.log( 'Request Failed: ' + err );
  367 + });
  368 + },
  369 + display_proposal_by_category: function(item){
  370 + var $item = $('#' + item);
421 371  
422   - var $body = $(document.body);
423   - $body.prepend(HTML_BODY_PREPEND);
424   - $body.append(HTML_BODY_APPEND);
425   - $body.append(STYLE_TEMA_AZUL);
  372 + if($item.hasClass('proposal-category-items')){
  373 + //Display Topics or Discussion by category
  374 + $('nav').show();
  375 + $('#content').show();
  376 + $('#proposal-categories').show();
  377 + $('#nav-proposal-categories a').addClass('active');
  378 + $('#nav-proposal-group a').removeClass('active');
  379 + $('#proposal-group').hide(); /* Hide section "Programas" */
  380 + $('.content').addClass('background'); /* Add class background */
  381 + $('.proposal-category-items').hide();
  382 + $('.proposal-detail').hide();
  383 + $item.toggle( 'blind', 200, function () {
  384 + var itemOffset = $item.offset();
  385 + if(itemOffset){
  386 + $('html, body').animate({ scrollTop: itemOffset.top }, 'fast');
  387 + }
  388 + } );
  389 + $('.proposal-category .arrow-box').hide();
  390 + var categorySlug = $item.data('category');
  391 + $('#proposal-category-' + categorySlug).find('.arrow-box').show();
426 392  
427   - BARRA_ADDED = true;
428   - },
429   - updateHash: function(hash){
430   - var id = hash.replace(/^.*#/, '');
431   - var elem = document.getElementById(id);
  393 + this.computeBoxHeight();
432 394  
433   - // preserve the query param
434   - // if (HIDE_BARRA_DO_GOVERNO && (hash.indexOf('?barra=false') === -1)){
435   - // hash += '?barra=false';
436   - // }
  395 + }
  396 + },
  397 + addBarraDoGoverno: function(){
  398 +
  399 + if( BARRA_ADDED ) { return; }
  400 +
  401 + var HTML_BODY_PREPEND = '' +
  402 + '<div id="barra-brasil" style="background:#7F7F7F; height: 20px; padding:0 0 0 10px;display:block;"> ' +
  403 + '<ul id="menu-barra-temp" style="list-style:none;">' +
  404 + '<li style="display:inline; float:left;padding-right:10px; margin-right:10px; border-right:1px solid #EDEDED"><a href="http://brasil.gov.br" style="font-family:sans,sans-serif; text-decoration:none; color:white;">Portal do Governo Brasileiro</a></li> ' +
  405 + '<li><a style="font-family:sans,sans-serif; text-decoration:none; color:white;" href="http://epwg.governoeletronico.gov.br/barra/atualize.html">Atualize sua Barra de Governo</a></li>' +
  406 + '</ul>' +
  407 + '</div>';
  408 +
  409 + var HTML_BODY_APPEND = ''+
  410 + '<footer id="footer-brasil"></footer>' +
  411 + '<script defer="defer" src="http://barra.brasil.gov.br/barra.js" type="text/javascript"></script>';
  412 +
  413 + var STYLE_TEMA_AZUL = '' +
  414 + '<style>'+
  415 + '#footer-brasil {'+
  416 + 'background: none repeat scroll 0% 0% #0042b1;'+
  417 + 'padding: 1em 0px;'+
  418 + 'max-width: 100%;'+
  419 + 'margin-top: 40px;'+
  420 + '}'+
  421 + '#barra-brasil ul {'+
  422 + 'width: auto;'+
  423 + '}'+
  424 + '<style>';
  425 +
  426 + var $body = $(document.body);
  427 + $body.prepend(HTML_BODY_PREPEND);
  428 + $body.append(HTML_BODY_APPEND);
  429 + $body.append(STYLE_TEMA_AZUL);
  430 +
  431 + BARRA_ADDED = true;
  432 + },
  433 + updateHash: function(hash){
  434 + var id = hash.replace(/^.*#/, '');
  435 + var elem = document.getElementById(id);
437 436  
438   - if ( !elem ) {
439   - window.location.hash = hash;
440   - return;
441   - }
  437 + // preserve the query param
  438 + // if (HIDE_BARRA_DO_GOVERNO && (hash.indexOf('?barra=false') === -1)){
  439 + // hash += '?barra=false';
  440 + // }
442 441  
443   - elem.id = id+'-tmp';
  442 + if ( !elem ) {
444 443 window.location.hash = hash;
445   - elem.id = id;
446   - },
447   - locationHashChanged: function(){
448   - var hash = window.location.hash;
449   - this.navigateTo(hash, lastHash);
450   - lastHash = hash;
451   - },
452   - navigateTo: function(hash, lastHash) {
453   - var scrollTop = 0;
454   - var $nav = $('nav[role="tabpanel"]');
455   - var navOffset = $nav.offset();
456   -
457   - var regexProposals = /#\/programas/;
458   - var regexCategory = /#\/temas/;
459   - var regexHideBarra = /barra=false$/;
460   - var regexArticle = /#\/artigo/;
461   -
462   - if( !(regexHideBarra.exec(hash) !== null) && !HIDE_BARRA_DO_GOVERNO ){
463   - this.addBarraDoGoverno();
464   - }else{
465   - HIDE_BARRA_DO_GOVERNO = true;
466   - }
  444 + return;
  445 + }
  446 +
  447 + elem.id = id+'-tmp';
  448 + window.location.hash = hash;
  449 + elem.id = id;
  450 + },
  451 + locationHashChanged: function(){
  452 + var hash = window.location.hash;
  453 + this.navigateTo(hash, lastHash);
  454 + lastHash = hash;
  455 + },
  456 + navigateTo: function(hash, lastHash) {
  457 + var scrollTop = 0;
  458 + var $nav = $('nav[role="tabpanel"]');
  459 + var navOffset = $nav.offset();
  460 +
  461 + var regexProposals = /#\/programas/;
  462 + var regexCategory = /#\/temas/;
  463 + var regexHideBarra = /barra=false$/;
  464 + var regexArticle = /#\/artigo/;
  465 +
  466 + if( !(regexHideBarra.exec(hash) !== null) && !HIDE_BARRA_DO_GOVERNO ){
  467 + this.addBarraDoGoverno();
  468 + }else{
  469 + HIDE_BARRA_DO_GOVERNO = true;
  470 + }
467 471  
468   - // remove query params
469   - hash = hash.split('?')[0];
  472 + // remove query params
  473 + hash = hash.split('?')[0];
470 474  
471   - var parts = hash.split('/');
  475 + var parts = hash.split('/');
472 476  
473   - var isProposal = regexProposals.exec(hash) !== null;
474   - var isCategory = regexCategory.exec(hash) !== null;
475   - var isArticle = regexArticle.exec(hash) !== null;
  477 + var isProposal = regexProposals.exec(hash) !== null;
  478 + var isCategory = regexCategory.exec(hash) !== null;
  479 + var isArticle = regexArticle.exec(hash) !== null;
476 480  
477   - if(isArticle) {
478   - this.display_article(hash.split('/')[2], lastHash);
479   - }
  481 + if(isArticle) {
  482 + this.display_article(hash.split('/')[2], lastHash);
  483 + }
480 484  
481   - if( isProposal ){
  485 + if( isProposal ){
482 486  
483   - // go to proposal
484   - var proposalId = parts[2];
485   - this.navigateToProposal(proposalId);
  487 + // go to proposal
  488 + var proposalId = parts[2];
  489 + this.navigateToProposal(proposalId);
486 490  
487   - var $proposal = $('#proposal-item-' + proposalId);
488   - var proposalOffset = $proposal.offset();
489   - if(proposalOffset){
490   - scrollTop = proposalOffset.top;
491   - }else{
492   - if(navOffset){
493   - scrollTop = navOffset.top;
494   - } else {
495   - scrollTop = $('#proposal-group').offset().top;
496   - }
  491 + var $proposal = $('#proposal-item-' + proposalId);
  492 + var proposalOffset = $proposal.offset();
  493 + if(proposalOffset){
  494 + scrollTop = proposalOffset.top;
  495 + }else{
  496 + if(navOffset){
  497 + scrollTop = navOffset.top;
  498 + } else {
  499 + scrollTop = $('#proposal-group').offset().top;
497 500 }
498 501 }
  502 + }
499 503  
500   - if( isCategory ){
  504 + if( isCategory ){
501 505  
502   - // go to category
503   - var categoryId = parts[3];
504   - this.navigateToCategory(categoryId);
  506 + // go to category
  507 + var categoryId = parts[3];
  508 + this.navigateToCategory(categoryId);
505 509  
506   - var $category = $('#proposal-item-' + categoryId);
507   - var categoryOffset = $category.offset();
508   - if(categoryOffset){
509   - scrollTop = categoryOffset.top;
510   - }else{
511   - if(navOffset){
512   - scrollTop = navOffset.top;
513   - }
  510 + var $category = $('#proposal-item-' + categoryId);
  511 + var categoryOffset = $category.offset();
  512 + if(categoryOffset){
  513 + scrollTop = categoryOffset.top;
  514 + }else{
  515 + if(navOffset){
  516 + scrollTop = navOffset.top;
514 517 }
515 518 }
  519 + }
516 520  
517   - // default
518   - if( !isProposal && !isCategory ){
519   - // show the 'index' -> category tab
520   - this.display_category_tab();
  521 + // default
  522 + if( !isProposal && !isCategory ){
  523 + // show the 'index' -> category tab
  524 + this.display_category_tab();
521 525  
522 526  
523   - // if(navOffset){
524   - // scrollTop = navOffset.top;
525   - // }
526   - }
  527 + // if(navOffset){
  528 + // scrollTop = navOffset.top;
  529 + // }
  530 + }
527 531  
528   - $('html, body').animate({ scrollTop: scrollTop }, 'fast');
529   - },
530   - navigateToProposal: function(proposalId){
531   - var regexSubpages = /sobre-o-programa$/;
532   - if(proposalId === undefined){
533   - this.display_proposals_tab();
534   - }else if(regexSubpages.exec(window.location.hash) == null){
535   - this.display_proposal('proposal-item-' + proposalId);
536   - }else{
537   - this.display_proposal_detail(proposalId);
538   - }
539   - },
540   - navigateToCategory: function(categoryId){
541   - if(categoryId === undefined){
542   - this.display_category_tab();
543   - }else{
544   - this.display_proposal_by_category('proposal-item-' + categoryId);
545   - }
546   - },
547   - oauthClientAction: function(url) {
548   - var child = window.open(url, "_blank");
549   - var interval = setInterval(function() {
550   - try {
551   - if(!child.closed) {
552   - child.postMessage({ message: "requestOauthClientPluginResult" }, "*");
553   - }
554   - }
555   - catch(e) {
556   - // we're here when the child window has been navigated away or closed
557   - if (child.closed) {
558   - clearInterval(interval);
559   - return;
560   - }
  532 + $('html, body').animate({ scrollTop: scrollTop }, 'fast');
  533 + },
  534 + navigateToProposal: function(proposalId){
  535 + var regexSubpages = /sobre-o-programa$/;
  536 + if(proposalId === undefined){
  537 + this.display_proposals_tab();
  538 + }else if(regexSubpages.exec(window.location.hash) == null){
  539 + this.display_proposal('proposal-item-' + proposalId);
  540 + }else{
  541 + this.display_proposal_detail(proposalId);
  542 + }
  543 + },
  544 + navigateToCategory: function(categoryId){
  545 + if(categoryId === undefined){
  546 + this.display_category_tab();
  547 + }else{
  548 + this.display_proposal_by_category('proposal-item-' + categoryId);
  549 + }
  550 + },
  551 + oauthClientAction: function(url) {
  552 + var child = window.open(url, "_blank");
  553 + var interval = setInterval(function() {
  554 + try {
  555 + if(!child.closed) {
  556 + child.postMessage({ message: "requestOauthClientPluginResult" }, "*");
561 557 }
562   - }, 300);
563   - },
564   - displaySuccess: function(container, text, timeout, iconClass) {
565   - timeout = typeof timeout !== 'undefined' ? timeout : 2000;
566   - container.css('opacity', 0.1);
567   - var successPanel = $('.success-panel').clone();
568   - successPanel.find('.icon').addClass(iconClass);
569   - successPanel.find('.message').html(text);
570   - successPanel.appendTo(container.closest('.categories'));
571   - successPanel.show();
572   - successPanel.css("top", Math.max(0, ((container.height() - successPanel.outerHeight()) / 2) + container.offset().top) + "px");
573   - successPanel.css("left", Math.max(0, ((container.width() - successPanel.outerWidth()) / 2) + container.offset().left) + "px");
574   -
575   - var interval = setTimeout(function() {
576   - successPanel.hide();
577   - container.css('opacity', 1);
578   - successPanel.remove();
579   - }, timeout);
580   - },
581   - setUser: function(user){
582   - this.user = user;
583   - },
584   - getUser: function(){
585   - return this.user;
586   - },
587   - showLogin: function(){
588   - $('.entrar').show();
589   - $('.logout').hide();
590   - },
591   - showLogout: function(){
592   - $('.entrar').hide();
593   - var name = '';
594   - if(this.user){
595   - name = this.user.person.name + ' | ';
596   - }
597   - $('.logout').text(name + 'Sair');
598   - $('.logout').show();
599   - },
  558 + }
  559 + catch(e) {
  560 + // we're here when the child window has been navigated away or closed
  561 + if (child.closed) {
  562 + clearInterval(interval);
  563 + return;
  564 + }
  565 + }
  566 + }, 300);
  567 + },
  568 + displaySuccess: function(container, text, timeout, iconClass) {
  569 + timeout = typeof timeout !== 'undefined' ? timeout : 2000;
  570 + container.css('opacity', 0.1);
  571 + var successPanel = $('.success-panel').clone();
  572 + successPanel.find('.icon').addClass(iconClass);
  573 + successPanel.find('.message').html(text);
  574 + successPanel.appendTo(container.closest('.categories'));
  575 + successPanel.show();
  576 + successPanel.css("top", Math.max(0, ((container.height() - successPanel.outerHeight()) / 2) + container.offset().top) + "px");
  577 + successPanel.css("left", Math.max(0, ((container.width() - successPanel.outerWidth()) / 2) + container.offset().left) + "px");
  578 +
  579 + var interval = setTimeout(function() {
  580 + successPanel.hide();
  581 + container.css('opacity', 1);
  582 + successPanel.remove();
  583 + }, timeout);
  584 + },
  585 + setUser: function(user){
  586 + this.user = user;
  587 + },
  588 + getUser: function(){
  589 + return this.user;
  590 + },
  591 + showLogin: function(){
  592 + $('.entrar').show();
  593 + $('.logout').hide();
  594 + },
  595 + showLogout: function(){
  596 + $('.entrar').hide();
  597 + var name = '';
  598 + if(this.user){
  599 + name = this.user.person.name + ' | ';
  600 + }
  601 + $('.logout').text(name + 'Sair');
  602 + $('.logout').show();
  603 + },
600 604 responseToText: function(responseJSONmessage){
601 605 var o = JSON.parse(responseJSONmessage);
602 606 var msg = "";
... ... @@ -616,6 +620,60 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
616 620 msg = msg.replace('email', "campo 'e-mail'");
617 621 msg = msg.substring(0, msg.length - 5) + ".";
618 622 return msg;
  623 + },
  624 + computeBoxHeight: function(){
  625 + var hPerLineOnTitle = 25;
  626 + var hPerLineOnParagraph = 20;
  627 + var maxLinesByParagraph = 0;
  628 + var maxLinesByTitle = 0;
  629 + var $visibleProposals = $('.proposal-list .proposal-item:visible');
  630 +
  631 + // get the bigger paragraph
  632 + $visibleProposals.each(function(index, proposalItemEl){
  633 + var $proposalItemEl = $(proposalItemEl);
  634 + var $paragraph = $proposalItemEl.find('p');
  635 + var lines = Main.computeLines($paragraph);
  636 + if(lines > maxLinesByParagraph ){
  637 + maxLinesByParagraph = lines
  638 + }
  639 + });
  640 + console.log('maxLinesByParagraph', maxLinesByParagraph);
  641 +
  642 + // get the bigger title
  643 + $visibleProposals.each(function(index, proposalItemEl){
  644 + var $proposalItemEl = $(proposalItemEl);
  645 + var $title = $proposalItemEl.find('.box__title');
  646 + var lines = Main.computeLines($title);
  647 + if(lines > maxLinesByTitle ){
  648 + maxLinesByTitle = lines
  649 + }
  650 + });
  651 + console.log('maxLinesByTitle', maxLinesByTitle);
  652 +
  653 + $visibleProposals.each(function(index, proposalItemEl){
  654 + var $proposalItemEl = $(proposalItemEl);
  655 + var $title = $proposalItemEl.find('.box__title');
  656 + var $paragraph = $proposalItemEl.find('p');
  657 +
  658 + var newTitleHeight = maxLinesByTitle * hPerLineOnTitle;
  659 + var newParagraphHeight = maxLinesByParagraph * hPerLineOnParagraph;
  660 +
  661 + $title.css('height', newTitleHeight + 'px');
  662 + $paragraph.css('height', newParagraphHeight + 'px');
  663 + });
  664 +
  665 + // recalc box heights
  666 + var setAsPx = true;
  667 + $visibleProposals.equalHeights(setAsPx);
  668 + },
  669 + computeLines: function ($el) {
  670 + // reset height
  671 + $el.height('auto');
  672 +
  673 + var divHeight = $el.height();
  674 + var lineHeight = parseInt($el.css('lineHeight'));
  675 + var lines = Math.ceil(divHeight / lineHeight);
  676 + return lines;
619 677 }
620 678 }
621 679 })();
... ... @@ -960,6 +1018,45 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
960 1018 }
961 1019  
962 1020  
  1021 + // Handle resize event
  1022 + (function($,sr){
  1023 +
  1024 + // debouncing function from John Hann
  1025 + // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  1026 + var debounce = function (func, threshold, execAsap) {
  1027 + var timeout;
  1028 +
  1029 + return function debounced () {
  1030 + var obj = this, args = arguments;
  1031 +
  1032 + function delayed () {
  1033 + if (!execAsap){
  1034 + func.apply(obj, args);
  1035 + }
  1036 + timeout = null;
  1037 + }
  1038 +
  1039 + if (timeout){
  1040 + clearTimeout(timeout);
  1041 + }else if (execAsap){
  1042 + func.apply(obj, args);
  1043 + }
  1044 +
  1045 + timeout = setTimeout(delayed, threshold || 100);
  1046 + };
  1047 + }
  1048 +
  1049 + // smartresize
  1050 + jQuery.fn[sr] = function(fn){
  1051 + return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr);
  1052 + };
  1053 +
  1054 + })(jQuery, 'smartresize');
  1055 +
  1056 + $(window).smartresize(function(){
  1057 + console.log('window resized');
  1058 + Main.computeBoxHeight();
  1059 + });
963 1060  
964 1061 return Main;
965 1062 });
... ...
js/requirejs-config.js
... ... @@ -15,6 +15,7 @@ requirejs.config({
15 15 jquery_timeago: 'jquery.timeago',
16 16 jquery_timeago_pt: 'jquery.timeago.pt-br',
17 17 jquery_simplePagination: 'jquery.simplePagination',
  18 + jquery_equalHeights: 'jquery.equalHeights',
18 19 jquery_footable: 'footable',
19 20 handlebars: 'handlebars-v3.0.1',
20 21 handlebars_helpers: 'handlebars-helpers',
... ... @@ -42,6 +43,9 @@ requirejs.config({
42 43 'jquery_simplePagination': {
43 44 deps: ['jquery']
44 45 },
  46 + 'jquery_equalHeights': {
  47 + deps: ['jquery']
  48 + },
45 49 'footable': {
46 50 deps: ['jquery']
47 51 },
... ... @@ -70,5 +74,5 @@ requirejs.config({
70 74 }
71 75 });
72 76  
73   -requirejs(['jquery', 'proposal_app', 'jquery_ui', 'jquery_xdomainrequest', 'jquery_timeago_pt', 'jquery_simplePagination', 'footable', 'handlebars_helpers']);
  77 +requirejs(['jquery', 'proposal_app', 'jquery_ui', 'jquery_xdomainrequest', 'jquery_timeago_pt', 'jquery_simplePagination', 'jquery_equalHeights', 'footable', 'handlebars_helpers']);
74 78 requirejs(['slick', 'fastclick', 'jquery_maxlength', 'layout','main']);
... ...
sass/style.sass
... ... @@ -490,6 +490,8 @@ h1
490 490 &-list
491 491 list-style: none
492 492 padding-left: 0
  493 + .proposal-item
  494 + margin-bottom: $gutter
493 495 &-group
494 496 ul
495 497 list-style: none
... ... @@ -504,6 +506,7 @@ h1
504 506 color: #000
505 507 display: block
506 508 margin-top: $gutter * 1.5
  509 + height: 100%
507 510 overflow: hidden
508 511 transition: all 400ms
509 512 +hover(#fff,$darken)
... ... @@ -538,17 +541,28 @@ h1
538 541 font-size: $font-size-small
539 542 font-weight: 500
540 543 margin-top: $gutter * 0.5
541   - height: $gutter * 2
542   - @media (min-width: 768px)
543   - height: $gutter * 3
  544 + // height: $gutter * 2
  545 + // @media (min-width: 768px)
  546 + // height: $gutter * 3
544 547 &-body
545 548 padding: $gutter
546   - img
547   - margin-left: $gutter * (-1)
548   - margin-right: $gutter * (-1)
549   - margin-top: $gutter * (-1)
550   - margin-bottom: $gutter
551   - height: 170px
  549 + // img
  550 + // margin-left: $gutter * (-1)
  551 + // margin-right: $gutter * (-1)
  552 + // margin-top: $gutter * (-1)
  553 + // margin-bottom: $gutter
  554 + // height: 170px
  555 + &__image
  556 + background-size: cover
  557 + height: 170px
  558 + margin: -20px -20px 10px
  559 + background-position: center center
  560 + // &__footer
  561 + // position: absolute
  562 + // left: 0
  563 + // width: 100%
  564 + // bottom: $gutter
  565 + // padding: 0 10%
552 566 &-category
553 567 font-size: $font-size-small
554 568 font-weight: 700
... ... @@ -1248,6 +1262,11 @@ h3.titulo-destaque
1248 1262 width: 100%
1249 1263 p
1250 1264 padding-bottom: $gutter
  1265 + .proposal-list
  1266 + .proposal-item,
  1267 + .box__title,
  1268 + .box__abstract p
  1269 + height: auto !important
1251 1270 .select
1252 1271 .proposal
1253 1272 &-selection
... ...