Download as
Browse Code »

Commit ffa79326f20fd1197b2b710b62529e532afc06f8

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

New layout for results

Showing 2 changed files with 41 additions and 18 deletions   Show diff stats
index.html
  Diff comments   View file @ffa7932
... ... @@ -316,10 +316,9 @@
316 316 <script id="results" type="text/x-handlebars-template">
317 317 <div class="loading">Carregando...</div>
318 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 322 <div class="updated-at">
324 323 <span>Última atualização </span>
325 324 <span class="timeago" title="{{updated_at}}"></span>
... ... @@ -327,7 +326,7 @@
327 326 <div class="table-responsive border">
328 327 <table class="table">
329 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 330 <th class="abstract-text">Propostas</th>
332 331 <th class="views">Exibições</th>
333 332 <th class="votes-for"><span class="fa fa-check"></span></th>
... ...
sass/_proposal_detail.scss
  Diff comments   View file @ffa7932
... ... @@ -162,13 +162,16 @@
162 162 display:table;
163 163 clear:both;
164 164 }
  165 + h2 {
  166 + border-bottom: 0;
  167 + }
165 168 .results-content {
166 169 border: 1px solid $color;
167 170 margin-top: 20px;
168 171 padding: 20px;
169 172 .vote-result {
170 173 font-weight: bolder;
171   - font-size: 12px;
  174 + font-size: 20px;
172 175 text-transform: uppercase;
173 176 color: gray;
174 177 border: none;
... ... @@ -189,9 +192,9 @@
189 192 margin-right: 8px;
190 193 }
191 194 .total {
192   - padding: 10px;
193   - color: gray;
194   - font-size: 14px;
  195 + display: block;
  196 + font-size: 20px;
  197 + padding-bottom: 40px;
195 198 float: left;
196 199 }
197 200 .simple-pagination {
... ... @@ -290,7 +293,7 @@
290 293 th {
291 294 background-color: $color;
292 295 color: #fff;
293   - padding: 20px;
  296 + padding: 15px 20px;
294 297 border-bottom: 3px solid darken($color, 15%);
295 298 border-left: 1px solid lighten($color, 15%);
296 299 border-right: 1px solid lighten($color, 15%);
... ... @@ -308,6 +311,27 @@
308 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 335 .votes-for {
312 336 // background-image: url(./images/result-like.png);
313 337 // background-repeat: no-repeat;
... ... @@ -319,12 +343,12 @@
319 343 background-color: #32dbb5;
320 344 border: 2px solid #ffffff;
321 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 349 text-align: center;
326 350 transition: all 200ms ease 0s;
327   - width: 24px;
  351 + width: 30px;
328 352 }
329 353 }
330 354 .votes-against {
... ... @@ -336,12 +360,12 @@
336 360 background-color: #DB4127;
337 361 border: 2px solid #ffffff;
338 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 366 text-align: center;
343 367 transition: all 200ms ease 0s;
344   - width: 24px;
  368 + width: 30px;
345 369 }
346 370 }
347 371 }
... ...