Download as
Browse Code »

Commit 478d6bd479bd1d25b8b7716b4badcbedacc8bcbf

Authored by Dmitriy Zaporozhets
2 parents fd7a221c ad0f5fdc
Exists in spb-stable and in 2 other branches 7-0-stable, 7-0-stable-spb

Merge branch 'mobile_issues' into 'master' 

Improve issue and MR mobile UI

Improve the mobile UI for issues and merge requests. To make use of Bootstrap's column grid this also slightly alters the current desktop UI. Namely, the state box is slightly wider and is a 2-column width rather than being a fixed width. This makes it so we can easily break the row into 2 lines on mobile.

### Current UI
[Mobile Current](https://www.dropbox.com/s/z3wai49rmo1hwoo/Screen%20Shot%202014-05-02%20at%205.32.45%20PM.png)

[Desktop Current](https://www.dropbox.com/s/pwbg9hm3dqft19p/Screen%20Shot%202014-05-02%20at%205.36.10%20PM.png)

### Proposed UI
[Mobile Proposed](https://www.dropbox.com/s/csb4xny28jlll0l/Screen%20Shot%202014-05-02%20at%205.28.35%20PM.png)

[Desktop Proposed](https://www.dropbox.com/s/pb64wzbh75jb9s4/Screen%20Shot%202014-05-02%20at%205.30.23%20PM.png)
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 @478d6bd
@@ -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 @478d6bd
@@ -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 @478d6bd
@@ -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 @478d6bd
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 @478d6bd
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 @478d6bd
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 @478d6bd
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 @478d6bd
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