From 7ce57f649fb39af9d08a150876500c420b41cc93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Thu, 20 Dec 2018 18:31:48 +0100
Subject: [PATCH] Use a `<meter>` tag to display age percentages

---
 app/assets/stylesheets/stats.scss     | 25 +++++++++++++++++++++++++
 app/views/budgets/stats/show.html.erb |  4 +---
 app/views/polls/stats.html.erb        |  5 +----
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/stats.scss b/app/assets/stylesheets/stats.scss
index 418e93def..ea1177e6a 100644
--- a/app/assets/stylesheets/stats.scss
+++ b/app/assets/stylesheets/stats.scss
@@ -80,4 +80,29 @@
       }
     }
   }
+
+  meter {
+    background: none;
+    background-color: #ebf0f4;
+    border-radius: 0.3rem;
+    display: block;
+    width: 100%;
+  }
+
+  meter::-moz-meter-bar {
+    background: #52a4ee;
+    border-bottom-left-radius: 0.3rem;
+    border-top-left-radius: 0.3rem;
+  }
+
+  meter::-webkit-meter-optimum-value {
+    background: #52a4ee;
+    border-bottom-left-radius: 0.3rem;
+    border-top-left-radius: 0.3rem;
+  }
+
+  meter::-webkit-meter-bar {
+    background: #ebf0f4;
+    border-radius: 0.3rem;
+  }
 }
diff --git a/app/views/budgets/stats/show.html.erb b/app/views/budgets/stats/show.html.erb
index 5c55be1dd..b7dffce48 100644
--- a/app/views/budgets/stats/show.html.erb
+++ b/app/views/budgets/stats/show.html.erb
@@ -145,9 +145,7 @@
                 <td><%= group[:range] %></td>
                 <td>
                   <%= "#{group[:count]} (#{number_to_stats_percentage(group[:percentage])})" %>
-                  <div class="progress" role="progressbar" tabindex="0" aria-valuenow="20" aria-valuemin="0" aria-valuetext="<%= group[:percentage] %>" aria-valuemax="100">
-                    <span class="progress-meter" style="width: <%= number_to_stats_percentage(group[:percentage]*5, locale: :en) %>;"></span>
-                  </div>
+                  <meter min="0" max="100" value="<%= group[:percentage] %>"></meter>
                 </td>
               </tr>
             <% end %>
diff --git a/app/views/polls/stats.html.erb b/app/views/polls/stats.html.erb
index f1da5ae07..ab90f94dd 100644
--- a/app/views/polls/stats.html.erb
+++ b/app/views/polls/stats.html.erb
@@ -73,10 +73,7 @@
                   <td><%= group[:range] %></td>
                   <td>
                     <%= "#{group[:count]} (#{number_to_stats_percentage(group[:percentage])})" %>
-
-                    <div class="progress" role="progressbar" tabindex="0" aria-valuemin="0" aria-valuetext="<%= group[:percentage] %>" aria-valuemax="100">
-                      <span class="progress-meter" style="width: <%= number_to_stats_percentage(group[:percentage], locale: :en) %>;"></span>
-                    </div>
+                    <meter min="0" max="100" value="<%= group[:percentage] %>"></meter>
                   </td>
                 </tr>
               <% end %>