Sidebar collapse and expand work with whole page.

app/assets/javascripts/application.js.coffee

@@ -223,6 +223,9 @@ $ ->
         .closest('aside')
         .removeClass('right-sidebar-expanded')
         .addClass('right-sidebar-collapsed')
+      $('.page-with-sidebar')
+        .removeClass('right-sidebar-expanded')
+        .addClass('right-sidebar-collapsed')
     else
       $thisIcon.removeClass('fa-angle-double-left')
         .addClass('fa-angle-double-right')
@@ -230,7 +233,11 @@ $ ->
         .closest('aside')
         .removeClass('right-sidebar-collapsed')
         .addClass('right-sidebar-expanded')
-
-    console.log('collapse')
+      $('.page-with-sidebar')
+        .removeClass('right-sidebar-collapsed')
+        .addClass('right-sidebar-expanded')
+    $.cookie("collapsed_gutter", 
+      $('.right-sidebar')
+        .hasClass('right-sidebar-collapsed'), { path: '/' })
 
   new Aside()

app/assets/stylesheets/framework/sidebar.scss

@@ -204,6 +204,10 @@
   padding-right: $gutter_width;
 }
 
+@mixin collapsed-gutter {
+  padding-right: $sidebar_collapsed_width;
+}
+
 @mixin collapsed-sidebar {
   padding-left: $sidebar_collapsed_width;
 
@@ -289,7 +293,12 @@
 @media(min-width: $screen-md-max) {
 
   .page-gutter {
-    @include expanded-gutter;
+    &.right-sidebar-collapsed {
+      @include collapsed-gutter;
+    }
+    &.right-sidebar-expanded {
+      @include expanded-gutter;
+    }
   }
 
   .page-sidebar-collapsed {

app/assets/stylesheets/pages/issuable.scss

@@ -72,6 +72,11 @@
     @include clearfix;
     padding:  $gl-padding 0;
     border-bottom: 1px solid #F0F0F0;
+    // This prevents the mess when resizing the sidebar 
+    // of elements repositioning themselves..
+    width: 210px;
+    overflow-x: hidden;
+    // --
 
     &:first-child {
       padding-top: 5px;
@@ -181,14 +186,26 @@
     .assignee .title,
     .assignee .selectbox,
     .assignee .value .author,
-    .milestone,
-    .labels,
-    .participants,
-    .light,
-    .project-reference {
+    .milestone > *,
+    .labels > *,
+    .participants > *,
+    .light > *,
+    .project-reference > * {
       display: none;
     }
 
+    .assignee {
+      margin-left: -7px;
+    }
+
+    .gutter-toggle {
+      margin-left: -207px;
+    }
+
+    .sidebar-collapsed-icon {
+      display: block;
+    }
+
   }
 
   &.right-sidebar-expanded {

app/helpers/application_helper.rb

@@ -307,9 +307,19 @@ module ApplicationHelper
     if project.nil?
       nil
     elsif current_controller?(:issues)
-      project.issues.where("id > ?", id).first
+      project.issues.where("id > ?", id).last
     elsif current_controller?(:merge_requests)
-      project.merge_requests.where("id > ?", id).first
+      project.merge_requests.where("id > ?", id).last
+    end
+  end
+
+  def has_next_issuable?(project, id)
+    if project.nil?
+      nil
+    elsif current_controller?(:issues)
+      project.issues.where("id > ?", id).last
+    elsif current_controller?(:merge_requests)
+      project.merge_requests.where("id > ?", id).last
     end
   end
 
@@ -317,9 +327,19 @@ module ApplicationHelper
     if project.nil?
       nil
     elsif current_controller?(:issues)
-      project.issues.where("id < ?", id).last
+      project.issues.where("id < ?", id).first
+    elsif current_controller?(:merge_requests)
+      project.merge_requests.where("id < ?", id).first
+    end
+  end
+
+  def has_prev_issuable?(project, id)
+    if project.nil?
+      nil
+    elsif current_controller?(:issues)
+      project.issues.where("id < ?", id).first
     elsif current_controller?(:merge_requests)
-      project.merge_requests.where("id < ?", id).last
+      project.merge_requests.where("id < ?", id).first
     end
   end
 

app/helpers/nav_helper.rb

@@ -3,6 +3,18 @@ module NavHelper
     cookies[:collapsed_nav] == 'true'
   end
 
+  def sidebar_gutter_collapsed_class
+    if cookies[:collapsed_gutter] == 'true'
+      "right-sidebar-collapsed"
+    else
+      "right-sidebar-expanded"
+    end
+  end
+
+  def sidebar_gutter_collapsed?
+    cookies[:collapsed_gutter] == 'true'
+  end
+
   def nav_sidebar_class
     if nav_menu_collapsed?
       "sidebar-collapsed"
@@ -20,8 +32,13 @@ module NavHelper
   end
 
   def page_gutter_class
+
     if current_path?('merge_requests#show') || current_path?('issues#show')
-      "page-gutter"
+      if cookies[:collapsed_gutter] == 'true'
+        "page-gutter right-sidebar-collapsed"
+      else
+        "page-gutter right-sidebar-expanded"
+      end
     end
   end
 

app/views/shared/issuable/_participants.html.haml

 .block.participants
+  .sidebar-collapsed-icon
+    = icon('users')
   .title
     = pluralize participants.count, "participant"
   - participants.each do |participant|

app/views/shared/issuable/_sidebar.html.haml

-%aside.right-sidebar.right-sidebar-expanded
+%aside.right-sidebar{ class: sidebar_gutter_collapsed_class }
   .issuable-sidebar
     .block
       %span.issuable-count.pull-left
@@ -7,13 +7,26 @@
         = issuable_count(:all, @project)
       %span.pull-right
         %a.gutter-toggle{href: '#'}
-          = icon('angle-double-right')
+          - if sidebar_gutter_collapsed?
+            = icon('angle-double-left')
+          - else
+            = icon('angle-double-right')
       .issuable-nav.pull-right.btn-group{role: 'group', "aria-label" => '...'}
-        = link_to 'Prev', namespace_project_issue_path(namespace_id: @project, id: prev_issuable_for(@project, issuable.id)), class: 'btn btn-default'
-        = link_to 'Next', namespace_project_issue_path(namespace_id: @project, id: next_issuable_for(@project, issuable.id)), class: 'btn btn-default'
+        - if has_prev_issuable?(@project, issuable.id)
+          = link_to 'Prev', namespace_project_issue_path(@project.namespace, @project, prev_issuable_for(@project, issuable.id).try(:iid)), class: 'btn btn-default'
+        - else
+          %a.btn.btn-default.disabled{href: '#'}
+            Prev
+        - if has_next_issuable?(@project, issuable.id)
+          = link_to 'Next', namespace_project_issue_path(@project.namespace, @project, next_issuable_for(@project, issuable.id).try(:iid)), class: 'btn btn-default'
+        - else
+          %a.btn.btn-default.disabled{href: '#'}
+            Next
 
     = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f|
       .block.assignee
+        .sidebar-collapsed-icon
+          = icon('user')
         .title
           %label
             Assignee
@@ -57,6 +70,8 @@
 
       - if issuable.project.labels.any?
         .block.labels
+          .sidebar-collapsed-icon
+            = icon('tags')
           .title
             %label Labels
             - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
@@ -77,6 +92,8 @@
       - if current_user
         - subscribed = issuable.subscribed?(current_user)
         .block.light
+          .sidebar-collapsed-icon
+            = icon('rss')
           .title
             %label.light Notifications
           - subscribtion_status = subscribed ? 'subscribed' : 'unsubscribed'
@@ -90,6 +107,8 @@
 
       - project_ref = cross_project_reference(@project, issuable)
       .block.project-reference
+        .sidebar-collapsed-icon
+          = icon('clipboard')
         .title
         .cross-project-reference
           %span