From f6a69b4130ea60c072a79796685d8784848d7c08 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Mon, 21 Nov 2016 23:30:31 +0000 Subject: 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 --- CHANGELOG.md | 1 + app/assets/stylesheets/pages/milestone.scss | 104 ++++++++++++++++++++++++- app/views/projects/milestones/show.html.haml | 17 ++-- app/views/shared/milestones/_summary.html.haml | 60 +++++++------- 4 files changed, 144 insertions(+), 38 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c35175b4bbc..fcc3f5dac76 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) -- cgit v1.2.1