6 files changed, 82 insertions, 60 deletions

diff --git a/app/views/projects/milestones/_form.html.haml b/app/views/projects/milestones/_form.html.haml
index 255ddab479f..39aa2437e18 100644
--- a/app/views/projects/milestones/_form.html.haml
+++ b/app/views/projects/milestones/_form.html.haml
@@ -1,10 +1,3 @@
-%h3.page-title= @milestone.new_record? ? "New Milestone" : "Edit Milestone ##{@milestone.iid}"
-.back-link
-  = link_to namespace_project_milestones_path(@project.namespace, @project) do
-    ← To milestones
-
-%hr
-
 = form_for [@project.namespace.becomes(Namespace), @project, @milestone], html: {class: 'form-horizontal milestone-form gfm-form js-requires-input'}  do |f|
   -if @milestone.errors.any?
     .alert.alert-danger
@@ -16,16 +9,13 @@
       .form-group
         = f.label :title, "Title", class: "control-label"
         .col-sm-10
-          = f.text_field :title, maxlength: 255, class: "form-control js-quick-submit", required: true
-          %p.hint Required
+          = f.text_field :title, maxlength: 255, class: "form-control js-quick-submit", required: true, autofocus: true
       .form-group.milestone-description
         = f.label :description, "Description", class: "control-label"
         .col-sm-10
           = render layout: 'projects/md_preview', locals: { preview_class: "md-preview" } do
             = render 'projects/zen', f: f, attr: :description, classes: 'description form-control js-quick-submit'
-            .hint
-              .pull-left Milestones are parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"), target: '_blank'}.
-              .pull-left Attach files by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }.
+            = render 'projects/notes/hints'
           .clearfix
           .error-alert
     .col-md-6
@@ -45,7 +35,7 @@
 
 
 :javascript
