From 8c5907a3fbbc93379a40af45817b12f16cd6eb0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Fri, 11 Jan 2019 09:19:41 +0100
Subject: [PATCH] Add percentage text to progress bars

Note we require extra <span> tags because the <progress> tag is an empty
tag (like <img>), and so it can't have ::before or ::after
pseudo-elements. There's a workaround for that, but currently it only
works on Chrome.

For some reason, the text seems to be slightly misaligned vertically in
all implementations I've tried. So the `top: -0.1rem` rule is a hack to
align it properly.
---
 app/assets/stylesheets/milestones.scss | 15 +++++++++++++++
 app/helpers/milestones_helper.rb       | 15 ++++++++++-----
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/milestones.scss b/app/assets/stylesheets/milestones.scss
index ade816c56..1b12eef0c 100644
--- a/app/assets/stylesheets/milestones.scss
+++ b/app/assets/stylesheets/milestones.scss
@@ -25,6 +25,21 @@
     }
   }
 
+  [data-text] {
+    display: block;
+    font-weight: bold;
+    position: relative;
+
+    &::after {
+      content: attr(data-text);
+      left: 0;
+      position: absolute;
+      text-align: right;
+      top: -0.1rem;
+      width: 100%;
+    }
+  }
+
   progress {
     $background-color: #fef0e2;
     $progress-color: #fea230;
diff --git a/app/helpers/milestones_helper.rb b/app/helpers/milestones_helper.rb
index 62df63624..e127dee5c 100644
--- a/app/helpers/milestones_helper.rb
+++ b/app/helpers/milestones_helper.rb
@@ -1,9 +1,14 @@
 module MilestonesHelper
   def progress_tag_for(progress_bar)
-    content_tag :progress,
-                number_to_percentage(progress_bar.percentage, precision: 0),
-                class: progress_bar.primary? ? "primary" : "",
-                max: ProgressBar::RANGE.max,
-                value: progress_bar.percentage
+    text = number_to_percentage(progress_bar.percentage, precision: 0)
+
+    content_tag :span do
+      content_tag(:span, "", "data-text": text, style: "width: #{progress_bar.percentage}%;") +
+      content_tag(:progress,
+                  text,
+                  class: progress_bar.primary? ? "primary" : "",
+                  max: ProgressBar::RANGE.max,
+                  value: progress_bar.percentage)
+    end
   end
 end