Style milestones

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/stylesheets/base/gl_bootstrap.scss

@@ -85,14 +85,14 @@
 // Labels
 .label {
   padding: 2px 4px;
-  font-size: 12px;
+  font-size: 13px;
   font-style: normal;
   font-weight: normal;
   display: inline-block;
 
   &.label-gray {
-    background-color: #eee;
-    color: #999;
+    background-color: #f8fafc;
+    color: $gl-gray;
     text-shadow: none;
   }
 

app/assets/stylesheets/pages/milestone.scss

@@ -6,4 +6,8 @@ li.milestone {
   h4 {
     font-weight: bold;
   }
+
+  .progress {
+    height: 6px;
+  }
 }

app/views/dashboard/milestones/_milestone.html.haml

 %li{class: "milestone milestone-#{milestone.closed? ? 'closed' : 'open'}", id: dom_id(milestone.milestones.first) }
-  %h4
+  .row
+    .col-sm-6
+      %strong
         = link_to_gfm truncate(milestone.title, length: 100), dashboard_milestone_path(milestone.safe_title, title: milestone.title)
+    .col-sm-6
+      .pull-right.light #{milestone.percent_complete}% complete
   .row
     .col-sm-6
       = link_to issues_dashboard_path(milestone_title: milestone.title) do
         = pluralize milestone.issue_count, 'Issue'
-       
+      ·
       = link_to merge_requests_dashboard_path(milestone_title: milestone.title) do
         = pluralize milestone.merge_requests_count, 'Merge Request'
-       
-      %span.light #{milestone.percent_complete}% complete
-
     .col-sm-6
       = milestone_progress_bar(milestone)
-  %div
+  .row
+    .col-sm-6
       - milestone.milestones.each do |milestone|
         = link_to milestone_path(milestone) do
           %span.label.label-gray

app/views/groups/milestones/_milestone.html.haml

 %li{class: "milestone milestone-#{milestone.closed? ? 'closed' : 'open'}", id: dom_id(milestone.milestones.first) }
-  .pull-right
-    - if can?(current_user, :admin_group, @group)
-      - if milestone.closed?
-        = link_to 'Reopen Milestone', group_milestone_path(@group, milestone.safe_title, title: milestone.title, milestone: {state_event: :activate }), method: :put, class: "btn btn-sm btn-grouped btn-reopen"
-      - else
-        = link_to 'Close Milestone', group_milestone_path(@group, milestone.safe_title, title: milestone.title, milestone: {state_event: :close }), method: :put, class: "btn btn-sm btn-close"
-  %h4
+  .row
+    .col-sm-6
+      %strong
         = link_to_gfm truncate(milestone.title, length: 100), group_milestone_path(@group, milestone.safe_title, title: milestone.title)
+    .col-sm-6
+      .pull-right.light #{milestone.percent_complete}% complete
   .row
     .col-sm-6
       = link_to issues_group_path(@group, milestone_title: milestone.title) do
         = pluralize milestone.issue_count, 'Issue'
-       
+      ·
       = link_to merge_requests_group_path(@group, milestone_title: milestone.title) do
         = pluralize milestone.merge_requests_count, 'Merge Request'
-       
-      %span.light #{milestone.percent_complete}% complete
     .col-sm-6
       = milestone_progress_bar(milestone)
+  .row
+    .col-sm-6
       %div
         - milestone.milestones.each do |milestone|
           = link_to milestone_path(milestone) do
             %span.label.label-gray
               = milestone.project.name
+    .col-sm-6
+      - if can?(current_user, :admin_group, @group)
+        - if milestone.closed?
+          = link_to 'Reopen Milestone', group_milestone_path(@group, milestone.safe_title, title: milestone.title, milestone: {state_event: :activate }), method: :put, class: "btn btn-xs btn-grouped btn-reopen"
+        - else
+          = link_to 'Close Milestone', group_milestone_path(@group, milestone.safe_title, title: milestone.title, milestone: {state_event: :close }), method: :put, class: "btn btn-xs btn-close"

app/views/projects/milestones/_milestone.html.haml

 %li{class: "milestone milestone-#{milestone.closed? ? 'closed' : 'open'}", id: dom_id(milestone) }
-  .pull-right
-    - if can?(current_user, :admin_milestone, milestone.project) and milestone.active?
-      = link_to edit_namespace_project_milestone_path(milestone.project.namespace, milestone.project, milestone), class: "btn btn-sm edit-milestone-link btn-grouped" do
-        %i.fa.fa-pencil-square-o
-        Edit
-      = link_to 'Close Milestone', namespace_project_milestone_path(@project.namespace, @project, milestone, milestone: {state_event: :close }), method: :put, remote: true, class: "btn btn-sm btn-close"
-      = link_to namespace_project_milestone_path(milestone.project.namespace, milestone.project, milestone), data: { confirm: 'Are you sure?' }, method: :delete, class: "btn btn-sm btn-remove" do
-        %i.fa.fa-trash-o
-        Remove
-
-  %h4
+  .row
+    .col-sm-6
+      %strong
         = link_to_gfm truncate(milestone.title, length: 100), namespace_project_milestone_path(milestone.project.namespace, milestone.project, milestone)
-    - if milestone.expired? and not milestone.closed?
-      %span.cred (Expired)
-    %small
-      = milestone.expires_at
+
+    .col-sm-6
+      .pull-right.light #{milestone.percent_complete}% complete
   .row
     .col-sm-6
       = link_to namespace_project_issues_path(milestone.project.namespace, milestone.project, milestone_title: milestone.title) do
         = pluralize milestone.issues.count, 'Issue'
-       
+      ·
       = link_to namespace_project_merge_requests_path(milestone.project.namespace, milestone.project, milestone_title: milestone.title) do
         = pluralize milestone.merge_requests.count, 'Merge Request'
-       
-      %span.light #{milestone.percent_complete}% complete
     .col-sm-6
       = milestone_progress_bar(milestone)
+
+  .row
+    .col-sm-6
+      - if milestone.expired? and not milestone.closed?
+        %span.cred (Expired)
+      - if milestone.expires_at
+        %span
+          = milestone.expires_at
+    .col-sm-6
+      - if can?(current_user, :admin_milestone, milestone.project) and milestone.active?
+        = link_to edit_namespace_project_milestone_path(milestone.project.namespace, milestone.project, milestone), class: "btn btn-xs edit-milestone-link btn-grouped" do
+          %i.fa.fa-pencil-square-o
+          Edit
+        = link_to 'Close Milestone', namespace_project_milestone_path(@project.namespace, @project, milestone, milestone: {state_event: :close }), method: :put, remote: true, class: "btn btn-xs btn-close"
+        = link_to namespace_project_milestone_path(milestone.project.namespace, milestone.project, milestone), data: { confirm: 'Are you sure?' }, method: :delete, class: "btn btn-xs btn-remove" do
+          %i.fa.fa-trash-o
+          Remove