Download as
Browse Code »

Commit 483880ab006da20b1043daa5a05aee06ab1301da

Authored by Augusto dos Anjos Almeida
1 parent d310936d
Exists in master and in 6 other branches build, build2, capa, contigency_plan_recaptcha, production, staging

New layout for results - beta

Showing 2 changed files with 152 additions and 38 deletions   Show diff stats
@@ -302,8 +302,8 @@ @@ -302,8 +302,8 @@
302 <p class="box-subtitle">{{stripTags (trimString abstract 200)}}</p> 302 <p class="box-subtitle">{{stripTags (trimString abstract 200)}}</p>
303 </div> 303 </div>
304 <div class="vote-actions"> 304 <div class="vote-actions">
305 - <a href="#" class="like dislike" data-vote-value="-1"></a>  
306 - <a href="#" class="like" data-vote-value="1"></a> 305 + <a href="#" class="dislike" data-vote-value="-1"><span class="fa fa-times"></span></a>
  306 + <a href="#" class="like" data-vote-value="1"><span class="fa fa-check"></span></a>
307 <a href="#" class="skip button box-footer">Pular</a> 307 <a href="#" class="skip button box-footer">Pular</a>
308 <a href="#" class="vote-result box-bottom">Resultados</a> 308 <a href="#" class="vote-result box-bottom">Resultados</a>
309 </div> 309 </div>
@@ -324,24 +324,26 @@ @@ -324,24 +324,26 @@
324 <span>Última atualização </span> 324 <span>Última atualização </span>
325 <span class="timeago" title="{{updated_at}}"></span> 325 <span class="timeago" title="{{updated_at}}"></span>
326 </div> 326 </div>
327 - <table>  
328 - <tr class="header">  
329 - <td class="position">Posição</td>  
330 - <td class="abstract-text">Propostas</td>  
331 - <td class="votes-for"></td>  
332 - <td class="votes-against"></td>  
333 - <td class="views">Exibições</td>  
334 - </tr>  
335 - {{#each proposals}}  
336 - <tr>  
337 - <td class="">{{calcPosition @index ../pagination.per_page ../pagination.page}}°</td>  
338 - <td class="abstract-text"><div class="truncate"><p class="truncated">{{stripTags abstract}}</p></div></td>  
339 - <td class="votes-for value">{{votes_for}}</td>  
340 - <td class="votes-against value">{{votes_against}}</td>  
341 - <td class="views value">{{hits}}</td> 327 + <div class="table">
  328 + <table>
  329 + <tr class="header">
  330 + <th class="position">Posição</th>
  331 + <th class="abstract-text">Propostas</th>
  332 + <th class="views">Exibições</th>
  333 + <th class="votes-for"><span class="fa fa-check"></span></th>
  334 + <th class="votes-against"><span class="fa fa-times"></span></th>
342 </tr> 335 </tr>
343 - {{/each}}  
344 - </table> 336 + {{#each proposals}}
  337 + <tr>
  338 + <td class="">{{calcPosition @index ../pagination.per_page ../pagination.page}}°</td>
  339 + <td class="abstract-text"><div class="truncate"><p class="truncated">{{stripTags abstract}}</p></div></td>
  340 + <td class="views value">{{hits}}</td>
  341 + <td class="votes-for value">{{votes_for}}</td>
  342 + <td class="votes-against value">{{votes_against}}</td>
  343 + </tr>
  344 + {{/each}}
  345 + </table>
  346 + </div>
345 <div class="paging"></div> 347 <div class="paging"></div>
346 </div> 348 </div>
347 </script> 349 </script>
sass/_proposal_detail.scss
  Diff comments   View file @483880a
@@ -232,16 +232,49 @@ @@ -232,16 +232,49 @@
232 } 232 }
233 } 233 }
234 } 234 }
235 - table { 235 + .table {
  236 + border: 2px solid $color;
  237 + border-radius: 6px;
236 clear: both; 238 clear: both;
237 - margin-top: 20px;  
238 - td {  
239 - padding: 0 5px; 239 + margin: 20px;
  240 + }
  241 + table {
  242 + tr {
  243 + td {
  244 + &:first-child {
  245 + border-left: 0;
  246 + }
  247 + &:last-child {
  248 + border-right: 0;
  249 + }
  250 + }
  251 + &:last-child {
  252 + td {
  253 + &:first-child {
  254 + border-bottom-left-radius: 3px;
  255 + border-bottom: 0;
  256 + border-left: 0;
  257 + }
  258 + &:last-child {
  259 + border-bottom-right-radius: 3px;
  260 + border-right: 0;
  261 + border-bottom: 0;
  262 + }
  263 + }
  264 + }
240 } 265 }
241 - tbody tr:nth-child(odd) {  
242 - background-color: #e5e5e5; 266 + td {
  267 + background-color: #eeeff1;
  268 + padding: 10px 20px;
  269 + border: 1px solid #fff;
  270 + text-align: center;
  271 + &.abstract-text {
  272 + text-align: left;
  273 + p {
  274 + margin: 0;
  275 + }
  276 + }
243 } 277 }
244 -  
245 .abstract-text { 278 .abstract-text {
246 width: 80%; 279 width: 80%;
247 } 280 }
@@ -254,15 +287,62 @@ @@ -254,15 +287,62 @@
254 font-weight: bold; 287 font-weight: bold;
255 text-align: center; 288 text-align: center;
256 color: rgb(68, 68, 68); 289 color: rgb(68, 68, 68);
  290 + th {
  291 + background-color: $color;
  292 + color: #fff;
  293 + padding: 20px;
  294 + border-bottom: 3px solid darken($color, 15%);
  295 + border-left: 1px solid lighten($color, 15%);
  296 + border-right: 1px solid lighten($color, 15%);
  297 + &.abstract-text {
  298 + text-align: left;
  299 + }
  300 + &:first-child {
  301 + border-top-left-radius: 3px;
  302 + border-left: 0;
  303 + border-top: 0;
  304 + }
  305 + &:last-child {
  306 + border-top-right-radius: 3px;
  307 + border-right: 0;
  308 + border-top: 0;
  309 + }
  310 + }
257 .votes-for { 311 .votes-for {
258 - background-image: url(./images/result-like.png);  
259 - background-repeat: no-repeat;  
260 - display: inline-block;  
261 - background-position: center; 312 + // background-image: url(./images/result-like.png);
  313 + // background-repeat: no-repeat;
  314 + // display: inline-block;
  315 + // background-position: center;
  316 + display: table-cell;
  317 + color: #fff;
  318 + .fa {
  319 + background-color: #32dbb5;
  320 + border: 2px solid #ffffff;
  321 + border-radius: 100%;
  322 + font-size: 12px;
  323 + height: 24px;
  324 + padding: 3px 0;
  325 + text-align: center;
  326 + transition: all 200ms ease 0s;
  327 + width: 24px;
  328 + }
262 } 329 }
263 .votes-against { 330 .votes-against {
264 - @extend .votes-for;  
265 - background-image: url(./images/result-dislike.png); 331 + // @extend .votes-for;
  332 + // background-image: url(./images/result-dislike.png);
  333 + display: table-cell;
  334 + color: #fff;
  335 + .fa {
  336 + background-color: #DB4127;
  337 + border: 2px solid #ffffff;
  338 + border-radius: 100%;
  339 + font-size: 12px;
  340 + height: 24px;
  341 + padding: 3px 0;
  342 + text-align: center;
  343 + transition: all 200ms ease 0s;
  344 + width: 24px;
  345 + }
266 } 346 }
267 } 347 }
268 348
@@ -475,15 +555,47 @@ @@ -475,15 +555,47 @@
475 } 555 }
476 .vote-actions { 556 .vote-actions {
477 .like { 557 .like {
478 - background-image: url(./images/like.png);  
479 - background-repeat: no-repeat; 558 + // background-image: url(./images/like.png);
  559 + // background-repeat: no-repeat;
  560 + // display: inline-block;
  561 + // height: 72px;
  562 + // width: 76px;
  563 + // margin: 0 6%;
480 display: inline-block; 564 display: inline-block;
481 - height: 72px;  
482 - width: 76px;  
483 - margin: 0 6%; 565 + color: #fff;
  566 + margin: 0 30px;
  567 + .fa {
  568 + background-color: #32DBB5;
  569 + font-size: 35px;
  570 + padding: 12px;
  571 + border-radius: 100%;
  572 + border-bottom: 3px solid darken(#32DBB5, 15%);
  573 + width: 64px;
  574 + height: 64px;
  575 + transition: all 200ms;
  576 + &:hover {
  577 + background-color: darken(#32DBB5, 15%);
  578 + }
  579 + }
484 } 580 }
485 .dislike { 581 .dislike {
486 - background-image: url(./images/dislike.png); 582 + // background-image: url(./images/dislike.png);
  583 + color: #fff;
  584 + display: inline-block;
  585 + margin: 0 30px;
  586 + .fa {
  587 + background-color: #DB4127;
  588 + font-size: 35px;
  589 + padding: 12px;
  590 + border-radius: 100%;
  591 + border-bottom: 3px solid darken(#DB4127, 15%);
  592 + width: 64px;
  593 + height: 64px;
  594 + transition: all 200ms;
  595 + &:hover {
  596 + background-color: darken(#DB4127, 15%);
  597 + }
  598 + }
487 } 599 }
488 .skip { 600 .skip {
489 font-weight: 500; 601 font-weight: 500;