Download as
Browse Code »

Commit 02dde451e37d6a620237c71e4cc6f6f8772bb8fb

Authored by Augusto dos Anjos Almeida
2 parents 6c2614e1 dc0e8d34
Exists in refactory-sass

Merge

Showing 8 changed files with 328 additions and 248 deletions   Show diff stats
Gemfile
  Diff comments   View file @02dde45
1 1 source 'https://rubygems.org'
2   -gem 'sass', '3.4.9'
  2 +gem 'sass', '~> 3.4.9'
3 3 \ No newline at end of file
... ...
index.html
  Diff comments   View file @02dde45
... ... @@ -6,14 +6,7 @@
6 6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 8  
9   -<link rel="stylesheet" href="css/bootstrap.min.css">
10   -<link rel="stylesheet" href="css/hover.custom.css">
11   -<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
12   -<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700">
13   -<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Asap:400,700">
14   -<link rel="stylesheet" href="style.css">
15   -
16   - <script type='text/javascript'>
  9 + <script type="text/javascript">
17 10 function removeUrlParameters(full_url){
18 11 var url_base = full_url.split('#').shift();
19 12 return url_base;
... ... @@ -28,10 +21,10 @@
28 21 return base + filename;
29 22 }
30 23 function makeCSSLink(filename){
31   - var fileref=document.createElement("link");
32   - fileref.setAttribute("rel", "stylesheet");
33   - fileref.setAttribute("type", "text/css");
34   - fileref.setAttribute("href", addBaseUrl(filename));
  24 + var fileref=document.createElement('link');
  25 + fileref.setAttribute('rel', 'stylesheet');
  26 + fileref.setAttribute('type', 'text/css');
  27 + fileref.setAttribute('href', addBaseUrl(filename));
35 28 return fileref;
36 29 }
37 30 function loadCSSFiles(){
... ... @@ -43,7 +36,7 @@
43 36 'http://fonts.googleapis.com/css?family=Asap:400,700',
44 37 'style.css'
45 38 ];
46   - head = document.getElementsByTagName("head")[0]
  39 + head = document.getElementsByTagName('head')[0]
47 40 for(i = 0; i < css_files.length; i++){
48 41 head.appendChild(makeCSSLink(css_files[i]));
49 42 }
... ... @@ -55,20 +48,20 @@
55 48 }
56 49  
57 50 function loadJavaScriptSync(file_path){
58   - var head = document.getElementsByTagName("head")[0];
59   - var script_element = document.createElement("script");
60   - script_element.type = "text/javascript";
  51 + var head = document.getElementsByTagName('head')[0];
  52 + var script_element = document.createElement('script');
  53 + script_element.type = 'text/javascript';
61 54 var req = new XMLHttpRequest();
62   - req.open("GET", file_path, false); // 'false': synchronous.
  55 + req.open('GET', file_path, false); // 'false': synchronous.
63 56 req.send(null);
64 57 script_element.text = req.responseText;
65 58 head.appendChild(script_element);
66 59 }
67 60  
68 61 function loadJavaScriptAsync(file_path){
69   - var head = document.getElementsByTagName("head")[0];
70   - var script_element = document.createElement("script");
71   - script_element.type = "text/javascript";
  62 + var head = document.getElementsByTagName('head')[0];
  63 + var script_element = document.createElement('script');
  64 + script_element.type = 'text/javascript';
72 65 script_element.src = file_path;
73 66 head.appendChild(script_element);
74 67 }
... ... @@ -98,45 +91,44 @@
98 91 }
99 92  
100 93 loadCSSFiles();
101   -
102 94 </script>
103 95  
104 96 </head>
105 97 <body>
106 98  
107   - <div id='proposal-result'></div>
  99 + <div id="proposal-result"></div>
108 100  
109   - <script id='proposal-template' type='text/x-handlebars-template'>
  101 + <script id="proposal-template" type="text/x-handlebars-template">
110 102 <header>
111 103 <h1><a href="#">{{article.title}}</a></h1>
112   - <a id='display-contrast' href='#'>Alto Contraste</a>
  104 + <a id="display-contrast" href="#">Alto Contraste</a>
113 105 </header>
114 106  
115 107 <div id="content">
116 108 <p>{{{article.body}}}</p>
117 109 </div>
118 110  
119   - <nav>
120   - <ul>
121   - <li id='nav-proposal-categories'>
122   - <a href="#/temas" class="active">Temas</a>
  111 + <nav role="tabpanel">
  112 + <ul role="tablist">
  113 + <li id="nav-proposal-categories" role="presentation">
  114 + <a href="#/temas" class="active" role="tab" aria-controls="proposal-categories">Temas</a>
123 115 </li>
124   - <li id='nav-proposal-group'>
125   - <a href="#/programas">Programas</a>
  116 + <li id="nav-proposal-group" role="presentation">
  117 + <a href="#/programas" role="tab" aria-controls="proposal-group">Programas</a>
126 118 </li>
127 119 </ul>
128 120 </nav>
129 121  
130   - <ul id="proposal-categories">
  122 + <div id="proposal-categories">
