Merge branch 'yury-n/gitlab-ce-18852-milestone-pages-mobile' into 'master'

Make milestone page responsive

Credit to @yury-n for this one. :star: :star2: :star:  Original MR: !5255

## What does this MR do?

> Makes the milestone page more mobile friendly

## Are there points in the code the reviewer needs to double check?

> Shouldn't be but maybe double check that the views I changed are exclusively used by the milestone details page I was amending and not any other pages that I haven't tested after my changes.

Looks good to me. :) Would be awesome to have @annabeldunstone check up on the stylesheet updates.

## Why was this MR needed?

> Buttons were misaligned

> Progress bar was not 100% width

> Stats were cut in the middle

> Milestone name/date text overflow

![Screen_Shot_2016-07-14_at_5.37.49_PM](/uploads/4da67c9f81d71873188e4a5cafed8113/Screen_Shot_2016-07-14_at_5.37.49_PM.png)

![Screen_Shot_2016-07-14_at_5.41.58_PM](/uploads/b3d767ce49e37b251c3192ed051400b8/Screen_Shot_2016-07-14_at_5.41.58_PM.png)

![Screen_Shot_2016-07-14_at_5.46.41_PM](/uploads/353ad59a88f3dea9e3f88e6ea05c1af3/Screen_Shot_2016-07-14_at_5.46.41_PM.png)

## Screenshots (if relevant)

![Screen_Shot_2016-07-14_at_6.15.58_PM](/uploads/a26768701ea6cb00ccd85a5ac0772e36/Screen_Shot_2016-07-14_at_6.15.58_PM.png)

![Screen_Shot_2016-07-14_at_5.57.04_PM](/uploads/b94cf1b7593589948216342b48a19831/Screen_Shot_2016-07-14_at_5.57.04_PM.png)

## Does this MR meet the acceptance criteria?

- [ ] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [ ] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [ ] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [ ] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?

Closes #18852

See merge request !6655

4 files changed, 144 insertions, 38 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9f41cbc9228..5b139ac8314 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -32,6 +32,7 @@ entry.
 - Fix sidekiq stats in admin area (blackst0ne)
 - Added label description as tooltip to issue board list title
 - Created cycle analytics bundle JavaScript file
+- Make the milestone page more responsive (yury-n)
 - Hides container registry when repository is disabled
 - API: Fix booleans not recognized as such when using the `to_boolean` helper
 - Removed delete branch tooltip !6954
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index 13402acd8e1..8843d1463db 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -11,6 +11,7 @@
     }
 
     .progress {
+      width: 100%;
       height: 6px;
     }
   }
@@ -30,7 +31,6 @@
       margin-right: 7px;
     }
 
-    // Issue title
     span a {
       color: $gl-text-color;
       word-wrap: break-word;
@@ -39,15 +39,66 @@
 }
 
 .milestone-summary {
-  margin-bottom: 25px;
-
   .milestone-stat {
+    white-space: nowrap;
     margin-right: 10px;
+
+    &.with-drilldown {
+      margin-right: 2px;
+    }
   }
 
   .remaining-days {
     color: $orange-light;
   }
+
+  .milestone-stats-and-buttons {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+
+    @media (min-width: $screen-xs-min) {
+      justify-content: space-between;
+      flex-wrap: nowrap;
+    }
+  }
+
+  .milestone-progress-buttons {
+    order: 1;
+    margin-top: 10px;
+
+    @media (min-width: $screen-xs-min) {
+      order: 2;
+      margin-top: 0;
+      flex-shrink: 0;
+    }
+
+    .btn {
+      float: left;
+      margin-right: $btn-side-margin;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .milestone-stats {
+    order: 2;
+    width: 100%;
+    padding: 7px 0;
+    flex-shrink: 1;
+
+    @media (min-width: $screen-xs-min) {
+      // when displayed on one line stats go first, buttons second
+      order: 1;
+    }
+  }
+
+  .progress {
+    width: 100%;
+    margin: 15px 0;
+  }
 }
 
 .issues-sortable-list,
@@ -82,3 +133,50 @@
     }
   }
 }
