From 82ef5149c5ea31e41edf9be0cc0579862748378c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Wed, 29 Jul 2020 18:33:45 +0200
Subject: [PATCH] Remove redundant progress bar

We were displaying two progress bars for the same thing, and hiding one
of them.

Displaying just one of them and readjusting the styles accordingly is a
bit more intuitive IMHO.

We're also getting the text inside the progress bar out of it; its
purpose inside an element with the `progressbar` role is to provide the
same information as the progress bar (which we aren't exactly doing,
although it could be argued that we do), and in order to be accessible
we should provide the same text in the `aria-valuetext` field, which we
aren't doing. This also simplifies our CSS, which was working because we
defined a padding which covered the height of the hidden extra progress
bar and would have needed quite a few changes if we kept just one
progress bar with text inside it. We can also remove a few CSS rules
which we added to override foundation's rules for the
`progress-meter-text` class.
---
 app/assets/stylesheets/participation.scss     | 22 ++++++-------------
 .../budgets/ballot/_progress_bar.html.erb     | 19 +++++-----------
 2 files changed, 13 insertions(+), 28 deletions(-)

diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index d1b1325ba..8485b5468 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -1285,6 +1285,7 @@
   .progress {
     background: #212033;
     clear: both;
+    margin-bottom: 0;
   }
 
   .progress-meter {
@@ -1293,29 +1294,20 @@
     transition: width 2s;
   }
 
-  .spent-amount-progress,
-  .spent-amount-meter {
-    background: none !important;
-  }
-
   .spent-amount-text {
-    color: #fff;
-    font-size: $base-font-size;
-    font-weight: normal;
-    position: absolute;
-    right: 0;
+    margin-bottom: 0;
+    position: relative;
     text-align: right;
-    top: 16px;
-    width: 100%;
+    white-space: nowrap;
 
     &::before {
       color: #a5a1ff;
       content: "\57";
       font-family: "icons";
       font-size: $small-font-size;
+      line-height: 0;
       position: absolute;
-      right: -6px;
-      top: -17px;
+      right: -0.5em;
     }
   }
 
@@ -1328,7 +1320,6 @@
 
   .amount-available {
     display: block;
-    text-align: right;
 
     span {
       font-size: rem-calc(24);
@@ -1486,6 +1477,7 @@
       height: auto;
       left: 0;
       padding: $line-height;
+      padding-bottom: $line-height / 2;
       position: fixed;
       top: 0;
       width: 100%;
diff --git a/app/views/budgets/ballot/_progress_bar.html.erb b/app/views/budgets/ballot/_progress_bar.html.erb
index f556ee10f..b3c563240 100644
--- a/app/views/budgets/ballot/_progress_bar.html.erb
+++ b/app/views/budgets/ballot/_progress_bar.html.erb
@@ -3,23 +3,16 @@
 </span>
 
 <div class="progress" role="progressbar" tabindex="0"
-     id="progress"
      aria-valuenow="<%= ballot.percentage_spent(heading) %>" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-meter"
        style="width: <%= ballot.percentage_spent(heading) %>%">
   </div>
 </div>
 
-<div class="progress spent-amount-progress" role="progressbar" tabindex="0"
-     aria-valuenow="20" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
-  <span class="progress-meter spent-amount-meter"
-        style="width: <%= ballot.percentage_spent(heading) %>%">
-    <p id="amount-spent" class="progress-meter-text spent-amount-text">
-      <small><%= t("budgets.progress_bar.assigned") %></small><%= ballot.formatted_amount_spent(heading) %>
-      <span id="amount-available" class="amount-available">
-        <small><%= t("budgets.progress_bar.available") %></small>
-        <span><%= ballot.formatted_amount_available(heading) %></span>
-      </span>
-    </p>
+<p id="amount-spent" class="spent-amount-text" style="width: <%= ballot.percentage_spent(heading) %>%">
+  <small><%= t("budgets.progress_bar.assigned") %></small><%= ballot.formatted_amount_spent(heading) %>
+  <span id="amount-available" class="amount-available">
+    <small><%= t("budgets.progress_bar.available") %></small>
+    <span><%= ballot.formatted_amount_available(heading) %></span>
   </span>
-</div>
+</p>