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

@@ -1,4 +1,9 @@
-%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,46 +12,41 @@
       - 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
+.description
-  = link_to group_milestones_path(@group) do
+%table.table
-    ← To milestones list
+  %thead
-
+    %tr
-.issue-box{ class: "issue-box-#{@group_milestone.closed? ? 'closed' : 'open'}" }
+      %th Project
-  .state.clearfix
+      %th Open issues
-    .state-label
+      %th State
-      - if @group_milestone.closed?
+      %th Due date
-        Closed
+  - @group_milestone.milestones.each do |milestone|
-      - else
+    %tr
-        Open
+      %td
-
+        = link_to "#{milestone.project.name}", project_milestone_path(milestone.project, milestone)
-  %h4.title
+      %td
-    = gfm escape_once(@group_milestone.title)
+        = milestone.issues.opened.count
-
+      %td
-  .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}
+          Closed
-      = preserve do
+        - else
-        - if milestone.description.present?
+          Open
-          = milestone.description
+      %td
+        = milestone.expires_at
 
-  .context
+.context
-    %p
+  %p.lead
-      Progress:
+    Progress:
-      #{@group_milestone.closed_items_count} closed
+    #{@group_milestone.closed_items_count} closed
-      –
+    –
-      #{@group_milestone.open_items_count} open
+    #{@group_milestone.open_items_count} open
-
+  .progress.progress-info
-    .progress.progress-info
+    .progress-bar{style: "width: #{@group_milestone.percent_complete}%;"}
-      .progress-bar{style: "width: #{@group_milestone.percent_complete}%;"}
 
 %ul.nav.nav-tabs
   %li.active

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

@@ -1,5 +1,5 @@
 = render "projects/issues_nav"
-%h3.page-title
+%h4.page-title
   .issue-box{ class: issue_box_class(@milestone) }
     - if @milestone.closed?
       Closed
@@ -8,52 +8,44 @@
     - else
       Open
   Milestone ##{@milestone.iid}
-  .pull-right.creator
+  %small.creator
-    %small= @milestone.expires_at
+    = @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
-      = gfm escape_once(@milestone.title)
-    %div
-      - if @milestone.description.present?
-        .description
-          .wiki
-            = preserve do
-              = markdown @milestone.description
 
-    %hr
+%h3.issue-title
-    .context
+  = gfm escape_once(@milestone.title)
-      %p.lead
+%div
-        Progress:
+  - if @milestone.description.present?
-        #{@milestone.closed_items_count} closed
+    .description
-        –
+      .wiki
-        #{@milestone.open_items_count} open
+        = preserve do
-         
+          = markdown @milestone.description
-        %span.light #{@milestone.percent_complete}% complete
-        %span.pull-right= @milestone.expires_at
-      .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"
 
+%hr
+.context
+  %p.lead
+    Progress:
+    #{@milestone.closed_items_count} closed
+    –
+    #{@milestone.open_items_count} open
+     
+    %span.light #{@milestone.percent_complete}% complete
+    %span.pull-right= @milestone.expires_at
+  .progress.progress-info
+    .progress-bar{style: "width: #{@milestone.percent_complete}%;"}
 
 
 %ul.nav.nav-tabs
@@ -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