Commit 4c463e14e04de922511fbddb19de55685b2c0c3c

Authored by Augusto dos Anjos Almeida
2 parents aef26ea1 366359fc

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

Showing 3 changed files with 126 additions and 74 deletions   Show diff stats
index.html
... ... @@ -99,13 +99,11 @@
99 99 <script id="proposal-template" type="text/x-handlebars-template">
100 100 <header class="container">
101 101 <a id="display-contrast" href="#">Alto Contraste</a>
102   - <!--
103 102 <div class="participar">
104   - <a href="#" class="button button-inline participe">Participe</a>
  103 + <!--<a href="#" class="button button-inline participe">Participe</a>-->
105 104 <a href="#" class="entrar">Entrar</a>
106 105 <a href="#" class="logout hide">Sair</a>
107 106 </div>
108   - -->
109 107 <h1>
110 108 <a href="#" class='logo'>{{article.title}}</a>
111 109 </h1>
... ... @@ -249,48 +247,52 @@
249 247 <div class="row">
250 248 <div class="make-proposal-container col-sm-6 require-login-container">
251 249 <section class="make-proposal box box-propostas">
252   - <div class="container-title box-title">Faça uma proposta</div>
253   - <div class="subtitle box-subtitle">Qual a sua sugestão para melhorar este programa?</div>
254   - <div class="info box-info">Esta consulta termina em julho de 2015. Até lá, todas as propostas serão lidas e as cinco mais pontuadas em cada programa receberão resposta oficial do governo.</div>
255   - <div class="row">
256   - <div class="col-sm-6 col-sm-offset-3">
257   - <div class="button send-proposal-button button-send box-footer">
258   - <a href="#"><span>Envie sua proposta</span></a>
  250 + <div class="section-content">
  251 + <div class="container-title box-title">Faça uma proposta</div>
  252 + <div class="subtitle box-subtitle">Qual a sua sugestão para melhorar este programa?</div>
  253 + <div class="info box-info">Esta consulta termina em julho de 2015. Até lá, todas as propostas serão lidas e as cinco mais pontuadas em cada programa receberão resposta oficial do governo.</div>
  254 + <div class="row">
  255 + <div class="col-sm-6 col-sm-offset-3">
  256 + <div class="button send-proposal-button button-send box-footer">
  257 + <a href="#"><span>Envie sua proposta</span></a>
  258 + </div>
259 259 </div>
260 260 </div>
261   - </div>
262   - <div class="login-container hide">Login</div>
263   - <form class="make-proposal-form save-article-form require-login hide" id="make-proposal-form-{{id}}" action="{{proposal_action ../article . }}" method="post">
264   - <div class="message hide"></div>
265   - <div>
266   - <div><label for="article_abstract">Descrição</label></div>
267   - <textarea id="article_abstract" class="countdown" name="article[abstract]" placeholder="Descrição" maxlength="200"></textarea>
  261 + <div class="login-container hide">Login</div>
  262 + <form class="make-proposal-form save-article-form require-login hide" id="make-proposal-form-{{id}}" action="{{proposal_action ../article . }}" method="post">
  263 + <div class="message hide"></div>
  264 + <div>
  265 + <div><label for="article_abstract">Descrição</label></div>
  266 + <textarea id="article_abstract" class="countdown" name="article[abstract]" placeholder="Descrição" maxlength="200"></textarea>
  267 + </div>
  268 + <input type="hidden" id="type" name="article[type]" value="ProposalsDiscussionPlugin::Proposal">
  269 + <input type="hidden" id="content_type" name="content_type" value="ProposalsDiscussionPlugin::Proposal">
  270 + <input type="submit" id="make-proposal-button" name="make-proposal-button" class="make-proposal-button" value="Enviar">
  271 + </form>
  272 + <div class="success-proposal-sent success-sent hide button-send">
  273 + <p>Sua proposta foi encaminhada com sucesso! Ela se tornará pública em até 24 horas e poderá ser apoiada por outros participantes.</p>
  274 + <a href="#">Faça nova proposta</a>
268 275 </div>
269   - <input type="hidden" id="type" name="article[type]" value="ProposalsDiscussionPlugin::Proposal">
270   - <input type="hidden" id="content_type" name="content_type" value="ProposalsDiscussionPlugin::Proposal">
271   - <input type="submit" id="make-proposal-button" name="make-proposal-button" class="make-proposal-button" value="Enviar">
272   - </form>
273   - <div class="success-proposal-sent success-sent hide button-send">
274   - <p>Sua proposta foi encaminhada com sucesso! Ela se tornará pública em até 24 horas e poderá ser apoiada por outros participantes.</p>
275   - <a href="#">Faça nova proposta</a>
  276 + <div class="clearfix"></div>
