Add styles to milestones progress bars

app/assets/stylesheets/milestones.scss

@@ -1,66 +1,36 @@
-.tab-milestones .timeline ul {
-  margin-top: rem-calc(40);
-  position: relative;
-}
+$progress-bar-background: #fef0e2;
+$progress-bar-color:      #fea230;
 
-.tab-milestones .progress-bars {
-  margin-top: $line-height / 2;
+.tab-milestones {
 
-  h5 {
-    font-size: rem-calc(25);
-  }
+  .progress-bars {
+    margin-bottom: $line-height * 2;
+    margin-top: $line-height;
 
-  ul {
-    border-spacing: rem-calc(15) $line-height / 4;
-    display: table;
-    margin-top: $line-height / 2;
-
-    li {
-      display: table-row;
-
-      > * {
-        display: table-cell;
-        vertical-align: middle;
-      }
+    h5 {
+      font-size: rem-calc(24);
     }
-  }
 
-  [data-text] {
-    display: block;
-    font-weight: bold;
-    position: relative;
+    .progress {
+      background: $progress-bar-background;
+      border-radius: rem-calc(6);
+      position: relative;
+    }
 
-    &::after {
-      content: attr(data-text);
-      left: 0;
-      position: absolute;
+    .progress-meter {
+      background: $progress-bar-color;
+      border-radius: rem-calc(6);
+    }
+
+    .progress-meter-text {
+      color: #000;
+      right: 12px;
       text-align: right;
-      top: -0.1rem;
-      width: 100%;
-    }
-  }
-
-  progress {
-    $background-color: #fef0e2;
-    $progress-color: #fea230;
-
-    background-color: $background-color;
-    color: $progress-color;
-
-    &.primary {
-      width: 100%;
+      transform: translate(0%, -50%);
     }
 
-    &::-webkit-progress-bar {
-      background-color: $background-color;
-    }
-
-    &::-webkit-progress-value {
-      background-color: $progress-color;
-    }
-
-    &::-moz-progress-bar {
-      background-color: $progress-color;
+    .milestone-progress .row {
+      margin-bottom: $line-height / 2;
     }
   }
 }

app/views/milestones/_milestones_content.html.erb

@@ -1,13 +1,13 @@
 <div class="row">
   <div class="small-12 column">
+    <%= render "milestones/progress_bars", milestoneable: milestoneable %>
+
     <% if milestoneable.milestones.blank? %>
       <div class="callout primary text-center">
         <%= t("milestones.index.no_milestones") %>
       </div>
     <% end %>
 
-    <%= render "milestones/progress_bars", milestoneable: milestoneable %>
-
     <section class="timeline">
       <ul class="no-bullet">
         <% milestoneable.milestones.order_by_publication_date.each do |milestone| %>

app/views/milestones/_progress_bars.html.erb

@@ -2,17 +2,23 @@
   <section class="progress-bars">
     <h5><%= t("milestones.index.progress") %></h5>
 
-    <%= progress_tag_for(milestoneable.primary_progress_bar) %>
+    <div class="margin">
+      <%= progress_tag_for(milestoneable.primary_progress_bar) %>
+    </div>
 
     <% if milestoneable.secondary_progress_bars.any? %>
-      <ul class="milestone-progress">
+      <div class="milestone-progress">
         <% milestoneable.secondary_progress_bars.each do |progress_bar| %>
-          <li>
-            <span class="title"><%= progress_bar.title %></span>
-            <%= progress_tag_for(progress_bar) %>
-          </li>
+          <div class="row margin-bottom">
+            <div class="small-12 medium-6 large-4 column">
+              <%= progress_bar.title %>
+            </div>
+            <div class="small-12 medium-6 large-8 column end">
+              <%= progress_tag_for(progress_bar) %>
+            </div>
+          </div>
         <% end %>
-      </ul>
+      </div>
     <% end %>
   </section>
 <% end %>