Change icons for open close on issue/MR

Button full width on phone on MR/issue.

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

app/assets/stylesheets/pages/detail_page.scss

@@ -18,7 +18,7 @@
   }
 
   .issue-meta {
-    margin-left: 65px
+    display: inline-block;
   }
 }
 

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

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

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
-        ·
-        by #{link_to_member(@project, @issue.author, size: 24)}
-        = '@' + @issue.author.username
-        ·
-        = time_ago_with_tooltip(@issue.created_at, placement: 'bottom', html_class: 'issue_created_ago')
 
   .issue-details.issuable-details
     .detail-page-description.content-block

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

 .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