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)