Commit a79181886c8baa4566e4d11881bf9b28e98c8170
Exists in
master
and in
11 other branches
fix conflit
Showing
11 changed files
with
193 additions
and
94 deletions
Show diff stats
images/arrow.png
729 Bytes
178 Bytes
275 Bytes
267 Bytes
167 Bytes
index.html
... | ... | @@ -88,11 +88,11 @@ |
88 | 88 | </div> |
89 | 89 | <div class='title'>{{title}}</div> |
90 | 90 | <div class='abstract'>{{{abstract}}}</div> |
91 | - <div class='show_body'><a href='#'>Conheça o Programa<span></span></a></div> | |
91 | + <div class='show_body'><a href='#'><span>Conheça o Programa</span></a></div> | |
92 | 92 | </div> |
93 | 93 | |
94 | 94 | <div class='body hide'> |
95 | - {{body}} | |
95 | + {{replace body '<[^>]+>' ''}} | |
96 | 96 | <!-- |
97 | 97 | <div class='mais-medicos'> todo seu conteudo do mais medicos vai aqui </div> |
98 | 98 | <div class='sinesp'> todo seu conteudo do sinesp vai aqui </div> |
... | ... | @@ -182,26 +182,30 @@ |
182 | 182 | <a href="#" class="like dislike" data-vote-value="-1"></a> |
183 | 183 | <a href="#" class="like" data-vote-value="1"></a> |
184 | 184 | <a href="#" class="skip">Pular</a> |
185 | - <a href="#" class="result">Resultado</a> | |
185 | + <a href="#" class="vote-result">Resultados</a> | |
186 | 186 | </div> |
187 | 187 | </script> |
188 | 188 | |
189 | 189 | <script id="results" type='text/x-handlebars-template'> |
190 | - <div class="results-content"> | |
191 | - <table> | |
192 | - <tr class="header"> | |
193 | - <td class="abstract-text">Texto da Alternativa</td> | |
194 | - <td class="votes-for">Gostei</td> | |
195 | - <td class="votes-against">Não Gostei</td> | |
196 | - </tr> | |
197 | - {{#each articles}} | |
198 | - <tr> | |
199 | - <td class="abstract-text"><div class="truncate"><p class="truncated">{{abstract}}</p></div></td> | |
200 | - <td class="votes-for">{{votes_for}}</td> | |
201 | - <td class="votes-against">{{votes_against}}</td> | |
190 | + <div class="loading">Carregando...</div> | |
191 | + <div class="results-content hide"> | |
192 | + <a href="#" class="vote-result">Fechar</a> | |
193 | + <table> | |
194 | + <tr class="header"> | |
195 | + <td class="abstract-text">Texto da Alternativa</td> | |
196 | + <td class="votes-for"></td> | |
197 | + <td class="votes-against"></td> | |
198 | + <td class="score">Pontuação</td> | |
202 | 199 | </tr> |
203 | - {{/each}} | |
204 | - </table> | |
200 | + {{#each articles}} | |
201 | + <tr> | |
202 | + <td class="abstract-text"><div class="truncate"><p class="truncated">{{abstract}}</p></div></td> | |
203 | + <td class="votes-for">{{votes_for}}</td> | |
204 | + <td class="votes-against">{{votes_against}}</td> | |
205 | + <td class="score">{{#score .}}{{/score}}</td> | |
206 | + </tr> | |
207 | + {{/each}} | |
208 | + </table> | |
205 | 209 | </div> |
206 | 210 | </script> |
207 | 211 | ... | ... |
js/handlebars-helpers.js
... | ... | @@ -48,3 +48,7 @@ Handlebars.registerHelper('proposal_detail', function(proposals, options) { |
48 | 48 | Handlebars.registerHelper('replace', function(string, to_replace, replacement) { |
49 | 49 | return (string || '').replace(new RegExp(to_replace, 'g'), replacement); |
50 | 50 | }); |
51 | + | |
52 | +Handlebars.registerHelper('score', function(article) { | |
53 | + return article.votes_for - article.votes_against; | |
54 | +}); | ... | ... |
js/main.js
... | ... | @@ -168,13 +168,22 @@ function loadRandomProposal(topic_id, private_token) { |
168 | 168 | }); |
169 | 169 | e.preventDefault(); |
170 | 170 | }); |
171 | - $(document.body).off('click', '.vote-actions .result'); | |
172 | - $(document.body).on('click', '.vote-actions .result', function(e) { | |
171 | + | |
172 | + $('.results-container').hide(); | |
173 | + $('.experience-proposal-container').show(); | |
174 | + $('.talk-proposal-container').show(); | |
175 | + | |
176 | + $(document.body).off('click', '.vote-result'); | |
177 | + $(document.body).on('click', '.vote-result', function(e) { | |
173 | 178 | $('.results-container').toggle(); |
174 | 179 | if($('.results-container').is(":visible")) { |
175 | - var url = host + '/api/v1/articles/' + topic_id + '/children' + '?private_token=' + private_token + '&limit=10&fields=id,name,abstract,votes_for,votes_against&content_type=ProposalsDiscussionPlugin::Proposal'; | |
180 | + $('.results-container .loading').show(); | |
181 | + $('.results-container .results-content').hide(); | |
182 | + 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'; | |
176 | 183 | $.getJSON(url).done(function( data ) { |
177 | 184 | $('.results-container').html(resultsTemplate(data)); |
185 | + $('.results-container .loading').hide(); | |
186 | + $('.results-container .results-content').show(); | |
178 | 187 | }); |
179 | 188 | $('.experience-proposal-container').hide(); |
180 | 189 | $('.talk-proposal-container').hide(); | ... | ... |
sass/_proposal_detail.scss
... | ... | @@ -12,6 +12,7 @@ |
12 | 12 | padding: 15px 35px; |
13 | 13 | margin: 0; |
14 | 14 | width: 30%; |
15 | + min-width: 210px; | |
15 | 16 | display: inline-block; |
16 | 17 | span { |
17 | 18 | padding-left: 40px; |
... | ... | @@ -39,7 +40,7 @@ |
39 | 40 | .proposal-header { |
40 | 41 | position: relative; |
41 | 42 | |
42 | - .title, .abstract p, .show_body a { | |
43 | + .title, .abstract p { | |
43 | 44 | position: absolute; |
44 | 45 | right: 0; |
45 | 46 | color: #fff; |
... | ... | @@ -48,74 +49,126 @@ |
48 | 49 | } |
49 | 50 | |
50 | 51 | .title { |
51 | - padding: 20px 20px 5px 20px; | |
52 | + padding: 20px; | |
52 | 53 | text-transform: uppercase; |
53 | - bottom: 60px; | |
54 | + bottom: 170px; | |
54 | 55 | font-size: 32px; |
56 | + text-align: center; | |
55 | 57 | } |
56 | 58 | |
57 | 59 | .abstract p { |
58 | 60 | padding: 5px 20px 20px 20px; |
59 | - bottom: 40px; | |
61 | + bottom: 140px; | |
60 | 62 | font-size: 14px; |
61 | - text-align: left; | |
62 | - } | |
63 | - | |
64 | - .show_body a { | |
65 | - display: inline-block; | |
66 | - width: 30%; | |
67 | - right: 20%; | |
68 | - bottom: 0; | |
69 | - margin: 0; | |
70 | - font-size: 16px; | |
71 | - font-weight: bold; | |
72 | - padding: 18px 20px; | |
73 | - text-decoration: none; | |
74 | - overflow: hidden; | |
75 | - } | |
76 | - } | |
77 | - } | |
78 | - .results-container { | |
79 | - th, td { | |
80 | - border: 1px solid rgb(223, 223, 223); | |
81 | - } | |
82 | - .results-content { | |
83 | - border: 1px solid #00a9bd; | |
84 | - } | |
85 | - table { | |
86 | - border-collapse: collapse; | |
87 | - margin-top: 20px; | |
88 | - | |
89 | - .abstract-text { | |
90 | - width: 80%; | |
91 | - } | |
92 | - .votes-for { | |
93 | - width: 10%; | |
94 | - text-align: center; | |
95 | - } | |
96 | - .votes-against { | |
97 | - @extend .votes-for; | |
98 | - } | |
99 | - .header { | |
100 | - font-weight: bold; | |
101 | 63 | text-align: center; |
102 | 64 | } |
103 | 65 | |
104 | - .truncate { | |
105 | - display: table; | |
106 | - table-layout: fixed; | |
66 | + .show_body { | |
107 | 67 | width: 100%; |
108 | - } | |
109 | - .truncated { | |
110 | - overflow-x: hidden; | |
111 | - text-overflow: ellipsis; | |
112 | - white-space: nowrap; | |
68 | + padding: 30px 0; | |
69 | + margin: 10px auto; | |
70 | + text-align: center; | |
71 | + | |
72 | + a { | |
73 | + display: inline-block; | |
74 | + width: 70%; | |
75 | + text-decoration: none; | |
76 | + color: #fff; | |
77 | + font-size: 38px; | |
78 | + font-weight: bold; | |
79 | + text-transform: uppercase; | |
80 | + margin: 0 auto; | |
81 | + text-align: center; | |
82 | + } | |
83 | + | |
84 | + span { | |
85 | + padding: 5px 15px; | |
86 | + } | |
113 | 87 | } |
114 | 88 | } |
115 | 89 | } |
116 | 90 | |
117 | 91 | @each $category, $color in $categories { |
118 | 92 | .#{$category}{ |
93 | + .results-container { | |
94 | + &:before { | |
95 | + content:""; | |
96 | + display:table; | |
97 | + clear:both; | |
98 | + } | |
99 | + .results-content { | |
100 | + border: 1px solid $color; | |
101 | + margin-top: 20px; | |
102 | + .vote-result { | |
103 | + font-weight: bolder; | |
104 | + font-size: 12px; | |
105 | + text-transform: uppercase; | |
106 | + color: gray; | |
107 | + border: none; | |
108 | + margin: 10px; | |
109 | + border-radius: 6px; | |
110 | + text-align: center; | |
111 | + text-decoration: none; | |
112 | + padding: 9px; | |
113 | + display: block; | |
114 | + float: right; | |
115 | + } | |
116 | + } | |
117 | + table { | |
118 | + clear: both; | |
119 | + margin-top: 20px; | |
120 | + tbody tr:nth-child(odd) { | |
121 | + background-color: #e5e5e5; | |
122 | + } | |
123 | + | |
124 | + .abstract-text { | |
125 | + width: 80%; | |
126 | + } | |
127 | + .votes-for { | |
128 | + width: 10%; | |
129 | + text-align: center; | |
130 | + } | |
131 | + .votes-against { | |
132 | + @extend .votes-for; | |
133 | + } | |
134 | + .score { | |
135 | + @extend .votes-for; | |
136 | + } | |
137 | + .header { | |
138 | + line-height: 32px; | |
139 | + font-weight: bold; | |
140 | + text-align: center; | |
141 | + color: rgb(68, 68, 68); | |
142 | + .votes-for { | |
143 | + background-image: url(./images/result-like.png); | |
144 | + background-repeat: no-repeat; | |
145 | + display: inline-block; | |
146 | + background-position: center; | |
147 | + } | |
148 | + .votes-against { | |
149 | + background-image: url(./images/result-dislike.png); | |
150 | + } | |
151 | + .score { | |
152 | + background-image: none; | |
153 | + } | |
154 | + } | |
155 | + | |
156 | + .truncate { | |
157 | + display: table; | |
158 | + table-layout: fixed; | |
159 | + width: 100%; | |
160 | + } | |
161 | + .truncated { | |
162 | + overflow-x: hidden; | |
163 | + text-overflow: ellipsis; | |
164 | + white-space: nowrap; | |
165 | + } | |
166 | + tr { | |
167 | + color: rgb(77, 77, 77); | |
168 | + } | |
169 | + } | |
170 | + } | |
171 | + | |
119 | 172 | .proposal-header { |
120 | 173 | .title { |
121 | 174 | background: $color; |
... | ... | @@ -123,17 +176,16 @@ |
123 | 176 | .abstract p { |
124 | 177 | background: $color; |
125 | 178 | } |
126 | - .show_body a { | |
127 | - background: $color url(images/white-alpha.png); | |
179 | + .show_body { | |
180 | + background: $color url(images/black-alpha.png); | |
181 | + border-top: 5px solid $color; | |
182 | + | |
183 | + a { | |
184 | + background: transparent url(images/white-line.png) left center repeat-x; | |
185 | + } | |
128 | 186 | |
129 | 187 | span { |
130 | - display: inline-block; | |
131 | - height: 60px; | |
132 | - width: 66px; | |
133 | - position: absolute; | |
134 | - right: 0; | |
135 | - top: 0; | |
136 | - background: $color url(images/arrow.png) top right no-repeat; | |
188 | + background: $color url(images/black-alpha.png); | |
137 | 189 | } |
138 | 190 | } |
139 | 191 | } |
... | ... | @@ -143,9 +195,8 @@ |
143 | 195 | .abstract{ |
144 | 196 | color: #083e87; |
145 | 197 | width: 100%; |
146 | - margin: 20px 0; | |
198 | + margin: 0; | |
147 | 199 | font-size: 24px; |
148 | - font-style: italic; | |
149 | 200 | font-weight: bold; |
150 | 201 | |
151 | 202 | img { |
... | ... | @@ -180,7 +231,10 @@ |
180 | 231 | input, textarea { |
181 | 232 | border-color: $color; |
182 | 233 | } |
183 | - .container-button a, input[type=submit] { | |
234 | + textarea#article_abstract { | |
235 | + height: 205px; | |
236 | + } | |
237 | + .container-button a, input[type=submit], .success-proposal-sent a { | |
184 | 238 | font-weight: bolder; |
185 | 239 | font-size: 14px; |
186 | 240 | text-transform: uppercase; |
... | ... | @@ -201,11 +255,11 @@ |
201 | 255 | } |
202 | 256 | } |
203 | 257 | .make-proposal-container{ |
204 | - .subtitle, .info { | |
258 | + .subtitle, .info, .success-proposal-sent { | |
205 | 259 | margin: 20px; |
206 | 260 | color: #18376C; |
207 | 261 | } |
208 | - .subtitle { | |
262 | + .subtitle, .success-proposal-sent { | |
209 | 263 | font-size: 24px; |
210 | 264 | font-weight: bold; |
211 | 265 | } |
... | ... | @@ -218,6 +272,7 @@ |
218 | 272 | width: 50%; |
219 | 273 | height: $container-height; |
220 | 274 | min-height: $container-height; |
275 | + position: relative; | |
221 | 276 | float: left; |
222 | 277 | text-align: left; |
223 | 278 | .make-proposal{ |
... | ... | @@ -229,8 +284,16 @@ |
229 | 284 | .make-proposal-button{ |
230 | 285 | @extend .container-button; |
231 | 286 | } |
232 | - .send-proposal-button { | |
287 | + .send-proposal-button, .success-proposal-sent { | |
233 | 288 | @extend .container-button; |
289 | + a { | |
290 | + position: absolute; | |
291 | + left: 50%; | |
292 | + margin: 0; | |
293 | + margin-left: -30%; | |
294 | + bottom: 40px; | |
295 | + padding: 20px 0; | |
296 | + } | |
234 | 297 | } |
235 | 298 | #article_abstract { |
236 | 299 | height: 15%; |
... | ... | @@ -244,6 +307,7 @@ |
244 | 307 | float: left; |
245 | 308 | height: $container-height; |
246 | 309 | min-height: $container-height; |
310 | + position: relative; | |
247 | 311 | text-align: center; |
248 | 312 | .container-title { |
249 | 313 | text-align: center; |
... | ... | @@ -252,6 +316,7 @@ |
252 | 316 | border: 1px solid $color; |
253 | 317 | height: $container-height; |
254 | 318 | min-height: $container-height; |
319 | + position: relative; | |
255 | 320 | margin: 0 0 20px 10px; |
256 | 321 | } |
257 | 322 | .subtitle { |
... | ... | @@ -277,15 +342,31 @@ |
277 | 342 | color: white; |
278 | 343 | width: 60%; |
279 | 344 | border: none; |
280 | - margin: 20px auto; | |
345 | + margin: 0; | |
281 | 346 | border-radius: 6px; |
282 | 347 | text-align: center; |
283 | 348 | text-decoration: none; |
284 | - padding: 20px; | |
349 | + padding: 20px 0; | |
285 | 350 | display: block; |
351 | + position: absolute; | |
352 | + bottom: 40px; | |
353 | + left: 50%; | |
354 | + margin-left: -30%; | |
286 | 355 | } |
287 | - .result { | |
288 | - @extend .skip | |
356 | + .vote-result { | |
357 | + font-size: 14px; | |
358 | + font-weight: bold; | |
359 | + color: #333; | |
360 | + font-weight: bold; | |
361 | + text-decoration: none; | |
362 | + margin: 0; | |
363 | + display: block; | |
364 | + width: 100%; | |
365 | + text-align: center; | |
366 | + position: absolute; | |
367 | + bottom: 10px; | |
368 | + text-decoration: none; | |
369 | + color: $color; | |
289 | 370 | } |
290 | 371 | } |
291 | 372 | } |
... | ... | @@ -294,6 +375,7 @@ |
294 | 375 | width: 50%; |
295 | 376 | height: $container-height; |
296 | 377 | min-height: $container-height; |
378 | + position: relative; | |
297 | 379 | text-align: center; |
298 | 380 | .experience-proposal{ |
299 | 381 | border: 1px solid $color; |
... | ... | @@ -315,6 +397,7 @@ |
315 | 397 | float: left; |
316 | 398 | height: $container-height; |
317 | 399 | min-height: $container-height; |
400 | + position: relative; | |
318 | 401 | text-align: center; |
319 | 402 | .talk-proposal{ |
320 | 403 | border: 1px solid $color; |
... | ... | @@ -358,7 +441,6 @@ |
358 | 441 | } |
359 | 442 | } |
360 | 443 | } |
361 | - | |
362 | 444 | } |
363 | 445 | li{ |
364 | 446 | background-color: $color; | ... | ... |
sass/style.scss
sass/utilities/_variables.scss
1 | 1 | $categories: (saude: #00a9bd, seguranca: #e34748, educacao: #ffb400, reducao-da-pobreza: #51d0b3); |
2 | 2 | $categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) é um dos maiores do mundo: atende 202 milhões de brasileiras e brasileiros.", seguranca: "Segurança Pública é direito fundamental, dever do Estado e responsabilidade de todos. A proteção da vida e a cultura de paz são nossos 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"); |
3 | -$container-height: 400px; | |
3 | +$container-height: 500px; | ... | ... |