Merge branch 'issue-sidebar-mobile' into 'master'

Issue sidebar mobile

Fixes #13592 
Fixes #14037 

See merge request !3050

12 files changed, 143 insertions, 49 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 8692f61fe36..a355b622609 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/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index c17d2186e29..321da10a009 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -220,41 +220,41 @@ $ ->
     .off 'breakpoint:change'
     .on 'breakpoint:change', (e, breakpoint) ->
       if breakpoint is 'sm' or breakpoint is 'xs'
-        $gutterIcon = $('.gutter-toggle').find('i')
+        $gutterIcon = $('aside .gutter-toggle').find('i')
         if $gutterIcon.hasClass('fa-angle-double-right')
           $gutterIcon.closest('a').trigger('click')
 
   $(document)
     .off 'click', 'aside .gutter-toggle'
-    .on 'click', 'aside .gutter-toggle', (e) ->
+    .on 'click', 'aside .gutter-toggle', (e, triggered) ->
       e.preventDefault()
       $this = $(this)
       $thisIcon = $this.find 'i'
+      $allGutterToggleIcons = $('.gutter-toggle i')
       if $thisIcon.hasClass('fa-angle-double-right')
-        $thisIcon
+        $allGutterToggleIcons
           .removeClass('fa-angle-double-right')
           .addClass('fa-angle-double-left')
-        $this
-          .closest('aside')
+        $('aside.right-sidebar')
           .removeClass('right-sidebar-expanded')
           .addClass('right-sidebar-collapsed')
         $('.page-with-sidebar')
           .removeClass('right-sidebar-expanded')
           .addClass('right-sidebar-collapsed')
       else
-        $thisIcon
+        $allGutterToggleIcons
           .removeClass('fa-angle-double-left')
           .addClass('fa-angle-double-right')
-        $this
-          .closest('aside')
+        $('aside.right-sidebar')
           .removeClass('right-sidebar-collapsed')
           .addClass('right-sidebar-expanded')
         $('.page-with-sidebar')
           .removeClass('right-sidebar-collapsed')
           .addClass('right-sidebar-expanded')
-      $.cookie("collapsed_gutter",
-        $('.right-sidebar')
-          .hasClass('right-sidebar-collapsed'), { path: '/' })
+      if not triggered
+        $.cookie("collapsed_gutter",
+          $('.right-sidebar')
+            .hasClass('right-sidebar-collapsed'), { path: '/' })
 
   bootstrapBreakpoint = undefined;
   checkBootstrapBreakpoints = ->
diff --git a/app/assets/javascripts/merge_request_tabs.js.coffee b/app/assets/javascripts/merge_request_tabs.js.coffee
index 23a218b4c7d..58373ba87a5 100644
--- a/app/assets/javascripts/merge_request_tabs.js.coffee
+++ b/app/assets/javascripts/merge_request_tabs.js.coffee
@@ -195,6 +195,6 @@ class @MergeRequestTabs
     setTimeout( ->
       # Only when sidebar is collapsed
       if $gutterIcon.is('.fa-angle-double-right')
-        $gutterIcon.closest('a').trigger('click')
+        $gutterIcon.closest('a').trigger('click',[true])
     , 0)
 
diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss
index 5d7fd36be16..77a00586b26 100644
--- a/app/assets/stylesheets/framework/issue_box.scss
+++ b/app/assets/stylesheets/framework/issue_box.scss
@@ -5,11 +5,20 @@
  */
 
 .status-box {
+  
+  /* Extra small devices (phones, less than 768px) */
+  /* No media query since this is the default in Bootstrap */
+  padding: 5px 11px;
+  margin-top: 4px;
+  /* Small devices (tablets, 768px and up) */
+  @media (min-width: $screen-sm-min) {
+    padding: 0 $gl-btn-padding;
+    margin-top: 5px;
+  }
+
   @include border-radius(3px);
   display: block;
   float: left;
-  padding: 0 $gl-btn-padding;
-  margin-top: 5px;
   margin-right: 10px;
   color: #FFF;
   font-size: $gl-font-size;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index de947c89c19..6b382e4b1b2 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -27,7 +27,14 @@
   }
 
   &.right-sidebar-expanded {
-    padding-right: $gutter_width;
+    /* Extra small devices (phones, less than 768px) */
+    /* No media query since this is the default in Bootstrap */
+    padding-right: 0;
+    /* Small devices (tablets, 768px and up) */
+    @media (min-width: $screen-sm-min) {
+      padding-right: $gutter_width;
+    }
+    
   }
 }
 
@@ -199,7 +206,12 @@
   padding-left: $sidebar_width;
 
   &.right-sidebar-collapsed {
-    padding-right: $sidebar_collapsed_width;
+    /* Extra small devices (phones, less than 768px) */
+    padding-right: 0;
+    /* Small devices (tablets, 768px and up) */
+    @media (min-width: $screen-sm-min) {
+      padding-right: $sidebar_collapsed_width;
+    }
   }
 
   .sidebar-wrapper {
@@ -225,7 +237,12 @@
   padding-left: $sidebar_collapsed_width;
 
   &.right-sidebar-collapsed {
-    padding-right: $sidebar_collapsed_width;
+    /* Extra small devices (phones, less than 768px) */
+    padding-right: 0;
+    /* Small devices (tablets, 768px and up) */
+    @media (min-width: $screen-sm-min) {
+      padding-right: $sidebar_collapsed_width;
+    }
   }
 
   .sidebar-wrapper {
@@ -292,7 +309,13 @@
 }
 
 .page-sidebar-collapsed {
+  /* Extra small devices (phones, less than 768px) */
   @include collapsed-sidebar;
+  padding-right: 0;
+  /* Small devices (tablets, 768px and up) */
+  @media (min-width: $screen-sm-min) {
+    @include collapsed-sidebar;
+  }
 }
 
 .page-sidebar-expanded {
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index d93b6ee6733..d3eda1a57e6 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -18,7 +18,8 @@
   }
 
   .issue-meta {
-    margin-left: 65px
+    display: inline-block;
+    line-height: 20px;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index b61d1f180b3..1310e6ad7c7 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -151,7 +151,6 @@
   }
 }
 
