Download as
Browse Code »

Commit 483880ab006da20b1043daa5a05aee06ab1301da

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

New layout for results - beta

Showing 2 changed files with 152 additions and 38 deletions   Show diff stats
index.html
  Diff comments   View file @483880a
... ... @@ -302,8 +302,8 @@
302 302 <p class="box-subtitle">{{stripTags (trimString abstract 200)}}</p>
303 303 </div>
304 304 <div class="vote-actions">
305   - <a href="#" class="like dislike" data-vote-value="-1"></a>
306   - <a href="#" class="like" data-vote-value="1"></a>
  305 + <a href="#" class="dislike" data-vote-value="-1"><span class="fa fa-times"></span></a>
  306 + <a href="#" class="like" data-vote-value="1"><span class="fa fa-check"></span></a>
307 307 <a href="#" class="skip button box-footer">Pular</a>
308 308 <a href="#" class="vote-result box-bottom">Resultados</a>
309 309 </div>
... ... @@ -324,24 +324,26 @@
324 324 <span>Última atualização </span>
325 325 <span class="timeago" title="{{updated_at}}"></span>
326 326 </div>
327   - <table>
328   - <tr class="header">
329   - <td class="position">Posição</td>
330   - <td class="abstract-text">Propostas</td>
331   - <td class="votes-for"></td>
332   - <td class="votes-against"></td>
333   - <td class="views">Exibições</td>
334   - </tr>
335   - {{#each proposals}}
336   - <tr>
337   - <td class="">{{calcPosition @index ../pagination.per_page ../pagination.page}}°</td>
338   - <td class="abstract-text"><div class="truncate"><p class="truncated">{{stripTags abstract}}</p></div></td>
339   - <td class="votes-for value">{{votes_for}}</td>
340   - <td class="votes-against value">{{votes_against}}</td>
341   - <td class="views value">{{hits}}</td>
  327 + <div class="table">
  328 + <table>
  329 + <tr class="header">
  330 + <th class="position">Posição</th>
  331 + <th class="abstract-text">Propostas</th>
  332 + <th class="views">Exibições</th>
  333 + <th class="votes-for"><span class="fa fa-check"></span></th>
  334 + <th class="votes-against"><span class="fa fa-times"></span></th>
342 335 </tr>
343   - {{/each}}
344   - </table>
  336 + {{#each proposals}}
  337 + <tr>
  338 + <td class="">{{calcPosition @index ../pagination.per_page ../pagination.page}}°</td>
  339 + <td class="abstract-text"><div class="truncate"><p class="truncated">{{stripTags abstract}}</p></div></td>
  340 + <td class="views value">{{hits}}</td>
  341 + <td class="votes-for value">{{votes_for}}</td>
  342 + <td class="votes-against value">{{votes_against}}</td>
  343 + </tr>
  344 + {{/each}}
  345 + </table>
  346 + </div>
345 347 <div class="paging"></div>
346 348 </div>
347 349 </script>
... ...
sass/_proposal_detail.scss
  Diff comments   View file @483880a
... ... @@ -232,16 +232,49 @@
232 232 }
233 233 }
234 234 }
235   - table {
  235 + .table {
  236 + border: 2px solid $color;
  237 + border-radius: 6px;
236 238 clear: both;
237   - margin-top: 20px;
238   - td {
239   - padding: 0 5px;
  239 + margin: 20px;
  240 + }
  241 + table {
  242 + tr {
  243 + td {
  244 + &:first-child {
  245 + border-left: 0;
  246 + }
  247 + &:last-child {
  248 + border-right: 0;
  249 + }
  250 + }
  251 + &:last-child {
  252 + td {
  253 + &:first-child {
  254 + border-bottom-left-radius: 3px;
  255 + border-bottom: 0;
  256 + border-left: 0;
  257 + }
  258 + &:last-child {
  259 + border-bottom-right-radius: 3px;
  260 + border-right: 0;
  261 + border-bottom: 0;
  262 + }
  263 + }
  264 + }
240 265 }
241   - tbody tr:nth-child(odd) {
242   - background-color: #e5e5e5;
  266 + td {
  267 + background-color: #eeeff1;
  268 + padding: 10px 20px;
  269 + border: 1px solid #fff;
  270 + text-align: center;
  271 + &.abstract-text {
  272 + text-align: left;
  273 + p {
  274 + margin: 0;
  275 + }
  276 + }
243 277 }
244   -
245 278 .abstract-text {
246 279 width: 80%;
247 280 }
... ... @@ -254,15 +287,62 @@
254 287 font-weight: bold;
255 288 text-align: center;
256 289 color: rgb(68, 68, 68);
  290 + th {
  291 + background-color: $color;
  292 + color: #fff;
  293 + padding: 20px;
  294 + border-bottom: 3px solid darken($color, 15%);
  295 + border-left: 1px solid lighten($color, 15%);
  296 + border-right: 1px solid lighten($color, 15%);
  297 + &.abstract-text {
  298 + text-align: left;
  299 + }
  300 + &:first-child {
  301 + border-top-left-radius: 3px;
  302 + border-left: 0;
  303 + border-top: 0;
  304 + }
  305 + &:last-child {
  306 + border-top-right-radius: 3px;
  307 + border-right: 0;
  308 + border-top: 0;
  309 + }
  310 + }
257 311 .votes-for {
258   - background-image: url(./images/result-like.png);
259   - background-repeat: no-repeat;
260   - display: inline-block;
261   - background-position: center;
  312 + // background-image: url(./images/result-like.png);
  313 + // background-repeat: no-repeat;
  314 + // display: inline-block;
  315 + // background-position: center;
  316 + display: table-cell;
  317 + color: #fff;
  318 + .fa {
  319 + background-color: #32dbb5;
  320 + border: 2px solid #ffffff;
  321 + border-radius: 100%;
  322 + font-size: 12px;
  323 + height: 24px;
  324 + padding: 3px 0;
  325 + text-align: center;
  326 + transition: all 200ms ease 0s;
  327 + width: 24px;
  328 + }
262 329 }
263 330 .votes-against {
264   - @extend .votes-for;
265   - background-image: url(./images/result-dislike.png);
  331 + // @extend .votes-for;
  332 + // background-image: url(./images/result-dislike.png);
  333 + display: table-cell;
  334 + color: #fff;
  335 + .fa {
  336 + background-color: #DB4127;
  337 + border: 2px solid #ffffff;
  338 + border-radius: 100%;
  339 + font-size: 12px;
  340 + height: 24px;
  341 + padding: 3px 0;
  342 + text-align: center;
  343 + transition: all 200ms ease 0s;
  344 + width: 24px;
  345 + }
266 346 }
267 347 }
268 348  
... ... @@ -475,15 +555,47 @@
475 555 }
476 556 .vote-actions {
477 557 .like {
478   - background-image: url(./images/like.png);
479   - background-repeat: no-repeat;
  558 + // background-image: url(./images/like.png);
  559 + // background-repeat: no-repeat;
  560 + // display: inline-block;
  561 + // height: 72px;
  562 + // width: 76px;
  563 + // margin: 0 6%;
480 564 display: inline-block;
481   - height: 72px;
482   - width: 76px;
483   - margin: 0 6%;
  565 + color: #fff;
  566 + margin: 0 30px;
  567 + .fa {
  568 + background-color: #32DBB5;
  569 + font-size: 35px;
  570 + padding: 12px;
  571 + border-radius: 100%;
  572 + border-bottom: 3px solid darken(#32DBB5, 15%);
  573 + width: 64px;
  574 + height: 64px;
  575 + transition: all 200ms;
  576 + &:hover {
  577 + background-color: darken(#32DBB5, 15%);
  578 + }
  579 + }
484 580 }
485 581 .dislike {
486   - background-image: url(./images/dislike.png);
  582 + // background-image: url(./images/dislike.png);
  583 + color: #fff;
  584 + display: inline-block;
  585 + margin: 0 30px;
  586 + .fa {
  587 + background-color: #DB4127;
  588 + font-size: 35px;
  589 + padding: 12px;
  590 + border-radius: 100%;
  591 + border-bottom: 3px solid darken(#DB4127, 15%);
  592 + width: 64px;
  593 + height: 64px;
  594 + transition: all 200ms;
  595 + &:hover {
  596 + background-color: darken(#DB4127, 15%);
  597 + }
  598 + }
487 599 }
488 600 .skip {
489 601 font-weight: 500;
... ...