Commit 478d6bd4 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

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)
parents fd7a221c ad0f5fdc
...@@ -8,6 +8,7 @@ v 6.9.0 ...@@ -8,6 +8,7 @@ v 6.9.0
- Fix syntax highlighting for code comments blocks - Fix syntax highlighting for code comments blocks
- Improve comments loading logic - Improve comments loading logic
- Stop refreshing comments when the tab is hidden - Stop refreshing comments when the tab is hidden
- Improve issue and merge request mobile UI (Drew Blessing)
v 6.8.0 v 6.8.0
- Ability to at mention users that are participating in issue and merge req. discussion - Ability to at mention users that are participating in issue and merge req. discussion
......
...@@ -70,7 +70,6 @@ ...@@ -70,7 +70,6 @@
} }
.state { .state {
height: 34px;
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
line-height: 32px; line-height: 32px;
} }
...@@ -89,6 +88,18 @@ ...@@ -89,6 +88,18 @@
border: none; border: none;
border-top: 1px solid #eee; border-top: 1px solid #eee;
padding: 15px 25px; padding: 15px 25px;
// Reset text align for children
.text-right > * { text-align: left; }
@media (max-width: $screen-xs-max) {
// Don't right align on mobile
.text-right { text-align: left; }
.row .col-md-6 {
padding-top: 5px;
}
}
} }
.description { .description {
...@@ -106,7 +117,11 @@ ...@@ -106,7 +117,11 @@
padding: 1px 25px; padding: 1px 25px;
text-align: center; text-align: center;
text-shadow: none; text-shadow: none;
margin-right: 20px;
display: inline-block; display: inline-block;
line-height: 34px;
}
.creator {
padding: 2px 15px;
} }
} }
...@@ -143,3 +143,36 @@ form.edit-issue { ...@@ -143,3 +143,36 @@ form.edit-issue {
border-color: #E5E5E5; border-color: #E5E5E5;
} }
} }
@media (max-width: $screen-xs-max) {
.issue-btn-group {
width: 100%;
margin-top: 5px;
.btn-group {
width: 100%;
ul {
width: 100%;
text-align: center;
}
}
.btn {
width: 100%;
margin-top: -1px;
&:first-child:not(:last-child) {
border-radius: 4px 4px 0 0;
}
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
&:last-child:not(:first-child) {
border-radius: 0 0 4px 4px;
}
}
}
}
...@@ -40,4 +40,10 @@ ...@@ -40,4 +40,10 @@
.votes-holder { .votes-holder {
float: right; float: right;
width: 250px; width: 250px;
@media (max-width: $screen-xs-max) {
width: 100%;
margin-top: 5px;
margin-bottom: 10px;
}
} }
= form_for [@project, @issue], remote: true, html: {class: 'edit-issue inline-update'} do |f| = form_for [@project, @issue], remote: true, html: {class: 'edit-issue inline-update'} do |f|
.row
.col-md-6
%strong.append-right-10 %strong.append-right-10
Assignee: Assignee:
...@@ -9,11 +11,11 @@ ...@@ -9,11 +11,11 @@
- else - else
None None
.pull-right .col-md-6.text-right
%strong.append-right-10 %strong.append-right-10
Milestone: Milestone:
- if can?(current_user, :modify_issue, @issue) - if can?(current_user, :modify_issue, @issue)
= f.select(:milestone_id, milestone_options(@issue), { include_blank: "Select milestone (none):" }, {class: 'select2 select2-compact'}) = f.select(:milestone_id, milestone_options(@issue), { include_blank: "Select milestone" }, {class: 'select2 select2-compact'})
= hidden_field_tag :issue_context = hidden_field_tag :issue_context
= f.submit class: 'btn' = f.submit class: 'btn'
- elsif issue.milestone - elsif issue.milestone
......
%h3.page-title %h3.page-title
Issue ##{@issue.iid} Issue ##{@issue.iid}
%span.pull-right %span.pull-right.issue-btn-group
- if can?(current_user, :write_issue, @project) - if can?(current_user, :write_issue, @project)
= link_to new_project_issue_path(@project), class: "btn btn-grouped", title: "New Issue", id: "new_issue_link" do = link_to new_project_issue_path(@project), class: "btn btn-grouped", title: "New Issue", id: "new_issue_link" do
%i.icon-plus %i.icon-plus
...@@ -16,10 +16,11 @@ ...@@ -16,10 +16,11 @@
%i.icon-edit %i.icon-edit
Edit Edit
.votes-holder .clearfix
.votes-holder
#votes= render 'votes/votes_block', votable: @issue #votes= render 'votes/votes_block', votable: @issue
.back-link .back-link
= link_to project_issues_path(@project) do = link_to project_issues_path(@project) do
← To issues list ← To issues list
%span.milestone-nav-link %span.milestone-nav-link
...@@ -30,14 +31,14 @@ ...@@ -30,14 +31,14 @@
= @issue.milestone.title = @issue.milestone.title
.issue-box{ class: issue_box_class(@issue) } .issue-box{ class: issue_box_class(@issue) }
.state .state.clearfix
%span.state-label .state-label.col-sm-2.col-xs-12
- if @issue.closed? - if @issue.closed?
Closed Closed
- else - else
Open Open
%span.creator %span.creator.col-sm-9.col-xs-12
Created by #{link_to_member(@project, @issue.author)} #{time_ago_with_tooltip(@issue.created_at)} Created by #{link_to_member(@project, @issue.author)} #{time_ago_with_tooltip(@issue.created_at)}
%h4.title %h4.title
......
= form_for [@project, @merge_request], remote: true, html: {class: 'edit-merge_request inline-update'} do |f| = form_for [@project, @merge_request], remote: true, html: {class: 'edit-merge_request inline-update'} do |f|
.row
.col-md-6
%strong.append-right-10 %strong.append-right-10
Assignee: Assignee:
...@@ -9,11 +11,11 @@ ...@@ -9,11 +11,11 @@
- else - else
None None
.pull-right .col-md-6.text-right
%strong.append-right-10 %strong.append-right-10
Milestone: Milestone:
- if can?(current_user, :modify_merge_request, @merge_request) - if can?(current_user, :modify_merge_request, @merge_request)
= f.select(:milestone_id, milestone_options(@merge_request), { include_blank: "Select milestone (none):" }, {class: 'select2 select2-compact'}) = f.select(:milestone_id, milestone_options(@merge_request), { include_blank: "Select milestone" }, {class: 'select2 select2-compact'})
= hidden_field_tag :merge_request_context = hidden_field_tag :merge_request_context
= f.submit class: 'btn' = f.submit class: 'btn'
- elsif merge_request.milestone - elsif merge_request.milestone
......
.issue-box{ class: issue_box_class(@merge_request) } .issue-box{ class: issue_box_class(@merge_request) }
.state .state.clearfix
%span.state-label %span.state-label.col-sm-2.col-xs-12
- if @merge_request.merged? - if @merge_request.merged?
Merged Merged
- elsif @merge_request.closed? - elsif @merge_request.closed?
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
- else - else
Open Open
%span.creator %span.creator.col-sm-9.col-xs-12
Created by #{link_to_member(@project, @merge_request.author)} #{time_ago_with_tooltip(@merge_request.created_at)} Created by #{link_to_member(@project, @merge_request.author)} #{time_ago_with_tooltip(@merge_request.created_at)}
%h4.title %h4.title
......
%h3.page-title %h3.page-title
= "Merge Request ##{@merge_request.iid}" = "Merge Request ##{@merge_request.iid}"
%span.pull-right %span.pull-right.issue-btn-group
- if can?(current_user, :modify_merge_request, @merge_request) - if can?(current_user, :modify_merge_request, @merge_request)
- if @merge_request.open? - if @merge_request.open?
.btn-group.pull-left .btn-group.pull-left
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment