Change icons for open close on issue/MR

Button full width on phone on MR/issue.

6 files changed, 46 insertions, 21 deletions

diff --git a/CHANGELOG b/CHANGELOG
index bcdcc5c8a52..fbd76864dcb 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -20,6 +20,7 @@ v 8.5.3
   - Flush repository caches before renaming projects
   - Sort starred projects on dashboard based on last activity by default
   - Show commit message in JIRA mention comment
+  - Makes issue page and merge request page usable on mobile browsers.
 
 v 8.5.2
   - Fix sidebar overlapping content when screen width was below 1200px
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index d93b6ee6733..787f0c8da0f 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -18,7 +18,7 @@
   }
 
   .issue-meta {
-    margin-left: 65px
+    display: inline-block;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index a2ca00234ed..e4a171ed4d5 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -99,18 +99,17 @@ form.edit-issue {
 
     .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;
+        margin-top: 10px;
       }
 
       &:last-child:not(:first-child) {
-        border-radius: 0 0 4px 4px;
+        margin-top: 10px;
       }
     }
   }
diff --git a/app/models/merge_request.rb b/app/models/merge_request.rb
index 025b522cf66..cf26183c254 100644
--- a/app/models/merge_request.rb
+++ b/app/models/merge_request.rb
@@ -490,6 +490,16 @@ class MergeRequest < ActiveRecord::Base
     end
   end
 
+  def state_icon_name
+    if merged?
+      "check"
+    elsif closed?
+      "times"
+    else
+      "circle-o"
+    end
+  end
+
   def target_sha
     @target_sha ||= target_project.repository.commit(target_branch).sha
   end
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 7d8798981e3..aa70fdafd97 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -5,8 +5,32 @@
 = render "header_title"
 
 .issue
-  .detail-page-header
-    .pull-right
+  .detail-page-header.issuable-header
+    .pull-left
+      .status-box{ class: "status-box-closed #{issue_button_visibility(@issue, false)}"}
+        %span.hidden-xs
+          Closed
+        %span.hidden-sm.hidden-md.hidden-lg
+          =icon('check')
+      .status-box{ class: "status-box-open #{issue_button_visibility(@issue, true)}"}
+        %span.hidden-xs
+          Open
+        %span.hidden-sm.hidden-md.hidden-lg
+          =icon('circle-o')
+
+    .issue-meta
+      %strong.identifier
+        Issue ##{@issue.iid}
+      %span.creator
+        by
+        .editor-details
+          %strong
+            =link_to_member(@project, @issue.author, size: 24, mobile_classes: "hidden-xs")
+            =link_to_member(@project, @issue.author, size: 24,
+              by_username: true, avatar: false)
+          = time_ago_with_tooltip(@issue.created_at, placement: 'bottom', html_class: 'issue_created_ago')
+
+    .pull-right.issue-btn-group
       - if can?(current_user, :create_issue, @project)
         = link_to new_namespace_project_issue_path(@project.namespace, @project), class: 'btn btn-nr btn-grouped new-issue-link btn-success', title: 'New issue', id: 'new_issue_link' do
           = icon('plus')
@@ -19,19 +43,6 @@
           = icon('pencil-square-o')
           Edit
 
-    .pull-left
-      .status-box{ class: "status-box-closed #{issue_button_visibility(@issue, false)}"} Closed
-      .status-box{ class: "status-box-open #{issue_button_visibility(@issue, true)}"} Open
-
-    .issue-meta
-      %span.identifier
-        Issue ##{@issue.iid}
-      %span.creator
-        &middot;
-        by #{link_to_member(@project, @issue.author, size: 24)}
-        = '@' + @issue.author.username
-        &middot;
-        = time_ago_with_tooltip(@issue.created_at, placement: 'bottom', html_class: 'issue_created_ago')
 
   .issue-details.issuable-details
     .detail-page-description.content-block
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 339031f15b2..fc4ade16299 100644
--- a/app/views/projects/merge_requests/show/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_title.html.haml
@@ -1,6 +1,10 @@
 .detail-page-header
   .status-box{ class: status_box_class(@merge_request) }
-    = @merge_request.state_human_name
+    %span.hidden-xs
+      = @merge_request.state_human_name
+    %span.hidden-sm.hidden-md.hidden-lg
+      =icon(@merge_request.state_icon_name)
+
   %span.identifier
     Merge Request #{@merge_request.to_reference}
   %span.creator