Improve UI for group milestone and project milestone pages

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

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

-%h3.page-title
+%h4.page-title
+  .issue-box{ class: "issue-box-#{@group_milestone.closed? ? 'closed' : 'open'}" }
+    - if @group_milestone.closed?
+      Closed
+    - else
+      Open
   Milestone #{@group_milestone.title}
   .pull-right
     - if can?(current_user, :manage_group, @group)
@@ -7,44 +12,39 @@
       - else
         = link_to 'Reopen Milestone', group_milestone_path(@group, @group_milestone.safe_title, title: @group_milestone.title, milestone: {state_event: :activate }), method: :put, class: "btn btn-small btn-grouped btn-reopen"
 
+%hr
 - if (@group_milestone.total_items_count == @group_milestone.closed_items_count) && @group_milestone.active?
   .alert.alert-success
     %span All issues for this milestone are closed. You may close the milestone now.
 
-.back-link
-  = link_to group_milestones_path(@group) do
-    ← To milestones list
-
-.issue-box{ class: "issue-box-#{@group_milestone.closed? ? 'closed' : 'open'}" }
-  .state.clearfix
-    .state-label
-      - if @group_milestone.closed?
+.description
+%table.table
+  %thead
+    %tr
+      %th Project
+      %th Open issues
+      %th State
+      %th Due date
+  - @group_milestone.milestones.each do |milestone|
+    %tr
+      %td
+        = link_to "#{milestone.project.name}", project_milestone_path(milestone.project, milestone)
+      %td
+        = milestone.issues.opened.count
+      %td
+        - if milestone.closed?
           Closed
         - else
           Open
+      %td
+        = milestone.expires_at
 
-  %h4.title
-    = gfm escape_once(@group_milestone.title)
-
-  .description
-    - @group_milestone.milestones.each do |milestone|
-      %hr
-      %h4
-        = link_to "#{milestone.project.name} - #{milestone.title}", project_milestone_path(milestone.project, milestone)
-        %span.pull-right= milestone.expires_at
-        - if milestone.closed?
-          %span.label.label-danger #{milestone.state}
-      = preserve do
-        - if milestone.description.present?
-          = milestone.description
-
-  .context
-    %p
+.context
+  %p.lead
     Progress:
     #{@group_milestone.closed_items_count} closed
     –
     #{@group_milestone.open_items_count} open
-
   .progress.progress-info
     .progress-bar{style: "width: #{@group_milestone.percent_complete}%;"}
 

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

 = render "projects/issues_nav"
-%h3.page-title
+%h4.page-title
   .issue-box{ class: issue_box_class(@milestone) }
     - if @milestone.closed?
       Closed
@@ -8,26 +8,34 @@
     - else
       Open
   Milestone ##{@milestone.iid}
-  .pull-right.creator
-    %small= @milestone.expires_at
+  %small.creator
+    = @milestone.expires_at
+  .pull-right
+    - if can?(current_user, :admin_milestone, @project)
+      = link_to edit_project_milestone_path(@project, @milestone), class: "btn btn-grouped" do
+        %i.fa.fa-pencil-square-o
+        Edit
+      - if @milestone.active?
+        = link_to 'Close Milestone', project_milestone_path(@project, @milestone, milestone: {state_event: :close }), method: :put, class: "btn btn-close btn-grouped"
+      - else
+        = link_to 'Reopen Milestone', project_milestone_path(@project, @milestone, milestone: {state_event: :activate }), method: :put, class: "btn btn-reopen btn-grouped"
 
 %hr
 - if @milestone.issues.any? && @milestone.can_be_closed?
   .alert.alert-success
     %span All issues for this milestone are closed. You may close milestone now.
-.row
-  .col-sm-9
-    %h3.issue-title
+
+%h3.issue-title
   = gfm escape_once(@milestone.title)
-    %div
+%div
   - if @milestone.description.present?
     .description
       .wiki
         = preserve do
           = markdown @milestone.description
 
-    %hr
-    .context
+%hr
+.context
   %p.lead
     Progress:
     #{@milestone.closed_items_count} closed
@@ -39,22 +47,6 @@
   .progress.progress-info
     .progress-bar{style: "width: #{@milestone.percent_complete}%;"}
 
-  .col-sm-3
-    %div
-      - if can?(current_user, :admin_milestone, @project)
-        = link_to edit_project_milestone_path(@project, @milestone), class: "btn btn-block" do
-          %i.fa.fa-pencil-square-o
-          Edit
-        - if @milestone.active?
-          = link_to 'Close Milestone', project_milestone_path(@project, @milestone, milestone: {state_event: :close }), method: :put, class: "btn btn-close btn-block"
-        - else
-          = link_to 'Reopen Milestone', project_milestone_path(@project, @milestone, milestone: {state_event: :activate }), method: :put, class: "btn btn-reopen btn-block"
-      = link_to new_project_issue_path(@project, issue: { milestone_id: @milestone.id }), class: "btn  btn-block", title: "New Issue" do
-        %i.fa.fa-plus
-        New Issue
-      = link_to 'Browse Issues', project_issues_path(@milestone.project, milestone_id: @milestone.id), class: "btn  edit-milestone-link btn-block"
-
-
 
 %ul.nav.nav-tabs
   %li.active
@@ -71,6 +63,10 @@
       %span.badge= @users.count
 
   .pull-right
+    = link_to new_project_issue_path(@project, issue: { milestone_id: @milestone.id }), class: "btn  btn-grouped", title: "New Issue" do
+      %i.fa.fa-plus
+      New Issue
+    = link_to 'Browse Issues', project_issues_path(@milestone.project, milestone_id: @milestone.id), class: "btn  edit-milestone-link btn-grouped"
 
 .tab-content
   .tab-pane.active#tab-issues