Download as
Browse Code »

Commit f4fdaddf6d630bdbb77a0f2bc45689abc20b3c6b

Authored by Evandro Junior
2 parents 7963f62a b76106fb
Exists in master and in 6 other branches build, build2, capa, contigency_plan_recaptcha, production, staging

Merge branch 'master' of https://gitlab.com/participa/proposal-app 

Conflicts:
	index.html
	sass/style.scss
Showing 12 changed files with 167 additions and 85 deletions   Show diff stats
.gitignore
  Diff comments   View file @f4fdadd
... ... @@ -21,4 +21,5 @@ sass/novo
21 21 .bundle
22 22 proposal_detail/
23 23 slick-theme.css
24   -slick.css
25 24 \ No newline at end of file
  25 +slick.css
  26 +bootstrap.css
26 27 \ No newline at end of file
... ...
images/icons/icon-facebook-contrast.png
View file @f4fdadd

1.48 KB | W: | H:

1.34 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/icons/icon-gplus-contrast.png
View file @f4fdadd

1.73 KB | W: | H:

1.77 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/icons/icon-twitter-contrast.png
View file @f4fdadd

1.79 KB | W: | H:

1.43 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/icons/icon-whatsapp-contrast.png
View file @f4fdadd

2.04 KB | W: | H:

2.02 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
index.html
  Diff comments   View file @f4fdadd
