From 8478589665438e509ae827eb7cf573bb140b3347 Mon Sep 17 00:00:00 2001 From: yury-n Date: Thu, 14 Jul 2016 17:36:05 +0300 Subject: [PATCH 1/7] Make the milestone page more responsive --- app/assets/stylesheets/pages/milestone.scss | 102 +++++++++++++++++- app/views/projects/milestones/show.html.haml | 17 +-- .../shared/milestones/_summary.html.haml | 60 ++++++----- 3 files changed, 143 insertions(+), 36 deletions(-) diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 13402acd8e1..47bf3136cd3 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -11,6 +11,7 @@ } .progress { + width: 100%; height: 6px; } } @@ -39,15 +40,69 @@ } .milestone-summary { - margin-bottom: 25px; + + h4 { + margin-bottom: 0; + } .milestone-stat { + white-space: nowrap; margin-right: 10px; + &.with-drilldown { + margin-right: 2px; // the drill down element should sit closer to its parent + } } .remaining-days { color: $orange-light; } + + $width_to_show_stats_and_buttons_on_one_line: $screen-xs-min; + + .milestone-stats-and-buttons { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + + @media (min-width: $width_to_show_stats_and_buttons_on_one_line) { + justify-content: space-between; + flex-wrap: nowrap; + } + } + + .milestone-progress-buttons { + // for small devices buttons go first + order: 1; + // buttons go on its own line below the header and need some margin + margin-top: 10px; + @media (min-width: $width_to_show_stats_and_buttons_on_one_line) { + // when displayed on one line stats go first, buttons second + order: 2; + margin-top: 0; + flex-shrink: 0; + } + + .btn { + float: left; + margin-right: $btn-side-margin; + } + } + + .milestone-stats { + order: 2; + width: 100%; + padding: 7px 0; + flex-shrink: 1; + @media (min-width: $width_to_show_stats_and_buttons_on_one_line) { + // when displayed on one line stats go first, buttons second + order: 1; + } + } + + .progress { + width: 100%; + margin: 15px 0; + } } .issues-sortable-list, @@ -82,3 +137,48 @@ } } } + +.milestone-page-header { + display: flex; + flex-flow: row; + align-content: center; + flex-wrap: wrap; + .status-box { + margin-top: 0; // reset what's inherited from the framework css. elements here are v-aligned by flexbox + } + .milestone-buttons { + // flex flow is row (left to right) + // but buttons should stick to the right side + 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) From 141f0e400b212e589b7fc1d31caf7eee8ccb6a63 Mon Sep 17 00:00:00 2001 From: yury-n Date: Thu, 14 Jul 2016 17:37:16 +0300 Subject: [PATCH 2/7] Add changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9411cc62003..375ca9d3044 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -984,6 +984,7 @@ entry. - Add Bugzilla integration. !4930 (iamtjg) - Fix new snippet style bug (elliotec) - Instrument Rinku usage + - Make the milestone page more responsive - Be explicit to define merge request discussion variables - Use cache for todos counter calling TodoService - Metrics for Rouge::Plugins::Redcarpet and Rouge::Formatters::HTMLGitlab From de88c2fe4c23cb1f15b8a7b8f5900e12e8b23039 Mon Sep 17 00:00:00 2001 From: yury-n Date: Thu, 14 Jul 2016 18:17:07 +0300 Subject: [PATCH 3/7] Do not shrink the status box on a large screen --- app/assets/stylesheets/pages/milestone.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 47bf3136cd3..9d3a09d8d71 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -144,7 +144,8 @@ align-content: center; flex-wrap: wrap; .status-box { - margin-top: 0; // reset what's inherited from the framework css. elements here are v-aligned by flexbox + margin-top: 0; // no need for margin-top as we don't shrink it + line-height: 34px; // match .btn line-height } .milestone-buttons { // flex flow is row (left to right) From 82189b4a935e0d98c2c9bdf858d13e8752058561 Mon Sep 17 00:00:00 2001 From: yury-n Date: Thu, 14 Jul 2016 23:03:37 +0300 Subject: [PATCH 4/7] Respect the shrunk version of the status box that comes from the framework css --- app/assets/stylesheets/pages/milestone.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 9d3a09d8d71..77b80073cc4 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -141,11 +141,10 @@ .milestone-page-header { display: flex; flex-flow: row; - align-content: center; + align-items: center; flex-wrap: wrap; .status-box { - margin-top: 0; // no need for margin-top as we don't shrink it - line-height: 34px; // match .btn line-height + margin-top: 0; // no need for margin-top, vertical alignment is done by flexbox } .milestone-buttons { // flex flow is row (left to right) From 8c4deda010030e4e1f4747fb3e53d24b2a0c296a Mon Sep 17 00:00:00 2001 From: yury-n Date: Fri, 15 Jul 2016 14:11:20 +0300 Subject: [PATCH 5/7] Replace long var name with a comment, hide "Milestone" in "Reopen Milestone" on a small screen --- app/assets/stylesheets/pages/milestone.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 77b80073cc4..c784db0e225 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -57,14 +57,14 @@ color: $orange-light; } - $width_to_show_stats_and_buttons_on_one_line: $screen-xs-min; - .milestone-stats-and-buttons { display: flex; justify-content: flex-start; + // on small screens split into two line flex-wrap: wrap; - @media (min-width: $width_to_show_stats_and_buttons_on_one_line) { + @media (min-width: $screen-xs-min) { + // on bigger screens show on one line justify-content: space-between; flex-wrap: nowrap; } @@ -75,7 +75,7 @@ order: 1; // buttons go on its own line below the header and need some margin margin-top: 10px; - @media (min-width: $width_to_show_stats_and_buttons_on_one_line) { + @media (min-width: $screen-xs-min) { // when displayed on one line stats go first, buttons second order: 2; margin-top: 0; @@ -93,7 +93,7 @@ width: 100%; padding: 7px 0; flex-shrink: 1; - @media (min-width: $width_to_show_stats_and_buttons_on_one_line) { + @media (min-width: $screen-xs-min) { // when displayed on one line stats go first, buttons second order: 1; } From bf127ce268d69355ebe5251d97b64b68627d930c Mon Sep 17 00:00:00 2001 From: yury-n Date: Mon, 18 Jul 2016 15:52:57 +0300 Subject: [PATCH 6/7] Align the progress buttons with the milestone buttons -- do not margin right on the last button --- app/assets/stylesheets/pages/milestone.scss | 24 ++++++++++----------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index c784db0e225..cf4657b54f3 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -31,7 +31,6 @@ margin-right: 7px; } - // Issue title span a { color: $gl-text-color; word-wrap: break-word; @@ -40,7 +39,6 @@ } .milestone-summary { - h4 { margin-bottom: 0; } @@ -48,8 +46,9 @@ .milestone-stat { white-space: nowrap; margin-right: 10px; + &.with-drilldown { - margin-right: 2px; // the drill down element should sit closer to its parent + margin-right: 2px; } } @@ -60,23 +59,19 @@ .milestone-stats-and-buttons { display: flex; justify-content: flex-start; - // on small screens split into two line flex-wrap: wrap; @media (min-width: $screen-xs-min) { - // on bigger screens show on one line justify-content: space-between; flex-wrap: nowrap; } } .milestone-progress-buttons { - // for small devices buttons go first order: 1; - // buttons go on its own line below the header and need some margin margin-top: 10px; + @media (min-width: $screen-xs-min) { - // when displayed on one line stats go first, buttons second order: 2; margin-top: 0; flex-shrink: 0; @@ -85,6 +80,9 @@ .btn { float: left; margin-right: $btn-side-margin; + &:last-child { + margin-right: 0; + } } } @@ -143,21 +141,23 @@ flex-flow: row; align-items: center; flex-wrap: wrap; + .status-box { - margin-top: 0; // no need for margin-top, vertical alignment is done by flexbox + margin-top: 0; } + .milestone-buttons { - // flex flow is row (left to right) - // but buttons should stick to the right side margin-left: auto; } .status-box { order: 1; } + .milestone-buttons { order: 2; } + .header-text-content { order: 3; width: 100%; @@ -168,7 +168,6 @@ } @media (min-width: $screen-xs-min) { - .milestone-buttons .verbose { display: inline; } @@ -177,6 +176,7 @@ order: 2; width: auto; } + .milestone-buttons { order: 3; } From bbf7033bb2df4eb69ce23c189e9ee12c4ded7b38 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 3 Oct 2016 15:19:13 +0100 Subject: [PATCH 7/7] Updated CHANGELOG Corrected lines failed by linter --- CHANGELOG.md | 2 +- app/assets/stylesheets/pages/milestone.scss | 6 ++---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 375ca9d3044..93a8776a585 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,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 @@ -984,7 +985,6 @@ entry. - Add Bugzilla integration. !4930 (iamtjg) - Fix new snippet style bug (elliotec) - Instrument Rinku usage - - Make the milestone page more responsive - Be explicit to define merge request discussion variables - Use cache for todos counter calling TodoService - Metrics for Rouge::Plugins::Redcarpet and Rouge::Formatters::HTMLGitlab diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index cf4657b54f3..8843d1463db 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -39,10 +39,6 @@ } .milestone-summary { - h4 { - margin-bottom: 0; - } - .milestone-stat { white-space: nowrap; margin-right: 10px; @@ -80,6 +76,7 @@ .btn { float: left; margin-right: $btn-side-margin; + &:last-child { margin-right: 0; } @@ -91,6 +88,7 @@ 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;