276 277 </div>
277   - <div class="clearfix"></div>
278 278 </section>
279 279 </div>
280 280  
281 281 <div class="support-proposal-container col-sm-6 require-login-container">
282 282 <section class="support-proposal box box-propostas box-center box-apoie">
283   - <div class="container-title box-title"> Apoie outras propostas</div>
284   - <div class="alert alert-warning hide" role="alert">
285   - <i class="fa fa-warning"></i><strong>Proposta não encontrada</strong>
286   - </div>
287   - <div class="support-proposal-content require-login">
288   - <div class="random-proposal"></div>
289   - <div class="loading">Carregando...</div>
290   - <div class="no-proposals">Ainda não existe nenhuma proposta para este programa.</div>
  283 + <div class="section-content">
  284 + <div class="container-title box-title"> Apoie outras propostas</div>
  285 + <div class="alert alert-warning hide" role="alert">
  286 + <i class="fa fa-warning"></i><strong>Proposta não encontrada</strong>
  287 + </div>
  288 + <div class="support-proposal-content require-login">
  289 + <div class="random-proposal"></div>
  290 + <div class="loading">Carregando...</div>
  291 + <div class="no-proposals">Ainda não existe nenhuma proposta para este programa.</div>
  292 + </div>
  293 + <div class="login-container hide">Login</div>
  294 + <div class="button-send hide"><a href="#"><span>Login</span></a></div>
291 295 </div>
292   - <div class="login-container hide">Login</div>
293   - <div class="button-send hide"><a href="#"><span>Login</span></a></div>
294 296 </section>
295 297 </div>
296 298  
... ... @@ -491,6 +493,11 @@
491 493 </div>
492 494 </script>
493 495  
  496 + <div class="success-panel hide">
  497 + <div class="icon"></div>
  498 + <div class="message"></div>
  499 + </div>
  500 +
494 501 <div class="terms-of-use text-center">
495 502 <a href="#/artigo/107880">Termos de uso</a>
496 503 </div>
... ...
js/main.js
... ... @@ -100,15 +100,18 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
100 100 $body.off('click', '.vote-actions .vote-action');
101 101 $body.on('click', '.vote-actions .vote-action', function(e) {
102 102 //Helps to prevent more than one vote per proposal
103   - if(ProposalApp.hasProposalbeenVoted(article.id)){
104   - console.log("Proposta " + article.id + " já havia sido votada");
105   - contextMain.loadRandomProposal(topic_id);
  103 + var button = $(this);
  104 +
  105 + if(!logged_in) {
  106 + $(this).closest('.require-login-container').find('.button-send a').click();
106 107 e.preventDefault();
107 108 return;
108 109 }
109 110  
110   - if(!logged_in) {
111   - $(this).closest('.require-login-container').find('.button-send a').click();
  111 + if(ProposalApp.hasProposalbeenVoted(article.id)){
  112 + console.log("Proposta " + article.id + " já havia sido votada");
  113 + Main.displaySuccess(button.closest('.support-proposal .section-content'), 'Voto realizado com sucesso', 800);
  114 + contextMain.loadRandomProposal(topic_id);
112 115 e.preventDefault();
113 116 return;
114 117 }
... ... @@ -121,6 +124,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
121 124 private_token: Main.private_token
122 125 }
123 126 }).done(function( /*data*/ ) {
  127 + Main.displaySuccess(button.closest('.support-proposal .section-content'), 'Voto realizado com sucesso', 800);
124 128 ProposalApp.addVotedProposal(article.id);
125 129 contextMain.loadRandomProposal(topic_id);
126 130 });
... ... @@ -202,9 +206,11 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
202 206 var requireLoginContainer = loginButton.closest('.require-login-container');
203 207  
204 208 if(logged_in) {
  209 + $('.logout').show();
205 210 if(token){
206 211 Main.private_token = token;
207 212 }
  213 + requireLoginContainer = $('.require-login-container');
208 214 requireLoginContainer.find('.require-login').show();
209 215 requireLoginContainer.find('.require-login .message').show();
210 216 requireLoginContainer.find('.login-container').hide();
... ... @@ -222,6 +228,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
222 228 } else {
223 229 requireLoginContainer.find('.require-login').hide();
224 230 requireLoginContainer.find('.login-container').show();
  231 + $('.logout').hide();
225 232 }
226 233 },
227 234 guid: function() {
... ... @@ -339,7 +346,6 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
339 346 $('#content').hide();
340 347 $('#article-container').hide();
341 348 $proposal = $('#proposal-item-' + proposal_id);
342   - $proposal.find('.make-proposal-form').hide();
343 349 $proposal.find('.proposal-header').hide();
344 350 $proposal.find('.make-proposal-container').hide();
345 351 $proposal.find('.support-proposal-container').hide();
... ... @@ -555,6 +561,22 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
555 561 }
556 562 }, 300);
557 563 },
  564 + displaySuccess: function(container, text, timeout) {
  565 + timeout = typeof timeout !== 'undefined' ? timeout : 2000;
  566 + container.css('opacity', 0.1);
  567 + var successPanel = $('.success-panel').clone();
  568 + successPanel.find('.message').html(text);
  569 + successPanel.appendTo(container.closest('.categories'));
  570 + successPanel.show();
  571 + successPanel.css("top", Math.max(0, ((container.height() - successPanel.outerHeight()) / 2) + container.offset().top) + "px");
  572 + successPanel.css("left", Math.max(0, ((container.width() - successPanel.outerWidth()) / 2) + container.offset().left) + "px");
  573 +
  574 + var interval = setTimeout(function() {
  575 + successPanel.hide();
  576 + container.css('opacity', 1);
  577 + successPanel.remove();
  578 + }, timeout);
  579 + },