... ... @@ -97,18 +97,18 @@
97 97  
98 98 <script id="proposal-template" type="text/x-handlebars-template">
99 99 <header>
100   - <h1><a href="#">{{article.title}}</a></h1>
101 100 <a id="display-contrast" href="#">Alto Contraste</a>
102 101 <div class="social top">
103 102 {{#social_share "Dialoga Brasil" "Aqui suas ideias viram propostas e você ajuda a melhorar as ações do governo" "#"}}{{/social_share}}
104 103 </div>
  104 + <h1><a href="#">{{article.title}}</a></h1>
105 105 </header>
106 106  
107 107 <div id="content">
108 108 {{{article.abstract}}}
109 109 </div>
110 110  
111   - <nav role="tabpanel">
  111 + <nav class="tab" role="tabpanel">
112 112 <ul role="tablist">
113 113 <li id="nav-proposal-categories" role="presentation">
114 114 <a href="#/temas" class="active" role="tab" aria-controls="proposal-categories">Por Temas</a>
... ... @@ -119,7 +119,7 @@
119 119 </ul>
120 120 </nav>
121 121  
122   - <div id="proposal-categories">
  122 + <article id="proposal-categories">
123 123 <div id="proposal-categories-container">
124 124 {{#each article.categories}}
125 125 <li id="proposal-category-{{slug}}" class="proposal-category" data-category="{{slug}}">
... ... @@ -128,7 +128,7 @@
128 128 </li>
129 129 {{/each}}
130 130 {{#each article.categories}}
131   - <div id="proposal-item-{{id}}" class="proposal-category-items proposal-category-items-{{slug}} hide" data-category="{{slug}}">
  131 + <section id="proposal-item-{{id}}" class="proposal-category-items proposal-category-items-{{slug}} hide proposal-container clearfix {{slug}}" data-category="{{slug}}">
132 132 <div class="header">
133 133 <div class="name">{{name}}</div>
134 134 <div class="description"></div>
... ... @@ -138,12 +138,12 @@
138 138 {{#link title id}}{{/link}}
139 139 {{/list_proposal}}
140 140 </ul>
141   - </div>
  141 + </section>
142 142 {{/each}}
143 143 </div>
144   - </div>
  144 + </article>
145 145  
146   - <div id="proposal-group" class="hide">
  146 + <article id="proposal-group" class="hide">
147 147 <label for="search-input">Selecione um programa para fazer propostas e contar sua experiência.</label>
148 148 <div id="search-input-container">
149 149 <input placeholder="palavra chave" id="search-input" type="text" name="search" />
... ... @@ -153,12 +153,12 @@
153 153 {{#link title id}}{{/link}}
154 154 {{/list_proposal}}
155 155 </ul>
156   - </div>
  156 + </article>
157 157  
158 158 {{#each article.children}}
159 159 {{!-- <div class="container"> --}}
160   - <div class="proposal-detail hide" id="proposal-item-{{id}}">
161   - <div class="categories {{#each categories}}{{slug}} {{/each}}">
  160 + <article class="proposal-detail hide" id="proposal-item-{{id}}">
  161 + <div class="categories {{#each categories}}{{slug}}{{/each}}">
162 162 <ul class="select">
163 163 {{#each categories}}
164 164 <li class="category proposal-category" data-category="{{slug}}">
... ... @@ -172,14 +172,13 @@
172 172 {{/each}}
173 173 </ul>
174 174  
175   -
176   - <div class="proposal-header ">
177   - <div class="abstract ">
  175 + <div class="proposal-header">
  176 + <div class="abstract">
178 177 <img src="{{../host}}{{image.url}}" alt="Imagem de apresentação do programa."/>
179 178 </div>
180 179 <a href="#/programas/{{id}}/sobre-o-programa">
181   - <div class="title ">{{title}}</div>
182   - <div class="abstract ">{{{abstract}}}</div>
  180 + <div class="title">{{title}}</div>
  181 + <div class="abstract">{{{abstract}}}</div>
183 182 </a>
184 183 <div class="show_body row">
185 184 <a class="col-sm-6 col-sm-offset-3" href="#/programas/{{id}}/sobre-o-programa"><span>Conheça o programa</span></a>
... ... @@ -195,7 +194,7 @@
195 194 <div class="row">
196 195 <div class="col-sm-4">
197 196 <div class="go-to-proposal-button">
198   - <a href="#/programas/{{id}}" data-target="proposal-item-{{id}}">
  197 + <a href="#/programas/{{id}}" data-target="proposal-item-{{id}}" class="button button-participe">
199 198 <span class="fa fa-reply"></span>
200 199 Participe
201 200 </a>
... ... @@ -258,26 +257,32 @@
258 257 <div class="talk-proposal">
259 258 <div class="container-title">Bate-papo com os ministros</div>
260 259 <p>Confira as datas e horários:</p>
261   - <ul class="calendar" data-slick='{"infinite": false, "rows": 2}'>
  260 + <ul class="calendar saude" data-slick='{"infinite": false, "rows": 2}'>
262 261 <li>
263 262 <span>Arthur Chioro</span>
264 263 <span>Saúde</span>
265 264 <div class="date"><i class="fa fa-calendar"></i> 17/06/2015</div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
266 265 </li>
  266 + </ul>
  267 + <ul class="calendar seguranca-publica" data-slick='{"infinite": false, "rows": 2}'>
267 268 <li>
268   - <span>Tereza Campello</span>
269   - <span>Desenvolvimento Social</span>
270   - <div class="date"><i class="fa fa-calendar"></i> 18/06/2015</div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
  269 + <span>José Eduardo Cardozo</span>
  270 + <span>Justiça</span>
  271 + <div class="date"><i class="fa fa-calendar"></i> 25/04/2015</div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
271 272 </li>
  273 + </ul>
  274 + <ul class="calendar educacao" data-slick='{"infinite": false, "rows": 2}'>
272 275 <li>
273 276 <span>Renato Janine Ribeiro</span>
274 277 <span>Educação</span>
275 278 <div class="date"><i class="fa fa-calendar"></i> 24/06/2015</div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
276 279 </li>
  280 + </ul>
  281 + <ul class="calendar reducao-da-pobreza" data-slick='{"infinite": false, "rows": 2}'>
277 282 <li>
278   - <span>José Eduardo Cardozo</span>
279   - <span>Justiça</span>
280   - <div class="date"><i class="fa fa-calendar"></i> 25/04/2015</div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
  283 + <span>Tereza Campello</span>
  284 + <span>Desenvolvimento Social</span>
  285 + <div class="date"><i class="fa fa-calendar"></i> 18/06/2015</div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
281 286 </li>
282 287 </ul>
283 288 </div>
... ... @@ -285,20 +290,20 @@
285 290  
286 291 <div class="clearfix"></div>
287 292 </div>
288   - </div>
  293 + </article>
289 294 {{!-- </div> --}}
290 295 {{/each}}
291 296 </script>
292 297  
293 298 <script id="support-proposal-template" type="text/x-handlebars-template">
294 299 <div class="abstract">
295   - <p>{{stripTags (trimString abstract 200)}}</p>
  300 + <p class="box-subtitle">{{stripTags (trimString abstract 200)}}</p>
296 301 </div>
297 302 <div class="vote-actions">
298 303 <a href="#" class="like dislike" data-vote-value="-1"></a>
299 304 <a href="#" class="like" data-vote-value="1"></a>
300   - <a href="#" class="skip">Pular</a>
301   - <a href="#" class="vote-result">Resultados</a>
  305 + <a href="#" class="skip button box-footer">Pular</a>
  306 + <a href="#" class="vote-result box-bottom">Resultados</a>
302 307 </div>
303 308 <div class="social">
304 309 <span>Compartilhe esta proposta</span>
... ... @@ -343,6 +348,12 @@
343 348 <div class="loading">Carregando...</div>
344 349 <form id="login-form" class="login">
345 350 <div class="message hide"></div>
  351 + <div class="row">
  352 + <div class="col-sm-4">
  353 + <a href="#" class="new-user button">Cadastre-se</a>
  354 + </div>
  355 + </div>
  356 + <p class="box-subtitle">Ou acesse:</p>
346 357 <div class="username">
347 358 <label for="user_name" class="label">Nome de Usuário / E-mail:</label>
348 359 <input id="user_name" name="login" type="text" placeholder="Nome do usuário / E-mail">
... ... @@ -351,18 +362,21 @@
351 362 <label for="user_password" class="label">Senha:</label>
352 363 <input id="user_password" name="password" type="password" placeholder="Senha">
353 364 </div>
354   - <div class="actions">
355   - <input type="submit" class="login-action" value="Acessar"/>
356   - <a href="http://www.participa.br/account/forgot_password" target="_blank" class="forgot-password">Esqueci minha senha</a>
357   - </div>
358   - <div class="oauth">
359   - <div class="label">Acessar com:</div>
360   - <a href="http://www.participa.br/plugin/oauth_client/facebook?oauth_client_popup=true&id=1" target="_blank" class="facebook oauth-login">Facebook</a>
361   - <a href="http://www.participa.br/plugin/oauth_client/google_oauth2?oauth_client_popup=true&id=2" target="_blank" class="google oauth-login">Google +</a>
362   - <a href="#" class="new-user">Cadastrar</a>
  365 + <div class="row">
  366 + <div class="actions col-sm-4">
  367 + <input type="submit" class="login-action button col-sm-12" value="Acessar"/>
  368 + <a href="http://www.participa.br/account/forgot_password" target="_blank" class="forgot-password">Esqueci minha senha</a>
  369 + </div>
  370 + <div class="oauth col-sm-8">
  371 + <span class="label">Ou acesse usando <i>&raquo;</i></span>
  372 + <a href="http://www.participa.br/plugin/oauth_client/facebook?oauth_client_popup=true&id=1" target="_blank" class="facebook oauth-login icon icon-facebook">Facebook</a>
  373 + <a href="http://www.participa.br/plugin/oauth_client/google_oauth2?oauth_client_popup=true&id=2" target="_blank" class="google oauth-login icon icon-gplus">Google +</a>
  374 + </div>
363 375 </div>
364 376 </form>
365 377 <form id="signup-form" class="signup hide" autocomplete="off">
  378 + <div class="message hide"></div>
  379 + <p class="box-subtitle">Cadastre-se</p>
366 380 <div class="email">
367 381 <label for="user_email" class="label">E-mail:</label>
368 382 <input id="user_email" name="email" type="email" required placeholder="E-mail">
... ... @@ -371,21 +385,27 @@
371 385 <label for="user_name" class="label">Nome de Usuário</label>
372 386 <input id="user_name" name="login" type="text" required placeholder="Nome do usuário">
373 387 </div>
374   - <div class="password">
375   - <label for="user_password" class="label">Senha:</label>
376   - <input id="user_password" name="password" type="password" required placeholder="Senha">
377   - </div>
378   - <div class="password-confirmation">
379   - <label for="user_password_confirmation" class="label">Confirme a senha:</label>
380   - <input id="user_password_confirmation" name="password_confirmation" type="password" required placeholder="Confirme a senha">
381   - </div>
382   - <div class="captcha">
383   - <div id="g-recaptcha"></div>
  388 + <div class="row">
  389 + <div class="password col-sm-6">
  390 + <label for="user_password" class="label">Senha:</label>
  391 + <input id="user_password" name="password" type="password" placeholder="Senha">
  392 + </div>
  393 + <div class="password-confirmation col-sm-6">
  394 + <label for="user_password_confirmation" class="label">Confirme a senha:</label>
  395 + <input id="user_password_confirmation" name="password_confirmation" type="password" placeholder="Confirme a senha">
  396 + </div>
  397 + <div class="captcha">
  398 + <div id="g-recaptcha"></div>
384 399 </div>
385 400 <div class="actions">
386   - <div class="message hide"></div>
387   - <a href="#" class="confirm-signup">Confirmar</a>
388   - <a href="#" class="cancel-signup">Cancelar</a>
  401 + <div class="row">
  402 + <div class="col-sm-4">
  403 + <a href="#" class="confirm-signup button">Confirmar</a>
  404 + </div>
  405 + <div class="col-sm-4">
  406 + <a href="#" class="cancel-signup button button-cancela">Cancelar</a>
  407 + </div>
  408 + </div>
389 409 </div>
390 410 </form>
391 411 </script>
... ...
js/handlebars-helpers.js
  Diff comments   View file @f4fdadd
... ... @@ -20,10 +20,10 @@ define([&#39;handlebars&#39;], function(Handlebars){
20 20 var proposal = proposals[i];
21 21  
22 22 element = '<li class="proposal-item">' +
23   - '<a href="#/programas/'+proposal.id+'" data-target="proposal-item-'+proposal.id+'" class="proposal-link">' +
24   - '<div class="item">' +
  23 + '<a href="#/programas/'+proposal.id+'" data-target="proposal-item-'+proposal.id+'" class="proposal-link box">' +
  24 + '<div class="box-header item">' +
25 25 '' + proposal.title;
26   - category = "<ul class='category'>";
  26 + category = "<ul class='category box-category'>";
27 27  
28 28  
29 29 for(var x=0, y=proposal.categories.length; x<y; x++) {
... ... @@ -31,7 +31,7 @@ define([&#39;handlebars&#39;], function(Handlebars){
31 31 element = '';
32 32 continue;
33 33 }
34   - category = category + '<li class="category-'+proposal.categories[x].slug+'">' + proposal.categories[x].name + '</li>';
  34 + category = category + '<li class="category-'+proposal.categories[x].slug+' button button-inline">' + proposal.categories[x].name + '</li>';
35 35 }
36 36 if(element == ''){
37 37 continue;
... ...
js/main.js
  Diff comments   View file @f4fdadd
... ... @@ -247,6 +247,24 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
247 247 $proposal.find('.results-container .results-content').hide();
248 248 $proposal.find('.experience-proposal-container').show();
249 249 $proposal.find('.talk-proposal-container').show();
  250 + $proposal.find('.calendar').hide();
  251 + var active_category = '';
  252 + switch($proposal.find('.categories').attr('class')) {
  253 + case 'categories saude':
  254 + active_category = 'saude';
  255 + break;
  256 + case 'categories educacao':
  257 + active_category = 'educacao';
  258 + break;
  259 + case 'categories seguranca-publica':
  260 + active_category = 'seguranca-publica';
  261 + break;
  262 + case 'categories reducao-da-pobreza':
  263 + active_category = 'reducao-da-pobreza';
  264 + break;
  265 + }
  266 +
  267 + $proposal.find('.calendar.' + active_category).show();
250 268 $proposal.find('.calendar').slick();
251 269  
252 270 var topic_id = proposal_id.split('-').pop();
... ... @@ -314,7 +332,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
314 332 '</div>';
315 333  
316 334 var HTML_BODY_APPEND = ''+
317   - '<div id="footer-brasil"></div>' +
  335 + '<footer id="footer-brasil"></footer>' +
318 336 '<script defer="defer" src="http://barra.brasil.gov.br/barra.js" type="text/javascript"></script>';
319 337  
320 338 var STYLE_TEMA_AZUL = '' +
... ... @@ -557,7 +575,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
557 575  
558 576 $( '#display-contrast' ).on('click', function(e){
559 577 e.preventDefault();
560   - $('#proposal-result').toggleClass('contrast');
  578 + $('body').toggleClass('contrast');
561 579 });
562 580  
563 581 $( '.show_body' ).on('click', function(e){
... ...
sass/_footer.scss
  Diff comments   View file @f4fdadd
1 1 footer {
2   - display: none;
  2 + // display: none;
3 3 }
... ...
sass/_proposal_detail.scss
  Diff comments   View file @f4fdadd
  1 +.login .row input,
  2 +.signup .row input {
  3 + margin-bottom: 0;
  4 +}
  5 +
  6 +@each $category, $color in $categories {
  7 + .#{$category} {
  8 + .button {
  9 + background-color: $color;
  10 + border-radius: 6px;
  11 + border-bottom: 3px solid darken($color, 15%);
  12 + color: #fff;
  13 + font-weight: 400;
  14 + font-size: 16px;
  15 + padding: 20px 0;
  16 + display: block;
  17 + margin: 0;
  18 + text-align: center;
  19 + transition: all 200ms;
  20 + &:hover {
  21 + background-color: darken($color, 15%);
  22 + text-decoration: none;
  23 + }
  24 + }
  25 + input.button {
  26 + @extend .button;
  27 + margin: 0 !important;
  28 + padding: 20px 0 !important;
  29 + width: 100% !important;
  30 + }
  31 + }
  32 +}
  33 +.box-subtitle {
  34 + color: #18376c;
  35 + font-size: 24px;
  36 + font-weight: bold;
  37 +}
  38 +
1 39 .proposal-detail {
2 40 .login-container {
  41 + margin: 0 20px;
  42 + text-align: left;
3 43 .loading {
4 44 text-align: center;
5 45 }
... ... @@ -299,8 +339,8 @@
299 339 text-align: left;
300 340 }
301 341 .message {
302   - margin: 10px 35px;
303   - padding: 10px 25px;
  342 + margin: 10px 0;
  343 + padding: 10px 20px;
304 344 font-size: 12px;
305 345 background-color: #f2dede;
306 346 border-color: #ebccd1;
... ... @@ -378,6 +418,7 @@
378 418 border: 1px solid $color;
379 419 height: $container-height;
380 420 min-height: $container-height;
  421 + overflow: auto;
381 422 margin: 0 10px 20px 0;
382 423 }
383 424 .make-proposal-button{
... ... @@ -399,7 +440,7 @@
399 440 height: 15%;
400 441 }
401 442 label {
402   - color: gray;
  443 + color: #333;
403 444 }
404 445 }
405 446 .support-proposal-container{
... ... @@ -599,23 +640,24 @@
599 640 }
600 641 /*------------------ formulario ---------------- */
601 642 form .oauth {
602   - margin-top: 10px;
603   - float: left;
604   - width: 50%;
  643 + margin-top: 15px;
  644 + // float: left;
  645 + // width: 50%;
605 646 }
606 647  
607 648 form .actions {
608   - float: right;
609   - width: 50%;
  649 + // float: right;
  650 + // width: 50%;
610 651 }
611 652  
612 653 form.signup {
  654 + text-align: left;
613 655 .password, .password-confirmation {
614   - width: 47%;
  656 + // width: 47%;
615 657 display: inline-block;
616 658 }
617 659 .password {
618   - margin-left: 15px;
  660 + // margin-left: 15px;
619 661 }
620 662 .actions {
621 663 margin: 20px 0 0 0;
... ... @@ -626,7 +668,7 @@
626 668 border-radius: 7px;
627 669 color: #fff;
628 670 padding: 10px 15px;
629   - margin: 0 0 0 8px;
  671 + // margin: 0 0 0 8px;
630 672 }
631 673 .cancel-signup {
632 674 @extend .confirm-signup;
... ... @@ -702,13 +744,13 @@
702 744  
703 745 .support-proposal .abstract{
704 746 overflow-y: auto;
705   - max-height: 190px;
  747 + // max-height: 190px;
706 748 margin-bottom: 10px;
707 749 word-break: break-word;
708 750 word-wrap: break-word;
709 751  
710 752 @media only screen and (max-width: 1048px) {
711   - max-height: 140px;
  753 + // max-height: 140px;
712 754 font-size: 20px;
713 755 }
714 756 }
... ... @@ -735,7 +777,7 @@
735 777  
736 778 .info {
737 779 margin: 0 20px !important;
738   - max-height: 40px !important;
  780 + // max-height: 40px !important;
739 781 }
740 782 }
741 783  
... ...
sass/proposal_detail/_proposal-detail-base.scss
  Diff comments   View file @f4fdadd
... ... @@ -18,22 +18,20 @@
18 18 border-bottom: 1px solid #eeeff1;
19 19 color: $color;
20 20 font-size: 38px;
21   - font-weight: 300;
  21 + font-weight: 500;
22 22 padding-bottom: .5em;
23   - text-transform: uppercase;
24 23 small {
25 24 display: block;
26 25 font-size: 16px;
27   - font-weight: 300;
28   - margin-top: -.1em;
  26 + font-weight: 400;
  27 + margin-top: 5px;
29 28 text-transform: none;
30 29 }
31 30 }
32 31 h3 {
33 32 color: $color;
34 33 font-size: 28px;
35   - font-weight: 300;
36   - text-transform: uppercase;
  34 + font-weight: 500;
37 35 .border {
38 36 border-bottom: 1px solid #eeeff1;
39 37 padding-bottom: 20px;
... ... @@ -41,12 +39,14 @@
41 39 }
42 40 h4 {
43 41 font-size: 24px;
  42 + font-weight: 500;
44 43 color: $color;
45 44 text-transform: none;
46 45 }
47 46 h5 {
48 47 color: $color;
49 48 font-size: 22px;
  49 + font-weight: 500;
50 50 margin-top: 15px;
51 51 }
52 52 img {
... ... @@ -112,7 +112,7 @@
112 112 display: block;
113 113 padding: 1em;
114 114 text-align: center;
115   - font-weight: 500;
  115 + font-weight: 700;
116 116 text-decoration: none;
117 117 // text-transform: uppercase;
118 118 .fa-reply {
... ...
sass/style.scss
  Diff comments   View file @f4fdadd
... ... @@ -79,8 +79,8 @@ h1 {
79 79 }
80 80  
81 81 form {
82   - label, input, div.label, textarea {
83   - width: 90%;
  82 + input, div.label, textarea {
  83 + // width: 90%;
84 84 margin: 0 auto;
85 85 font-size: 14px;
86 86 display: block;
... ... @@ -90,6 +90,8 @@ form {
90 90 input, textarea {
91 91 color: #000;
92 92 border: 1px solid #18376C;
  93 + width: 100%;
  94 + margin-bottom: 20px;
93 95 }
94 96  
95 97 textarea {
... ... @@ -102,13 +104,13 @@ form {
102 104 color: #000;
103 105 font-weight: bold;
104 106 text-decoration: none;
105   - margin: 10px 20px;
  107 + // margin: 10px 20px;
106 108 }
107 109  
108 110 .actions, .oauth {
109   - text-align: center;
110   - font-size: 12px;
111   - margin-top: 10px;
  111 + // text-align: center;
  112 + // font-size: 12px;
  113 + // margin-top: 10px;
112 114 }
113 115 }
114 116  
... ... @@ -154,7 +156,6 @@ form {
154 156 }
155 157  
156 158 .captcha{
157   - padding-top: 20px;
158 159 }
159 160  
160 161 @media (max-width: 480px) {
... ...