kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Make the milestone page more responsive

Browse source
This commit is contained in:
yury-n 2016-07-14 17:36:05 +03:00 committed by Luke "Jared" Bennett
parent 5368b9f249
commit 8478589665
No known key found for this signature in database
GPG key ID: 402ED51FB5D306C2
3 changed files with 143 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
app/assets/stylesheets/pages/milestone.scss
View file

@ -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;
}
}
}

17
app/views/projects/milestones/show.html.haml
View file

@ -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"

60
app/views/shared/milestones/_summary.html.haml
View file

@ -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)