558 580 responseToText: function(responseJSONmessage){
559 581 var o = JSON.parse(responseJSONmessage);
560 582 var msg = "";
... ... @@ -564,15 +586,16 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
564 586 if (o[key] instanceof Array) {
565 587 fn = key;
566 588 for (var i = 0; i < o[key].length; i++) {
567   - msg += fn + " " + o[key][i] + ", ";
  589 + msg += fn + " " + o[key][i] + "</br>";
568 590 }
569 591 }
570 592 }
571   - msg = msg.replace('password_confirmation', 'confirmação da senha');
572   - msg = msg.replace('password', 'senha');
573   - msg = msg.replace('login', 'nome de usuário');
574   - msg = msg.replace('email', 'e-mail');
575   - return msg.substring(0, msg.length - 2) + ".";
  593 + msg = msg.replace('password_confirmation', "campo 'confirmação da senha'");
  594 + msg = msg.replace(/password/g, "campo 'senha'");
  595 + msg = msg.replace('login', "campo 'nome de usuário'");
  596 + msg = msg.replace('email', "campo 'e-mail'");
  597 + msg = msg.substring(0, msg.length - 5) + ".";
  598 + return msg;
576 599 }
577 600 }
578 601 })();
... ... @@ -734,6 +757,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
734 757 $form.siblings('.success-sent').show();
735 758 $form.siblings('.subtitle').hide();
736 759 $form.siblings('.info').hide();
  760 + Main.displaySuccess($form.closest('.make-proposal .section-content'), 'Proposta enviada com sucesso', 2000);
737 761 })
738 762 .fail(function( jqxhr, textStatus, error ) {
739 763 var err = textStatus + ', ' + error;
... ... @@ -743,6 +767,8 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
743 767 });
744 768 });
745 769  
  770 +
  771 +
