Download as
Browse Code »

Commit cee9f7c30989ad747fbece80cef9f1db8955b707

Authored by Augusto dos Anjos Almeida
1 parent 26bc4a83
Exists in master and in 5 other branches build, build2, contigency_plan_recaptcha, production, staging

Fixed result table

Showing 2 changed files with 197 additions and 62 deletions   Show diff stats
index.html
  Diff comments   View file @cee9f7c
... ... @@ -289,7 +289,7 @@
289 289 </section>
290 290 </div>
291 291  
292   - <div class="results-container hide box box-propostas col-sm-12"></div>
  292 + <div class="results-container hide col-sm-12"></div>
293 293  
294 294 <div class="talk-proposal-container col-sm-12">
295 295 <section class="talk-proposal box box-propostas">
... ... @@ -353,40 +353,42 @@
353 353 </script>
354 354  
355 355 <script id="results" type="text/x-handlebars-template">
356   - <div class="loading">Carregando...</div>
357   - <div class="results-content hide">
358   - <a href="#" class="vote-result"><span class="sr-only">Fechar</span><span class="fa fa-times"></span></a>
359   - <h2>Resultados</h2>
360   - <span class="total">Total de propostas: <strong class="value">{{pagination.total}}</strong></span>
361   - <div class="updated-at">
362   - <span>Última atualização </span>
363   - <span class="timeago" title="{{updated_at}}"></span>
364   - </div>
365   - <div class="border">
366   - <table class="footable">
367   - <thead>
368   - <tr class="header">
369   - <th class="position">Posição <a href="#" class="hidden-xs"><span class="fa fa-question"></span></a></th>
370   - <th class="abstract-text" data-toggle="true">Propostas</th>
371   - <th class="views" data-hide="phone">Exibições</th>
372   - <th class="votes-for" data-hide="phone"><span class="sr-only">A favor</span><span class="fa fa-check"></span></th>
373   - <th class="votes-against" data-hide="phone"><span class="sr-only">Contra</span><span class="fa fa-times"></span></th>
374   - </tr>
375   - </thead>
376   - <tbody>
377   - {{#each proposals}}
378   - <tr>
379   - <td class="">{{calcPosition @index ../pagination.per_page ../pagination.page}}°</td>
380   - <td class="abstract-text"><div class="truncate"><p class="truncated">{{stripTags abstract}}</p></div></td>
381   - <td class="views value">{{hits}}</td>
382   - <td class="votes-for value">{{votes_for}}</td>
383   - <td class="votes-against value">{{votes_against}}</td>
384   - </tr>
385   - {{/each}}
386   - </tbody>
387   - </table>
  356 + <div class="box box-propostas">
  357 + <div class="loading">Carregando...</div>
  358 + <div class="results-content hide">
  359 + <a href="#" class="vote-result"><span class="sr-only">Fechar</span><span class="fa fa-times"></span></a>
  360 + <h2>Resultados</h2>
  361 + <span class="total">Total de propostas: <strong class="value">{{pagination.total}}</strong></span>
  362 + <div class="updated-at">
  363 + <span>Última atualização </span>
  364 + <span class="timeago" title="{{updated_at}}"></span>
  365 + </div>
  366 + <div class="border">
  367 + <table class="footable">
  368 + <thead>
  369 + <tr class="header">
  370 + <th class="position">Posição <a href="#" class="hidden-xs"><span class="fa fa-question"></span></a></th>
  371 + <th class="abstract-text" data-toggle="true">Propostas</th>
  372 + <th class="views" data-hide="phone">Exibições</th>
  373 + <th class="votes-for" data-hide="phone"><span class="sr-only">A favor</span><span class="fa fa-check"></span></th>
  374 + <th class="votes-against" data-hide="phone"><span class="sr-only">Contra</span><span class="fa fa-times"></span></th>
  375 + </tr>
  376 + </thead>
  377 + <tbody>
  378 + {{#each proposals}}
  379 + <tr>
  380 + <td class="">{{calcPosition @index ../pagination.per_page ../pagination.page}}°</td>
  381 + <td class="abstract-text"><div class="truncate"><p class="truncated">{{stripTags abstract}}</p></div></td>
  382 + <td class="views value">{{hits}}</td>
  383 + <td class="votes-for value">{{votes_for}}</td>
  384 + <td class="votes-against value">{{votes_against}}</td>
  385 + </tr>
  386 + {{/each}}
  387 + </tbody>
  388 + </table>
  389 + </div>
  390 + <div class="paging"></div>
388 391 </div>
389   - <div class="paging"></div>
390 392 </div>
391 393 </script>
392 394  
... ...
sass/style.sass
  Diff comments   View file @cee9f7c
... ... @@ -30,10 +30,12 @@
30 30 // 6.10 - imagem destaque do programa, titulo, descricao e botao de acesso
31 31 // 6.11 - login form
32 32 // 6.12 - votacao
33   -// 6.13 - lista de resultados
34   -// 6.14 - paginador
35   -// 6.15 - calendario dos ministros
36   -// 6.16 - listas
  33 +// 6.13 - tabela de resultados
  34 +// 6.14 - lista de resultados
  35 +// 6.15 - paginador
  36 +// 6.16 - calendario dos ministros
  37 +// 6.17 - listas
  38 +// 6.18 - artigo
37 39 // 7 - Modificadores
38 40 // 8 - Cores do Temas
39 41 // 9 - Alto Contraste
... ... @@ -101,7 +103,6 @@ h1
101 103 a
102 104 color: $header-color
103 105 h2
104   - // border-bottom: 1px solid darken(#eeeff1,$darken)
105 106 font-size: $font-size-h2
106 107 font-weight: 500
107 108 margin-bottom: $gutter * 2
... ... @@ -131,6 +132,39 @@ a
131 132 color: $link-color
132 133 &:hover,&:focus
133 134 color: $link-color
  135 +tr
  136 + &:last-child
  137 + td
  138 + &:first-child
  139 + border-bottom-left-radius: 3px
  140 + border-bottom: 0
  141 + border-left: 0
  142 + &:last-child
  143 + border-bottom-right-radius: 3px
  144 + border-bottom: 0
  145 + border-right: 0
  146 +th
  147 + border-bottom: 3px solid
  148 + border-left: 1px solid
  149 + border-right: 1px solid
  150 + padding: 15px 20px
  151 + &:first-child
  152 + border-top-left-radius: $radius
  153 + border-left: 0
  154 + border-top: 0
  155 + &:last-child
  156 + border-top-right-radius: $radius
  157 + border-right: 0
  158 + border-top: 0
  159 +td
  160 + background-color: #eeeff1
  161 + border: 1px solid #fff
  162 + padding: 10px
  163 + text-align: center
  164 + &:first-child
  165 + border-left: 0
  166 + &:last-child
  167 + border-right: 0
134 168  
135 169  
136 170 // ------------------------------------
... ... @@ -635,7 +669,77 @@ h1
635 669 .like
636 670 display: inline-block
637 671  
638   -// 6.13 - lista de resultados
  672 +// 6.13 - tabela de resultados
  673 +table
  674 + .abstract-text
  675 + width: 80%
  676 + .value
  677 + text-align: center
  678 + width: 10%
  679 + .header
  680 + font-weight: bold
  681 + line-height: 22px
  682 + text-align: center
  683 + .position
  684 + width: 20%
  685 + a
  686 + border: 1px solid #fff
  687 + border-radius: 100%
  688 + color: #fff
  689 + display: inline-block
  690 + font-size: 16px
  691 + height: 30px
  692 + margin-left: 5px
  693 + padding: 2px 0
  694 + text-align: center
  695 + width: 30px
  696 + vertical-align: middle
  697 + transition: all 400ms
  698 + .votes-for
  699 + display: table-cell
  700 + .fa
  701 + background-color: #32dbb5
  702 + border: 2px solid #ffffff
  703 + border-radius: 100%
  704 + color: #fff
  705 + font-size: 16px
  706 + height: 30px
  707 + padding: 5px 0
  708 + text-align: center
  709 + transition: all 200ms ease 0s
  710 + width: 30px
  711 + .votes-against
  712 + display: table-cell
  713 + .fa
  714 + background-color: #DB4127
  715 + border: 2px solid #ffffff
  716 + border-radius: 100%
  717 + color: #fff
  718 + font-size: 16px
  719 + height: 30px
  720 + padding: 5px 0
  721 + text-align: center
  722 + transition: all 200ms ease 0s
  723 + width: 30px
  724 + .truncate
  725 + display: table
  726 + table-layout: fixed
  727 + width: 90%
  728 + .truncated
  729 + overflow-x: hidden
  730 + text-overflow: ellipsis
  731 + white-space: nowrap
  732 +th
  733 + color: #fff
  734 + &.abstract-text
  735 + text-align: left
  736 +td
  737 + &.abstract-text
  738 + text-align: left
  739 + p
  740 + margin: 0
  741 +
  742 +// 6.14 - lista de resultados
639 743 .results-content
640 744 .total
641 745 float: left
... ... @@ -646,7 +750,6 @@ h1
646 750 margin-top: $gutter
647 751 table
648 752 clear: both
649   - font-weight: 300
650 753 tr:nth-child(odd)
651 754 background: #e5e5e5
652 755 td
... ... @@ -670,7 +773,7 @@ h1
670 773 text-overflow: ellipsis
671 774 white-space: nowrap
672 775  
673   -// 6.14 - paginador
  776 +// 6.15 - paginador
674 777 .paging
675 778 padding: $gutter * 0.25
676 779 ul
... ... @@ -698,7 +801,7 @@ h1
698 801 .prev
699 802 border-radius: $radius 0 0 $radius
700 803  
701   -// 6.15 - calendario dos ministros
  804 +// 6.16 - calendario dos ministros
702 805 .slick
703 806 &-slider
704 807 list-style: none
... ... @@ -747,7 +850,7 @@ h1
747 850 &-disabled
748 851 opacity: 0.25
749 852  
750   -// 6.16 - listas
  853 +// 6.17 - listas
751 854 .list-container-border
752 855 border: 3px solid
753 856 border-radius: $radius
... ... @@ -771,7 +874,7 @@ h1
771 874 padding-right: 0
772 875 padding-top: $gutter * 0.25
773 876  
774   -// 6.17 - artigo
  877 +// 6.18 - artigo
775 878 .article-container
776 879 max-width: 1170px
777 880 margin-left: auto
... ... @@ -792,7 +895,10 @@ h2
792 895 color: #6c6c6c
793 896 font-size: $font-size-big
794 897 font-weight: 700
795   - margin: 0
  898 + margin-bottom: $gutter * 0.25
  899 + margin-left: 0
  900 + margin-right: 0
  901 + margin-top: 0
796 902 padding: 0
797 903 text-transform: none
798 904 &.menu
... ... @@ -856,6 +962,16 @@ h3.titulo-destaque
856 962 &-category
857 963 li
858 964 background-color: $color
  965 + table
  966 + .position
  967 + a
  968 + background-color: $color
  969 + +hover($color,$darken)
  970 + th
  971 + background-color: $color
  972 + border-bottom-color: darken($color,$darken)
  973 + border-left-color: lighten($color,$darken)
  974 + border-right-color: lighten($color,$darken)
859 975 .slick
860 976 &-prev,&-next
861 977 color: $color
... ... @@ -905,28 +1021,33 @@ h3.titulo-destaque
905 1021 .contrast
906 1022 background-color: #000
907 1023 color: #fff
  1024 + .background
  1025 + background-color: #000
908 1026 .container
909   - h2,h3,h4,a,p,li,label,.label,.login i
  1027 + h2,h3,h4,a,p,li,label,.label,.login i,.total,.updated-at span
910 1028 color: #fff
911 1029 a
912 1030 text-decoration: underline
913 1031 small
914 1032 color: darken(#fff, 40%)
915   - .button,.show_body a,.login input.button,.box-category li
916   - background-color: #fff
917   - border-color: darken(#fff, 40%)
918   - color: #000
919   - text-decoration: none
920   - +hover(#fff, 40%)
921   - .icon
922   - &-facebook
923   - background-image: url(images/icons/icon-facebook-contrast.png) !important
924   - &-twitter
925   - background-image: url(images/icons/icon-twitter-contrast.png) !important
926   - &-gplus
927   - background-image: url(images/icons/icon-gplus-contrast.png) !important
928   - &-whatsapp
929   - background-image: url(images/icons/icon-whatsapp-contrast.png) !important
  1033 + .button,.show_body a,.login input.button,.box-category li
  1034 + background-color: #fff
  1035 + border-color: darken(#fff, 40%)
  1036 + color: #000
  1037 + text-decoration: none
  1038 + +hover(#fff, 40%)
  1039 + span
  1040 + color: #000
  1041 + .icon
  1042 + color: #000 !important
  1043 + text-decoration: none
  1044 + background-color: #fff
  1045 + +hover(#fff,40%)
  1046 + &-vote
  1047 + border-color: darken(#fff, 40%) !important
  1048 + @each $category,$color in $categories
  1049 + &-#{$category}
  1050 + background-image: url(images/icons/#{$category}-contrast.png)
930 1051 .tab
931 1052 a
932 1053 background-color: darken(#fff, 85%)
... ... @@ -960,6 +1081,15 @@ h3.titulo-destaque
960 1081 border-color: #fff
961 1082 &-title,&-subtitle,&-info,&-bottom,.social span,&-header
962 1083 color: #fff
  1084 + table
  1085 + .position a
  1086 + background-color: #000
  1087 + .votes-for .fa,.votes-against .fa
  1088 + background-color: #000
  1089 + th,td
  1090 + background-color: #000
  1091 + border-color: #fff
  1092 + color: #fff
963 1093 .slick
964 1094 &-prev,&-next
965 1095 color: #fff
... ... @@ -970,3 +1100,6 @@ h3.titulo-destaque
970 1100 color: #fff
971 1101 .bloco-destaque
972 1102 background: darken(#fff, 85%)
  1103 + @each $category,$color in $categories
  1104 + .category-#{$category}
  1105 + background-color: darken(#fff, 85%)
... ...