-  $( ".datepicker" ).datepicker({
+  $(".datepicker").datepicker({
     dateFormat: "yy-mm-dd",
     onSelect: function(dateText, inst) { $("#milestone_due_date").val(dateText) }
   }).datepicker("setDate", $.datepicker.parseDate('yy-mm-dd', $('#milestone_due_date').val()));
diff --git a/app/views/projects/milestones/_milestone.html.haml b/app/views/projects/milestones/_milestone.html.haml
index 5e93d55b1fb..d6a44c9f0a1 100644
--- a/app/views/projects/milestones/_milestone.html.haml
+++ b/app/views/projects/milestones/_milestone.html.haml
@@ -18,11 +18,7 @@
 
   .row
     .col-sm-6
-      - if milestone.expired? and not milestone.closed?
-        %span.cred (Expired)
-      - if milestone.expires_at
-        %span
-          = milestone.expires_at
+      = render 'shared/milestone_expired', milestone: milestone
     .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
@@ -31,4 +27,4 @@
         = 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
+          Delete
diff --git a/app/views/projects/milestones/edit.html.haml b/app/views/projects/milestones/edit.html.haml
index e9dc0b77462..43f8863163d 100644
--- a/app/views/projects/milestones/edit.html.haml
+++ b/app/views/projects/milestones/edit.html.haml
@@ -1,3 +1,9 @@
 - page_title "Edit", @milestone.title, "Milestones"
 = render "header_title"
+
+%h3.page-title
+  Edit Milestone ##{@milestone.iid}
+
+%hr
+
 = render "form"
diff --git a/app/views/projects/milestones/index.html.haml b/app/views/projects/milestones/index.html.haml
index a207385bd43..114b06457a5 100644
--- a/app/views/projects/milestones/index.html.haml
+++ b/app/views/projects/milestones/index.html.haml
@@ -1,15 +1,18 @@
 - page_title "Milestones"
 = render "header_title"
-= render 'shared/milestones_filter'
 
-.gray-content-block
-  .pull-right
-    - if can? current_user, :admin_milestone, @project
+
+.project-issuable-filter
+  .controls
+    - if can?(current_user, :admin_milestone, @project)
       = link_to new_namespace_project_milestone_path(@project.namespace, @project), class: "pull-right btn btn-new", title: "New Milestone" do
         %i.fa.fa-plus
         New Milestone
-  .oneline
-    Milestone allows you to group issues and set due date for it
+
+  = render 'shared/milestones_filter'
+
+.gray-content-block
+  Milestone allows you to group issues and set due date for it
 
 .milestones
   %ul.content-list
diff --git a/app/views/projects/milestones/new.html.haml b/app/views/projects/milestones/new.html.haml
index 9ba9acb6f77..0d016f78313 100644
--- a/app/views/projects/milestones/new.html.haml
+++ b/app/views/projects/milestones/new.html.haml
@@ -1,3 +1,9 @@
 - page_title "New Milestone"
 = render "header_title"
+
+%h3.page-title
+  New Milestone
+
+%hr
+
 = render "form"
diff --git a/app/views/projects/milestones/show.html.haml b/app/views/projects/milestones/show.html.haml
index 3a898dfbcfd..1670ea8741a 100644
--- a/app/views/projects/milestones/show.html.haml
+++ b/app/views/projects/milestones/show.html.haml
@@ -1,46 +1,52 @@
-- page_title @milestone.title, "Milestones"
+- page_title       @milestone.title, "Milestones"
+- page_description @milestone.description
+
 = render "header_title"
 
-%h4.page-title
-  .issue-box{ class: issue_box_class(@milestone) }
+.detail-page-header
+  .status-box{ class: status_box_class(@milestone) }
     - if @milestone.closed?
       Closed
     - elsif @milestone.expired?
       Expired
     - else
       Open
-  Milestone ##{@milestone.iid}
-  %small.creator
-    = @milestone.expires_at
+  %span.identifier
+    Milestone ##{@milestone.iid}
+  - if @milestone.expires_at
+    %span.creator
+      ·
+      = @milestone.expires_at
   .pull-right
     - if can?(current_user, :admin_milestone, @project)
-      = link_to edit_namespace_project_milestone_path(@project.namespace, @project, @milestone), class: "btn btn-grouped" do
-        %i.fa.fa-pencil-square-o
-        Edit
       - if @milestone.active?
         = link_to 'Close Milestone', namespace_project_milestone_path(@project.namespace, @project, @milestone, milestone: {state_event: :close }), method: :put, class: "btn btn-close btn-grouped"
       - else
         = link_to 'Reopen Milestone', namespace_project_milestone_path(@project.namespace, @project, @milestone, milestone: {state_event: :activate }), method: :put, class: "btn btn-reopen btn-grouped"
+
       = link_to namespace_project_milestone_path(@project.namespace, @project, @milestone), data: { confirm: 'Are you sure?' }, method: :delete, class: "btn btn-grouped btn-remove" do
         %i.fa.fa-trash-o
-        Remove
+        Delete
+
+      = link_to edit_namespace_project_milestone_path(@project.namespace, @project, @milestone), class: "btn btn-grouped" do
+        %i.fa.fa-pencil-square-o
+        Edit
+
+.detail-page-description.gray-content-block.second-block
+  %h2.title
+    = markdown escape_once(@milestone.title), pipeline: :single_line
+  %div
+    - if @milestone.description.present?
+      .description
+        .wiki
+          = preserve do
+            = markdown @milestone.description
 
-%hr
 - if @milestone.issues.any? && @milestone.can_be_closed?
-  .alert.alert-success
+  .alert.alert-success.prepend-top-default
     %span All issues for this milestone are closed. You may close milestone now.
 
-%h3.issue-title
-  = gfm escape_once(@milestone.title)
-%div
-  - if @milestone.description.present?
-    .description
-      .wiki
-        = preserve do
-          = markdown @milestone.description
-
-%hr
-.context
+.context.prepend-top-default
   %p.lead
     Progress:
     #{@milestone.closed_items_count} closed
@@ -51,8 +57,7 @@
     %span.pull-right= @milestone.expires_at
   = milestone_progress_bar(@milestone)
 
-
-%ul.nav.nav-tabs
+%ul.center-top-menu.no-top.no-bottom
   %li.active
     = link_to '#tab-issues', 'data-toggle' => 'tab' do
       Issues
@@ -66,17 +71,21 @@
       Participants
       %span.badge= @users.count
 
-  .pull-right
-    - if can?(current_user, :create_issue, @project)
-      = link_to new_namespace_project_issue_path(@project.namespace, @project, issue: { milestone_id: @milestone.id }), class: "btn  btn-grouped", title: "New Issue" do
-        %i.fa.fa-plus
-        New Issue
-    - if can?(current_user, :read_issue, @project)
-      = link_to 'Browse Issues', namespace_project_issues_path(@milestone.project.namespace, @milestone.project, milestone_title: @milestone.title), class: "btn  edit-milestone-link btn-grouped"
-
 .tab-content
   .tab-pane.active#tab-issues
-    .row
+    .gray-content-block.middle-block
+      .pull-right
+        - if can?(current_user, :create_issue, @project)
+          = link_to new_namespace_project_issue_path(@project.namespace, @project, issue: { milestone_id: @milestone.id }), class: "btn  btn-grouped", title: "New Issue" do
+            %i.fa.fa-plus
+            New Issue
+        - if can?(current_user, :read_issue, @project)
+          = link_to 'Browse Issues', namespace_project_issues_path(@milestone.project.namespace, @milestone.project, milestone_title: @milestone.title), class: "btn btn-grouped"
+
+      .oneline
+        All issues in this milestone
+
+    .row.prepend-top-default
       .col-md-4
         = render('issues', title: 'Unstarted Issues (open and unassigned)', issues: @issues.opened.unassigned, id: 'unassigned')
       .col-md-4
@@ -85,7 +94,15 @@
         = render('issues', title: 'Completed Issues (closed)', issues: @issues.closed, id: 'closed')
 
   .tab-pane#tab-merge-requests
-    .row
+    .gray-content-block.middle-block
+      .pull-right
+        - if can?(current_user, :read_merge_request, @project)
+          = link_to 'Browse Merge Requests', namespace_project_merge_requests_path(@milestone.project.namespace, @milestone.project, milestone_title: @milestone.title), class: "btn btn-grouped"
+
+      .oneline
+        All merge requests in this milestone
+
+    .row.prepend-top-default
       .col-md-3
         = render('merge_requests', title: 'Work in progress (open and unassigned)', merge_requests: @merge_requests.opened.unassigned, id: 'unassigned')
       .col-md-3
@@ -100,6 +117,10 @@
               = render 'merge_request', merge_request: merge_request
 
   .tab-pane#tab-participants
+    .gray-content-block.middle-block
+      .oneline
+        All participants to this milestone
+
     %ul.bordered-list
       - @users.each do |user|
         %li