From ffa79326f20fd1197b2b710b62529e532afc06f8 Mon Sep 17 00:00:00 2001
From: Augusto dos Anjos Almeida <augusto.almeida@gmail.com>
Date: Sat, 30 May 2015 09:26:52 -0300
Subject: [PATCH] New layout for results

---
 index.html                 |  9 ++++-----
 sass/_proposal_detail.scss | 50 +++++++++++++++++++++++++++++++++++++-------------
 2 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index 5748b21..ef6f1ac 100644
--- a/index.html
+++ b/index.html
@@ -316,10 +316,9 @@
     <script id="results" type="text/x-handlebars-template">
       <div class="loading">Carregando...</div>
       <div class="results-content hide">
-        <div class="clearfix">
-          <span class="total">Total de propostas: <span class="value">{{pagination.total}}</span></span>
-          <a href="#" class="vote-result">Fechar</a>
-        </div>
+        <a href="#" class="vote-result"><span class="sr-only">Fechar</span><span class="fa fa-times"></span></a>
+        <h2>Resultados</h2>
+        <span class="total">Total de propostas: <strong class="value">{{pagination.total}}</strong></span>
         <div class="updated-at">
           <span>Última atualização </span>
           <span class="timeago" title="{{updated_at}}"></span>
@@ -327,7 +326,7 @@
         <div class="table-responsive border">
           <table class="table">
             <tr class="header">
-              <th class="position">Posição</th>
+              <th class="position">Posição <a href="#"><span class="fa fa-question"></span></a></th>
               <th class="abstract-text">Propostas</th>
               <th class="views">Exibições</th>
               <th class="votes-for"><span class="fa fa-check"></span></th>
diff --git a/sass/_proposal_detail.scss b/sass/_proposal_detail.scss
index 4936c50..6f35212 100644
--- a/sass/_proposal_detail.scss
+++ b/sass/_proposal_detail.scss
@@ -162,13 +162,16 @@
           display:table;
           clear:both;
         }
+        h2 {
+          border-bottom: 0;
+        }
         .results-content {
           border: 1px solid $color;
           margin-top: 20px;
           padding: 20px;
           .vote-result {
             font-weight: bolder;
-            font-size: 12px;
+            font-size: 20px;
             text-transform: uppercase;
             color: gray;
             border: none;
@@ -189,9 +192,9 @@
             margin-right: 8px;
           }
           .total {
-            padding: 10px;
-            color: gray;
-            font-size: 14px;
+            display: block;
+            font-size: 20px;
+            padding-bottom: 40px;
             float: left;
           }
           .simple-pagination {
@@ -290,7 +293,7 @@
             th {
               background-color: $color;
               color: #fff;
-              padding: 20px;
+              padding: 15px 20px;
               border-bottom: 3px solid darken($color, 15%);
               border-left: 1px solid lighten($color, 15%);
               border-right: 1px solid lighten($color, 15%);
@@ -308,6 +311,27 @@
                 border-top: 0;
               }
             }
+            .position {
+              width: 20%;
+              a {
+                background-color: $color;
+                border: 1px solid #fff;
+                border-radius: 100%;
+                color: #fff;
+                display: inline-block;
+                font-size: 16px;
+                height: 30px;
+                margin-left: 5px;
+                padding: 2px 0;
+                text-align: center;
+                width: 30px;
+                vertical-align: middle;
+                transition: all 200ms;
+                &:hover {
+                  background-color: darken($color, 15%);
+                }
+              }
+            }
             .votes-for {
               // background-image: url(./images/result-like.png);
               // background-repeat: no-repeat;
@@ -319,12 +343,12 @@
                 background-color: #32dbb5;
                 border: 2px solid #ffffff;
                 border-radius: 100%;
-                font-size: 12px;
-                height: 24px;
-                padding: 3px 0;
+                font-size: 16px;
+                height: 30px;
+                padding: 5px 0;
                 text-align: center;
                 transition: all 200ms ease 0s;
-                width: 24px;
+                width: 30px;
               }
             }
             .votes-against {
@@ -336,12 +360,12 @@
                 background-color: #DB4127;
                 border: 2px solid #ffffff;
                 border-radius: 100%;
-                font-size: 12px;
-                height: 24px;
-                padding: 3px 0;
+                font-size: 16px;
+                height: 30px;
+                padding: 5px 0;
                 text-align: center;
                 transition: all 200ms ease 0s;
-                width: 24px;
+                width: 30px;
               }
             }
           }
--
libgit2 0.21.2