-
 .right-sidebar {
   position: fixed;
   top: 58px;
@@ -184,6 +183,13 @@
   }
 
   &.right-sidebar-collapsed {
+    /* Extra small devices (phones, less than 768px) */
+    display: none;
+    /* Small devices (tablets, 768px and up) */
+    @media (min-width: $screen-sm-min) {
+      display: block
+    }
+
     width: $sidebar_collapsed_width;
     padding-top: 0;
 
@@ -247,6 +253,10 @@
   }
 }
 
+.btn-default.gutter-toggle {
+  margin-top: 4px;
+}
+
 .detail-page-description {
   small {
     color: $gray-darkest;
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index a2ca00234ed..1b686c58eaf 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;
       }
     }
   }
@@ -134,3 +133,11 @@ form.edit-issue {
   color: $secondary-text;
   margin-left: 52px;
 }
+
+.editor-details {
+  display: block;
+  
+  @media (min-width: $screen-sm-min) {
+    display: inline-block;
+  }
+}
\ No newline at end of file
diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb
index d6fb629b0c2..c8061fcdc59 100644
--- a/app/helpers/projects_helper.rb
+++ b/app/helpers/projects_helper.rb
@@ -38,12 +38,16 @@ module ProjectsHelper
     author_html << image_tag(avatar_icon(author, opts[:size]), width: opts[:size], class: "avatar avatar-inline #{"s#{opts[:size]}" if opts[:size]}", alt:'') if opts[:avatar]
 
     # Build name span tag
-    author_html << content_tag(:span, sanitize(author.name), class: opts[:author_class]) if opts[:name]
+    if opts[:by_username]
+      author_html << content_tag(:span, sanitize("@#{author.username}"), class: opts[:author_class]) if opts[:name]
+    else
+      author_html << content_tag(:span, sanitize(author.name), class: opts[:author_class]) if opts[:name]
+    end
 
     author_html = author_html.html_safe
 
     if opts[:name]
-      link_to(author_html, user_path(author), class: "author_link").html_safe
+      link_to(author_html, user_path(author), class: "author_link #{"#{opts[:mobile_classes]}" if opts[:mobile_classes]}").html_safe
     else
       title = opts[:title].sub(":name", sanitize(author.name))
       link_to(author_html, user_path(author), class: "author_link has_tooltip", data: { 'original-title'.to_sym => title, container: 'body' } ).html_safe
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..617b0437807 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -5,8 +5,39 @@
 = 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')
+
+    %a.btn.btn-default.pull-right.hidden-sm.hidden-md.hidden-lg.gutter-toggle{ href: "#" }
+      = icon('angle-double-left')
+
+    .issue-meta
+      %strong.identifier
+        Issue ##{@issue.iid}
+      %span.creator
+        by
+        .editor-details
+          .editor-details
+            %strong
+              = link_to_member(@project, @issue.author, size: 24, mobile_classes: "hidden-xs")
+            %span.hidden-xs
+              = '@' + @issue.author.username
+            %strong
+              = link_to_member(@project, @issue.author, size: 24, mobile_classes: "hidden-sm hidden-md hidden-lg",
+                by_username: true, avatar: false)
+            = time_ago_with_tooltip(@issue.created_at)
+
+    .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 +50,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..d24c12251f3 100644
--- a/app/views/projects/merge_requests/show/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_title.html.haml
@@ -1,14 +1,25 @@
 .detail-page-header
   .status-box{ class: status_box_class(@merge_request) }
-    = @merge_request.state_human_name
-  %span.identifier
-    Merge Request #{@merge_request.to_reference}
-  %span.creator
-    &middot;
-    by #{link_to_member(@project, @merge_request.author, size: 24)}
-    = '@' + @merge_request.author.username
-    &middot;
-    = time_ago_with_tooltip(@merge_request.created_at)
+    %span.hidden-xs
+      = @merge_request.state_human_name
+    %span.hidden-sm.hidden-md.hidden-lg
+      = icon(@merge_request.state_icon_name)
+  %a.btn.btn-default.pull-right.hidden-sm.hidden-md.hidden-lg.gutter-toggle{ href: "#" }
+    = icon('angle-double-left')
+  .issue-meta
+    %strong.identifier
+      Merge Request ##{@merge_request.iid}
+    %span.creator
+      by
+      .editor-details
+        %strong
+          = link_to_member(@project, @merge_request.author, size: 24, mobile_classes: "hidden-xs")
+        %span.hidden-xs
+          = '@' + @merge_request.author.username
+        %strong
+          = link_to_member(@project, @merge_request.author, size: 24, mobile_classes: "hidden-sm hidden-md hidden-lg",
+            by_username: true, avatar: false)
+        = time_ago_with_tooltip(@merge_request.created_at)
 
   .issue-btn-group.pull-right
     - if can?(current_user, :update_merge_request, @merge_request)