Improve mobile UI for issues and merge requests

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

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;
   }
 }

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;
+      }
+    }
+  }
+}

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;
+  }
 }

app/views/projects/issues/_issue_context.html.haml

 = form_for [@project, @issue], remote: true, html: {class: 'edit-issue inline-update'} do |f|
+  .row
+    .col-md-6
       %strong.append-right-10
         Assignee:
 
@@ -9,11 +11,11 @@
       - else
         None
 
-  .pull-right
+    .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 (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
         = f.submit class: 'btn'
       - elsif issue.milestone

app/views/projects/issues/show.html.haml

 %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,10 +16,11 @@
         %i.icon-edit
         Edit
 
-.votes-holder
+.clearfix
+  .votes-holder
     #votes= render 'votes/votes_block', votable: @issue
 
-.back-link
+  .back-link
     = link_to project_issues_path(@project) do
       ← To issues list
     %span.milestone-nav-link
@@ -30,14 +31,14 @@
           = @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

app/views/projects/merge_requests/show/_context.html.haml

 = form_for [@project, @merge_request], remote: true, html: {class: 'edit-merge_request inline-update'} do |f|
+  .row
+    .col-md-6
       %strong.append-right-10
         Assignee:
 
@@ -9,11 +11,11 @@
       - else
         None
 
-  .pull-right
+    .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 (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
         = f.submit class: 'btn'
       - elsif merge_request.milestone

app/views/projects/merge_requests/show/_mr_box.html.haml

 .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

app/views/projects/merge_requests/show/_mr_title.html.haml

 %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