Adds new styles for proposals

app/assets/stylesheets/proposals.scss

@@ -29,12 +29,21 @@
   position: relative;
 
   .progress {
-    background-color: white;
-    height: rem-calc(18);
+    background-color: rgba(255,255,255,.8);
+    height: rem-calc(12);
     margin-bottom: rem-calc(6);
+    margin-top: rem-calc(4);
 
     .meter {
-      background: $proposals;
+      background: $votes-like;
+    }
+  }
+
+  abbr {
+    color: white;
+
+    &[title] {
+      border-bottom: 1px dotted white;
     }
   }
 
@@ -58,11 +67,13 @@
 
   .total-supports {
     color: white;
-    float: right;
+    text-align: center;
     font-size: rem-calc(14);
 
     span {
+      display: block;
       font-size: rem-calc(11);
+      opacity: .75;
     }
   }
 
@@ -93,7 +104,7 @@
     background: $warning-bg;
     color: $warning-color;
     height: 100%;
-    left: -3px;
+    left: 0;
     line-height: $line-height;
     padding-top: rem-calc(12);
     position: absolute;
@@ -116,6 +127,7 @@
 
   .supported {
     color: white;
+    margin-top: rem-calc(12);
   }
 }
 
@@ -330,7 +342,6 @@
     .total-supports {
       display: inline-block;
       line-height: $line-height;
-      margin-left: rem-calc(24);
       padding-top: rem-calc(12);
       vertical-align: top;
 
@@ -342,16 +353,6 @@
       }
     }
 
-    @media (min-width: $small-breakpoint) {
-      .like {
-
-        span {
-          display: block;
-          line-height: $line-height/2;
-        }
-      }
-    }
-
     .not-logged {
       line-height: $line-height;
       padding-top: rem-calc(24);

app/views/proposals/_form.html.erb

@@ -9,6 +9,7 @@
 
     <div class="small-12 column">
       <%= f.label :question, t("proposals.form.proposal_question") %>
+      <span class="note"><strong>Debe ser resumida en una pregunta cuya respuesta sea Sí o No.</strong> <em>Ej. "¿Está usted de acuerdo en peatonalizar la calle ?"</span>
       <%= f.text_field :question, maxlength: Proposal.question_max_length, placeholder: t("proposals.form.proposal_question"), label: false %>
     </div>
 

app/views/proposals/_votes.html.erb

@@ -6,7 +6,15 @@
   </div>
 
   <span class="total-supports">
-    <%= t("proposals.proposal.supports", count: proposal.total_votes) %>&nbsp;<span><%= t("proposals.proposal.supports_necessary") %></span>
+    <%= t("proposals.proposal.supports", count: proposal.total_votes) %>&nbsp;
+    <!-- percentage of supports -->
+      (0.1%)
+    <!-- /. percentage of supports -->
+    <span>
+      <abbr title="<%= t("proposals.proposal.census_percent") %>">
+        <%= t("proposals.proposal.supports_necessary") %>
+      </abbr>
+    </span>
   </span>
 
   <div class="in-favor">
@@ -15,7 +23,7 @@
         <%= t("proposals.proposal.support") %>
   <% end %>
   <!-- if user supported dissapear the button and appear this :) -->
-    <div class="supported">
+    <div class="supported" style="display: none;">
       <%= t("proposals.proposal.already_supported") %>
     </div>
   <!-- /. if user supported dissapear the button and appear this :) -->

config/locales/en.yml

@@ -169,7 +169,8 @@ en:
         zero: No supports
         one: 1 support
         other: "%{count} supports"
-      supports_necessary: "/ 53.726"
+      supports_necessary: "53.726 necessary supports"
+      census_percent: "2% of census"
       already_supported: "¡You already supported this proposal!"
     form:
       proposal_title: Proposal title

config/locales/es.yml

@@ -169,7 +169,8 @@ es:
         zero: Sin apoyos
         one: 1 apoyo
         other: "%{count} apoyos"
-      supports_necessary: "/ 53.726"
+      supports_necessary: "53.726 apoyos necesarios"
+      census_percent: "2% del Censo"
       already_supported: "¡Ya has apoyado esta propuesta!"
     form:
       proposal_title: Título de la propuesta
@@ -201,7 +202,7 @@ es:
         submit_button: "Guardar cambios"
     new:
       start_new: Empezar una propuesta
-      info: "Si quieres que tu propuesta consiga apoyos has de explicarla claramente y de forma que se entienda. Si consigue el número adecuado de apoyos y es llevada a consulta debe ser resumida en una pregunta cuya respuesta sea Sí o No. Si tu propuesta no es suficientemente clara o solo quieres opinar sobre un tema es preferible que inicies un debate."
+      info: "Si quieres que tu propuesta consiga apoyos has de explicarla claramente y de forma que se entienda. Si consigue el número adecuado de apoyos y es llevada a consulta debe ser resumida en una pregunta cuya respuesta sea Sí o No."
       more_info: "Más información"
       back_link: Volver
       recommendations_title: Recomendaciones para crear una propuesta