Commit ffa79326f20fd1197b2b710b62529e532afc06f8
1 parent
571044e8
Exists in
master
and in
6 other branches
New layout for results
Showing
2 changed files
with
41 additions
and
18 deletions
Show diff stats
index.html
| @@ -316,10 +316,9 @@ | @@ -316,10 +316,9 @@ | ||
| 316 | <script id="results" type="text/x-handlebars-template"> | 316 | <script id="results" type="text/x-handlebars-template"> |
| 317 | <div class="loading">Carregando...</div> | 317 | <div class="loading">Carregando...</div> |
| 318 | <div class="results-content hide"> | 318 | <div class="results-content hide"> |
| 319 | - <div class="clearfix"> | ||
| 320 | - <span class="total">Total de propostas: <span class="value">{{pagination.total}}</span></span> | ||
| 321 | - <a href="#" class="vote-result">Fechar</a> | ||
| 322 | - </div> | 319 | + <a href="#" class="vote-result"><span class="sr-only">Fechar</span><span class="fa fa-times"></span></a> |
| 320 | + <h2>Resultados</h2> | ||
| 321 | + <span class="total">Total de propostas: <strong class="value">{{pagination.total}}</strong></span> | ||
| 323 | <div class="updated-at"> | 322 | <div class="updated-at"> |
| 324 | <span>Última atualização </span> | 323 | <span>Última atualização </span> |
| 325 | <span class="timeago" title="{{updated_at}}"></span> | 324 | <span class="timeago" title="{{updated_at}}"></span> |
| @@ -327,7 +326,7 @@ | @@ -327,7 +326,7 @@ | ||
| 327 | <div class="table-responsive border"> | 326 | <div class="table-responsive border"> |
| 328 | <table class="table"> | 327 | <table class="table"> |
| 329 | <tr class="header"> | 328 | <tr class="header"> |
| 330 | - <th class="position">Posição</th> | 329 | + <th class="position">Posição <a href="#"><span class="fa fa-question"></span></a></th> |
| 331 | <th class="abstract-text">Propostas</th> | 330 | <th class="abstract-text">Propostas</th> |
| 332 | <th class="views">Exibições</th> | 331 | <th class="views">Exibições</th> |
| 333 | <th class="votes-for"><span class="fa fa-check"></span></th> | 332 | <th class="votes-for"><span class="fa fa-check"></span></th> |
sass/_proposal_detail.scss
| @@ -162,13 +162,16 @@ | @@ -162,13 +162,16 @@ | ||
| 162 | display:table; | 162 | display:table; |
| 163 | clear:both; | 163 | clear:both; |
| 164 | } | 164 | } |
| 165 | + h2 { | ||
| 166 | + border-bottom: 0; | ||
| 167 | + } | ||
| 165 | .results-content { | 168 | .results-content { |
| 166 | border: 1px solid $color; | 169 | border: 1px solid $color; |
| 167 | margin-top: 20px; | 170 | margin-top: 20px; |
| 168 | padding: 20px; | 171 | padding: 20px; |
| 169 | .vote-result { | 172 | .vote-result { |
| 170 | font-weight: bolder; | 173 | font-weight: bolder; |
| 171 | - font-size: 12px; | 174 | + font-size: 20px; |
| 172 | text-transform: uppercase; | 175 | text-transform: uppercase; |
| 173 | color: gray; | 176 | color: gray; |
| 174 | border: none; | 177 | border: none; |
| @@ -189,9 +192,9 @@ | @@ -189,9 +192,9 @@ | ||
| 189 | margin-right: 8px; | 192 | margin-right: 8px; |
| 190 | } | 193 | } |
| 191 | .total { | 194 | .total { |
| 192 | - padding: 10px; | ||
| 193 | - color: gray; | ||
| 194 | - font-size: 14px; | 195 | + display: block; |
| 196 | + font-size: 20px; | ||
| 197 | + padding-bottom: 40px; | ||
| 195 | float: left; | 198 | float: left; |
| 196 | } | 199 | } |
| 197 | .simple-pagination { | 200 | .simple-pagination { |
| @@ -290,7 +293,7 @@ | @@ -290,7 +293,7 @@ | ||
| 290 | th { | 293 | th { |
| 291 | background-color: $color; | 294 | background-color: $color; |
| 292 | color: #fff; | 295 | color: #fff; |
| 293 | - padding: 20px; | 296 | + padding: 15px 20px; |
| 294 | border-bottom: 3px solid darken($color, 15%); | 297 | border-bottom: 3px solid darken($color, 15%); |
| 295 | border-left: 1px solid lighten($color, 15%); | 298 | border-left: 1px solid lighten($color, 15%); |
| 296 | border-right: 1px solid lighten($color, 15%); | 299 | border-right: 1px solid lighten($color, 15%); |
| @@ -308,6 +311,27 @@ | @@ -308,6 +311,27 @@ | ||
| 308 | border-top: 0; | 311 | border-top: 0; |
| 309 | } | 312 | } |
| 310 | } | 313 | } |
| 314 | + .position { | ||
| 315 | + width: 20%; | ||
| 316 | + a { | ||
| 317 | + background-color: $color; | ||
| 318 | + border: 1px solid #fff; | ||
| 319 | + border-radius: 100%; | ||
| 320 | + color: #fff; | ||
| 321 | + display: inline-block; | ||
| 322 | + font-size: 16px; | ||
| 323 | + height: 30px; | ||
| 324 | + margin-left: 5px; | ||
| 325 | + padding: 2px 0; | ||
| 326 | + text-align: center; | ||
| 327 | + width: 30px; | ||
| 328 | + vertical-align: middle; | ||
| 329 | + transition: all 200ms; | ||
| 330 | + &:hover { | ||
| 331 | + background-color: darken($color, 15%); | ||
| 332 | + } | ||
| 333 | + } | ||
| 334 | + } | ||
| 311 | .votes-for { | 335 | .votes-for { |
| 312 | // background-image: url(./images/result-like.png); | 336 | // background-image: url(./images/result-like.png); |
| 313 | // background-repeat: no-repeat; | 337 | // background-repeat: no-repeat; |
| @@ -319,12 +343,12 @@ | @@ -319,12 +343,12 @@ | ||
| 319 | background-color: #32dbb5; | 343 | background-color: #32dbb5; |
| 320 | border: 2px solid #ffffff; | 344 | border: 2px solid #ffffff; |
| 321 | border-radius: 100%; | 345 | border-radius: 100%; |
| 322 | - font-size: 12px; | ||
| 323 | - height: 24px; | ||
| 324 | - padding: 3px 0; | 346 | + font-size: 16px; |
| 347 | + height: 30px; | ||
| 348 | + padding: 5px 0; | ||
| 325 | text-align: center; | 349 | text-align: center; |
| 326 | transition: all 200ms ease 0s; | 350 | transition: all 200ms ease 0s; |
| 327 | - width: 24px; | 351 | + width: 30px; |
| 328 | } | 352 | } |
| 329 | } | 353 | } |
| 330 | .votes-against { | 354 | .votes-against { |
| @@ -336,12 +360,12 @@ | @@ -336,12 +360,12 @@ | ||
| 336 | background-color: #DB4127; | 360 | background-color: #DB4127; |
| 337 | border: 2px solid #ffffff; | 361 | border: 2px solid #ffffff; |
| 338 | border-radius: 100%; | 362 | border-radius: 100%; |
| 339 | - font-size: 12px; | ||
| 340 | - height: 24px; | ||
| 341 | - padding: 3px 0; | 363 | + font-size: 16px; |
| 364 | + height: 30px; | ||
| 365 | + padding: 5px 0; | ||
| 342 | text-align: center; | 366 | text-align: center; |
| 343 | transition: all 200ms ease 0s; | 367 | transition: all 200ms ease 0s; |
| 344 | - width: 24px; | 368 | + width: 30px; |
| 345 | } | 369 | } |
| 346 | } | 370 | } |
| 347 | } | 371 | } |