746 772 })
747 773 .fail(function( jqxhr, textStatus, error ) {
748 774 var err = textStatus + ', ' + error;
... ... @@ -763,6 +789,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
763 789 $.getJSON(url).done(function( /*data*/ ) {
764 790 logged_in = true;
765 791 Main.private_token = $.cookie('_dialoga_session');
  792 + setTimeout(function(){ $('.logout').show(); }, 2000);
766 793 });
767 794 }
768 795  
... ... @@ -770,6 +797,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
770 797 var message = $('.login .message');
771 798 message.hide();
772 799 message.text('');
  800 + var button = $(this);
773 801 $.ajax({
774 802 type: 'post',
775 803 url: host + '/api/v1/login',
... ... @@ -779,6 +807,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
779 807 }
780 808 }).done(function(data) {
781 809 Main.loginCallback(true, data.private_token);
  810 + Main.displaySuccess(button.closest('.section-content'), 'Login efetuado com sucesso', 1000);
782 811 }).fail(function( /*data*/ ) {
783 812 message.show();
784 813 message.text('Não foi possível logar');
... ... @@ -829,6 +858,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
829 858 var loading = $('.login-container .loading');
830 859 loading.show();
831 860 signup.hide();
  861 + var button = $(this);
832 862  
833 863 $.ajax({
834 864 type: 'post',
... ... @@ -836,10 +866,11 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
836 866 data: $(this).parents('.signup').serialize(),
837 867 }).done(function(data) {
838 868 Main.loginCallback(true, data.private_token);
  869 + Main.displaySuccess(button.closest('.section-content'), 'Cadastro efetuado com sucesso', 1000);
839 870 }).fail(function(data) {
840 871 var msg = Main.responseToText(data.responseJSON.message);
841 872 message.show();
842   - message.text('Não foi possível efetuar o cadastro: ' + msg);
  873 + message.html('Não foi possível efetuar o cadastro: <br/><br/>' + msg);
843 874 }).always(function() {
844 875 loading.hide();
845 876 signup.show();
... ... @@ -874,10 +905,13 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
874 905  
875 906 $(document).on('click', '.logout', function (e){
876 907 var self = $(this);
  908 + $.removeCookie('_dialoga_session');
  909 + $.removeCookie('votedProposals');
877 910 $.removeCookie('*');
878 911 logged_in = false;
879 912 $('.logout').hide();
880 913 $('.entrar').show();
  914 + location.reload();
881 915 e.preventDefault();
882 916 });
883 917  
... ... @@ -898,5 +932,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
898 932 console.log('The browser not supports the hashchange event!');
899 933 }
900 934  
  935 +
  936 +
901 937 return Main;
902 938 });
... ...
sass/style.sass
... ... @@ -219,6 +219,10 @@ td
219 219 background-repeat: no-repeat
220 220 color: #fff
221 221 padding-left: $gutter * 1.5
  222 + a
  223 + display: block
  224 + padding: 15px 0 18px 0
  225 + margin: -15px 0 -18px 0
222 226 &-participe
223 227 .fa
224 228 margin-right: $gutter * 0.5
... ... @@ -915,6 +919,11 @@ td
915 919 .title
916 920 font-size: 22px
917 921  
  922 +// 6.19 - sucesso
  923 +.success-panel
  924 + position: absolute
  925 + z-index: 100
  926 +
918 927 // ------------------------------------
919 928 // 7 - Modificadores
920 929 // ------------------------------------
... ... @@ -1051,33 +1060,33 @@ h3.titulo-destaque
1051 1060 color: #fff
1052 1061 .background
1053 1062 background-color: #000
1054   - .container
1055   - h2,h3,h4,a,p,li,label,.label,.login i,.total,.updated-at span
1056   - color: #fff
1057   - a
1058   - text-decoration: underline
1059   - small
1060   - color: darken(#fff, 40%)
1061   - blockquote
1062   - border-color: #fff
1063   - .button,.show_body a,.login input.button,.box-category li
1064   - background-color: #fff
1065   - border-color: darken(#fff, 40%)
  1063 + // .container
  1064 + h2,h3,h4,a,p,li,label,.label,.login i,.total,.updated-at span
  1065 + color: #fff
  1066 + a
  1067 + text-decoration: underline
  1068 + small
  1069 + color: darken(#fff, 40%)
  1070 + blockquote
  1071 + border-color: #fff
  1072 + .button,.show_body a,.login input.button,.box-category li
  1073 + background-color: #fff
  1074 + border-color: darken(#fff, 40%)
  1075 + color: #000
  1076 + text-decoration: none
  1077 + +hover(#fff, 40%)
  1078 + span
1066 1079 color: #000
1067   - text-decoration: none
1068   - +hover(#fff, 40%)
1069   - span
1070   - color: #000
1071   - .icon
1072   - color: #000 !important
1073   - text-decoration: none
1074   - background-color: #fff
1075   - +hover(#fff,40%)
1076   - &-vote
1077   - border-color: darken(#fff, 40%) !important
1078   - @each $category,$color in $categories
1079   - &-#{$category}
1080   - background-image: url(images/icons/#{$category}-contrast.png)
  1080 + .icon
  1081 + color: #000 !important
  1082 + text-decoration: none
  1083 + background-color: #fff
  1084 + +hover(#fff,40%)
  1085 + &-vote
  1086 + border-color: darken(#fff, 40%) !important
  1087 + @each $category,$color in $categories
  1088 + &-#{$category}
  1089 + background-image: url(images/icons/#{$category}-contrast.png)
1081 1090 .tab
1082 1091 a
1083 1092 background-color: darken(#fff, 85%)
... ...