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)

9 files changed, 119 insertions, 59 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 1e9aeefd19a..d3561d2efc9 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -8,6 +8,7 @@ v 6.9.0
   - Fix syntax highlighting for code comments blocks
   - Improve comments loading logic
   - Stop refreshing comments when the tab is hidden
+  - Improve issue and merge request mobile UI (Drew Blessing)
 
 v 6.8.0
   - Ability to at mention users that are participating in issue and merge req. discussion
diff --git a/app/assets/stylesheets/generic/issue_box.scss b/app/assets/stylesheets/generic/issue_box.scss
index 3db4d908d9c..ccdcc657946 100644
--- a/app/assets/stylesheets/generic/issue_box.scss
+++ b/app/assets/stylesheets/generic/issue_box.scss
@@ -70,7 +70,6 @@
   }
 
   .state {
-    height: 34px;
     border-bottom: 1px solid #DDD;
     line-height: 32px;
   }
@@ -89,6 +88,18 @@
     border: none;
     border-top: 1px solid #eee;
     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 {
@@ -106,7 +117,11 @@
     padding: 1px 25px;
     text-align: center;
     text-shadow: none;
-    margin-right: 20px;
     display: inline-block;
+    line-height: 34px;
+  }
+
+  .creator {
+    padding: 2px 15px;
   }
 }
diff --git a/app/assets/stylesheets/sections/issues.scss b/app/assets/stylesheets/sections/issues.scss
index d4f8c8108ab..3c48361b2ec 100644
--- a/app/assets/stylesheets/sections/issues.scss
+++ b/app/assets/stylesheets/sections/issues.scss
@@ -143,3 +143,36 @@ form.edit-issue {
     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;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/sections/votes.scss b/app/assets/stylesheets/sections/votes.scss
index 13f811e01a1..d683e33e1f0 100644
--- a/app/assets/stylesheets/sections/votes.scss
+++ b/app/assets/stylesheets/sections/votes.scss
@@ -40,4 +40,10 @@
 .votes-holder {
   float: right;
   width: 250px;
+
+  @media (max-width: $screen-xs-max) {
+    width: 100%;
+    margin-top: 5px;
+    margin-bottom: 10px;
+  }
 }
diff --git a/app/views/projects/issues/_issue_context.html.haml b/app/views/projects/issues/_issue_context.html.haml
index aae101cf40f..425dcb45ddf 100644
--- a/app/views/projects/issues/_issue_context.html.haml
+++ b/app/views/projects/issues/_issue_context.html.haml
@@ -1,22 +1,24 @@
 = form_for [@project, @issue], remote: true, html: {class: 'edit-issue inline-update'} do |f|
-  %strong.append-right-10
-    Assignee:
+  .row
+    .col-md-6
+      %strong.append-right-10
+        Assignee:
 
-  - if can?(current_user, :modify_issue, @issue)
-    = project_users_select_tag('issue[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control', selected: @issue.assignee_id)
-  - elsif issue.assignee
-    = link_to_member(@project, @issue.assignee)
-  - else
-    None
+      - if can?(current_user, :modify_issue, @issue)
+        = project_users_select_tag('issue[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control', selected: @issue.assignee_id)
+      - elsif issue.assignee
+        = link_to_member(@project, @issue.assignee)
+      - else
+        None
 
-  .pull-right
-    %strong.append-right-10
-      Milestone:
-    - if can?(current_user, :modify_issue, @issue)
-      = f.select(:milestone_id, milestone_options(@issue), { include_blank: "Select milestone (none):" }, {class: 'select2 select2-compact'})
-      = hidden_field_tag :issue_context
-      = f.submit class: 'btn'
-    - elsif issue.milestone
-      = link_to issue.milestone.title, project_milestone_path
-    - else
-      None
+    .col-md-6.text-right
+      %strong.append-right-10
+        Milestone:
+      - if can?(current_user, :modify_issue, @issue)
+        = f.select(:milestone_id, milestone_options(@issue), { include_blank: "Select milestone" }, {class: 'select2 select2-compact'})
+        = hidden_field_tag :issue_context
+        = f.submit class: 'btn'
+      - elsif issue.milestone
+        = link_to issue.milestone.title, project_milestone_path
+      - else
+        None
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 124eb53571d..b6d3a8edf4d 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -1,7 +1,7 @@
 %h3.page-title
   Issue ##{@issue.iid}
 
-  %span.pull-right
+  %span.pull-right.issue-btn-group
     - 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
         %i.icon-plus
@@ -16,28 +16,29 @@
         %i.icon-edit
         Edit
 
-.votes-holder
-  #votes= render 'votes/votes_block', votable: @issue
+.clearfix
+  .votes-holder
+    #votes= render 'votes/votes_block', votable: @issue
 
-.back-link
-  = link_to project_issues_path(@project) do
-    ← To issues list
-  %span.milestone-nav-link
-    - if @issue.milestone
-      |
-      %span.light Milestone
-      = link_to project_milestone_path(@project, @issue.milestone) do
-        = @issue.milestone.title
+  .back-link
+    = link_to project_issues_path(@project) do
+      ← To issues list
+    %span.milestone-nav-link
+      - if @issue.milestone
+        |
+        %span.light Milestone
+        = link_to project_milestone_path(@project, @issue.milestone) do
+          = @issue.milestone.title
 
 .issue-box{ class: issue_box_class(@issue) }
-  .state
-    %span.state-label
+  .state.clearfix
+    .state-label.col-sm-2.col-xs-12
       - if @issue.closed?
         Closed
       - else
         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)}
 
   %h4.title
