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

@@ -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

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

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

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

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