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

@@ -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;

app/helpers/milestones_helper.rb

@@ -1,9 +1,14 @@
 module MilestonesHelper
   def progress_tag_for(progress_bar)
-    content_tag :progress,
+    text = number_to_percentage(progress_bar.percentage, precision: 0)
-                number_to_percentage(progress_bar.percentage, precision: 0),
+
-                class: progress_bar.primary? ? "primary" : "",
+    content_tag :span do
-                max: ProgressBar::RANGE.max,
+      content_tag(:span, "", "data-text": text, style: "width: #{progress_bar.percentage}%;") +
-                value: progress_bar.percentage
+      content_tag(:progress,
+                  text,
+                  class: progress_bar.primary? ? "primary" : "",
+                  max: ProgressBar::RANGE.max,
+                  value: progress_bar.percentage)
+    end
   end
 end