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

Issue sidebar mobile

Fixes #13592 
Fixes #14037 

See merge request !3050

7 files changed, 73 insertions, 23 deletions

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