Download as
Browse Code »

Commit 961c2732bb79eedc744c44f859158cc7c0afa955

Authored by Augusto dos Anjos Almeida
1 parent a5950e44
Exists in refactory-sass

tela inicial

Showing 25 changed files with 744 additions and 259 deletions   Show diff stats
.gitignore 100644 → 100755
  Diff comments   View file @961c273
... ... @@ -18,4 +18,7 @@ novo.css
18 18 novo.html
19 19 sass/novo.scss
20 20 sass/novo
21   -.bundle
22 21 \ No newline at end of file
  22 +.bundle
  23 +proposal_detail/
  24 +slick-theme.css
  25 +slick.css
23 26 \ No newline at end of file
... ...
Gemfile 100644 → 100755
  Diff comments   View file @961c273
1 1 source 'https://rubygems.org'
2   -gem 'sass', '~> 3.4.9'
3 2 \ No newline at end of file
  3 +gem 'sass', '~> 3.4.9'
... ...
Gemfile.lock 100644 → 100755
  Diff comments   View file @961c273
1 1 GEM
2 2 remote: https://rubygems.org/
3 3 specs:
4   - sass (3.4.9)
  4 + sass (3.4.13)
5 5  
6 6 PLATFORMS
7 7 ruby
8 8  
9 9 DEPENDENCIES
10   - sass (~> 3.4.9)
  10 + sass (~> 3.4.13)
... ...
css/bootstrap-alert.min.css 0 → 100755
  Diff comments   View file @961c273
... ... @@ -0,0 +1,6 @@
  1 +/*!
  2 + * Bootstrap v3.3.4 (http://getbootstrap.com)
  3 + * Copyright 2011-2015 Twitter, Inc.
  4 + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  5 + */
  6 + .alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}.alert h4{margin-top:0;color:inherit}.alert .alert-link{font-weight:700}.alert>p,.alert>ul{margin-bottom:0}.alert>p+p{margin-top:5px}.alert-dismissable,.alert-dismissible{padding-right:35px}.alert-dismissable .close,.alert-dismissible .close{position:relative;top:-2px;right:-21px;color:inherit}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.alert-success hr{border-top-color:#c9e2b3}.alert-success .alert-link{color:#2b542c}.alert-info{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.alert-info hr{border-top-color:#a6e1ec}.alert-info .alert-link{color:#245269}.alert-warning{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.alert-warning hr{border-top-color:#f7e1b5}.alert-warning .alert-link{color:#66512c}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.alert-danger hr{border-top-color:#e4b9c0}.alert-danger .alert-link{color:#843534}
... ...
images/icons/icon-facebook-contrast.png 0 → 100755
View file @961c273

1.48 KB
images/icons/icon-facebook-disabled.png 0 → 100755
View file @961c273

15.2 KB
images/icons/icon-facebook.png 0 → 100755
View file @961c273

1.52 KB
images/icons/icon-gplus-contrast.png 0 → 100755
View file @961c273

1.73 KB
images/icons/icon-gplus-disabled.png 0 → 100755
View file @961c273

15.5 KB
images/icons/icon-gplus.png 0 → 100755
View file @961c273

1.93 KB
images/icons/icon-twitter-contrast.png 0 → 100755
View file @961c273

1.79 KB
images/icons/icon-twitter-disabled.png 0 → 100755
View file @961c273

15.4 KB
images/icons/icon-twitter.png 0 → 100755
View file @961c273

1.72 KB
images/icons/icon-whatsapp-contrast.png 0 → 100755
View file @961c273

2.04 KB
images/icons/icon-whatsapp-disabled.png 0 → 100755
View file @961c273

15.7 KB
images/icons/icon-whatsapp.png 0 → 100755
View file @961c273

2.17 KB
index.html
  Diff comments   View file @961c273
... ... @@ -43,6 +43,7 @@
43 43 function loadCSSFiles(){
44 44 var css_files = [
45 45 'css/bootstrap.min.css',
  46 + 'css/bootstrap-alert.min.css',
46 47 'css/hover.custom.css',
47 48 'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css',
48 49 'http://fonts.googleapis.com/css?family=Open+Sans:400,300,700',
... ... @@ -88,15 +89,15 @@
88 89  
89 90  
90 91 <div class="container">
91   - <div id="proposal-result" class="row"></div>
  92 + <div id="proposal-result"></div>
92 93 </div>
93 94  
94 95 <script id="proposal-template" type="text/x-handlebars-template">
95 96 <header>
96 97 <h1><a href="#">{{article.title}}</a></h1>
97 98 <a id="display-contrast" href="#">Alto Contraste</a>
98   - <div class="social">
99   - <a href="#" class="fb-share" data-description="Aqui suas ideias viram propostas e você ajuda a melhorar as ações do governo">Compartilhar</a>
  99 + <div class="social top">
  100 + {{#social_share "Dialoga Brasil" "Aqui suas ideias viram propostas e você ajuda a melhorar as ações do governo" "#"}}{{/social_share}}
100 101 </div>
101 102 </header>
102 103  
... ... @@ -104,7 +105,7 @@
104 105 {{{article.abstract}}}
105 106 </div>
106 107  
107   - <nav role="tabpanel">
  108 + <nav class="tab" role="tabpanel">
108 109 <ul role="tablist">
109 110 <li id="nav-proposal-categories" role="presentation">
110 111 <a href="#/temas" class="active" role="tab" aria-controls="proposal-categories">Por Temas</a>
... ... @@ -118,10 +119,10 @@
118 119 <article id="proposal-categories">
119 120 <div id="proposal-categories-container">
120 121 <nav>
121   - <ul>
  122 + <ul class="themes">
122 123 {{#each article.categories}}
123 124 <li id="proposal-category-{{slug}}" class="proposal-category" data-category="{{slug}}">
124   - <a href="#/temas/{{slug}}/{{id}}" class="proposal-link hvr-float-shadow" data-target="proposal-item-{{id}}">{{name}}</a>
  125 + <a href="#/temas/{{slug}}/{{id}}" class="proposal-link hvr-float-shadow " data-target="proposal-item-{{id}}">{{name}}</a>
125 126 <div class="arrow-box" style="display: none"></div>
126 127 </li>
127 128 {{/each}}
... ... @@ -162,27 +163,24 @@
162 163 <header class="select">
163 164 {{#each categories}}
164 165 <div class="category proposal-category" data-category="{{slug}}">
165   - <a href="#/temas/{{slug}}/{{id}}" class="proposal-link" data-target="proposal-item-{{id}}">{{name}}</a>
166   - <button class="go-back btn btn-default pull-right">
167   - VOLTAR
  166 + <button class="go-back btn btn-default">
168 167 <span class="fa fa-reply"></span>
  168 + Voltar
169 169 </button>
  170 + <a href="#/temas/{{slug}}/{{id}}" class="proposal-link" data-target="proposal-item-{{id}}">{{name}}</a>
170 171 {{#select_proposal ../../article.children slug ../id}}{{/select_proposal}}
171 172 </div>
172 173 {{/each}}
173 174 </header>
174 175  
175   - <div class="social">
176   - <a href="#" class="fb-share" data-caption="{{title}}" data-description="{{stripTags abstract}}">Compartilhar</a>
177   - </div>
178 176 <div class="proposal-header">
179 177 <div class="abstract">
180 178 <img src="{{../host}}{{image.url}}" alt="Imagem de apresentação do programa."/>
181 179 </div>
182 180 <div class="title">{{title}}</div>
183 181 <div class="abstract">{{{abstract}}}</div>
184   - <div class="show_body">
185   - <a href="#/programas/{{id}}/sobre-o-programa"><span>Conheça o Programa</span></a>
  182 + <div class="show_body row">
  183 + <a class="col-sm-6 col-sm-offset-3" href="#/programas/{{id}}/sobre-o-programa"><span>Conheça o programa</span></a>
186 184 </div>
187 185 </div>
188 186  
... ... @@ -192,12 +190,20 @@
192 190 </div>
193 191  
194 192 <div class="container">
195   - <div class="col-sm-4 col-sm-offset-4">
196   - <div class="go-to-proposal-button">
197   - <a href="#/programas/{{id}}" data-target="proposal-item-{{id}}" class="button button-participe">
198   - <span class="fa fa-reply"></span>
199   - Participe
200   - </a>
  193 + <div class="row">
  194 + <div class="col-sm-4">
  195 + <div class="go-to-proposal-button">
  196 + <a href="#/programas/{{id}}" data-target="proposal-item-{{id}}" class="button button-participe">
  197 + <span class="fa fa-reply"></span>
  198 + Participe
  199 + </a>
  200 + </div>
  201 + </div>
  202 + <div class="col-sm-4 col-sm-offset-4">
  203 + <div class="social right">
  204 + <span>COMPARTILHE<br>ESTE PROGRAMA</span>
  205 + {{#social_share title abstract '#'}}{{/social_share}}
  206 + </div>
201 207 </div>
202 208 </div>
203 209 </div>
... ... @@ -208,10 +214,10 @@
208 214 <section class="make-proposal box box-propostas">
209 215 <div class="container-title box-title">Faça Uma Proposta</div>
210 216 <div class="subtitle box-subtitle">Qual a sua sugestão para melhorar este programa?</div>
211   - <div class="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>
212   - <div class="send-proposal-button send-button box-footer"><a href="#" class="button button-send"><span>Envie Sua Proposta</span></a></div>
  217 + <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>
  218 + <div class="send-proposal-button send-button box-footer"><a href="#" class="button button-send"><span>Envie sua proposta</span></a></div>
213 219 <div class="login-container hide">Login</div>
214   - <form class="make-proposal-form save-article-form hide" id="make-proposal-form-{{id}}" action="{{proposal_action ../article . }}" method="post">
  220 + <form class="make-proposal-form save-article-form require-login hide" id="make-proposal-form-{{id}}" action="{{proposal_action ../article . }}" method="post">
215 221 <div class="message hide"></div>
216 222 <div>
217 223 <div><label for="article_abstract">Descrição</label></div>
... ... @@ -230,15 +236,22 @@
230 236 </div>
231 237 <div class="support-proposal-container col-sm-6">
232 238 <section class="support-proposal box box-propostas box-center">
233   - <div class="container-title box-title"> Apoie outras propostas</div>
234   - <div class="random-proposal"></div>
235   - <div class="loading">Carregando...</div>
236   - <div class="no-proposals">Ainda não existe nenhuma proposta para este programa.</div>
  239 + <div class="container-title box-title">Apoie outras propostas</div>
  240 + <div class="alert alert-warning hide" role="alert">
  241 + <i class="fa fa-warning"></i><strong>Proposta não encontrada</strong>
  242 + </div>
  243 + <div class="support-proposal-content require-login">
  244 + <div class="random-proposal"></div>
  245 + <div class="loading">Carregando...</div>
  246 + <div class="no-proposals">Ainda não existe nenhuma proposta para este programa.</div>
  247 + </div>
  248 + <div class="login-container hide">Login</div>
  249 + <div class="send-button"><a href="#"><span>Login</span></a></div>
237 250 </section>
238 251 </div>
239 252 </div>
240 253  
241   - <div class="results-container hide boxbox-propostas "></div>
  254 + <div class="results-container hide box box-propostas "></div>
242 255  
243 256 <div class="row">
244 257 <section class="talk-proposal-container col-sm-12">
... ... @@ -288,7 +301,8 @@
288 301 <a href="#" class="vote-result box-bottom">Resultados</a>
289 302 </div>
290 303 <div class="social">
291   - <a href="#/programas/{{parent.id}}/propostas/{{id}}" class="fb-share" data-caption="{{parent.title}}" data-description="{{stripTags abstract}}">Compartilhar</a>
  304 + <span>Compartilhe esta proposta</span>
  305 + {{{social_share parent.title abstract (proposal_url parent.id id)}}}
292 306 </div>
293 307 </script>
294 308  
... ... @@ -329,6 +343,12 @@
329 343 <div class="loading">Carregando...</div>
330 344 <form id="login-form" class="login">
331 345 <div class="message hide"></div>
  346 + <div class="row">
  347 + <div class="col-sm-4">
  348 + <a href="#" class="new-user button">Cadastre-se</a>
  349 + </div>
  350 + </div>
  351 + <p>Ou acesse:</p>
332 352 <div class="username">
333 353 <label for="user_name" class="label">Nome de Usuário / E-mail:</label>
334 354 <input id="user_name" name="login" type="text" placeholder="Nome do usuário / E-mail">
... ... @@ -337,15 +357,16 @@
337 357 <label for="user_password" class="label">Senha:</label>
338 358 <input id="user_password" name="password" type="password" placeholder="Senha">
339 359 </div>
340   - <div class="actions">
341   - <input type="submit" class="login-action" value="Acessar"/>
342   - <a href="http://www.participa.br/account/forgot_password" target="_blank" class="forgot-password">Esqueci minha senha</a>
343   - </div>
344   - <div class="oauth">
345   - <div class="label">Acessar com:</div>
346   - <a href="http://www.participa.br/plugin/oauth_client/facebook?oauth_client_popup=true&id=1" target="_blank" class="facebook oauth-login">Facebook</a>
347   - <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>
348   - <a href="#" class="new-user">Cadastrar</a>
  360 + <div class="row">
  361 + <div class="actions col-sm-4">
  362 + <input type="submit" class="login-action button col-sm-12" value="Acessar"/>
  363 + <a href="http://www.participa.br/account/forgot_password" target="_blank" class="forgot-password">Esqueci minha senha</a>
  364 + </div>
  365 + <div class="oauth col-sm-8">
  366 + <span class="label">Ou acesse usando <i>&raquo;</i></span>
  367 + <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>
  368 + <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>
  369 + </div>
349 370 </div>
350 371 </form>
351 372 <form id="signup-form" class="signup hide" autocomplete="off">
... ... @@ -373,6 +394,14 @@
373 394 </form>
374 395 </script>
375 396  
  397 + <script id="social-share" type="text/x-handlebars-template">
  398 + <ul>
  399 + <li><a href="{{url}}" class="fb-share icon icon-facebook" data-caption="{{title}}" data-description="{{stripTags description}}">Compartilhar no Facebook</a></li>
  400 + <li><a href="https://twitter.com/intent/tweet?url={{encodeURI url}}&text={{stripTags description}}" class="tw-share icon icon-twitter popup">Compartilhar no Twitter</a></li>
  401 + <li><a href="https://plus.google.com/share?url={{encodeURI url}}" class="gp-share icon icon-gplus popup">Compartilhar no Google Plus</a></li>
  402 + <li><a href="whatsapp://send?text={{stripTags description}}" class="ws-share icon icon-whatsapp">Compartilhar no WhatsApp</a></li>
  403 + </ul>
  404 + </script>
376 405  
377 406 <script type='text/javascript' >
378 407 loadRequireJS();
... ...
js/handlebars-helpers.js
  Diff comments   View file @961c273
... ... @@ -94,6 +94,23 @@ define([&#39;handlebars&#39;], function(Handlebars){
94 94 return +(Math.round(num + "e+2") + "e-2");
95 95 });
96 96  
  97 + Handlebars.registerHelper('social_share', function(title, description, url) {
  98 + var template = Handlebars.compile($('#social-share').html());
  99 + if(url==='#') {
  100 + url = '';
  101 + }
  102 + url = 'http:'+Url.addBaseUrl(url);
  103 + return template({title: title, description: description, url: url});
  104 + });
  105 +
  106 + Handlebars.registerHelper('proposal_url', function(parent_id, id) {
  107 + return "#/programas/"+parent_id+"/propostas/"+id;
  108 + });
  109 +
  110 + Handlebars.registerHelper('encodeURI', function(uri) {
  111 + return encodeURIComponent(uri);
  112 + });
  113 +
97 114 function proposal_has_category(proposal, category_slug) {
98 115 for(var i=0; i<proposal.categories.length; i++) {
99 116 if(proposal.categories[i].slug == category_slug)
... ...
js/main.js
  Diff comments   View file @961c273
... ... @@ -20,14 +20,10 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
20 20 var participa = true;
21 21 if(participa){
22 22 var host = 'http://www.participa.br';
23   - var private_token = '375bee7e17d0021af7160ce664874618'; //participa
24 23 var proposal_discussion = '92856'; //participa
25 24 }else{
26 25 var host = 'http://noosfero.com:3000';
27   - //var private_token = 'bd8996155f5ea4354e42fee50b4b6891'; //casa
28   - var private_token = 'aae32bf5031e895b00a20a529d763b31'; //local serpro
29 26 var proposal_discussion = '632'; //local serpro
30   - //var proposal_discussion = '401'; //casa
31 27 }
32 28  
33 29 var BARRA_ADDED = false;
... ... @@ -36,7 +32,22 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
36 32 Main = (function(){
37 33  
38 34 return {
39   - loadRandomProposal: function (topic_id, private_token) {
  35 + private_token: '375bee7e17d0021af7160ce664874618',
  36 + getProposalId: function() {
  37 + var regexProposals = /\d.*\/propostas\/*.*/;
  38 + var proposalId = 0;
  39 +
  40 + var hasProposal = regexProposals.test(location.hash);
  41 + if( hasProposal ){
  42 + var regexExtractProposal = /propostas\/*.*/;
  43 + proposalId = regexExtractProposal.exec(location.hash)[0].split('/')[1];
  44 +
  45 + }
  46 +
  47 + return proposalId;
  48 + },
  49 + loadRandomProposal: function (topic_id) {
  50 + var private_token = Main.private_token;
40 51 var $noProposals = $('.no-proposals');
41 52 var $loading = $('.loading');
42 53 var $randomProposal = $('.random-proposal');
... ... @@ -48,10 +59,19 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
48 59 $loading.show();
49 60 $randomProposal.html('');
50 61  
51   - var url = host + '/api/v1/articles/' + topic_id + '/children' + '?private_token=' + private_token + '&limit=1&order=random()&_='+new Date().getTime()+'&fields=id,name,abstract,created_by&content_type=ProposalsDiscussionPlugin::Proposal';
  62 + var url = host + '/api/v1/articles/' + topic_id + '/children';
  63 + var childId = this.getProposalId();
  64 +
  65 + if(childId != 0){
  66 + url += '/'+childId;
  67 + }
  68 + url += '?private_token=' + Main.private_token + '&limit=1&order=random()&_='+new Date().getTime()+'&fields=id,name,abstract,created_by&content_type=ProposalsDiscussionPlugin::Proposal';
  69 +
52 70 $.getJSON(url).done(function( data ) {
53 71 $loading.hide();
  72 + $('.support-proposal .alert').hide();
54 73  
  74 + data.articles = data.articles || [data.article];
55 75 if(data.articles.length === 0) {
56 76 $noProposals.show();
57 77 return;
... ... @@ -63,7 +83,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
63 83 $randomProposal.html(supportProposalTemplate(article));
64 84 $body.off('click', '.vote-actions .skip');
65 85 $body.on('click', '.vote-actions .skip', function(e) {
66   - contextMain.loadRandomProposal(topic_id, private_token);
  86 + contextMain.loadRandomProposal(topic_id);
67 87 e.preventDefault();
68 88 });
69 89 $body.off('click', '.vote-actions .like');
... ... @@ -71,20 +91,27 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
71 91 //Helps to prevent more than one vote per proposal
72 92 if(ProposalApp.hasProposalbeenVoted(article.id)){
73 93 console.log("Proposta " + article.id + " já havia sido votada");
74   - contextMain.loadRandomProposal(topic_id, private_token);
  94 + contextMain.loadRandomProposal(topic_id);
75 95 e.preventDefault();
76 96 return;
77 97 }
  98 +
  99 + if(!logged_in) {
  100 + $(this).closest('.support-proposal').find('.send-button a').click();
  101 + e.preventDefault();
  102 + return;
  103 + }
  104 +
78 105 $.ajax({
79 106 type: 'post',
80 107 url: host + '/api/v1/articles/' + article.id + '/vote',
81 108 data: {
82 109 value: $(this).data('vote-value'),
83   - private_token: private_token
  110 + private_token: Main.private_token
84 111 }
85 112 }).done(function( /*data*/ ) {
86 113 ProposalApp.addVotedProposal(article.id);
87   - contextMain.loadRandomProposal(topic_id, private_token);
  114 + contextMain.loadRandomProposal(topic_id);
88 115 });
89 116 e.preventDefault();
90 117 });
... ... @@ -104,6 +131,9 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
104 131 }
105 132 e.preventDefault();
106 133 });
  134 + }).fail(function(){
  135 + $loading.hide();
  136 + $('.support-proposal .alert').show();
107 137 });
108 138 },
109 139  
... ... @@ -112,7 +142,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
112 142 $resultsContainer.find('.results-content').hide();
113 143  
114 144 var per_page = 10;
115   - var url = host + '/api/v1/proposals_discussion_plugin/' + topic_id + '/ranking' + '?private_token=' + private_token + '&per_page='+per_page+'&page='+page;
  145 + var url = host + '/api/v1/proposals_discussion_plugin/' + topic_id + '/ranking' + '?private_token=' + Main.private_token + '&per_page='+per_page+'&page='+page;
116 146 $.getJSON(url).done(function( data, stats, xhr ) {
117 147 data.pagination = {
118 148 total: parseInt(xhr.getResponseHeader('Total')),
... ... @@ -156,14 +186,14 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
156 186  
157 187 if(logged_in) {
158 188 if(token){
159   - private_token = token;
  189 + Main.private_token = token;
160 190 }
161   - loginButton.siblings('.save-article-form').show();
162   - loginButton.siblings('.save-article-form .message').show();
  191 + loginButton.siblings('.require-login').show();
  192 + loginButton.siblings('.require-login .message').show();
163 193 loginButton.siblings('.login-container').hide();
164   - $.cookie('_dialoga_session', private_token);
  194 + $.cookie('_dialoga_session', Main.private_token);
165 195 } else {
166   - loginButton.siblings('.save-article-form').hide();
  196 + loginButton.siblings('.require-login').hide();
167 197 loginButton.siblings('.login-container').show();
168 198 }
169 199 },
... ... @@ -218,7 +248,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
218 248 $proposal.find('.calendar').slick();
219 249  
220 250 var topic_id = proposal_id.split('-').pop();
221   - this.loadRandomProposal(topic_id, private_token);
  251 + this.loadRandomProposal(topic_id);
222 252 },
223 253 display_proposal_detail: function(proposal_id){
224 254 $('#proposal-categories').hide();
... ... @@ -236,7 +266,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
236 266 $proposal.find('.body').show();
237 267 $proposal.show();
238 268  
239   - var url = host + '/api/v1/articles/' + proposal_id + '?private_token=' + private_token + '&fields=id,body&content_type=ProposalsDiscussionPlugin::Topic';
  269 + var url = host + '/api/v1/articles/' + proposal_id + '?private_token=' + Main.private_token + '&fields=id,body&content_type=ProposalsDiscussionPlugin::Topic';
240 270 $.getJSON(url).done(function( data ) {
241 271 $('#proposal-item-' + proposal_id + ' .body-content').replaceWith(data.article.body);
242 272 })
... ... @@ -389,7 +419,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
389 419 // show the 'index' -> category tab
390 420 this.display_category_tab();
391 421  
392   -
  422 +
393 423 // if(navOffset){
394 424 // scrollTop = navOffset.top;
395 425 // }
... ... @@ -435,12 +465,12 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
435 465 })();
436 466  
437 467 // Load data from localhost when it is dev env.
438   - var noosferoAPI = host + '/api/v1/articles/' + proposal_discussion + '?private_token=' + private_token + '&fields=id,children,categories,abstract,title,image,url,setting,position';
  468 + var noosferoAPI = host + '/api/v1/articles/' + proposal_discussion + '?private_token=' + Main.private_token + '&fields=id,children,categories,abstract,title,image,url,setting,position';
439 469  
440 470 $.getJSON(noosferoAPI)
441 471 .done(function( data ) {
442 472 data.host = host;
443   - data.private_token = private_token;
  473 + data.private_token = Main.private_token;
444 474 resultsPlaceholder.innerHTML = template(data);
445 475 $('.login-container').html(loginTemplate());
446 476 $('.countdown').maxlength({text: '%left caracteres restantes'});
... ... @@ -583,7 +613,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
583 613 $.ajax({
584 614 type: 'post',
585 615 url: host + $form.attr('action'),
586   - data: $('#'+this.id).serialize() + '&private_token=' + private_token + '&fields=id&article[name]=article_' + Main.guid()
  616 + data: $('#'+this.id).serialize() + '&private_token=' + Main.private_token + '&fields=id&article[name]=article_' + Main.guid()
587 617 })
588 618 .done(function( /*data*/ ) {
589 619 form.reset();
... ... @@ -612,14 +642,14 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
612 642  
613 643  
614 644 $(document).ready(function($) {
615   -
  645 +
616 646 FastClick.attach(document.body);
617 647  
618 648 if($.cookie('_dialoga_session')) {
619 649 var url = host + '/api/v1/users/me?private_token=' + $.cookie('_dialoga_session');
620 650 $.getJSON(url).done(function( /*data*/ ) {
621 651 logged_in = true;
622   - private_token = $.cookie('_dialoga_session');
  652 + Main.private_token = $.cookie('_dialoga_session');
623 653 });
624 654 }
625 655  
... ... @@ -645,11 +675,6 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
645 675  
646 676 $(document).on('click', '.social .fb-share', function(e) {
647 677 var link = $(this).attr('href');
648   - if(link==='#' || link ==='') {
649   - link = window.location.href;
650   - } else {
651   - link = 'http:'+Url.addBaseUrl(link);
652   - }
653 678 FB.ui({
654 679 method: 'feed',
655 680 link: link,
... ... @@ -700,6 +725,30 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
700 725 });
701 726 e.preventDefault();
702 727 });
  728 +
  729 + var popupCenter = function(url, title, w, h) {
  730 + var dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
  731 + var dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
  732 +
  733 + var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
  734 + var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
  735 +
  736 + var left = ((width / 2) - (w / 2)) + dualScreenLeft;
  737 + var top = ((height / 3) - (h / 3)) + dualScreenTop;
  738 +
  739 + var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
  740 +
  741 + // Puts focus on the newWindow
  742 + if (window.focus) {
  743 + newWindow.focus();
  744 + }
  745 + };
  746 +
  747 + $(document).on('click', '.social a.popup', {}, function popUp(e) {
  748 + var self = $(this);
  749 + popupCenter(self.attr('href'), self.find('.rrssb-text').html(), 580, 470);
  750 + e.preventDefault();
  751 + });
703 752 });
704 753  
705 754 window.addEventListener("message", function(ev) {
... ...
novo.css
  Diff comments   View file @961c273
... ... @@ -5,10 +5,16 @@ body {
5 5 font-weight: 300; }
6 6  
7 7 h1 {
  8 + border-bottom: 1px solid #000;
  9 + bottom: 0;
8 10 font-family: asap, sans;
9 11 font-size: 28px;
10 12 font-weight: 500;
11   - text-transform: uppercase; }
  13 + margin: 0;
  14 + padding: 20px 0;
  15 + position: absolute;
  16 + text-transform: uppercase;
  17 + width: 100%; }
12 18  
13 19 h2 {
14 20 border-bottom: 1px solid;
... ... @@ -31,12 +37,24 @@ h4 {
31 37 font-size: 34px;
32 38 font-weight: 500; }
33 39  
  40 +header {
  41 + position: relative;
  42 + height: 100px; }
  43 +
34 44 .container, .row {
35 45 margin-bottom: 20px; }
36 46  
  47 +#content p {
  48 + font-family: asap, sans;
  49 + margin-bottom: 60px;
  50 + margin-left: 20px;
  51 + margin-right: 20px;
  52 + margin-top: 20px; }
  53 +
37 54 .button {
38 55 background-color: #000;
39   - border-radius: 5px;
  56 + border: 0;
  57 + border-radius: 6px;
40 58 color: #fff;
41 59 cursor: pointer;
42 60 display: block;
... ... @@ -45,7 +63,7 @@ h4 {
45 63 padding: 20px 0;
46 64 text-align: center;
47 65 text-transform: uppercase;
48   - transition: all 200ms; }
  66 + transition: all 400ms; }
49 67 .button:hover {
50 68 background-color: #333333;
51 69 text-decoration: none; }
... ... @@ -60,26 +78,140 @@ h4 {
60 78 margin-right: 10px; }
61 79  
62 80 .btn {
63   - background-color: #fff;
64   - border-radius: 0;
65   - border: 1px solid #ccc;
66   - color: #000;
67   - line-height: 3.1;
  81 + background-color: transparent;
  82 + border: 0;
  83 + color: #fff;
68 84 font-size: 14px;
69   - padding: 6px 12px; }
  85 + padding-bottom: 0;
  86 + padding-left: 10px;
  87 + padding-right: 10px;
  88 + padding-top: 0;
  89 + vertical-align: middle; }
  90 +
  91 +.icon {
  92 + background-color: transparent !important;
  93 + background-repeat: no-repeat;
  94 + background-position: 50% !important;
  95 + background-size: auto !important;
  96 + border: 0 !important;
  97 + display: inline-block;
  98 + height: 36px;
  99 + min-width: 0 !important;
  100 + padding: 0 !important;
  101 + text-align: left;
  102 + text-indent: -999999px;
  103 + width: 36px; }
  104 + .icon-facebook {
  105 + background-image: url(images/icons/icon-facebook.png) !important; }
  106 + .icon-facebook.disabled {
  107 + background-image: url(images/icons/icon-facebook-disabled.png) !important; }
  108 + .icon-twitter {
  109 + background-image: url(images/icons/icon-twitter.png) !important; }
  110 + .icon-twitter.disabled {
  111 + background-image: url(images/icons/icon-twitter-disabled.png) !important; }
  112 + .icon-gplus {
  113 + background-image: url(images/icons/icon-gplus.png) !important; }
  114 + .icon-gplus.disabled {
  115 + background-image: url(images/icons/icon-gplus-disabled.png) !important; }
  116 + .icon-whatsapp {
  117 + background-image: url(images/icons/icon-whatsapp.png) !important; }
  118 + .icon-whatsapp.disabled {
  119 + background-image: url(images/icons/icon-whatsapp-disabled.png) !important; }
  120 +
  121 +.social {
  122 + position: relative;
  123 + z-index: 1; }
  124 + .social.top {
  125 + margin-top: 45px;
  126 + float: right; }
  127 + .social.right {
  128 + padding-top: 10px; }
  129 + .social.right span {
  130 + display: inline-block;
  131 + font-size: 12px;
  132 + font-weight: 300;
  133 + padding-right: 10px;
  134 + text-align: right;
  135 + vertical-align: middle; }
  136 + .social.right ul {
  137 + display: inline-block;
  138 + vertical-align: middle; }
  139 + .social span {
  140 + display: block;
  141 + margin-bottom: 10px; }
  142 + .social ul {
  143 + list-style: none;
  144 + padding-left: 0; }
  145 + .social li {
  146 + display: inline-block;
  147 + padding: 0 2px !important; }
  148 +
  149 +.tab {
  150 + margin-top: 20px; }
  151 + .tab ul {
  152 + font-size: 0;
  153 + list-style: none;
  154 + margin-bottom: 0;
  155 + padding-left: 0; }
  156 + .tab li {
  157 + display: inline-block;
  158 + font-size: 16px;
  159 + width: 50%; }
  160 + .tab a {
  161 + background-color: #efefef;
  162 + border-bottom: 1px solid #000;
  163 + color: #000;
  164 + display: block;
  165 + font-weight: 700;
  166 + padding-bottom: 20px;
  167 + padding-left: 5px;
  168 + padding-right: 5px;
  169 + padding-top: 20px;
  170 + text-align: center;
  171 + text-transform: uppercase; }
  172 + .tab .active {
  173 + background-color: #fff;
  174 + border-bottom: 1px solid #fff;
  175 + border-left: 1px solid #000;
  176 + border-right: 1px solid #000;
  177 + border-top: 1px solid #000; }
  178 +
  179 +.themes {
  180 + font-size: 0;
  181 + text-align: center; }
  182 + .themes li {
  183 + display: inline-block;
  184 + font-size: 16px;
  185 + width: 140px;
  186 + margin: 10px; }
  187 + .themes a {
  188 + background-color: #000;
  189 + border-radius: 6px;
  190 + color: #fff;
  191 + display: block;
  192 + font-family: asap, sans;
  193 + font-size: 14px;
  194 + font-weight: 700;
  195 + padding-bottom: 5px;
  196 + padding-top: 110px; }
  197 + .themes a:hover {
  198 + text-decoration: none; }
70 199  
71 200 #proposal-categories, #proposal-group {
72 201 border-bottom: 1px solid #000;
73 202 border-left: 1px solid #000;
74 203 border-right: 1px solid #000;
75   - padding: 20px 20px 0; }
  204 + padding-bottom: 0;
  205 + padding-left: 20px;
  206 + padding-right: 20px;
  207 + padding-top: 10px; }
76 208 #proposal-categories ul, #proposal-group ul {
77 209 list-style: none;
78 210 padding-left: 0; }
79 211  
80 212 .proposal-container {
81 213 background-color: #ccc;
82   - border-radius: 5px;
  214 + border-radius: 6px;
83 215 padding-bottom: 10px;
84 216 padding-left: 20px;
85 217 padding-right: 20px;
... ... @@ -101,13 +233,14 @@ h4 {
101 233 .box {
102 234 background-color: #fff;
103 235 border: 1px solid gray;
104   - border-radius: 5px;
  236 + border-radius: 6px;
105 237 color: #000;
106 238 display: block;
107 239 height: 200px;
108 240 margin-top: 30px;
  241 + overflow: auto;
109 242 padding: 20px;
110   - transition: all 200ms; }
  243 + transition: all 400ms; }
111 244 .box:hover {
112 245 background-color: #e6e6e6;
113 246 color: #000;
... ... @@ -122,8 +255,14 @@ h4 {
122 255 height: 500px;
123 256 border: 1px solid;
124 257 margin-bottom: 10px;
  258 + margin-top: 0;
125 259 padding: 20px;
126 260 position: relative; }
  261 + .box-propostas:hover {
  262 + background-color: #fff; }
  263 + .box-propostas p {
  264 + border-bottom: 0;
  265 + padding-bottom: inherit; }
127 266 .box-header {
128 267 font-family: asap, sans;
129 268 font-size: 24px;
... ... @@ -145,22 +284,27 @@ h4 {
145 284 font-size: 38px;
146 285 font-weight: 400;
147 286 margin-bottom: 20px; }
148   - .box-subtitle {
  287 + .box-subtitle, .box-propostas p {
149 288 font-size: 24px;
150 289 font-weight: 700;
151 290 line-height: 1.2;
152 291 margin-bottom: 20px; }
  292 + .box-info {
  293 + margin-bottom: 20px; }
153 294 .box-footer, .box-bottom {
154   - position: absolute;
155   - bottom: 40px;
156   - margin-left: -30%;
157   - left: 50%;
158   - width: 60%; }
  295 + margin-bottom: 5px;
  296 + margin-left: auto;
  297 + margin-right: auto;
  298 + margin-top: 20px;
  299 + width: 40%; }
159 300 .box-bottom {
160 301 bottom: 10px;
161 302 color: #000;
  303 + display: inline-block;
162 304 font-size: 14px;
163 305 font-weight: 700;
  306 + margin-bottom: 15px;
  307 + margin-top: 0;
164 308 text-align: center; }
165 309 .box-bottom:hover, .box-bottom:focus {
166 310 color: #000; }
... ... @@ -169,23 +313,26 @@ h4 {
169 313  
170 314 .select {
171 315 background-color: #000;
172   - margin-bottom: 10px; }
  316 + margin-bottom: 10px;
  317 + padding: 5px; }
173 318 .select .proposal-link {
174 319 color: #fff;
175 320 display: inline-block;
176   - font-size: 19px;
  321 + font-size: 24px;
177 322 font-weight: 700;
178   - padding-bottom: 15px;
179   - padding-left: 50px;
180   - padding-right: 15px;
181   - padding-top: 15px;
182   - text-transform: uppercase; }
  323 + padding-bottom: 0;
  324 + padding-left: 45px;
  325 + padding-right: 0;
  326 + padding-top: 0;
  327 + vertical-align: middle; }
183 328 .select .proposal-selection {
184 329 background-color: #fff;
185 330 border: 0;
  331 + border-radius: 3px;
186 332 float: right;
187   - height: 57px;
188   - width: 60%; }
  333 + margin: 4px;
  334 + width: 60%;
  335 + vertical-align: middle; }
189 336  
190 337 .proposal-header {
191 338 position: relative; }
... ... @@ -207,43 +354,23 @@ h4 {
207 354 width: 50%;
208 355 vertical-align: middle; }
209 356 .proposal-header .show_body {
210   - background-color: #000;
211   - border-radius: 5px;
212   - cursor: pointer;
213   - margin-bottom: 10px;
214   - margin-left: auto;
215   - margin-right: auto;
216   - margin-top: 10px;
217   - padding-bottom: 30px;
218   - padding-left: 0;
219   - padding-right: 0;
220   - padding-top: 30px;
221   - text-align: center;
222   - transition: all 200ms;
223   - width: 100%; }
224   - .proposal-header .show_body:hover {
225   - background-color: #333333;
226   - text-decoration: none; }
227   - .proposal-header .show_body:hover span {
228   - background-color: #333333; }
  357 + margin-bottom: 20px;
  358 + margin-top: 20px; }
229 359 .proposal-header .show_body a {
230   - background: url(images/white-line.png) left center repeat-x;
  360 + background-color: #000;
  361 + border-radius: 6px;
231 362 color: #fff;
232   - display: inline-block;
233 363 font-size: 38px;
234 364 font-weight: 700;
235   - margin: 0 auto;
236   - text-transform: uppercase;
237   - width: 70%; }
  365 + padding-bottom: 10px;
  366 + padding-left: 0;
  367 + padding-right: 0;
  368 + padding-top: 10px;
  369 + text-align: center;
  370 + transition: all 400ms; }
238 371 .proposal-header .show_body a:hover {
  372 + background-color: #333333;
239 373 text-decoration: none; }
240   - .proposal-header .show_body span {
241   - background-color: #000;
242   - padding-bottom: 5px;
243   - padding-left: 15px;
244   - padding-right: 15px;
245   - padding-top: 5px;
246   - transition: all 200ms; }
247 374 .proposal-header img {
248 375 width: 100%; }
249 376 .proposal-header p {
... ... @@ -253,6 +380,28 @@ h4 {
253 380 padding-top: 5px;
254 381 text-transform: none; }
255 382  
  383 +.login {
  384 + text-align: left; }
  385 + .login input {
  386 + display: block;
  387 + margin-bottom: 20px;
  388 + width: 100%; }
  389 + .login input.button {
  390 + margin-bottom: 5px; }
  391 + .login .label {
  392 + vertical-align: middle; }
  393 + .login .icon {
  394 + vertical-align: middle; }
  395 + .login .oauth {
  396 + margin-top: 10px;
  397 + text-align: right; }
  398 + .login .forgot-password {
  399 + display: block;
  400 + font-size: 14px;
  401 + text-align: center; }
  402 + .login i {
  403 + font-style: normal; }
  404 +
256 405 .vote-actions .like {
257 406 background: url(images/like.png) no-repeat;
258 407 display: inline-block;
... ... @@ -311,9 +460,9 @@ h4 {
311 460 .paging .current {
312 461 background-color: #333333; }
313 462 .paging .next {
314   - border-radius: 0 5px 5px 0; }
  463 + border-radius: 0 6px 6px 0; }
315 464 .paging .prev {
316   - border-radius: 5px 0 0 5px; }
  465 + border-radius: 6px 0 0 6px; }
317 466  
318 467 .slick-slider {
319 468 list-style: none;
... ...
sass/_proposal_detail.scss 100644 → 100755
  Diff comments   View file @961c273
... ... @@ -7,17 +7,18 @@
7 7 li {
8 8 a {
9 9 text-decoration: none;
10   - text-transform: uppercase;
11   - padding: 15px 15px 15px 50px;
  10 + // text-transform: uppercase;
  11 + padding: 0 0 0 45px;
12 12 margin: 0;
13 13 width: 30%;
14 14 min-width: 210px;
15 15 display: inline-block;
  16 + vertical-align: middle;
16 17 span {
17 18 padding-left: 40px;
18 19 }
19 20 font: {
20   - size: larger;
  21 + size: 24px;
21 22 weight: bold;
22 23 }
23 24 background-size: 32px;
... ... @@ -27,13 +28,16 @@
27 28  
28 29 .categories {
29 30 select {
30   - height: 57px;
  31 + // height: 57px;
31 32 width: 60%;
32 33 margin: 0;
33 34 text-transform: uppercase;
34 35 border: 0;
35   - background: #EEEFF1;
  36 + background: #fff;
36 37 float: right;
  38 + vertical-align: middle;
  39 + margin: 4px;
  40 + border-radius: 3px;
37 41 }
38 42  
39 43 .proposal-header {
... ... @@ -65,30 +69,27 @@
65 69 }
66 70  
67 71 .show_body {
68   - width: 100%;
69   - padding: 30px 0;
  72 + // width: 100%;
  73 + // padding: 30px 0;
70 74 margin: 10px auto;
71 75 text-align: center;
72 76 cursor: pointer;
73   - -webkit-border-radius: 6px;
74   - -moz-border-radius: 6px;
75   - border-radius: 6px;
76 77  
77 78  
78 79 a {
79   - display: inline-block;
80   - width: 70%;
  80 + // display: inline-block;
  81 + // width: 70%;
81 82 text-decoration: none;
82 83 color: #fff;
83 84 font-size: 38px;
84   - font-weight: bold;
85   - text-transform: uppercase;
86   - margin: 0 auto;
  85 + font-weight: 500;
  86 + // text-transform: uppercase;
  87 + // margin: 0 auto;
87 88 text-align: center;
88 89 }
89 90  
90 91 span {
91   - padding: 5px 15px;
  92 + // padding: 5px 15px;
92 93 }
93 94 }
94 95 }
... ... @@ -103,7 +104,7 @@
103 104 li {
104 105 background: $color;
105 106 list-style: none;
106   - padding: 0;
  107 + padding: 5px;
107 108 a {
108 109 min-width: 0;
109 110 width: auto;
... ... @@ -249,31 +250,17 @@
249 250 background: darken($color, 15%);
250 251 }
251 252 .show_body {
252   - background: $color;
253   - // background: $color url(images/black-alpha.png);
254   - // border-top: 5px solid $color;
255   - transition: background-color .2s;
256   -
257   - &:hover,
258   - &:focus {
259   - background-color: saturate( lighten($color, 5%), 10% );
260   - // -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.5);
261   - // -moz-box-shadow: 0 2px 5px rgba(0,0,0,.5);
262   - // box-shadow: 0 2px 5px rgba(0,0,0,.5);
263   -
264   - span {
265   - background-color: saturate( lighten($color, 5%), 10% );
266   - }
267   - }
268   -
269 253 a {
270   - background: transparent url(images/white-line.png) left center repeat-x;
271   - }
272   -
273   - span {
274 254 background: $color;
275   - // background: $color url(images/black-alpha.png);
276 255 transition: background-color .2s;
  256 + -webkit-border-radius: 6px;
  257 + -moz-border-radius: 6px;
  258 + border-radius: 6px;
  259 + border-bottom: 5px solid darken($color, 15%);
  260 + padding: 15px 0;
  261 + &:hover,&:focus {
  262 + background-color: darken($color, 15%);
  263 + }
277 264 }
278 265 }
279 266 }
... ... @@ -333,13 +320,13 @@
333 320 .container-button a,
334 321 input[type=submit],
335 322 .success-proposal-sent a {
336   - font-weight: bolder;
337   - font-size: 14px;
338   - text-transform: uppercase;
  323 + font-weight: 500;
  324 + font-size: 16px;
  325 + // text-transform: uppercase;
339 326 background-color: $color;
  327 + border-bottom: 3px solid darken($color, 15%);
340 328 color: white;
341   - width: 60%;
342   - border: none;
  329 + width: 50%;
343 330 margin: 10px auto;
344 331 -webkit-border-radius: 6px;
345 332 -moz-border-radius: 6px;
... ... @@ -353,7 +340,7 @@
353 340  
354 341 &:hover,
355 342 &:focus {
356   - background-color: saturate( lighten($color, 5%), 10% );
  343 + background-color: darken($color, 15%);
357 344 }
358 345 span {
359 346 padding-left: 20px;
... ... @@ -401,9 +388,9 @@
401 388 @extend .container-button;
402 389 a {
403 390 position: absolute;
404   - left: 50%;
  391 + left: 40%;
405 392 margin: 0;
406   - margin-left: -30%;
  393 + margin-left: -20%;
407 394 bottom: 40px;
408 395 padding: 20px 0;
409 396 }
... ... @@ -433,6 +420,14 @@
433 420 min-height: $container-height;
434 421 position: relative;
435 422 margin: 0 0 20px 10px;
  423 + overflow: auto;
  424 + .alert{
  425 + width: 95%;
  426 + margin: 0 auto;
  427 + strong{
  428 + margin-left: 5px;
  429 + }
  430 + }
436 431 }
437 432 .subtitle {
438 433 color: #000;
... ... @@ -450,14 +445,14 @@
450 445 background-image: url(./images/dislike.png);
451 446 }
452 447 .skip {
453   - font-weight: bolder;
454   - font-size: 14px;
455   - text-transform: uppercase;
  448 + font-weight: 500;
  449 + font-size: 16px;
  450 + // text-transform: uppercase;
456 451 background-color: $color;
457 452 color: white;
458   - width: 60%;
459   - border: none;
460   - margin: 0;
  453 + width: 40%;
  454 + border-bottom: 3px solid darken($color, 15%);
  455 + margin: 20px auto 0;
461 456 -webkit-border-radius: 6px;
462 457 -moz-border-radius: 6px;
463 458 border-radius: 6px;
... ... @@ -465,16 +460,16 @@
465 460 text-decoration: none;
466 461 padding: 20px 0;
467 462 display: block;
468   - position: absolute;
469   - bottom: 40px;
470   - left: 50%;
471   - margin-left: -30%;
  463 + // position: absolute;
  464 + // bottom: 40px;
  465 + // left: 50%;
  466 + // margin-left: -30%;
472 467  
473 468 transition: background-color .2s;
474 469  
475 470 &:hover,
476 471 &:focus {
477   - background-color: saturate( lighten($color, 5%), 10% );
  472 + background-color: darken($color, 15%);
478 473 }
479 474 }
480 475 .vote-result {
... ... @@ -483,14 +478,14 @@
483 478 color: #000;
484 479 font-weight: bold;
485 480 text-decoration: none;
486   - margin: 0;
  481 + margin: 15px 0;
487 482 display: block;
488 483 width: 100%;
489 484 text-align: center;
490   - position: absolute;
491   - bottom: 10px;
  485 + // position: absolute;
  486 + // bottom: 10px;
492 487 left: 0;
493   - text-decoration: none;
  488 + text-decoration: underline;
494 489 color: $color;
495 490  
496 491 &:hover,
... ... @@ -499,6 +494,12 @@
499 494 }
500 495 }
501 496 }
  497 + .social {
  498 + span {
  499 + color: $color;
  500 + font-weight: 700;
  501 + }
  502 + }
502 503 }
503 504 .experience-proposal-container{
504 505 float: left;
... ... @@ -590,9 +591,10 @@
590 591 background-image: url(./images/icons/#{$category}.png);
591 592 background: {
592 593 color: $color;
593   - position: 10px 50%;
  594 + position: 5px 50%;
594 595 repeat: no-repeat;
595 596 }
  597 + border-left: 1px solid lighten($color, 10%)
596 598 }
597 599 }
598 600 /*------------------ formulario ---------------- */
... ... @@ -710,6 +712,9 @@
710 712 font-size: 20px;
711 713 }
712 714 }
  715 + .support-proposal .send-button {
  716 + display: none !important;
  717 + }
713 718 }
714 719  
715 720 @media only screen and (max-width: 992px) {
... ... @@ -759,7 +764,6 @@
759 764 }
760 765 }
761 766 .show_body {
762   - padding: 20px 0 !important;
763 767 span {
764 768 text-align: center !important;
765 769 margin: 0 10px !important;
... ...
sass/_share.scss 0 → 100755
  Diff comments   View file @961c273
... ... @@ -0,0 +1,71 @@
  1 +.social {
  2 + position: relative;
  3 + z-index: 1;
  4 + &.top {
  5 + margin-top: 45px;
  6 + }
  7 + &.right {
  8 + padding-top: 10px;
  9 + span {
  10 + display: inline-block;
  11 + font-size: 12px;
  12 + font-weight: 300;
  13 + padding-right: 10px;
  14 + text-align: right;
  15 + vertical-align: middle;
  16 + }
  17 + ul {
  18 + display: inline-block;
  19 + vertical-align: middle
  20 + }
  21 + }
  22 + span {
  23 + display: block;
  24 + margin-bottom: 10px;
  25 + }
  26 + ul {
  27 + list-style: none;
  28 + padding-left: 0;
  29 + }
  30 + li {
  31 + display: inline-block;
  32 + padding: 0 2px !important;
  33 + }
  34 + .icon {
  35 + background-color: transparent !important;
  36 + background-repeat: no-repeat;
  37 + background-position: 50% !important;
  38 + background-size: auto !important;
  39 + border: 0 !important;
  40 + display: inline-block;
  41 + height: 36px;
  42 + min-width: 0 !important;
  43 + padding: 0 !important;
  44 + text-indent: -999999px;
  45 + width: 36px;
  46 + &-facebook {
  47 + background-image: url(images/icons/icon-facebook.png) !important;
  48 + &.disabled {
  49 + background-image: url(images/icons/icon-facebook-disabled.png) !important;
  50 + }
  51 + }
  52 + &-twitter {
  53 + background-image: url(images/icons/icon-twitter.png) !important;
  54 + &.disabled {
  55 + background-image: url(images/icons/icon-twitter-disabled.png) !important;
  56 + }
  57 + }
  58 + &-gplus {
  59 + background-image: url(images/icons/icon-gplus.png) !important;
  60 + &.disabled {
  61 + background-image: url(images/icons/icon-gplus-disabled.png) !important;
  62 + }
  63 + }
  64 + &-whatsapp {
  65 + background-image: url(images/icons/icon-whatsapp.png) !important;
  66 + &.disabled {
  67 + background-image: url(images/icons/icon-whatsapp-disabled.png) !important;
  68 + }
  69 + }
  70 + }
  71 +}
0 72 \ No newline at end of file
... ...
sass/novo.sass
  Diff comments   View file @961c273
... ... @@ -6,7 +6,7 @@
6 6 $gutter: 20px
7 7  
8 8 // arredondamento
9   -$radius: 5px
  9 +$radius: 6px
10 10  
11 11 // tamanhos de fontes
12 12 $font-size-base: 16px
... ... @@ -16,7 +16,6 @@ $font-size-h1: 28px
16 16 $font-size-h2: 38px
17 17 $font-size-h3: 28px
18 18 $font-size-h4: 34px
19   -$theme-size-title: 19px
20 19 $theme-size-header: 24px
21 20 $proposal-title: 32px
22 21  
... ... @@ -32,6 +31,7 @@ $categories-descriptions: (saude: &quot;Saúde é direito de todos e dever do Estado.
32 31  
33 32 // hover
34 33 =hover($color, $amount)
  34 + transition: all 400ms
35 35 &:hover
36 36 background-color: lighten($color, $amount)
37 37 text-decoration: none
... ... @@ -46,10 +46,16 @@ body
46 46 font-size: $font-size-base
47 47 font-weight: 300
48 48 h1
  49 + border-bottom: 1px solid #000
  50 + bottom: 0
49 51 font-family: asap, sans
50 52 font-size: $font-size-h1
51 53 font-weight: 500
  54 + margin: 0
  55 + padding: $gutter 0
  56 + position: absolute
52 57 text-transform: uppercase
  58 + width: 100%
53 59 h2
54 60 border-bottom: 1px solid
55 61 font-size: $font-size-h2
... ... @@ -68,6 +74,9 @@ h3
68 74 h4
69 75 font-size: $font-size-h4
70 76 font-weight: 500
  77 +header
  78 + position: relative
  79 + height: 100px
71 80  
72 81  
73 82 // ------------------------------------
... ... @@ -82,9 +91,19 @@ h4
82 91 // elementos
83 92 // ------------------------------------
84 93  
  94 +// conteudo
  95 +#content
  96 + p
  97 + font-family: asap, sans
  98 + margin-bottom: $gutter * 3
  99 + margin-left: $gutter
  100 + margin-right: $gutter
  101 + margin-top: $gutter
  102 +
85 103 // botao padrao
86 104 .button
87 105 background-color: #000
  106 + border: 0
88 107 border-radius: $radius
89 108 color: #fff
90 109 cursor: pointer
... ... @@ -94,7 +113,6 @@ h4
94 113 padding: $gutter 0
95 114 text-align: center
96 115 text-transform: uppercase
97   - transition: all 200ms
98 116 +hover(#000, 20%)
99 117 &:hover, &:focus
100 118 color: #fff
... ... @@ -110,26 +128,144 @@ h4
110 128  
111 129 // botao voltar
112 130 .btn
113   - background-color: #fff
114   - border-radius: 0
115   - border: 1px solid #ccc
116   - color: #000
117   - line-height: 3.1
  131 + background-color: transparent
  132 + border: 0
  133 + color: #fff
118 134 font-size: $font-size-small
119   - padding: 6px 12px
  135 + padding-bottom: 0
  136 + padding-left: $gutter * 0.5
  137 + padding-right: $gutter * 0.5
  138 + padding-top: 0
  139 + vertical-align: middle
  140 +
  141 +// icones
  142 +.icon
  143 + background-color: transparent !important
  144 + background-repeat: no-repeat
  145 + background-position: 50% !important
  146 + background-size: auto !important
  147 + border: 0 !important
  148 + display: inline-block
  149 + height: 36px
  150 + min-width: 0 !important
  151 + padding: 0 !important
  152 + text-align: left
  153 + text-indent: -999999px
  154 + width: 36px
  155 + &-facebook
  156 + background-image: url(images/icons/icon-facebook.png) !important
  157 + &.disabled
  158 + background-image: url(images/icons/icon-facebook-disabled.png) !important
  159 + &-twitter
  160 + background-image: url(images/icons/icon-twitter.png) !important
  161 + &.disabled
  162 + background-image: url(images/icons/icon-twitter-disabled.png) !important
  163 + &-gplus
  164 + background-image: url(images/icons/icon-gplus.png) !important
  165 + &.disabled
  166 + background-image: url(images/icons/icon-gplus-disabled.png) !important
  167 + &-whatsapp
  168 + background-image: url(images/icons/icon-whatsapp.png) !important
  169 + &.disabled
  170 + background-image: url(images/icons/icon-whatsapp-disabled.png) !important
120 171  
121 172  
122 173 // ------------------------------------
123 174 // blocos
124 175 // ------------------------------------
125 176  
  177 +// compartilhar
  178 +.social
  179 + position: relative
  180 + z-index: 1
  181 + &.top
  182 + margin-top: 45px
  183 + float: right
  184 + &.right
  185 + padding-top: 10px
  186 + span
  187 + display: inline-block
  188 + font-size: 12px
  189 + font-weight: 300
  190 + padding-right: 10px
  191 + text-align: right
  192 + vertical-align: middle
  193 + ul
  194 + display: inline-block
  195 + vertical-align: middle
  196 + span
  197 + display: block
  198 + margin-bottom: 10px
  199 + ul
  200 + list-style: none
  201 + padding-left: 0
  202 + li
  203 + display: inline-block
  204 + padding: 0 2px !important
  205 +
  206 +// tabs de temas e programas
  207 +.tab
  208 + margin-top: $gutter
  209 + ul
  210 + font-size: 0
  211 + list-style: none
  212 + margin-bottom: 0
  213 + padding-left: 0
  214 + li
  215 + display: inline-block
  216 + font-size: $font-size-base
  217 + width: 50%
  218 + a
  219 + background-color: #efefef
  220 + border-bottom: 1px solid #000
  221 + color: #000
  222 + display: block
  223 + font-weight: 700
  224 + padding-bottom: $gutter
  225 + padding-left: $gutter * 0.25
  226 + padding-right: $gutter * 0.25
  227 + padding-top: $gutter
  228 + text-align: center
  229 + text-transform: uppercase
  230 + .active
  231 + background-color: #fff
  232 + border-bottom: 1px solid #fff
  233 + border-left: 1px solid #000
  234 + border-right: 1px solid #000
  235 + border-top: 1px solid #000
  236 +
  237 +// blocos dos temas
  238 +.themes
  239 + font-size: 0
  240 + text-align: center
  241 + li
  242 + display: inline-block
  243 + font-size: $font-size-base
  244 + width: 140px
  245 + margin: $gutter * 0.5
  246 + a
  247 + background-color: #000
  248 + border-radius: $radius
  249 + color: #fff
  250 + display: block
  251 + font-family: asap, sans
  252 + font-size: $font-size-small
  253 + font-weight: 700
  254 + padding-bottom: $gutter * 0.25
  255 + padding-top: $gutter * 5.5
  256 + &:hover
  257 + text-decoration: none
  258 +
126 259 // listagem
127 260 #proposal
128 261 &-categories
129 262 border-bottom: 1px solid #000
130 263 border-left: 1px solid #000
131 264 border-right: 1px solid #000
132   - padding: $gutter $gutter 0
  265 + padding-bottom: 0
  266 + padding-left: $gutter
  267 + padding-right: $gutter
  268 + padding-top: $gutter * 0.5
133 269 ul
134 270 list-style: none
135 271 padding-left: 0
... ... @@ -160,7 +296,7 @@ h4
160 296 list-style: none
161 297 padding-left: 0
162 298  
163   -// blocos dos programas
  299 +// box dos programas
164 300 .box
165 301 background-color: #fff
166 302 border: 1px solid gray
... ... @@ -169,8 +305,9 @@ h4
169 305 display: block
170 306 height: 200px
171 307 margin-top: $gutter * 1.5
  308 + overflow: auto
172 309 padding: $gutter
173   - transition: all 200ms
  310 + transition: all 400ms
174 311 &:hover
175 312 background-color: darken(#fff, 10%)
176 313 color: #000
... ... @@ -185,8 +322,15 @@ h4
185 322 height: 500px
186 323 border: 1px solid
187 324 margin-bottom: $gutter * 0.5
  325 + margin-top: 0
188 326 padding: $gutter
189 327 position: relative
  328 + &:hover
  329 + background-color: #fff
  330 + p
  331 + @extend .box-subtitle
  332 + border-bottom: 0
  333 + padding-bottom: inherit
190 334 &-header
191 335 font-family: asap, sans
192 336 font-size: $theme-size-header
... ... @@ -213,18 +357,23 @@ h4
213 357 font-weight: 700
214 358 line-height: 1.2
215 359 margin-bottom: $gutter
  360 + &-info
  361 + margin-bottom: $gutter
216 362 &-footer
217   - position: absolute
218   - bottom: 40px
219   - margin-left: -30%
220   - left: 50%
221   - width: 60%
  363 + margin-bottom: $gutter * 0.25
  364 + margin-left: auto
  365 + margin-right: auto
  366 + margin-top: $gutter
  367 + width: 40%
222 368 &-bottom
223 369 @extend .box-footer
224 370 bottom: 10px
225 371 color: #000
  372 + display: inline-block
226 373 font-size: $font-size-small
227 374 font-weight: 700
  375 + margin-bottom: $gutter * 0.75
  376 + margin-top: 0
228 377 text-align: center
229 378 &:hover, &:focus
230 379 color: #000
... ... @@ -235,23 +384,26 @@ h4
235 384 .select
236 385 background-color: #000
237 386 margin-bottom: $gutter * 0.5
  387 + padding: $gutter * 0.25
238 388 .proposal
239 389 &-link
240 390 color: #fff
241 391 display: inline-block
242   - font-size: $theme-size-title
  392 + font-size: $theme-size-header
243 393 font-weight: 700
244   - padding-bottom: $gutter * 0.75
245   - padding-left: $gutter * 2.5
246   - padding-right: $gutter * 0.75
247   - padding-top: $gutter * 0.75
248   - text-transform: uppercase
  394 + padding-bottom: 0
  395 + padding-left: $gutter * 2.25
  396 + padding-right: 0
  397 + padding-top: 0
  398 + vertical-align: middle
249 399 &-selection
250 400 background-color: #fff
251 401 border: 0
  402 + border-radius: 3px
252 403 float: right
253   - height: 57px
  404 + margin: 4px
254 405 width: 60%
  406 + vertical-align: middle
255 407  
256 408 // imagem destaque do programa, titulo, descricao e botao de acesso
257 409 .proposal-header
... ... @@ -274,42 +426,20 @@ h4
274 426 width: 50%
275 427 vertical-align: middle
276 428 .show_body
277   - background-color: #000
278   - border-radius: $radius
279   - cursor: pointer
280   - margin-bottom: $gutter * 0.5
281   - margin-left: auto
282   - margin-right: auto
283   - margin-top: $gutter * 0.5
284   - padding-bottom: $gutter * 1.5
285   - padding-left: 0
286   - padding-right: 0
287   - padding-top: $gutter * 1.5
288   - text-align: center
289   - transition: all 200ms
290   - width: 100%
291   - +hover(#000, 20%)
292   - &:hover
293   - span
294   - background-color: lighten(#000, 20%)
  429 + margin-bottom: $gutter
  430 + margin-top: $gutter
295 431 a
296   - background: url(images/white-line.png) left center repeat-x
  432 + background-color: #000
  433 + border-radius: $radius
297 434 color: #fff
298   - display: inline-block
299 435 font-size: $font-size-h2
300 436 font-weight: 700
301   - margin: 0 auto
302   - text-transform: uppercase
303   - width: 70%
304   - &:hover
305   - text-decoration: none
306   - span
307   - background-color: #000
308   - padding-bottom: $gutter * 0.25
309   - padding-left: $gutter * 0.75
310   - padding-right: $gutter * 0.75
311   - padding-top: $gutter * 0.25
312   - transition: all 200ms
  437 + padding-bottom: $gutter * 0.5
  438 + padding-left: 0
  439 + padding-right: 0
  440 + padding-top: $gutter * 0.5
  441 + text-align: center
  442 + +hover(#000, 20%)
313 443 img
314 444 width: 100%
315 445 p
... ... @@ -320,6 +450,29 @@ h4
320 450 padding-top: $gutter * 0.25
321 451 text-transform: none
322 452  
  453 +// login form
  454 +.login
  455 + text-align: left
  456 + input
  457 + display: block
  458 + margin-bottom: $gutter
  459 + width: 100%
  460 + &.button
  461 + margin-bottom: $gutter * 0.25
  462 + .label
  463 + vertical-align: middle
  464 + .icon
  465 + vertical-align: middle
  466 + .oauth
  467 + margin-top: $gutter * 0.5
  468 + text-align: right
  469 + .forgot-password
  470 + display: block
  471 + font-size: $font-size-small
  472 + text-align: center
  473 + i
  474 + font-style: normal
  475 +
323 476 // votacao
324 477 .vote-actions
325 478 .like
... ...
sass/proposal_detail/_proposal-detail-base.scss 100644 → 100755
  Diff comments   View file @961c273
... ... @@ -107,12 +107,14 @@
107 107 -webkit-border-radius: 6px;
108 108 -moz-border-radius: 6px;
109 109 border-radius: 6px;
  110 + border-bottom: 3px solid darken($color, 18%);
110 111 color: #fff;
111 112 display: block;
112 113 padding: 1em;
113 114 text-align: center;
  115 + font-weight: 500;
114 116 text-decoration: none;
115   - text-transform: uppercase;
  117 + // text-transform: uppercase;
116 118 .fa-reply {
117 119 margin-right: .7em;
118 120 }
... ... @@ -120,7 +122,7 @@
120 122 transition: background-color .2s;
121 123 &:hover,
122 124 &:focus {
123   - background-color: saturate( lighten($color, 5%), 10% );
  125 + background-color: darken($color, 18%);
124 126 }
125 127 }
126 128 .row {
... ...
sass/style.scss
  Diff comments   View file @961c273
... ... @@ -10,6 +10,7 @@
10 10 @import 'accessibility';
11 11 @import 'slick';
12 12 @import 'slick-theme';
  13 +@import 'share';
13 14  
14 15 @import 'proposal_detail/proposal-detail-base';
15 16 @import 'proposal_detail/urgencia-e-emergencia';
... ... @@ -114,11 +115,11 @@ form {
114 115 // TO_REFACT:
115 116 .btn {
116 117 display: inline-block;
117   - padding: 6px 12px;
  118 + padding: 0 12px;
118 119 margin-bottom: 0;
119 120 font-size: 14px;
120 121 font-weight: 400;
121   - line-height: 3.1;
  122 + // line-height: 3.1;
122 123 text-align: center;
123 124 white-space: nowrap;
124 125 vertical-align: middle;
... ... @@ -130,13 +131,14 @@ form {
130 131 -ms-user-select: none;
131 132 user-select: none;
132 133 background-image: none;
133   - border: 1px solid transparent;
  134 + border: 0;
  135 + vertical-align: middle;
134 136 /* border-radius: 4px; */
135 137 }
136 138  
137 139 .btn-default {
138   - color: #000;
139   - background-color: #fff;
  140 + color: #fff;
  141 + background-color: transparent;
140 142 border-color: #ccc;
141 143 }
142 144  
... ...