Improve styles for budgets voting phase (#20)

Improve styles for budgets voting phase
javierm · Feb 17, 2021 · 4e26b7f · 4e26b7f
1 parent afb976e
commit 4e26b7f
Show file tree

Hide file tree

Showing 12 changed files with 165 additions and 71 deletions.
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
@@ -202,6 +202,30 @@
   }
 }
 
+.supported {
+
+  .button {
+
+    &.button-remove-support {
+      background: #e7eaec;
+      color: $brand;
+      font-weight: bold;
+      margin-top: $line-height;
+      padding-left: rem-calc(30);
+      position: relative;
+
+      &::before {
+        content: "\f00d";
+        font-family: "Font Awesome 5 Free";
+        font-size: $base-font-size;
+        left: 30px;
+        position: absolute;
+        top: 14px;
+      }
+    }
+  }
+}
+
 .supports-container {
   border-top: 1px solid $border;
 
@@ -1006,6 +1030,8 @@
     .button-support {
       background: $budget;
       color: #fff;
+      font-size: $base-font-size;
+      font-weight: bold;
 
       &:hover {
         background: $budget-hover;
@@ -1436,12 +1462,26 @@
 
   &.budget-heading {
     min-height: $line-height * 10;
+
+    .button {
+      min-width: rem-calc(240);
+      position: relative;
+
+      &::after {
+        content: "\f054";
+        font-family: "Font Awesome 5 Free";
+        font-weight: bold;
+        position: absolute;
+        right: 24px;
+      }
+    }
   }
 
   h2 {
     margin-bottom: 0;
   }
 
+  h1,
   h2,
   h3,
   .back,
@@ -1774,13 +1814,20 @@
 
   .progress {
     background: #212033;
+    border-radius: rem-calc(12);
     clear: both;
     margin-bottom: 0;
   }
 
+  .progress-bar-indicator {
+    overflow: hidden;
+  }
+
   .progress-meter {
     background: #fdcb10;
-    border-radius: 0;
+    border-radius: rem-calc(12);
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
     transition: width 2s;
   }
 
@@ -1805,11 +1852,17 @@
     color: #fff;
     font-size: rem-calc(18);
     font-weight: bold;
-    float: right;
+    text-transform: uppercase;
+
+    @include breakpoint(medium) {
+      float: right;
+    }
   }
 
   .amount-available {
     display: block;
+    text-align: right;
+    text-transform: uppercase;
 
     span {
       font-size: rem-calc(24);
@@ -1865,12 +1918,19 @@
   }
 }
 
+.my-ballot {
+  float: left;
+  font-size: rem-calc(40);
+  margin-right: 12px;
+}
+
 .ballot-list {
   list-style: none;
   margin-left: 0;
 
   li {
-    background: #f9f9f9;
+    background: #f1f1f1;
+    border-radius: rem-calc(12);
     line-height: $line-height;
     margin-bottom: $line-height / 4;
     padding: $line-height $line-height / 2;
@@ -1880,27 +1940,32 @@
       color: $text;
     }
 
-    span {
+    .ballot-list-title {
       display: block;
-      font-style: italic;
+      max-width: 90%;
+    }
+
+    .ballot-list-price {
+      color: $budget;
+      display: block;
+      font-weight: bold;
+      margin-top: $line-height;
+      text-align: right;
     }
 
     .remove-investment-project {
       display: block;
       height: 0;
 
-      .icon-x {
-        color: #9f9f9f;
-        font-size: rem-calc(24);
+      .fa-times {
+        color: $text;
+        font-size: rem-calc(20);
+        font-weight: bold;
         line-height: $line-height / 2;
         position: absolute;
-        right: 6px;
+        right: 12px;
         text-decoration: none;
-        top: 6px;
-
-        @include breakpoint(medium) {
-          font-size: $base-font-size;
-        }
+        top: 12px;
       }
     }
 
@@ -1915,13 +1980,21 @@
         text-decoration: none;
       }
 
-      .remove-investment-project .icon-x {
+      .remove-investment-project .fa-times {
         color: #fff;
       }
     }
   }
 }
 
+.progress-bar-nav {
+
+  h2 {
+    margin-bottom: $line-height * 2;
+    margin-top: $line-height;
+  }
+}
+
 .progress-bar-nav {
   position: relative;
   z-index: 3;
@@ -1932,6 +2005,7 @@
 
     h2 {
       margin-bottom: $line-height / 2;
+      margin-top: 0;
       transition: font-size 0.3s;
     }
 

diff --git a/app/views/budgets/ballot/_ballot.html.erb b/app/views/budgets/ballot/_ballot.html.erb
@@ -1,4 +1,4 @@
-<div class="expanded budget no-margin-top padding">
+<div class="expanded jumbo-budget no-margin-top padding">
   <div class="row">
     <%= back_link_to @ballot_referer %>
 

diff --git a/app/views/budgets/ballot/_investment.html.erb b/app/views/budgets/ballot/_investment.html.erb
@@ -8,7 +8,7 @@
                 class: "remove-investment-project",
                 method: :delete,
                 remote: true do %>
-       <span class="icon-x"></span>
+       <span class="fas fa-times"></span>
     <% end %>
   <% end %>
 </li>
diff --git a/app/views/budgets/ballot/_investment_for_sidebar.html.erb b/app/views/budgets/ballot/_investment_for_sidebar.html.erb
@@ -1,6 +1,6 @@
 <li id="<%= dom_id(investment) %>_sidebar">
-  <%= investment.title %>
-  <span><%= investment.formatted_price %></span>
+  <span class="ballot-list-title"><%= investment.title %></span>
+  <span class="ballot-list-price"><%= investment.formatted_price %></span>
 
   <% if @budget.balloting? %>
     <%= link_to budget_ballot_line_path(id: investment.id,
@@ -10,7 +10,7 @@
                 method: :delete,
                 remote: true do %>
       <span class="show-for-sr"><%= t("budgets.ballots.show.remove") %></span>
-      <span class="icon-x"></span>
+      <span class="fas fa-times" title="<%= t("budgets.ballots.show.remove") %>"></span>
     <% end %>
   <% end %>
 </li>
diff --git a/app/views/budgets/ballot/_progress_bar.html.erb b/app/views/budgets/ballot/_progress_bar.html.erb
@@ -1,14 +1,21 @@
 <span class="total-amount">
-  <%= sanitize(ballot.amount_limit_info(heading)) %>
+  <% if budget.approval_voting? %>
+    <%= sanitize(ballot.amount_limit_info(heading)) %>
+  <% else %>
+    <%= t("budgets.progress_bar.assigned") %>
+    <span id="amount_spent"><%= @ballot.formatted_amount_spent(@heading) %></span> /
+    <%= t("budgets.investments.header.price") %> <%= @budget.formatted_heading_price(@heading) %>
+  <% end %>
 </span>
 
-<div class="progress" role="progressbar" tabindex="0"
+<div class="progress progress-bar-indicator" role="progressbar" tabindex="0"
      aria-valuenow="<%= ballot.percentage_spent(heading) %>" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-meter"
        style="width: <%= ballot.percentage_spent(heading) %>%">
   </div>
 </div>
 
-<p id="amount-spent" class="spent-amount-text" style="width: <%= ballot.percentage_spent(heading) %>%">
+<p class="progress-meter-text spent-amount-text"
+   style="width: <%= ballot.percentage_spent(heading) %>%">
   <%= render "budgets/ballot/progress_bar/#{ballot.budget.voting_style}", ballot: ballot, heading: heading %>
 </p>
diff --git a/app/views/budgets/ballot/progress_bar/_knapsack.html.erb b/app/views/budgets/ballot/progress_bar/_knapsack.html.erb
@@ -1,5 +1,4 @@
-<small><%= t("budgets.progress_bar.assigned") %></small><%= ballot.formatted_amount_spent(heading) %>
-<span id="amount-available" class="amount-available">
+<span id="amount_available" class="amount-available">
   <small><%= t("budgets.progress_bar.available") %></small>
   <span><%= ballot.formatted_amount_available(heading) %></span>
 </span>
diff --git a/app/views/budgets/investments/_ballot.html.erb b/app/views/budgets/investments/_ballot.html.erb
@@ -2,7 +2,7 @@
 <div class="js-participation supports ballot">
   <% if ballot.has_investment?(investment) %>
 
-    <div class="remove supported inline-block">
+    <div class="remove supported">
       <span class="icon-check-circle"
             title="<%= t("budgets.investments.investment.already_added") %>">
       </span>
@@ -14,7 +14,7 @@
                     budget_ballot_line_path(id: investment.id,
                                             budget_id: investment.budget_id,
                                             investments_ids: investment_ids),
-                    class: "delete small expanded",
+                    class: "button button-remove-support expanded",
                     method: :delete,
                     remote: true %>
       <% end %>
@@ -31,7 +31,7 @@
                     budget_ballot_lines_path(investment_id: investment.id,
                                              budget_id: investment.budget_id,
                                              investments_ids: investment_ids),
-                    class: "button button-support small expanded",
+                    class: "button button-support expanded",
                     title: t("budgets.investments.investment.support_title"),
                     method: :post,
                     remote: true %>

diff --git a/app/views/budgets/investments/_sidebar.html.erb b/app/views/budgets/investments/_sidebar.html.erb
@@ -36,6 +36,10 @@
   <h2 class="sidebar-title">
     <%= t("budgets.investments.index.sidebar.my_ballot") %>
   </h2>
+  <br>
+  <div class="my-ballot">
+    <span class="fas fa-vote-yea"></span>
+  </div>
 
   <% if @ballot.investments.by_heading(@heading.id).count > 0 %>
     <p>
@@ -57,6 +61,12 @@
     <p><strong><%= t("budgets.investments.index.sidebar.zero") %></strong></p>
   <% end %>
 
+  <p>
+    <%= sanitize(t("budgets.investments.index.sidebar.voted_info",
+        link: link_to(t("budgets.investments.index.sidebar.voted_info_link"), budget_ballot_path(@budget)),
+        phase_end_date: l(@budget.current_phase.ends_at.to_date, format: :long))) %>
+  </p>
+
   <ul class="ballot-list">
     <% if @heading %>
       <% @ballot.investments.by_heading(@heading.id).each do |investment| %>

diff --git a/config/locales/en/budgets.yml b/config/locales/en/budgets.yml
@@ -121,9 +121,11 @@ en:
             knapsack: "You can %{link} at any time until the close of this phase. No need to spend all the money available."
             approval: "You can %{link} at any time until the close of this phase."
           change_vote_link: "change your vote"
+          voted_info: "<strong>%{link}</strong> at any time until the %{phase_end_date}. No need to spend all the money available."
+          voted_info_link: "Change your votes"
           different_heading_assigned: "You have active votes in another heading: %{heading_link}"
           change_ballot: "If your change your mind you can remove your votes in %{check_ballot} and start again."
-          check_ballot_link: "check and confirm my ballot"
+          check_ballot_link: "submit my ballot"
           zero: You have not voted any investment project in this group.
           verified_only: "To create a new budget investment %{verify}."
           create: "Create a budget investment"
@@ -183,18 +185,18 @@ en:
           zero: No supports
         give_support: Support
       header:
-        check_ballot: Check and confirm my ballot
+        check_ballot: "Submit my ballot"
         different_heading_assigned: "You have active votes in another heading: %{heading_link}"
         change_ballot: "If your change your mind you can remove your votes in %{check_ballot} and start again."
-        check_ballot_link: "check and confirm my ballot"
-        price: "This heading has a budget of"
+        check_ballot_link: "submit my ballot"
+        price: "Total budget"
     progress_bar:
-      assigned: "You have assigned: "
-      available: "Available budget: "
       votes:
         zero: "You have selected <strong>0</strong> projects out of <strong>%{limit}</strong>"
         one: "You have selected <strong>1</strong> project out of <strong>%{limit}</strong>"
         other: "You have selected <strong>%{count}</strong> projects out of <strong>%{limit}</strong>"
+      assigned: "Used"
+      available: "Still available to you"
     show:
       phase: Actual phase
       see_results: See results

diff --git a/config/locales/es/budgets.yml b/config/locales/es/budgets.yml
@@ -121,6 +121,8 @@ es:
             knapsack: "Puedes %{link} en cualquier momento hasta el cierre de esta fase. No hace falta que gastes todo el dinero disponible."
             approval: "Puedes %{link} en cualquier momento hasta el cierre de esta fase."
           change_vote_link: "cambiar tus votos"
+          voted_info: "<strong>%{link}</strong> en cualquier momento hasta el %{phase_end_date}. No hace falta que gastes todo el dinero disponible."
+          voted_info_link: "Cambia tus votos"
           different_heading_assigned: "Ya apoyaste proyectos de otra sección del presupuesto: %{heading_link}"
           change_ballot: "Si cambias de opinión puedes borrar tus votos en %{check_ballot} y volver a empezar."
           check_ballot_link: "revisar y confirmar mis votos"
@@ -187,14 +189,14 @@ es:
         different_heading_assigned: "Ya apoyaste proyectos de otra sección del presupuesto: %{heading_link}"
         change_ballot: "Si cambias de opinión puedes borrar tus votos en %{check_ballot} y volver a empezar."
         check_ballot_link: "revisar y confirmar mis votos"
-        price: "Esta partida tiene un presupuesto de"
+        price: "Presupuesto total"
     progress_bar:
-      assigned: "Has asignado: "
-      available: "Presupuesto disponible: "
       votes:
         zero: "Has seleccionado <strong>0</strong> proyectos de <strong>%{limit}</strong>"
         one: "Has seleccionado <strong>1</strong> proyecto de <strong>%{limit}</strong>"
         other: "Has seleccionado <strong>%{count}</strong> proyectos de <strong>%{limit}</strong>"
+      assigned: "Usado"
+      available: "Todavía disponible"
     show:
       phase: Fase actual
       see_results: Ver resultados