diff --git a/app/views/projects/merge_requests/show/_context.html.haml b/app/views/projects/merge_requests/show/_context.html.haml
index 2bd850426a9..5c6734fd24b 100644
--- a/app/views/projects/merge_requests/show/_context.html.haml
+++ b/app/views/projects/merge_requests/show/_context.html.haml
@@ -1,22 +1,24 @@
 = form_for [@project, @merge_request], remote: true, html: {class: 'edit-merge_request inline-update'} do |f|
-  %strong.append-right-10
-    Assignee:
+  .row
+    .col-md-6
+      %strong.append-right-10
+        Assignee:
 
-  - if can?(current_user, :modify_merge_request, @merge_request)
-    = project_users_select_tag('merge_request[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control', selected: @merge_request.assignee_id)
-  - elsif merge_request.assignee
-    = link_to_member(@project, @merge_request.assignee)
-  - else
-    None
+      - if can?(current_user, :modify_merge_request, @merge_request)
+        = project_users_select_tag('merge_request[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control', selected: @merge_request.assignee_id)
+      - elsif merge_request.assignee
+        = link_to_member(@project, @merge_request.assignee)
+      - else
+        None
 
-  .pull-right
-    %strong.append-right-10
-      Milestone:
-    - 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'})
-      = hidden_field_tag :merge_request_context
-      = f.submit class: 'btn'
-    - elsif merge_request.milestone
-      = link_to merge_request.milestone.title, project_milestone_path
-    - else
-      None
+    .col-md-6.text-right
+      %strong.append-right-10
+        Milestone:
+      - if can?(current_user, :modify_merge_request, @merge_request)
+        = f.select(:milestone_id, milestone_options(@merge_request), { include_blank: "Select milestone" }, {class: 'select2 select2-compact'})
+        = hidden_field_tag :merge_request_context
+        = f.submit class: 'btn'
+      - elsif merge_request.milestone
+        = link_to merge_request.milestone.title, project_milestone_path
+      - else
+        None
diff --git a/app/views/projects/merge_requests/show/_mr_box.html.haml b/app/views/projects/merge_requests/show/_mr_box.html.haml
index 8855982a2e7..435e916c6dc 100644
--- a/app/views/projects/merge_requests/show/_mr_box.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_box.html.haml
@@ -1,6 +1,6 @@
 .issue-box{ class: issue_box_class(@merge_request) }
-  .state
-    %span.state-label
+  .state.clearfix
+    %span.state-label.col-sm-2.col-xs-12
       - if @merge_request.merged?
         Merged
       - elsif @merge_request.closed?
@@ -8,7 +8,7 @@
       - else
         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)}
 
   %h4.title
diff --git a/app/views/projects/merge_requests/show/_mr_title.html.haml b/app/views/projects/merge_requests/show/_mr_title.html.haml
index 7676fc137c7..8f78e93df4f 100644
--- a/app/views/projects/merge_requests/show/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_title.html.haml
@@ -1,7 +1,7 @@
 %h3.page-title
   = "Merge Request ##{@merge_request.iid}"
 
-  %span.pull-right
+  %span.pull-right.issue-btn-group
     - if can?(current_user, :modify_merge_request, @merge_request)
       - if @merge_request.open?
         .btn-group.pull-left