131 123 <div id="proposal-categories-container">
132 124 {{#each article.categories}}
133   - <li id='proposal-category-{{slug}}' class="proposal-category" data-category="{{slug}}">
  125 + <li id="proposal-category-{{slug}}" class="proposal-category" data-category="{{slug}}">
134 126 <a href="#/temas/{{slug}}/{{id}}" class="proposal-link hvr-float-shadow" data-target="proposal-item-{{id}}">{{name}}</a>
135 127 <div class="arrow-box" style="display: none"></div>
136 128 </li>
137 129 {{/each}}
138 130 {{#each article.categories}}
139   - <div id='proposal-item-{{id}}' class="proposal-category-items proposal-category-items-{{slug}} hide" data-category="{{slug}}">
  131 + <div id="proposal-item-{{id}}" class="proposal-category-items proposal-category-items-{{slug}} hide" data-category="{{slug}}">
140 132 <div class="header">
141 133 <div class="name">{{name}}</div>
142 134 <div class="description"></div>
... ... @@ -149,15 +141,14 @@
149 141 </div>
150 142 {{/each}}
151 143 </div>
152   - </ul>
  144 + </div>
153 145  
154   - <div id="proposal-group" class='hide'>
  146 + <div id="proposal-group" class="hide">
155 147 <label for="search-input">Selecione um programa para fazer propostas e contar sua experiência.</label>
156 148 <div id="search-input-container">
157 149 <input placeholder="palavra chave" id="search-input" type="text" name="search" />
158 150 </div>
159 151 <ul>
160   -
161 152 {{#list_proposal article.children}}
162 153 {{#link title id}}{{/link}}
163 154 {{/list_proposal}}
... ... @@ -165,11 +156,11 @@
165 156 </div>
166 157  
167 158 {{#each article.children}}
168   - <div class='proposal-detail hide' id="proposal-item-{{id}}">
169   - <div class='categories {{#each categories}}{{slug}} {{/each}}'>
  159 + <div class="proposal-detail hide" id="proposal-item-{{id}}">
  160 + <div class="categories {{#each categories}}{{slug}} {{/each}}">
170 161 <ul class="select">
171 162 {{#each categories}}
172   - <li class='category proposal-category' data-category="{{slug}}">
  163 + <li class="category proposal-category" data-category="{{slug}}">
173 164 <a href="#/temas/{{slug}}/{{id}}" class="proposal-link" data-target="proposal-item-{{id}}">{{name}}</a>
174 165 <button class="go-back btn btn-default pull-right">
175 166 VOLTAR
... ... @@ -180,96 +171,98 @@
180 171 {{/each}}
181 172 </ul>
182 173  
183   - <div class='proposal-header'>
184   - <div class='abstract'>
  174 + <div class="proposal-header">
  175 + <div class="abstract">
185 176 <img src="{{../host}}{{image.url}}" alt="Imagem de apresentação do programa."/>
186 177 </div>
187   - <div class='title'>{{title}}</div>
188   - <div class='abstract'>{{{abstract}}}</div>
189   - <div class='show_body'>
190   - <a href='#/programas/{{id}}/sobre-o-programa'><span>Conheça o Programa</span></a>
  178 + <div class="title">{{title}}</div>
  179 + <div class="abstract">{{{abstract}}}</div>
  180 + <div class="show_body">
  181 + <a href="#/programas/{{id}}/sobre-o-programa"><span>Conheça o Programa</span></a>
191 182 </div>
192 183 </div>
193 184  
194   - <div class='body proposal-detail-base hide'>
  185 + <div class="body proposal-detail-base hide">
195 186 {{{body}}}
196   - <div class='go-to-proposal-button'>
197   - <a href="#/programas/{{id}}" data-target='proposal-item-{{id}}'>
198   - <span class='fa fa-reply'></span>
  187 + <div class="go-to-proposal-button">
  188 + <a href="#/programas/{{id}}" data-target="proposal-item-{{id}}">
  189 + <span class="fa fa-reply"></span>
199 190 Agora contribua para a melhoria desse programa
200 191 </a>
201   - </div>
202   -
  192 + </div>
203 193 </div>
204   - <div class='make-proposal-container'>
205   - <div class='make-proposal'>
206   - <div class='container-title'>Faça Uma Proposta</div>
207   - <div class='subtitle'>Qual a sua sugestão para melhorar este programa?</div>
208   - <div class='info'>Ela se tornará pública em até 24 horas após o envio e poderá ser apoiada por outros participantes.</div>
209   - <div class='send-proposal-button send-button'><a href='#'><span>Envie Sua Proposta</span></a></div>
  194 +
  195 + <div class="make-proposal-container">
  196 + <div class="make-proposal">
  197 + <div class="container-title">Faça Uma Proposta</div>
  198 + <div class="subtitle">Qual a sua sugestão para melhorar este programa?</div>
  199 + <div class="info">Ela se tornará pública em até 24 horas após o envio e poderá ser apoiada por outros participantes.</div>
  200 + <div class="send-proposal-button send-button"><a href="#"><span>Envie Sua Proposta</span></a></div>
210 201 <div class="login-container hide">Login</div>
211   - <form class='make-proposal-form save-article-form hide' id='make-proposal-form-{{id}}'>
  202 + <form class="make-proposal-form save-article-form hide" id="make-proposal-form-{{id}}">
212 203 <div class="message hide"></div>
213 204 <div>
214 205 <div><label for="article_abstract">Descrição</label></div>
215 206 <textarea id="article_abstract" class="countdown" name="article[abstract]" placeholder="Descrição" maxlength="200"></textarea>
216 207 </div>
217   - <input id='content_type' name='content_type' value='ProposalsDiscussionPlugin::Proposal' type='hidden'>
218   - <input type='submit' id='make-proposal-button' class='make-proposal-button' name='make-proposal-button' value='Enviar'>
  208 + <input type="hidden" id="content_type" name="content_type" value="ProposalsDiscussionPlugin::Proposal">
  209 + <input type="submit" id="make-proposal-button" name="make-proposal-button" class="make-proposal-button" value="Enviar">
219 210 </form>
220   - <div class='success-proposal-sent success-sent hide send-button'>
  211 + <div class="success-proposal-sent success-sent hide send-button">
221 212 <p>Sua proposta foi encaminhada com sucesso!</p>
222   - <a href='#'>Encaminhar Nova Proposta</a>
  213 + <a href="#">Encaminhar Nova Proposta</a>
223 214 </div>
224 215 <br style="clear: both;" />
225 216 </div>
226 217 </div>
227   - <div class='support-proposal-container'>
228   - <div class='support-proposal'>
229   - <div class='container-title'> Apoie outras propostas</div>
230   - <div class='subtitle'> Propostas da sociedade</div>
  218 + <div class="support-proposal-container">
  219 + <div class="support-proposal">
  220 + <div class="container-title"> Apoie outras propostas</div>
  221 + <div class="subtitle"> Propostas da sociedade</div>
231 222 <div class="random-proposal"></div>
232 223 <div class="loading">Carregando...</div>
233 224 <div class="no-proposals">Ainda não existe nenhuma proposta para este programa.</div>
234 225 </div>
235 226 </div>
236   - <div class='results-container hide'></div>
237   - <div class='experience-proposal-container'>
238   - <div class='experience-proposal'>
239   - <div class='container-title'>Conte sua experiência</div>
  227 + <div class="results-container hide"></div>
  228 + <div class="experience-proposal-container">
  229 + <div class="experience-proposal">
  230 + <div class="container-title">Conte sua experiência</div>
240 231 <p>Adoraríamos que você nos contasse a sua experiência com este programa ou a de alguém que você conhece.</p>
241 232 <p>Esta história pode nos ajudar a melhorar a nossa ação e não será divulgada.</p>
242   - <div class='send-experience-button send-button'><a href='#'><span>Envie Sua Experiência</span></a></div>
  233 + <div class="send-experience-button send-button"><a href="#"><span>Envie Sua Experiência</span></a></div>
243 234 <div class="login-container hide">Login</div>
244   - <form class='make-experience-form save-article-form hide' id='make-experience-form-{{id}}'>
  235 + <form class="make-experience-form save-article-form hide" id="make-experience-form-{{id}}">
245 236 <div class="message hide"></div>
246 237 <div>
247   - <div><label for="article_abstract">Descrição</label></div>
  238 + <div>
  239 + <label for="article_abstract">Descrição</label>
  240 + </div>
248 241 <textarea id="article_abstract" class="countdown" name="article[abstract]" placeholder="Descrição" maxlength="5000"></textarea>
249 242 </div>
250   - <input id='content_type' name='content_type' value='ProposalsDiscussionPlugin::Story' type='hidden'>
251   - <input type='submit' id='make-experience-button' class='make-experience-button' name='make-experience-button' value='Enviar'>
  243 + <input type="hidden" id="content_type" name="content_type" value="ProposalsDiscussionPlugin::Story">
  244 + <input type="submit" id="make-experience-button" name="make-experience-button" class="make-experience-button" value="Enviar">
252 245 </form>
253   - <div class='success-experience-sent success-sent hide send-button'>
  246 + <div class="success-experience-sent success-sent hide send-button">
254 247 <p>Sua experiência foi encaminhada com sucesso!</p>
255   - <a href='#'>Encaminhar Nova Experiência</a>
  248 + <a href="#">Encaminhar Nova Experiência</a>
256 249 </div>
257 250 </div>
258 251 </div>
259   - <div class='talk-proposal-container'>
260   - <div class='talk-proposal'>
261   - <div class='container-title'>Fale com os ministros</div>
  252 + <div class="talk-proposal-container">
  253 + <div class="talk-proposal">
  254 + <div class="container-title">Fale com os ministros</div>
262 255 <p>Confira as datas e horários disponíveis:</p>
263   - <ul class='calendar'>
  256 + <ul class="calendar">
264 257 <li>
265 258 <span>Arthur Chioro</span>
266 259 <span>Saúde</span>
267   - <div class='date'><i class="fa fa-calendar"></i> 22/04/2015</div><div class='time'><i class="fa fa-clock-o"></i> 09:00</div>
  260 + <div class="date"><i class="fa fa-calendar"></i> 22/04/2015</div><div class="time"><i class="fa fa-clock-o"></i> 09:00</div>
268 261 </li>
269 262 <li>
270 263 <span>Teresa Campello</span>
271 264 <span>Desenvolvimento Social</span>
272   - <div class='date'><i class="fa fa-calendar"></i> 22/04/2015</div><div class='time'><i class="fa fa-clock-o"></i> 09:00</div>
  265 + <div class="date"><i class="fa fa-calendar"></i> 22/04/2015</div><div class="time"><i class="fa fa-clock-o"></i> 09:00</div>
273 266 </li>
274 267 </ul>
275 268 </div>
... ... @@ -279,8 +272,10 @@
279 272 {{/each}}
280 273 </script>
281 274  
282   - <script id='support-proposal-template' type='text/x-handlebars-template'>
283   - <div class='abstract'><p>"{{trimString abstract 200}}"</p></div>
  275 + <script id="support-proposal-template" type="text/x-handlebars-template">
  276 + <div class="abstract">
  277 + <p>{{trimString abstract 200}}</p>
  278 + </div>
284 279 <div class="vote-actions">
285 280 <a href="#" class="like dislike" data-vote-value="-1"></a>
286 281 <a href="#" class="like" data-vote-value="1"></a>
... ... @@ -289,7 +284,7 @@
289 284 </div>
290 285 </script>
291 286  
292   - <script id="results" type='text/x-handlebars-template'>
  287 + <script id="results" type="text/x-handlebars-template">
293 288 <div class="loading">Carregando...</div>
294 289 <div class="results-content hide">
295 290 <a href="#" class="vote-result">Fechar</a>
... ... @@ -312,7 +307,7 @@
312 307 </div>
313 308 </script>
314 309  
315   - <script id='login' type='text/x-handlebars-template'>
  310 + <script id="login" type="text/x-handlebars-template">
316 311 <form id="login-form" class="login">
317 312 <div class="message hide"></div>
318 313 <div class="username">
... ... @@ -336,15 +331,9 @@
336 331 </form>
337 332 </script>
338 333  
339   - <script src='js/jquery-2.1.3.min.js'></script>
340   - <script src='js/jquery-ui-1.11.4.custom/jquery-ui.min.js'></script>
341   - <script src='js/jquery.cookie.js'></script>
342   - <script src='js/handlebars-v3.0.1.js'></script>
343   - <script src='js/handlebars-helpers.js'></script>
344   - <script src='js/jquery.dotdotdot.min.js'></script>
345   - <script src='js/jquery.maxlength.min.js'></script>
346   - <script src='js/layout.js'></script>
347   - <script src='js/main.js'></script>
  334 + <script type="text/javascript">
  335 + loadJSFiles();
  336 + </script>
348 337  
349 338 </body>
350 339  
... ...
js/main.js
  Diff comments   View file @02dde45
  1 +/* global Handlebars, $ */
1 2 // The template code
2 3 var templateSource = document.getElementById('proposal-template').innerHTML;
3 4  
4 5 // compile the template
5 6 var template = Handlebars.compile(templateSource);
6   -
7 7 var supportProposalTemplate = Handlebars.compile(document.getElementById('support-proposal-template').innerHTML);
8 8 var loginTemplate = Handlebars.compile(document.getElementById('login').innerHTML);
9 9 var resultsTemplate = Handlebars.compile(document.getElementById('results').innerHTML);
... ... @@ -11,8 +11,6 @@ var resultsTemplate = Handlebars.compile(document.getElementById(&#39;results&#39;).inne
11 11 // The div/container that we are going to display the results in
12 12 var resultsPlaceholder = document.getElementById('proposal-result');
13 13  
14   -var topics;
15   -
16 14 var logged_in = false;
17 15  
18 16 var loginButton;
... ... @@ -30,19 +28,18 @@ if(participa){
30 28 //var proposal_discussion = '401'; //casa
31 29 }
32 30  
33   -// Set isProduction to true when at production environment
34   -// Set isProduction to false when at development environment
35   -var isProduction = true; // default is true
36   -if( isProduction ){
37   - var noosferoAPI = host + '/api/v1/articles/' + proposal_discussion + '?private_token=' + private_token + '&fields=id,children,categories,abstract,body,title,image,url';
38   -} else {
  31 +// Load data from localhost when it is dev env.
  32 +var isLocalhost = (window.location.hostname === 'localhost' || window.location.hostname === '0.0.0.0');
  33 +if( isLocalhost ){
39 34 var noosferoAPI = '/data.json';
  35 +} else {
  36 + var noosferoAPI = host + '/api/v1/articles/' + proposal_discussion + '?private_token=' + private_token + '&fields=id,children,categories,abstract,body,title,image,url';
40 37 }
41 38  
42 39 $.getJSON(noosferoAPI)
43 40 .done(function( data ) {
44   - data['host'] = host;
45   - data['private_token'] = private_token;
  41 + data.host = host;
  42 + data.private_token = private_token;
46 43 resultsPlaceholder.innerHTML = template(data);
47 44 $('.login-container').html(loginTemplate());
48 45 $('.countdown').maxlength({text: '%left caracteres restantes'});
... ... @@ -50,8 +47,8 @@ $.getJSON(noosferoAPI)
50 47 navigateTo(window.location.hash);
51 48  
52 49 //Actions for links
53   - $( '#nav-proposal-categories a' ).click(function(event){
54   - event.preventDefault();
  50 + $( '#nav-proposal-categories a' ).on('click touchstart', function(e){
  51 + e.preventDefault();
55 52  
56 53 var $link = $(this);
57 54  
... ... @@ -59,8 +56,8 @@ $.getJSON(noosferoAPI)
59 56 updateHash($link.attr('href'));
60 57 });
61 58  
62   - $( '#nav-proposal-group a' ).click(function(event){
63   - event.preventDefault();
  59 + $( '#nav-proposal-group a' ).on('click touchstart', function(e){
  60 + e.preventDefault();
64 61  
65 62 var $link = $(this);
66 63  
... ... @@ -68,40 +65,26 @@ $.getJSON(noosferoAPI)
68 65 updateHash($link.attr('href'));
69 66 });
70 67  
71   - $( '.proposal-item a' ).click(function(event){
  68 + $( '.proposal-item a' ).on('click touchstart', function(e){
  69 + e.preventDefault();
  70 +
72 71 var $link = $(this);
73   - var item = $link.data('target');
74 72  
75 73 // Update URL and Navigate
76 74 updateHash($link.attr('href'));
77 75 });
78 76  
79   - $( '.proposal-category a' ).click(function(event){
80   - event.preventDefault();
  77 + $( '.proposal-category a' ).on('click touchstart', function(e){
  78 + e.preventDefault();
81 79  
82 80 var $link = $(this);
83   - var item = $link.data('target');
84 81  
85 82 // Update URL and Navigate
86 83 updateHash($link.attr('href'));
87 84 });
88   -//TODO remove this
89   -// $( '.proposal-category a' ).hover(function(event){
90   -// $(this).stop().effect('shake', {distance:20}, 700);
91   -// $(form).siblings('.success-sent').show();
92   -//
93   -// if(!$(this)..siblings.hasClass('animated')){
94   -// if(!$(this).hasClass('animated')){
95   -// $(this).addClass('animated');
96   -// $(this).stop().effect('shake', {distance:20}, 700);
97   -// }
98   -// },
99   -// function(){
100   -// $(this).removeClass('animated');
101   -// });
102   -
103   - $( '.proposal-category .go-back' ).click(function(event){
104   - event.preventDefault();
  85 +
  86 + $( '.proposal-category .go-back' ).on('click touchstart', function(e){
  87 + e.preventDefault();
105 88  
106 89 var oldHash = window.location.hash;
107 90 var regexSubpages = /sobre-o-programa$/;
... ... @@ -117,41 +100,43 @@ $.getJSON(noosferoAPI)
117 100 updateHash(newHash);
118 101 });
119 102  
120   - $( '.send-button a' ).click(function(event){
  103 + $( '.send-button a' ).on('click touchstart', function(e){
  104 + e.preventDefault();
  105 +
121 106 //display form to send proposal (or login form for non-logged users)
122 107 var $this = $(this);
123 108 loginButton = $this.parents('.send-button');
124 109 loginButton.hide();
125 110 $this.parents('.success-proposal-sent').hide();
126 111 loginCallback(logged_in);
127   - event.preventDefault();
128 112 });
129 113  
130   - $( '#display-contrast' ).click(function(event){
  114 + $( '#display-contrast' ).on('click touchstart', function(e){
  115 + e.preventDefault();
131 116 $('#proposal-result').toggleClass('contrast');
132 117 });
133 118  
134   - $( '.show_body a' ).click(function(event){
135   - event.preventDefault();
  119 + $( '.show_body a' ).on('click touchstart', function(e){
  120 + e.preventDefault();
136 121  
137 122 var $link = $(this);
138   - var item = $link.data('target');
139 123  
140 124 // Update URL and Navigate
141 125 updateHash($link.attr('href'));
142 126 });
143 127  
144   - $( '.go-to-proposal-button a' ).click(function(event){
145   - event.preventDefault();
  128 + $( '.go-to-proposal-button a' ).on('click touchstart', function(e){
  129 + e.preventDefault();
146 130  
147 131 var $link = $(this);
148   - var item = $link.data('target');
149 132  
150 133 // Update URL and Navigate
151 134 updateHash($link.attr('href'));
152 135 });
153 136  
154   - $( '.proposal-selection' ).change(function(event){
  137 + $( '.proposal-selection' ).change(function(e){
  138 + e.preventDefault();
  139 +
155 140 display_proposal('proposal-item-' + this.value);
156 141 });
157 142  
... ... @@ -160,7 +145,7 @@ $.getJSON(noosferoAPI)
160 145 availableTags.push({ label: $(this).text(), value: $(this).attr('href')});
161 146 });
162 147  
163   - $( "#search-input" ).autocomplete({
  148 + $( '#search-input' ).autocomplete({
164 149 source: availableTags,
165 150 minLength: 3,
166 151 select: function( event, ui ) {
... ... @@ -179,22 +164,23 @@ $.getJSON(noosferoAPI)
179 164 e.preventDefault();
180 165 var proposal_id = this.id.split('-').pop();
181 166 var form = this;
  167 + var $form = $(this);
182 168 var message = $(form).find('.message');
183 169 message.hide();
184 170 message.text('');
185 171 $.ajax({
186 172 type: 'post',
187 173 url: host + '/api/v1/articles/' + proposal_id + '/children',
188   - data: $('#'+this.id).serialize() + "&private_token="+private_token+"&fields=id&article[name]=article_"+guid()
  174 + data: $('#'+this.id).serialize() + '&private_token=' + private_token + '&fields=id&article[name]=article_' + guid()
189 175 })
190   - .done(function( data ) {
  176 + .done(function( /*data*/ ) {
191 177 form.reset();
192   - $(form).hide();
193   - $(form).siblings('.success-sent').show();
  178 + $form.hide();
  179 + $form.siblings('.success-sent').show();
194 180 })
195 181 .fail(function( jqxhr, textStatus, error ) {
196   - var err = textStatus + ", " + error;
197   - console.log( "Request Failed: " + err );
  182 + var err = textStatus + ', ' + error;
  183 + console.log( 'Request Failed: ' + err );
198 184 message.show();
199 185 message.text('Não foi possível enviar.');
200 186 });
... ... @@ -202,33 +188,39 @@ $.getJSON(noosferoAPI)
202 188  
203 189 })
204 190 .fail(function( jqxhr, textStatus, error ) {
205   - var err = textStatus + ", " + error;
206   - console.log( "Request Failed: " + err );
  191 + var err = textStatus + ', ' + error;
  192 + console.log( 'Request Failed: ' + err );
207 193 });
208 194  
209 195 function loadRandomProposal(topic_id, private_token) {
210   - $(".no-proposals").hide();
211   - $(".loading").show();
212   - $('.random-proposal').html('');
  196 + var $noProposals = $('.no-proposals');
  197 + var $loading = $('.loading');
  198 + var $randomProposal = $('.random-proposal');
  199 + var $body = $(document.body);
  200 +
  201 + // reset view
  202 + $noProposals.hide();
  203 + $loading.show();
  204 + $randomProposal.html('');
  205 +
213 206 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';
214 207 $.getJSON(url).done(function( data ) {
215   - $(".loading").hide();
  208 + $loading.hide();
216 209  
217   - if(data.articles.length == 0) {
218   - $(".no-proposals").show();
  210 + if(data.articles.length === 0) {
  211 + $noProposals.show();
219 212 return;
220 213 }
221 214  
222 215 var article = data.articles[0];
223   - $('.random-proposal').html(supportProposalTemplate(article));
224   - // $(".abstract").dotdotdot();
225   - $(document.body).off('click', '.vote-actions .skip');
226   - $(document.body).on('click', '.vote-actions .skip', function(e) {
  216 + $randomProposal.html(supportProposalTemplate(article));
  217 + $body.off('click', '.vote-actions .skip');
  218 + $body.on('click', '.vote-actions .skip', function(e) {
227 219 loadRandomProposal(topic_id, private_token);
228 220 e.preventDefault();
229 221 });
230   - $(document.body).off('click', '.vote-actions .like');
231   - $(document.body).on('click', '.vote-actions .like', function(e) {
  222 + $body.off('click', '.vote-actions .like');
  223 + $body.on('click', '.vote-actions .like', function(e) {
232 224 $.ajax({
233 225 type: 'post',
234 226 url: host + '/api/v1/articles/' + article.id + '/vote',
... ... @@ -236,69 +228,64 @@ function loadRandomProposal(topic_id, private_token) {
236 228 value: $(this).data('vote-value'),
237 229 private_token: private_token
238 230 }
239   - }).done(function( data ) {
  231 + }).done(function( /*data*/ ) {
240 232 loadRandomProposal(topic_id, private_token);
241 233 });
242 234 e.preventDefault();
243 235 });
244 236  
245   - $(document.body).off('click', '.vote-result');
246   - $(document.body).on('click', '.vote-result', function(e) {
247   - $('.results-container').toggle();
248   - if($('.results-container').is(":visible")) {
249   - $('.results-container .loading').show();
250   - $('.results-container .results-content').hide();
  237 + $body.off('click', '.vote-result');
  238 + $body.on('click', '.vote-result', function(e) {
  239 +
  240 + var $this = $(this);
  241 + var $proposalDetail = $this.parents('.proposal-detail');
  242 + var $resultsContainer = $proposalDetail.find('.results-container');
  243 +
  244 + // $resultsContainer.toggle();
  245 + // $resultsContainer.toggleClass('hide');
  246 +
  247 + if($resultsContainer.css('display') === 'none') {
  248 +
  249 + $resultsContainer.find('.loading').show();
  250 + $resultsContainer.find('.results-content').hide();
  251 +
251 252 var url = host + '/api/v1/articles/' + topic_id + '/children' + '?private_token=' + private_token + '&limit=10&order=votes_score&fields=id,name,abstract,votes_for,votes_against&content_type=ProposalsDiscussionPlugin::Proposal';
252 253 $.getJSON(url).done(function( data ) {
253   - $('.results-container').html(resultsTemplate(data));
254   - $('.results-container .loading').hide();
255   - $('.results-container .results-content').show();
256   - $("html, body").animate({ scrollTop: $(document).height() }, "fast");
  254 +
  255 + $resultsContainer.html(resultsTemplate(data));
  256 + $resultsContainer.find('.loading').hide();
  257 + $resultsContainer.find('.results-content').show();
  258 + $resultsContainer.show();
  259 +
  260 + // scroll to the end
  261 + $('html, body').animate({
  262 + scrollTop: $(document).height()
  263 + }, 'fast');
257 264 });
258 265 $('.experience-proposal-container').hide();
259 266 $('.talk-proposal-container').hide();
260 267 } else {
261 268 $('.experience-proposal-container').show();
262 269 $('.talk-proposal-container').show();
  270 + $resultsContainer.hide();
263 271 }
  272 +
264 273 e.preventDefault();
265 274 });
266 275 });
267 276 }
268 277  
269   -jQuery(document).ready(function($) {
  278 +$(document).ready(function($) {
270 279 if($.cookie('_dialoga_session')) {
271 280 var url = host + '/api/v1/users/me?private_token=' + $.cookie('_dialoga_session');
272   - $.getJSON(url).done(function( data ) {
  281 + $.getJSON(url).done(function( /*data*/ ) {
273 282 logged_in = true;
274 283 private_token = $.cookie('_dialoga_session');
275 284 });
276 285 }
277   -});
278 286  
279   -function loginCallback(loggedIn, token) {
280   - logged_in = loggedIn;
281   - $('.login .message').text('');
282   -
283   - if(logged_in) {
284   - if(token) private_token = token;
285   - loginButton.siblings('.save-article-form').show();
286   - loginButton.siblings('.save-article-form .message').show();
287   - loginButton.siblings('.login-container').hide();
288   - $.cookie('_dialoga_session', private_token);
289   - } else {
290   - loginButton.siblings('.save-article-form').hide();
291   - loginButton.siblings('.login-container').show();
292   - }
293   -}
294   -
295   -function oauthPluginHandleLoginResult(loggedIn, token) {
296   - loginCallback(loggedIn, token);
297   -}
298   -
299   -jQuery(document).ready(function($) {
300 287 $(document).on('click', '.login-action', function(e) {
301   - var message = $('.login .message')
  288 + var message = $('.login .message');
302 289 message.hide();
303 290 message.text('');
304 291 $.ajax({
... ... @@ -310,7 +297,7 @@ jQuery(document).ready(function($) {
310 297 }
311 298 }).done(function(data) {
312 299 loginCallback(true, data.private_token);
313   - }).fail(function(data) {
  300 + }).fail(function( /*data*/ ) {
314 301 message.show();
315 302 message.text('Não foi possível logar');
316 303 });
... ... @@ -318,6 +305,28 @@ jQuery(document).ready(function($) {
318 305 });
319 306 });
320 307  
  308 +function loginCallback(loggedIn, token) {
  309 + logged_in = loggedIn;
  310 + $('.login .message').text('');
  311 +
  312 + if(logged_in) {
  313 + if(token){
  314 + private_token = token;
  315 + }
  316 + loginButton.siblings('.save-article-form').show();
  317 + loginButton.siblings('.save-article-form .message').show();
  318 + loginButton.siblings('.login-container').hide();
  319 + $.cookie('_dialoga_session', private_token);
  320 + } else {
  321 + loginButton.siblings('.save-article-form').hide();
  322 + loginButton.siblings('.login-container').show();
  323 + }
  324 +}
  325 +
  326 +// function oauthPluginHandleLoginResult(loggedIn, token) {
  327 +// loginCallback(loggedIn, token);
  328 +// }
  329 +
321 330 function guid() {
322 331 function s4() {
323 332 return Math.floor((1 + Math.random()) * 0x10000)
... ... @@ -346,7 +355,7 @@ function display_proposals_tab(){
346 355 $('#proposal-group').show();
347 356 $('#nav-proposal-group a').addClass('active');
348 357 $('#nav-proposal-categories a').removeClass('active');
349   - $(".proposal-item p").dotdotdot();
  358 + $('.proposal-item p').dotdotdot();
350 359  
351 360 $('#content').show();
352 361 $('nav').show();
... ... @@ -366,7 +375,9 @@ function display_proposal(proposal_id){
366 375 $('.proposal-header').show();
367 376 $('.make-proposal-container').show();
368 377 $('.support-proposal-container').show();
369   - $('.results-container').show();
  378 + $('.results-container').hide();
  379 + $('.results-container .loading').hide();
  380 + $('.results-container .results-content').hide();
370 381 $('.experience-proposal-container').show();
371 382 $('.talk-proposal-container').show();
372 383  
... ... @@ -388,7 +399,6 @@ function display_proposal_detail(){
388 399 $('.talk-proposal-container').hide();
389 400  
390 401 $('.body').show();
391   - $("html, body").animate({ scrollTop: 0 }, "fast");
392 402 }
393 403  
394 404 function display_proposal_by_category(item){
... ... @@ -404,7 +414,7 @@ function display_proposal_by_category(item){
404 414 $('.proposal-category-items').hide();
405 415 $('.proposal-detail').hide();
406 416 $item.toggle( 'blind', 1000 );
407   - $(".proposal-item p").dotdotdot();
  417 + $('.proposal-item p').dotdotdot();
408 418 $('.proposal-category .arrow-box').hide();
409 419 var categorySlug = $item.data('category');
410 420 $('#proposal-category-' + categorySlug).find('.arrow-box').show();
... ... @@ -443,8 +453,6 @@ function navigateTo(hash){
443 453 // go to proposal
444 454 var proposalId = parts[2];
445 455 navigateToProposal(proposalId);
446   -
447   - return;
448 456 }
449 457  
450 458 if( isCategory ){
... ... @@ -452,14 +460,15 @@ function navigateTo(hash){
452 460 // go to category
453 461 var categoryId = parts[3];
454 462 navigateToCategory(categoryId);
455   -
456   - return;
457 463 }
458 464  
459 465 // default
460   - // show the 'index' -> category tab
461   - display_category_tab();
462   - console.log('route not handled', hash);
  466 + if( !isProposal && !isCategory ){
  467 + // show the 'index' -> category tab
  468 + display_category_tab();
  469 + }
  470 +
  471 + $('html, body').animate({ scrollTop: 0 }, 'fast');
463 472 }
464 473  
465 474 function navigateToProposal(proposalId){
... ... @@ -481,11 +490,11 @@ function navigateToCategory(categoryId){
481 490 if(categoryId === undefined){
482 491 display_category_tab();
483 492 }else{
484   - display_proposal_by_category('proposal-item-' + categoryId)
  493 + display_proposal_by_category('proposal-item-' + categoryId);
485 494 }
486 495 }
487 496  
488   -if("onhashchange" in window){
  497 +if('onhashchange' in window){
489 498 window.onhashchange = locationHashChanged;
490 499 }else{
491 500 console.log('The browser not supports the hashchange event!');
... ...
sass/_proposal_categories.scss
  Diff comments   View file @02dde45
... ... @@ -33,7 +33,9 @@
33 33 // border-width: 2px;
34 34 // border-style: solid;
35 35 background-size: 90px;
36   - hover: {
  36 + cursor: pointer;
  37 +
  38 + &:hover {
37 39 border-color: #fff !important;
38 40 }
39 41 }
... ... @@ -79,11 +81,12 @@
79 81 font-weight: 700;
80 82 font-size: 18pt;
81 83 text-decoration: none;
  84 + cursor: pointer;
82 85 }
83 86  
84 87 .proposal-item {
85 88 width: 48%;
86   - min-height: 166px;
  89 + min-height: 200px;
87 90 margin: 0.5%;
88 91 background: #fff;
89 92 border-radius: 5px;
... ... @@ -100,6 +103,7 @@
100 103 border-radius: 6px;
101 104 .proposal-list {
102 105 padding-left: 20px;
  106 + padding-bottom: 20px;
103 107 }
104 108 }
105 109  
... ...
sass/_proposal_detail.scss
  Diff comments   View file @02dde45
... ... @@ -246,7 +246,9 @@
246 246 textarea#article_abstract {
247 247 height: 15%;
248 248 }
249   - .container-button a, input[type=submit], .success-proposal-sent a {
  249 + .container-button a,
  250 + input[type=submit],
  251 + .success-proposal-sent a {
250 252 font-weight: bolder;
251 253 font-size: 14px;
252 254 text-transform: uppercase;
... ... @@ -254,7 +256,7 @@
254 256 color: white;
255 257 width: 60%;
256 258 border: none;
257   - margin: 20px auto;
  259 + margin: 10px auto;
258 260 border-radius: 6px;
259 261 text-align: center;
260 262 text-decoration: none;
... ... @@ -267,16 +269,22 @@
267 269 }
268 270 }
269 271 .make-proposal-container{
270   - .subtitle, .info, .success-proposal-sent {
  272 +
  273 + .subtitle,
  274 + .info,
  275 + .success-proposal-sent {
271 276 margin: 20px;
272 277 color: #18376C;
273 278 }
274   - .subtitle, .success-proposal-sent {
  279 +
  280 + .subtitle,
  281 + .success-proposal-sent {
275 282 font-size: 24px;
276 283 font-weight: bold;
277 284 }
278 285 .info {
279 286 font-size: 14px;
  287 + overflow-y: auto;
280 288 }
281 289 .name {
282 290 margin-bottom: 15px;
... ... @@ -324,6 +332,8 @@
324 332 text-align: center;
325 333 .container-title {
326 334 text-align: center;
  335 + width: 100%;
  336 + margin: 20px auto;
327 337 }
328 338 .support-proposal{
329 339 border: 1px solid $color;
... ... @@ -378,6 +388,7 @@
378 388 text-align: center;
379 389 position: absolute;
380 390 bottom: 10px;
  391 + left: 0;
381 392 text-decoration: none;
382 393 color: $color;
383 394 }
... ... @@ -547,9 +558,45 @@
547 558 font-size: 12px;
548 559 }
549 560 }
  561 +
  562 + .support-proposal .abstract{
  563 + overflow-y: auto;
  564 + max-height: 190px;
  565 + margin-bottom: 10px;
  566 +
  567 + @media only screen and (max-width: 1048px) {
  568 + max-height: 140px;
  569 + font-size: 20px;
  570 + }
  571 + }
  572 +}
  573 +
  574 +@media only screen and (max-width: 992px) {
  575 +
  576 + .proposal-detail {
  577 +
  578 + .container-title {
  579 + font-size: 30px !important;
  580 + margin-bottom: 15px !important;
  581 + }
  582 +
  583 + .make-proposal-container {
  584 +
  585 + .subtitle {
  586 + margin: 5px 20px !important;
  587 + font-size: 20px !important;
  588 + }
  589 +
  590 + .info {
  591 + margin: 0 20px !important;
  592 + max-height: 40px !important;
  593 + }
  594 + }
  595 +
  596 + }
  597 +
550 598 }
551 599  
552   -// @media only screen and (max-device-width: 480px) {
553 600 @media only screen and (max-width: 768px) {
554 601 .proposal-header {
555 602 .title {
... ... @@ -623,7 +670,7 @@
623 670 a {
624 671 position: relative !important;
625 672 left: inherit !important;
626   - margin: auto !important;
  673 + margin: 20px auto !important;
627 674 bottom: inherit !important;
628 675 }
629 676 }
... ... @@ -676,7 +723,7 @@
676 723 a {
677 724 position: relative !important;
678 725 left: inherit !important;
679   - margin: auto !important;
  726 + margin: 20px auto !important;
680 727 bottom: inherit !important;
681 728 }
682 729 }
... ...
sass/proposal_detail/_proposal-detail-base.scss
  Diff comments   View file @02dde45
... ... @@ -3,9 +3,17 @@
3 3 font-family: 'Open Sans', sans-serif;
4 4 font-size: 16px;
5 5 font-weight: 300;
  6 + .proposal-detail-base a {
  7 + color: $color;
  8 + word-wrap: break-word;
  9 + word-break: break-all;
  10 + }
6 11 .bloco-destaque {
7 12 background-color: $color;
8 13 }
  14 + .big {
  15 + font-size: 24px;
  16 + }
9 17 h2 {
10 18 border-bottom: 1px solid #eeeff1;
11 19 color: $color;
... ... @@ -26,12 +34,21 @@
26 34 font-size: 28px;
27 35 font-weight: 300;
28 36 text-transform: uppercase;
  37 + .border {
  38 + border-bottom: 1px solid #eeeff1;
  39 + padding-bottom: 20px;
  40 + }
29 41 }
30 42 h4 {
31 43 font-size: 24px;
32 44 color: $color;
33 45 text-transform: none;
34 46 }
  47 + h5 {
  48 + color: $color;
  49 + font-size: 22px;
  50 + margin-top: 15px;
  51 + }
35 52 img {
36 53 &.pull-left {
37 54 margin-right: 20px;
... ... @@ -78,6 +95,12 @@
78 95 height: auto;
79 96 }
80 97 }
  98 + &.no-border {
  99 + li {
  100 + border: 0;
  101 + padding: 0 0 0.5em;
  102 + }
  103 + }
81 104 }
82 105 .go-to-proposal-button a {
83 106 background: $color;
... ... @@ -95,5 +118,13 @@
95 118 .row {
96 119 margin-bottom: 1.5em;
97 120 }
  121 +
  122 + .list-container-border {
  123 + -webkit-border-radius: 3px;
  124 + -moz-border-radius: 3px;
  125 + border-radius: 3px;
  126 + border: 3px solid $color;
  127 + padding: 0 20px;
  128 + }
98 129 }
99 130 }
... ...
sass/style.scss
  Diff comments   View file @02dde45
... ... @@ -100,33 +100,33 @@ form {
100 100 }
101 101 }
102 102  
103   -// @TO_ADD: Leonardo
  103 +// TO_REFACT:
104 104 .btn {
105   - display: inline-block;
106   - padding: 6px 12px;
107   - margin-bottom: 0;
108   - font-size: 14px;
109   - font-weight: 400;
110   - line-height: 3.1;
111   - text-align: center;
112   - white-space: nowrap;
113   - vertical-align: middle;
114   - -ms-touch-action: manipulation;
115   - touch-action: manipulation;
116   - cursor: pointer;
117   - -webkit-user-select: none;
118   - -moz-user-select: none;
119   - -ms-user-select: none;
120   - user-select: none;
121   - background-image: none;
122   - border: 1px solid transparent;
123   - /* border-radius: 4px; */
  105 + display: inline-block;
  106 + padding: 6px 12px;
  107 + margin-bottom: 0;
  108 + font-size: 14px;
  109 + font-weight: 400;
  110 + line-height: 3.1;
  111 + text-align: center;
  112 + white-space: nowrap;
  113 + vertical-align: middle;
  114 + -ms-touch-action: manipulation;
  115 + touch-action: manipulation;
  116 + cursor: pointer;
  117 + -webkit-user-select: none;
  118 + -moz-user-select: none;
  119 + -ms-user-select: none;
  120 + user-select: none;
  121 + background-image: none;
  122 + border: 1px solid transparent;
  123 + /* border-radius: 4px; */
124 124 }
125 125  
126 126 .btn-default {
127   - color: #333;
128   - background-color: #fff;
129   - border-color: #ccc;
  127 + color: #333;
  128 + background-color: #fff;
  129 + border-color: #ccc;
130 130 }
131 131  
132 132 .ui-helper-hidden-accessible{
... ...
sass/utilities/_variables.scss
  Diff comments   View file @02dde45
1 1 $categories: (saude: #00a9bd, seguranca: #e34748, educacao: #ffb400, reducao-da-pobreza: #51d0b3);
2   -$categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) atende a todos os brasileiros. Ele é universal, integral e de responsabilidade do Governo Federal, dos estados e dos municípios.", seguranca: "A segurança pública é um direito fundamental, dever do Estado e responsabilidade de todos. Tem na proteção da vida, na disseminação da cultura de paz e na integração dos órgãos e instituições seus maiores compromissos.", educacao: "O Brasil avançou na qualidade e ampliou o acesso à educação em todos os níveis. Agora, o Plano Nacional de Educação (PNE) definiu metas quantitativas e qualitativas para os próximos 10 anos.", reducao-da-pobreza: "Este governo escolheu como prioridade combater a pobreza e reduzir as desigualdades sociais. Por isso, o Brasil saiu do Mapa da Fome das Nações Unidas");
  2 +$categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) é universal, integral e de responsabilidade do Governo Federal, estados e municípios. Atende a todos os brasileiros.", seguranca: "A Segurança Pública é um direito fundamental, dever do Estado e responsabilidade de todos. A proteção da vida, a disseminação da cultura de paz e a integração dos órgãos e instituições são os maiores compromissos desta política pública.", educacao: "O Brasil avançou na qualidade e ampliou o acesso à educação em todos os níveis ‐ da creche à pós‐graduação. Com o Plano Nacional de Educação (PNE) para os próximos 10 anos, o Brasil consolida um caminho de oportunidades, por meio da educação, para todos os brasileiros.", reducao-da-pobreza: "Com o esforço do Brasil para reduzir a pobreza e a desigualdade, na última década, 36 milhões de pessoas superaram a miséria e o país saiu do Mapa da Fome das Nações Unidas.");
3 3 $container-height: 500px;
... ...