+
+.milestone-page-header {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  flex-wrap: wrap;
+
+  .status-box {
+    margin-top: 0;
+  }
+
+  .milestone-buttons {
+    margin-left: auto;
+  }
+
+  .status-box {
+    order: 1;
+  }
+
+  .milestone-buttons {
+    order: 2;
+  }
+
+  .header-text-content {
+    order: 3;
+    width: 100%;
+  }
+
+  .milestone-buttons .verbose {
+    display: none;
+  }
+
+  @media (min-width: $screen-xs-min) {
+    .milestone-buttons .verbose {
+      display: inline;
+    }
+
+    .header-text-content {
+      order: 2;
+      width: auto;
+    }
+
+    .milestone-buttons {
+      order: 3;
+    }
+  }
+}
diff --git a/app/views/projects/milestones/show.html.haml b/app/views/projects/milestones/show.html.haml
index f9ba77e87b5..e01aca3dda6 100644
--- a/app/views/projects/milestones/show.html.haml
+++ b/app/views/projects/milestones/show.html.haml
@@ -4,7 +4,7 @@
 = render "projects/issues/head"
 
 %div{ class: container_class }
-  .detail-page-header
+  .detail-page-header.milestone-page-header
     .status-box{ class: status_box_class(@milestone) }
       - if @milestone.closed?
         Closed
@@ -12,13 +12,14 @@
         Past due
       - else
         Open
-    %span.identifier
-      Milestone ##{@milestone.iid}
-    - if @milestone.expires_at
-      %span.creator
-        ·
-        = @milestone.expires_at
-    .pull-right
+    .header-text-content
+      %span.identifier
+        Milestone ##{@milestone.iid}
+      - if @milestone.expires_at
+        %span.creator
+          ·
+          = @milestone.expires_at
+    .milestone-buttons
       - if can?(current_user, :admin_milestone, @project)
         - 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-nr btn-grouped"
diff --git a/app/views/shared/milestones/_summary.html.haml b/app/views/shared/milestones/_summary.html.haml
index dee2472fa79..0a237136959 100644
--- a/app/views/shared/milestones/_summary.html.haml
+++ b/app/views/shared/milestones/_summary.html.haml
@@ -3,32 +3,38 @@
 .context.prepend-top-default
   .milestone-summary
     %h4 Progress
-    %strong= milestone.issues_visible_to_user(current_user).size
-    issues:
-    %span.milestone-stat
-      %strong= milestone.issues_visible_to_user(current_user).opened.size
-      open and
-      %strong= milestone.issues_visible_to_user(current_user).closed.size
-      closed
-    %strong= milestone.merge_requests.size
-    merge requests:
-    %span.milestone-stat
-      %strong= milestone.merge_requests.opened.size
-      open and
-      %strong= milestone.merge_requests.merged.size
-      merged
-    %span.milestone-stat
-      %strong== #{milestone.percent_complete(current_user)}%
-      complete
 
-    %span.milestone-stat
-      %span.remaining-days= milestone_remaining_days(milestone)
-    %span.pull-right.tab-issues-buttons
-      - if project && 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
-          New Issue
-      = link_to 'Browse Issues', milestones_browse_issuables_path(milestone, type: :issues), class: "btn btn-grouped"
-    %span.pull-right.tab-merge-requests-buttons.hidden
-      = link_to 'Browse Merge Requests', milestones_browse_issuables_path(milestone, type: :merge_requests), class: "btn btn-grouped"
+    .milestone-stats-and-buttons
+      .milestone-stats
+        %span.milestone-stat.with-drilldown
+          %strong= milestone.issues_visible_to_user(current_user).size
+          issues:
+        %span.milestone-stat
+          %strong= milestone.issues_visible_to_user(current_user).opened.size
+          open and
+          %strong= milestone.issues_visible_to_user(current_user).closed.size
+          closed
+        %span.milestone-stat.with-drilldown
+          %strong= milestone.merge_requests.size
+          merge requests:
+        %span.milestone-stat
+          %strong= milestone.merge_requests.opened.size
+          open and
+          %strong= milestone.merge_requests.merged.size
+          merged
+        %span.milestone-stat
+          %strong== #{milestone.percent_complete(current_user)}%
+          complete
+        %span.milestone-stat
+          %span.remaining-days= milestone_remaining_days(milestone)
 
-  = milestone_progress_bar(milestone)
+      .milestone-progress-buttons
+        %span.tab-issues-buttons
+          - if project && can?(current_user, :create_issue, project)
+            = link_to new_namespace_project_issue_path(project.namespace, project, issue: { milestone_id: milestone.id }), class: "btn", title: "New Issue" do
+              New Issue
+          = link_to 'Browse Issues', milestones_browse_issuables_path(milestone, type: :issues), class: "btn"
+        %span.tab-merge-requests-buttons.hidden
+          = link_to 'Browse Merge Requests', milestones_browse_issuables_path(milestone, type: :merge_requests), class: "btn"
+
+    = milestone_progress_bar(milestone)