Commit 843ae9b2 authored by Jacob Schatz's avatar Jacob Schatz

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

Make milestone page responsive

Credit to @yury-n for this one.  🌟   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
parents be032e41 bbf7033b
...@@ -32,6 +32,7 @@ entry. ...@@ -32,6 +32,7 @@ entry.
- Fix sidekiq stats in admin area (blackst0ne) - Fix sidekiq stats in admin area (blackst0ne)
- Added label description as tooltip to issue board list title - Added label description as tooltip to issue board list title
- Created cycle analytics bundle JavaScript file - Created cycle analytics bundle JavaScript file
- Make the milestone page more responsive (yury-n)
- Hides container registry when repository is disabled - Hides container registry when repository is disabled
- API: Fix booleans not recognized as such when using the `to_boolean` helper - API: Fix booleans not recognized as such when using the `to_boolean` helper
- Removed delete branch tooltip !6954 - Removed delete branch tooltip !6954
......
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
} }
.progress { .progress {
width: 100%;
height: 6px; height: 6px;
} }
} }
...@@ -30,7 +31,6 @@ ...@@ -30,7 +31,6 @@
margin-right: 7px; margin-right: 7px;
} }
// Issue title
span a { span a {
color: $gl-text-color; color: $gl-text-color;
word-wrap: break-word; word-wrap: break-word;
...@@ -39,15 +39,66 @@ ...@@ -39,15 +39,66 @@
} }
.milestone-summary { .milestone-summary {
margin-bottom: 25px;
.milestone-stat { .milestone-stat {
white-space: nowrap;
margin-right: 10px; margin-right: 10px;
&.with-drilldown {
margin-right: 2px;
}
} }
.remaining-days { .remaining-days {
color: $orange-light; 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, .issues-sortable-list,
...@@ -82,3 +133,50 @@ ...@@ -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;
}
}
}
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
= render "projects/issues/head" = render "projects/issues/head"
%div{ class: container_class } %div{ class: container_class }
.detail-page-header .detail-page-header.milestone-page-header
.status-box{ class: status_box_class(@milestone) } .status-box{ class: status_box_class(@milestone) }
- if @milestone.closed? - if @milestone.closed?
Closed Closed
...@@ -12,13 +12,14 @@ ...@@ -12,13 +12,14 @@
Past due Past due
- else - else
Open Open
%span.identifier .header-text-content
Milestone ##{@milestone.iid} %span.identifier
- if @milestone.expires_at Milestone ##{@milestone.iid}
%span.creator - if @milestone.expires_at
· %span.creator
= @milestone.expires_at ·
.pull-right = @milestone.expires_at
.milestone-buttons
- if can?(current_user, :admin_milestone, @project) - if can?(current_user, :admin_milestone, @project)
- if @milestone.active? - 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" = 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"
......
...@@ -3,32 +3,38 @@ ...@@ -3,32 +3,38 @@
.context.prepend-top-default .context.prepend-top-default
.milestone-summary .milestone-summary
%h4 Progress %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 .milestone-stats-and-buttons
%span.remaining-days= milestone_remaining_days(milestone) .milestone-stats
%span.pull-right.tab-issues-buttons %span.milestone-stat.with-drilldown
- if project && can?(current_user, :create_issue, project) %strong= milestone.issues_visible_to_user(current_user).size
= link_to new_namespace_project_issue_path(project.namespace, project, issue: { milestone_id: milestone.id }), class: "btn btn-grouped", title: "New Issue" do issues:
New Issue %span.milestone-stat
= link_to 'Browse Issues', milestones_browse_issuables_path(milestone, type: :issues), class: "btn btn-grouped" %strong= milestone.issues_visible_to_user(current_user).opened.size
%span.pull-right.tab-merge-requests-buttons.hidden open and
= link_to 'Browse Merge Requests', milestones_browse_issuables_path(milestone, type: :merge_requests), class: "btn btn-grouped" %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)
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment