New right side gutter design.

[WIP]

app/assets/javascripts/issuable_context.js.coffee

@@ -10,18 +10,6 @@ class @IssuableContext
     $(".issuable-sidebar .inline-update").on "change", ".js-assignee", ->
       $(this).submit()
 
-    $('.issuable-details').waitForImages ->
-      $('.issuable-affix').on 'affix.bs.affix', ->
-        $(@).width($(@).outerWidth())
-      .on 'affixed-top.bs.affix affixed-bottom.bs.affix', ->
-        $(@).width('')
-
-      $('.issuable-affix').affix offset:
-        top: ->
-          @top = ($('.issuable-affix').offset().top - 70)
-        bottom: ->
-          @bottom = $('.footer').outerHeight(true)
-
     $(".edit-link").click (e) ->
       block = $(@).parents('.block')
       block.find('.selectbox').show()

app/assets/stylesheets/framework/sidebar.scss

@@ -200,6 +200,10 @@
   }
 }
 
+@mixin expanded-gutter {
+  padding-right: $gutter_width;
+}
+
 @mixin collapsed-sidebar {
   padding-left: $sidebar_collapsed_width;
 
@@ -266,6 +270,7 @@
   background: #f2f6f7;
 }
 
+// page is small enough
 @media (max-width: $screen-md-max) {
   .page-sidebar-collapsed {
     @include collapsed-sidebar;
@@ -280,7 +285,13 @@
   }
 }
 
+// page is large enough
 @media(min-width: $screen-md-max) {
+
+  .page-gutter {
+    @include expanded-gutter;
+  }
+
   .page-sidebar-collapsed {
     @include collapsed-sidebar;
   }

app/assets/stylesheets/framework/variables.scss

@@ -12,6 +12,8 @@ $gl-font-size: 15px;
 $list-font-size: 15px;
 $sidebar_collapsed_width: 62px;
 $sidebar_width: 230px;
+$gutter_collapsed_width: 62px;
+$gutter_width: 320px;
 $avatar_radius: 50%;
 $code_font_size: 13px;
 $code_line_height: 1.5;

app/assets/stylesheets/pages/issuable.scss

@@ -133,3 +133,16 @@
     margin-right: 2px;
   }
 }
+
+
+.right-sidebar {
+  position: fixed;
+  top: 58px;
+  right: 0;
+  height: 100%;
+  transition-duration: .3s;
+  background: $gray-light;
+  overflow: scroll;
+  width: $gutter_width;
+  padding: 10px 20px;
+}
\ No newline at end of file

app/helpers/application_helper.rb

@@ -293,6 +293,36 @@ module ApplicationHelper
     end
   end
 
+  def issuable_count(entity, project)
+    if project.nil?
+      0
+    elsif current_controller?(:issues)
+      project.issues.send(entity).count
+    elsif current_controller?(:merge_requests)
+      project.merge_requests.send(entity).count
+    end
+  end
+
+  def next_issuable_for(project)
+    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).first
+    end
+  end
+
+  def prev_issuable_for(project)
+    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
+
   def state_filters_text_for(entity, project)
     titles = {
       opened: "Open"

app/helpers/nav_helper.rb

@@ -19,6 +19,12 @@ module NavHelper
     end
   end
 
+  def page_gutter_class
+    if current_path?('merge_requests#show') || current_path?('issues#show')
+      "page-gutter"
+    end
+  end
+
   def nav_header_class
     if nav_menu_collapsed?
       "header-collapsed"

app/views/layouts/_page.html.haml

-.page-with-sidebar{ class: page_sidebar_class }
+.page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" }
   = render "layouts/broadcast"
   .sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
     .header-logo

app/views/projects/issues/show.html.haml

@@ -54,11 +54,9 @@
       = render 'votes/votes_block', votable: @issue
 
     .row
-      %section.col-md-9
+      %section.col-md-12
         .issuable-discussion
           = render 'projects/issues/discussion'
-
-      %aside.col-md-3
-        = render 'shared/issuable/sidebar', issuable: @issue
-
       = render 'shared/show_aside'
+
+= render 'shared/issuable/sidebar', issuable: @issue
\ No newline at end of file

app/views/projects/merge_requests/_show.html.haml

@@ -70,11 +70,9 @@
             = render 'votes/votes_block', votable: @merge_request
 
           .row
-            %section.col-md-9
+            %section.col-md-12
               .issuable-discussion
                 = render "projects/merge_requests/discussion"
-            %aside.col-md-3
-              = render 'shared/issuable/sidebar', issuable: @merge_request
             = render 'shared/show_aside'
 
         #commits.commits.tab-pane
@@ -87,6 +85,8 @@
       .mr-loading-status
         = spinner
 
+= render 'shared/issuable/sidebar', issuable: @merge_request
+
 :javascript
   var merge_request;
 

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

-.issuable-sidebar.issuable-affix
+%aside.right-sidebar
+  .issuable-sidebar
+    .block
+      = issuable.iid
+      of
+      = issuable_count(:all, @project)
+      .issuable-nav.pull-right.btn-group{role: 'group', "aria-label" => '...'}
+        %a.btn.btn-default{href: '#'}
+          Prev
+        %a.btn.btn-default{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
         .title