Download as
Browse Code »

Commit ad0f5fdc2729ac26268c2638c064abbf14134688

Authored by Drew Blessing
1 parent 172ad962
Exists in spb-stable and in 2 other branches 7-0-stable, 7-0-stable-spb

Improve mobile UI for issues and merge requests

Showing 9 changed files with 119 additions and 59 deletions   Show diff stats
@@ -8,6 +8,7 @@ v 6.9.0 @@ -8,6 +8,7 @@ v 6.9.0
8 - Fix syntax highlighting for code comments blocks 8 - Fix syntax highlighting for code comments blocks
9 - Improve comments loading logic 9 - Improve comments loading logic
10 - Stop refreshing comments when the tab is hidden 10 - Stop refreshing comments when the tab is hidden
  11 + - Improve issue and merge request mobile UI (Drew Blessing)
11 12
12 v 6.8.0 13 v 6.8.0
13 - Ability to at mention users that are participating in issue and merge req. discussion 14 - Ability to at mention users that are participating in issue and merge req. discussion
app/assets/stylesheets/generic/issue_box.scss
  Diff comments   View file @ad0f5fd
@@ -70,7 +70,6 @@ @@ -70,7 +70,6 @@
70 } 70 }
71 71
72 .state { 72 .state {
73 - height: 34px;  
74 border-bottom: 1px solid #DDD; 73 border-bottom: 1px solid #DDD;
75 line-height: 32px; 74 line-height: 32px;
76 } 75 }
@@ -89,6 +88,18 @@ @@ -89,6 +88,18 @@
89 border: none; 88 border: none;
90 border-top: 1px solid #eee; 89 border-top: 1px solid #eee;
91 padding: 15px 25px; 90 padding: 15px 25px;
  91 +
  92 + // Reset text align for children
  93 + .text-right > * { text-align: left; }
  94 +
  95 + @media (max-width: $screen-xs-max) {
  96 + // Don't right align on mobile
  97 + .text-right { text-align: left; }
  98 +
  99 + .row .col-md-6 {
  100 + padding-top: 5px;
  101 + }
  102 + }
92 } 103 }
93 104
94 .description { 105 .description {
@@ -106,7 +117,11 @@ @@ -106,7 +117,11 @@
106 padding: 1px 25px; 117 padding: 1px 25px;
107 text-align: center; 118 text-align: center;
108 text-shadow: none; 119 text-shadow: none;
109 - margin-right: 20px;  
110 display: inline-block; 120 display: inline-block;
  121 + line-height: 34px;
  122 + }
  123 +
  124 + .creator {
  125 + padding: 2px 15px;
111 } 126 }
112 } 127 }
app/assets/stylesheets/sections/issues.scss
  Diff comments   View file @ad0f5fd
@@ -143,3 +143,36 @@ form.edit-issue { @@ -143,3 +143,36 @@ form.edit-issue {
143 border-color: #E5E5E5; 143 border-color: #E5E5E5;
144 } 144 }
145 } 145 }
  146 +
  147 +@media (max-width: $screen-xs-max) {
  148 + .issue-btn-group {
  149 + width: 100%;
  150 + margin-top: 5px;
  151 +
  152 + .btn-group {
  153 + width: 100%;
  154 +
  155 + ul {
  156 + width: 100%;
  157 + text-align: center;
  158 + }
  159 + }
  160 +
  161 + .btn {
  162 + width: 100%;
  163 + margin-top: -1px;
  164 +
  165 + &:first-child:not(:last-child) {
  166 + border-radius: 4px 4px 0 0;
  167 + }
  168 +
  169 + &:not(:first-child):not(:last-child) {
  170 + border-radius: 0;
  171 + }
  172 +
  173 + &:last-child:not(:first-child) {
  174 + border-radius: 0 0 4px 4px;
  175 + }
  176 + }
  177 + }
  178 +}
app/assets/stylesheets/sections/votes.scss
  Diff comments   View file @ad0f5fd
@@ -40,4 +40,10 @@ @@ -40,4 +40,10 @@
40 .votes-holder { 40 .votes-holder {
41 float: right; 41 float: right;
42 width: 250px; 42 width: 250px;
  43 +
  44 + @media (max-width: $screen-xs-max) {
  45 + width: 100%;
  46 + margin-top: 5px;
  47 + margin-bottom: 10px;
  48 + }
43 } 49 }
app/views/projects/issues/_issue_context.html.haml
  Diff comments   View file @ad0f5fd
1 = form_for [@project, @issue], remote: true, html: {class: 'edit-issue inline-update'} do |f| 1 = form_for [@project, @issue], remote: true, html: {class: 'edit-issue inline-update'} do |f|
2 - %strong.append-right-10  
3 - Assignee: 2 + .row
  3 + .col-md-6
  4 + %strong.append-right-10
  5 + Assignee:
4 6
5 - - if can?(current_user, :modify_issue, @issue)  
6 - = project_users_select_tag('issue[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control', selected: @issue.assignee_id)  
7 - - elsif issue.assignee  
8 - = link_to_member(@project, @issue.assignee)  
9 - - else  
10 - None 7 + - if can?(current_user, :modify_issue, @issue)
  8 + = project_users_select_tag('issue[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control', selected: @issue.assignee_id)
  9 + - elsif issue.assignee
  10 + = link_to_member(@project, @issue.assignee)
  11 + - else
  12 + None
11 13
12 - .pull-right  
13 - %strong.append-right-10  
14 - Milestone:  
15 - - if can?(current_user, :modify_issue, @issue)  
16 - = f.select(:milestone_id, milestone_options(@issue), { include_blank: "Select milestone (none):" }, {class: 'select2 select2-compact'})  
17 - = hidden_field_tag :issue_context  
18 - = f.submit class: 'btn'  
19 - - elsif issue.milestone  
20 - = link_to issue.milestone.title, project_milestone_path  
21 - - else  
22 - None 14 + .col-md-6.text-right
  15 + %strong.append-right-10
  16 + Milestone:
  17 + - if can?(current_user, :modify_issue, @issue)
  18 + = f.select(:milestone_id, milestone_options(@issue), { include_blank: "Select milestone" }, {class: 'select2 select2-compact'})
  19 + = hidden_field_tag :issue_context
  20 + = f.submit class: 'btn'
  21 + - elsif issue.milestone
  22 + = link_to issue.milestone.title, project_milestone_path
  23 + - else
  24 + None
app/views/projects/issues/show.html.haml
  Diff comments   View file @ad0f5fd
1 %h3.page-title 1 %h3.page-title
2 Issue ##{@issue.iid} 2 Issue ##{@issue.iid}
3 3
4 - %span.pull-right 4 + %span.pull-right.issue-btn-group
5 - if can?(current_user, :write_issue, @project) 5 - if can?(current_user, :write_issue, @project)
6 = link_to new_project_issue_path(@project), class: "btn btn-grouped", title: "New Issue", id: "new_issue_link" do 6 = link_to new_project_issue_path(@project), class: "btn btn-grouped", title: "New Issue", id: "new_issue_link" do
7 %i.icon-plus 7 %i.icon-plus
@@ -16,28 +16,29 @@ @@ -16,28 +16,29 @@
16 %i.icon-edit 16 %i.icon-edit
17 Edit 17 Edit
18 18
19 -.votes-holder  
20 - #votes= render 'votes/votes_block', votable: @issue 19 +.clearfix
  20 + .votes-holder
  21 + #votes= render 'votes/votes_block', votable: @issue
21 22
22 -.back-link  
23 - = link_to project_issues_path(@project) do  
24 - ← To issues list  
25 - %span.milestone-nav-link  
26 - - if @issue.milestone  
27 - |  
28 - %span.light Milestone  
29 - = link_to project_milestone_path(@project, @issue.milestone) do  
30 - = @issue.milestone.title 23 + .back-link
  24 + = link_to project_issues_path(@project) do
  25 + ← To issues list
  26 + %span.milestone-nav-link
  27 + - if @issue.milestone
  28 + |
  29 + %span.light Milestone
  30 + = link_to project_milestone_path(@project, @issue.milestone) do
  31 + = @issue.milestone.title
31 32
32 .issue-box{ class: issue_box_class(@issue) } 33 .issue-box{ class: issue_box_class(@issue) }
33 - .state  
34 - %span.state-label 34 + .state.clearfix
  35 + .state-label.col-sm-2.col-xs-12
35 - if @issue.closed? 36 - if @issue.closed?
36 Closed 37 Closed
37 - else 38 - else
38 Open 39 Open
39 40
40 - %span.creator 41 + %span.creator.col-sm-9.col-xs-12
41 Created by #{link_to_member(@project, @issue.author)} #{time_ago_with_tooltip(@issue.created_at)} 42 Created by #{link_to_member(@project, @issue.author)} #{time_ago_with_tooltip(@issue.created_at)}
42 43
43 %h4.title 44 %h4.title
app/views/projects/merge_requests/show/_context.html.haml
  Diff comments   View file @ad0f5fd
1 = form_for [@project, @merge_request], remote: true, html: {class: 'edit-merge_request inline-update'} do |f| 1 = form_for [@project, @merge_request], remote: true, html: {class: 'edit-merge_request inline-update'} do |f|
2 - %strong.append-right-10  
3 - Assignee: 2 + .row
  3 + .col-md-6
  4 + %strong.append-right-10
  5 + Assignee:
4 6
5 - - if can?(current_user, :modify_merge_request, @merge_request)  
6 - = project_users_select_tag('merge_request[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control', selected: @merge_request.assignee_id)  
7 - - elsif merge_request.assignee  
8 - = link_to_member(@project, @merge_request.assignee)  
9 - - else  
10 - None 7 + - if can?(current_user, :modify_merge_request, @merge_request)
  8 + = project_users_select_tag('merge_request[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control', selected: @merge_request.assignee_id)
  9 + - elsif merge_request.assignee
  10 + = link_to_member(@project, @merge_request.assignee)
  11 + - else
  12 + None
11 13
12 - .pull-right  
13 - %strong.append-right-10  
14 - Milestone:  
15 - - if can?(current_user, :modify_merge_request, @merge_request)  
16 - = f.select(:milestone_id, milestone_options(@merge_request), { include_blank: "Select milestone (none):" }, {class: 'select2 select2-compact'})  
17 - = hidden_field_tag :merge_request_context  
18 - = f.submit class: 'btn'  
19 - - elsif merge_request.milestone  
20 - = link_to merge_request.milestone.title, project_milestone_path  
21 - - else  
22 - None 14 + .col-md-6.text-right
  15 + %strong.append-right-10
  16 + Milestone:
  17 + - if can?(current_user, :modify_merge_request, @merge_request)
  18 + = f.select(:milestone_id, milestone_options(@merge_request), { include_blank: "Select milestone" }, {class: 'select2 select2-compact'})
  19 + = hidden_field_tag :merge_request_context
  20 + = f.submit class: 'btn'
  21 + - elsif merge_request.milestone
  22 + = link_to merge_request.milestone.title, project_milestone_path
  23 + - else
  24 + None
app/views/projects/merge_requests/show/_mr_box.html.haml
  Diff comments   View file @ad0f5fd
1 .issue-box{ class: issue_box_class(@merge_request) } 1 .issue-box{ class: issue_box_class(@merge_request) }
2 - .state  
3 - %span.state-label 2 + .state.clearfix
  3 + %span.state-label.col-sm-2.col-xs-12
4 - if @merge_request.merged? 4 - if @merge_request.merged?
5 Merged 5 Merged
6 - elsif @merge_request.closed? 6 - elsif @merge_request.closed?
@@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
8 - else 8 - else
9 Open 9 Open
10 10
11 - %span.creator 11 + %span.creator.col-sm-9.col-xs-12
12 Created by #{link_to_member(@project, @merge_request.author)} #{time_ago_with_tooltip(@merge_request.created_at)} 12 Created by #{link_to_member(@project, @merge_request.author)} #{time_ago_with_tooltip(@merge_request.created_at)}
13 13
14 %h4.title 14 %h4.title
app/views/projects/merge_requests/show/_mr_title.html.haml
  Diff comments   View file @ad0f5fd
1 %h3.page-title 1 %h3.page-title
2 = "Merge Request ##{@merge_request.iid}" 2 = "Merge Request ##{@merge_request.iid}"
3 3
4 - %span.pull-right 4 + %span.pull-right.issue-btn-group
5 - if can?(current_user, :modify_merge_request, @merge_request) 5 - if can?(current_user, :modify_merge_request, @merge_request)
6 - if @merge_request.open? 6 - if @merge_request.open?
7 .btn-group.pull-left 7 .btn-group.pull-left