Commit ffa79326f20fd1197b2b710b62529e532afc06f8

Authored by Augusto dos Anjos Almeida
1 parent 571044e8

New layout for results

Showing 2 changed files with 41 additions and 18 deletions   Show diff stats
@@ -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 }