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
@@ -289,7 +289,7 @@ @@ -289,7 +289,7 @@
289 </section> 289 </section>
290 </div> 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 <div class="talk-proposal-container col-sm-12"> 294 <div class="talk-proposal-container col-sm-12">
295 <section class="talk-proposal box box-propostas"> 295 <section class="talk-proposal box box-propostas">
@@ -353,40 +353,42 @@ @@ -353,40 +353,42 @@
353 </script> 353 </script>
354 354
355 <script id="results" type="text/x-handlebars-template"> 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 </div> 391 </div>
389 - <div class="paging"></div>  
390 </div> 392 </div>
391 </script> 393 </script>
392 394
sass/style.sass
  Diff comments   View file @cee9f7c
@@ -30,10 +30,12 @@ @@ -30,10 +30,12 @@
30 // 6.10 - imagem destaque do programa, titulo, descricao e botao de acesso 30 // 6.10 - imagem destaque do programa, titulo, descricao e botao de acesso
31 // 6.11 - login form 31 // 6.11 - login form
32 // 6.12 - votacao 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 // 7 - Modificadores 39 // 7 - Modificadores
38 // 8 - Cores do Temas 40 // 8 - Cores do Temas
39 // 9 - Alto Contraste 41 // 9 - Alto Contraste
@@ -101,7 +103,6 @@ h1 @@ -101,7 +103,6 @@ h1
101 a 103 a
102 color: $header-color 104 color: $header-color
103 h2 105 h2
104 - // border-bottom: 1px solid darken(#eeeff1,$darken)  
105 font-size: $font-size-h2 106 font-size: $font-size-h2
106 font-weight: 500 107 font-weight: 500
107 margin-bottom: $gutter * 2 108 margin-bottom: $gutter * 2
@@ -131,6 +132,39 @@ a @@ -131,6 +132,39 @@ a
131 color: $link-color 132 color: $link-color
132 &:hover,&:focus 133 &:hover,&:focus
133 color: $link-color 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,7 +669,77 @@ h1
635 .like 669 .like
636 display: inline-block 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 .results-content 743 .results-content
640 .total 744 .total
641 float: left 745 float: left
@@ -646,7 +750,6 @@ h1 @@ -646,7 +750,6 @@ h1
646 margin-top: $gutter 750 margin-top: $gutter
647 table 751 table
648 clear: both 752 clear: both
649 - font-weight: 300  
650 tr:nth-child(odd) 753 tr:nth-child(odd)
651 background: #e5e5e5 754 background: #e5e5e5
652 td 755 td
@@ -670,7 +773,7 @@ h1 @@ -670,7 +773,7 @@ h1
670 text-overflow: ellipsis 773 text-overflow: ellipsis
671 white-space: nowrap 774 white-space: nowrap
672 775
673 -// 6.14 - paginador 776 +// 6.15 - paginador
674 .paging 777 .paging
675 padding: $gutter * 0.25 778 padding: $gutter * 0.25
676 ul 779 ul
@@ -698,7 +801,7 @@ h1 @@ -698,7 +801,7 @@ h1
698 .prev 801 .prev
699 border-radius: $radius 0 0 $radius 802 border-radius: $radius 0 0 $radius
700 803
701 -// 6.15 - calendario dos ministros 804 +// 6.16 - calendario dos ministros
702 .slick 805 .slick
703 &-slider 806 &-slider
704 list-style: none 807 list-style: none
@@ -747,7 +850,7 @@ h1 @@ -747,7 +850,7 @@ h1
747 &-disabled 850 &-disabled
748 opacity: 0.25 851 opacity: 0.25
749 852
750 -// 6.16 - listas 853 +// 6.17 - listas
751 .list-container-border 854 .list-container-border
752 border: 3px solid 855 border: 3px solid
753 border-radius: $radius 856 border-radius: $radius
@@ -771,7 +874,7 @@ h1 @@ -771,7 +874,7 @@ h1
771 padding-right: 0 874 padding-right: 0
772 padding-top: $gutter * 0.25 875 padding-top: $gutter * 0.25
773 876
774 -// 6.17 - artigo 877 +// 6.18 - artigo
775 .article-container 878 .article-container
776 max-width: 1170px 879 max-width: 1170px
777 margin-left: auto 880 margin-left: auto
@@ -792,7 +895,10 @@ h2 @@ -792,7 +895,10 @@ h2
792 color: #6c6c6c 895 color: #6c6c6c
793 font-size: $font-size-big 896 font-size: $font-size-big
794 font-weight: 700 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 padding: 0 902 padding: 0
797 text-transform: none 903 text-transform: none
798 &.menu 904 &.menu
@@ -856,6 +962,16 @@ h3.titulo-destaque @@ -856,6 +962,16 @@ h3.titulo-destaque
856 &-category 962 &-category
857 li 963 li
858 background-color: $color 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 .slick 975 .slick
860 &-prev,&-next 976 &-prev,&-next
861 color: $color 977 color: $color
@@ -905,28 +1021,33 @@ h3.titulo-destaque @@ -905,28 +1021,33 @@ h3.titulo-destaque
905 .contrast 1021 .contrast
906 background-color: #000 1022 background-color: #000
907 color: #fff 1023 color: #fff
  1024 + .background
  1025 + background-color: #000
908 .container 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 color: #fff 1028 color: #fff
911 a 1029 a
912 text-decoration: underline 1030 text-decoration: underline
913 small 1031 small
914 color: darken(#fff, 40%) 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 .tab 1051 .tab
931 a 1052 a
932 background-color: darken(#fff, 85%) 1053 background-color: darken(#fff, 85%)
@@ -960,6 +1081,15 @@ h3.titulo-destaque @@ -960,6 +1081,15 @@ h3.titulo-destaque
960 border-color: #fff 1081 border-color: #fff
961 &-title,&-subtitle,&-info,&-bottom,.social span,&-header 1082 &-title,&-subtitle,&-info,&-bottom,.social span,&-header
962 color: #fff 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 .slick 1093 .slick
964 &-prev,&-next 1094 &-prev,&-next
965 color: #fff 1095 color: #fff
@@ -970,3 +1100,6 @@ h3.titulo-destaque @@ -970,3 +1100,6 @@ h3.titulo-destaque
970 color: #fff 1100 color: #fff
971 .bloco-destaque 1101 .bloco-destaque
972 background: darken(#fff, 85%) 1102 background: darken(#fff, 85%)
  1103 + @each $category,$color in $categories
  1104 + .category-#{$category}
  1105 + background-color: darken(#fff, 85%)