Commit a79181886c8baa4566e4d11881bf9b28e98c8170

Authored by Leandro Santos
2 parents c53a714d b86d064d

fix conflit

images/arrow.png

729 Bytes

images/black-alpha.png 0 → 100644

178 Bytes

images/result-dislike.png 0 → 100644

275 Bytes

images/result-like.png 0 → 100644

267 Bytes

images/white-line.png 0 → 100644

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(&#39;proposal_detail&#39;, 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
... ... @@ -100,7 +100,7 @@ form {
100 100 }
101 101  
102 102 a {
103   - font-size: 12px;
  103 + font-size: 14px;
104 104 font-weight: bold;
105 105 color: #333;
106 106 font-weight: bold;
... ...
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;
... ...