Fix bugs with open and close buttons

4 files changed, 27 insertions, 22 deletions

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index 4823bb6b7bd..b2befc4273d 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -220,7 +220,7 @@ $ ->
     .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')
 
@@ -230,36 +230,22 @@ $ ->
       e.preventDefault()
       $this = $(this)
       $thisIcon = $this.find 'i'
+      $allGutterToggleIcons = $('.gutter-toggle i')
       if $thisIcon.hasClass('fa-angle-double-right')
-        # It's open -> close it
-        if bootstrapBreakpoint is 'xs'
-          # it's the gutter open button outside the aside
-          if not $this.closest('aside').length
-            $('aside').addClass('hidden-xs')
-
-        console.log(bootstrapBreakpoint);
-        $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
-        # It's closed -> open it
-        if bootstrapBreakpoint is 'xs'
-          # it's the gutter open button outside the aside
-          if not $this.closest('aside').length
-            $('aside').removeClass('hidden-xs')
-
-        $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')
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index b61d1f180b3..757cb9d2b8c 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;
@@ -174,6 +173,12 @@
 
     .gutter-toggle {
       border-left: 1px solid $border-gray-light;
+      @media (max-width: $screen-sm-max) {
+        display: none;
+      }
+      @media (min-width: $screen-sm-min) {
+        display: block
+      }
     }
   }
 
@@ -184,6 +189,14 @@
   }
 
   &.right-sidebar-collapsed {
+
+    @media (max-width: $screen-sm-max) {
+      display: none;
+    }
+    @media (min-width: $screen-sm-min) {
+      display: block
+    }
+
     width: $sidebar_collapsed_width;
     padding-top: 0;
 
@@ -247,6 +260,10 @@
   }
 }
 
+.btn-default.gutter-toggle {
+  margin-top: 4px;
+}
+
 .detail-page-description {
   small {
     color: $gray-darkest;
diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb
index 1d1098c5df4..91a3aa371ef 100644
--- a/app/helpers/issuables_helper.rb
+++ b/app/helpers/issuables_helper.rb
@@ -5,7 +5,7 @@ module IssuablesHelper
   end
 
   def sidebar_gutter_collapsed_class
-    "hidden-xs right-sidebar-#{sidebar_gutter_collapsed? ? 'collapsed' : 'expanded'}"
+    "right-sidebar-#{sidebar_gutter_collapsed? ? 'collapsed' : 'expanded'}"
   end
 
   def issuables_count(issuable)
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 f0c49dc5bde..c0e1839757b 100644
--- a/app/views/projects/merge_requests/show/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_title.html.haml
@@ -4,6 +4,8 @@
       = @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}