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    ## Screenshots (if relevant)   ## 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
This commit is contained in:
Jacob Schatz
commit
843ae9b26e
4 changed files with 144 additions and 38 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
.header-text-content
|
||||
%span.identifier
|
||||
Milestone ##{@milestone.iid}
|
||||
- if @milestone.expires_at
|
||||
%span.creator
|
||||
·
|
||||
= @milestone.expires_at
|
||||
.pull-right
|
||||
.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"
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@
|
|||
.context.prepend-top-default
|
||||
.milestone-summary
|
||||
%h4 Progress
|
||||
|
||||
.milestone-stats-and-buttons
|
||||
.milestone-stats
|
||||
%span.milestone-stat.with-drilldown
|
||||
%strong= milestone.issues_visible_to_user(current_user).size
|
||||
issues:
|
||||
%span.milestone-stat
|
||||
|
|
@ -10,6 +14,7 @@
|
|||
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
|
||||
|
|
@ -20,15 +25,16 @@
|
|||
%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
|
||||
|
||||
.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 btn-grouped", title: "New Issue" do
|
||||
= 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 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"
|
||||
= 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)
|
||||
|
|
|
|||
Loading…
Reference in a new issue