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
CHANGELOG
  Diff comments   View file @478d6bd
... ... @@ -8,6 +8,7 @@ v 6.9.0
8 8 - Fix syntax highlighting for code comments blocks
9 9 - Improve comments loading logic
10 10 - Stop refreshing comments when the tab is hidden
  11 + - Improve issue and merge request mobile UI (Drew Blessing)
11 12  
12 13 v 6.8.0
13 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 70 }
71 71  
72 72 .state {
73   - height: 34px;
74 73 border-bottom: 1px solid #DDD;
75 74 line-height: 32px;
76 75 }
... ... @@ -89,6 +88,18 @@
89 88 border: none;
90 89 border-top: 1px solid #eee;
91 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 105 .description {
... ... @@ -106,7 +117,11 @@
106 117 padding: 1px 25px;
107 118 text-align: center;
108 119 text-shadow: none;
109   - margin-right: 20px;
110 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 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 40 .votes-holder {
41 41 float: right;
42 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 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 1 %h3.page-title
2 2 Issue ##{@issue.iid}
3 3  
4   - %span.pull-right
  4 + %span.pull-right.issue-btn-group
5 5 - if can?(current_user, :write_issue, @project)
6 6 = link_to new_project_issue_path(@project), class: "btn btn-grouped", title: "New Issue", id: "new_issue_link" do
7 7 %i.icon-plus
... ... @@ -16,28 +16,29 @@
16 16 %i.icon-edit
17 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 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 36 - if @issue.closed?
36 37 Closed
37 38 - else
38 39 Open
39 40  
40   - %span.creator
  41 + %span.creator.col-sm-9.col-xs-12
41 42 Created by #{link_to_member(@project, @issue.author)} #{time_ago_with_tooltip(@issue.created_at)}
42 43  
43 44 %h4.title
... ...
app/views/projects/merge_requests/show/_context.html.haml
  Diff comments   View file @478d6bd
1 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 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 4 - if @merge_request.merged?
5 5 Merged
6 6 - elsif @merge_request.closed?
... ... @@ -8,7 +8,7 @@
8 8 - else
9 9 Open
10 10  
11   - %span.creator
  11 + %span.creator.col-sm-9.col-xs-12
12 12 Created by #{link_to_member(@project, @merge_request.author)} #{time_ago_with_tooltip(@merge_request.created_at)}
13 13  
14 14 %h4.title
... ...
app/views/projects/merge_requests/show/_mr_title.html.haml
  Diff comments   View file @478d6bd
1 1 %h3.page-title
2 2 = "Merge Request ##{@merge_request.iid}"
3 3  
4   - %span.pull-right
  4 + %span.pull-right.issue-btn-group
5 5 - if can?(current_user, :modify_merge_request, @merge_request)
6 6 - if @merge_request.open?
7 7 .btn-group.pull-left
... ...