From 087abdf7fd47cfc1ec597fc18b5fa910b945bbd1 Mon Sep 17 00:00:00 2001
From: Jacob Schatz <jacobschatz@Jacobs-MBP.fios-router.home>
Date: Wed, 27 Jan 2016 17:38:19 -0500
Subject: [PATCH 01/16] New right side gutter design.

[WIP]
---
 .../javascripts/issuable_context.js.coffee    |  12 --
 app/assets/stylesheets/framework/sidebar.scss |  13 +-
 .../stylesheets/framework/variables.scss      |   2 +
 app/assets/stylesheets/pages/issuable.scss    |  13 ++
 app/helpers/application_helper.rb             |  30 ++++
 app/helpers/nav_helper.rb                     |   6 +
 app/views/layouts/_page.html.haml             |   2 +-
 app/views/projects/issues/show.html.haml      |   8 +-
 .../projects/merge_requests/_show.html.haml   |   6 +-
 app/views/shared/issuable/_sidebar.html.haml  | 164 ++++++++++--------
 10 files changed, 157 insertions(+), 99 deletions(-)

diff --git a/app/assets/javascripts/issuable_context.js.coffee b/app/assets/javascripts/issuable_context.js.coffee
index 02232698bc2..c2144aea25e 100644
--- a/app/assets/javascripts/issuable_context.js.coffee
+++ b/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()
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 540d0b03163..e0fc969ff0e 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/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;
   }
@@ -288,4 +299,4 @@
   .page-sidebar-expanded {
     @include expanded-sidebar;
   }
-}
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 3ec48da9a41..7af6688963f 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/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;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 977ada0ff38..d1f2175bfb7 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/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
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index a2458ad3be0..57a9ce8294a 100644
--- a/app/helpers/application_helper.rb
+++ b/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"
diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb
index e6fb8670e57..20b89cc9db3 100644
--- a/app/helpers/nav_helper.rb
+++ b/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"
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 26159989777..0c1b5eec95a 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -1,4 +1,4 @@
-.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
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 51dcca7a1ab..a567c22c823 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/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
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index 8641c3d8b4b..c2ecb48b094 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/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;
 
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 3092ff54242..2aa6dc840eb 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -1,88 +1,98 @@
-.issuable-sidebar.issuable-affix
-  = 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
-        %label
-          Assignee
-        - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
-          .pull-right
-            = link_to 'Edit', '#', class: 'edit-link'
-      .value
-        - if issuable.assignee
-          %strong= link_to_member(@project, issuable.assignee, size: 24)
-          - if issuable.instance_of?(MergeRequest) && !issuable.can_be_merged_by?(issuable.assignee)
-            %a.pull-right.cannot-be-merged{href: '#', data: {toggle: 'tooltip'}, title: 'Not allowed to merge'}
-              = icon('exclamation-triangle')
-        - else
-          .light None
-
-      .selectbox
-        = users_select_tag("#{issuable.class.table_name.singularize}[assignee_id]", placeholder: 'Select assignee', class: 'custom-form-control js-select2 js-assignee', selected: issuable.assignee_id, project: @target_project, null_user: true, current_user: true, first_user: true)
-
-    .block.milestone
-      .title
-        %label
-          Milestone
-        - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
-          .pull-right
-            = link_to 'Edit', '#', class: 'edit-link'
-      .value
-        - if issuable.milestone
-          %span.back-to-milestone
-            = link_to namespace_project_milestone_path(@project.namespace, @project, issuable.milestone) do
-              %strong
-                = icon('clock-o')
-                = issuable.milestone.title
-        - else
-          .light None
-      .selectbox
-        = f.select(:milestone_id, milestone_options(issuable), { include_blank: true }, { class: 'select2 select2-compact js-select2 js-milestone', data: { placeholder: 'Select milestone' }})
-        = hidden_field_tag :issuable_context
-        = f.submit class: 'btn hide'
-
-    - if issuable.project.labels.any?
-      .block
+%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
-          %label Labels
+          %label
+            Assignee
           - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
             .pull-right
               = link_to 'Edit', '#', class: 'edit-link'
-        .value.issuable-show-labels
-          - if issuable.labels.any?
-            - issuable.labels.each do |label|
-              = link_to_label(label)
+        .value
+          - if issuable.assignee
+            %strong= link_to_member(@project, issuable.assignee, size: 24)
+            - if issuable.instance_of?(MergeRequest) && !issuable.can_be_merged_by?(issuable.assignee)
+              %a.pull-right.cannot-be-merged{href: '#', data: {toggle: 'tooltip'}, title: 'Not allowed to merge'}
+                = icon('exclamation-triangle')
+          - else
+            .light None
+
+        .selectbox
+          = users_select_tag("#{issuable.class.table_name.singularize}[assignee_id]", placeholder: 'Select assignee', class: 'custom-form-control js-select2 js-assignee', selected: issuable.assignee_id, project: @target_project, null_user: true, current_user: true, first_user: true)
+
+      .block.milestone
+        .title
+          %label
+            Milestone
+          - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
+            .pull-right
+              = link_to 'Edit', '#', class: 'edit-link'
+        .value
+          - if issuable.milestone
+            %span.back-to-milestone
+              = link_to namespace_project_milestone_path(@project.namespace, @project, issuable.milestone) do
+                %strong
+                  = icon('clock-o')
+                  = issuable.milestone.title
           - else
             .light None
         .selectbox
-          = f.collection_select :label_ids, issuable.project.labels.all, :id, :name,
-            { selected: issuable.label_ids }, multiple: true, class: 'select2 js-select2', data: { placeholder: "Select labels" }
+          = f.select(:milestone_id, milestone_options(issuable), { include_blank: true }, { class: 'select2 select2-compact js-select2 js-milestone', data: { placeholder: 'Select milestone' }})
+          = hidden_field_tag :issuable_context
+          = f.submit class: 'btn hide'
 
-    = render "shared/issuable/participants", participants: issuable.participants(current_user)
+      - if issuable.project.labels.any?
+        .block
+          .title
+            %label Labels
+            - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
+              .pull-right
+                = link_to 'Edit', '#', class: 'edit-link'
+          .value.issuable-show-labels
+            - if issuable.labels.any?
+              - issuable.labels.each do |label|
+                = link_to_label(label)
+            - else
+              .light None
+          .selectbox
+            = f.collection_select :label_ids, issuable.project.labels.all, :id, :name,
+              { selected: issuable.label_ids }, multiple: true, class: 'select2 js-select2', data: { placeholder: "Select labels" }
 
-    - if current_user
-      - subscribed = issuable.subscribed?(current_user)
-      .block.light
+      = render "shared/issuable/participants", participants: issuable.participants(current_user)
+
+      - if current_user
+        - subscribed = issuable.subscribed?(current_user)
+        .block.light
+          .title
+            %label.light Notifications
+          - subscribtion_status = subscribed ? 'subscribed' : 'unsubscribed'
+          %button.btn.btn-block.btn-gray.subscribe-button{:type => 'button'}
+            %span= subscribed ? 'Unsubscribe' : 'Subscribe'
+          .subscription-status{data: {status: subscribtion_status}}
+            .unsubscribed{class: ( 'hidden' if subscribed )}
+              You're not receiving notifications from this thread.
+            .subscribed{class: ( 'hidden' unless subscribed )}
+              You're receiving notifications because you're subscribed to this thread.
+
+      - project_ref = cross_project_reference(@project, issuable)
+      .block
         .title
-          %label.light Notifications
-        - subscribtion_status = subscribed ? 'subscribed' : 'unsubscribed'
-        %button.btn.btn-block.btn-gray.subscribe-button{:type => 'button'}
-          %span= subscribed ? 'Unsubscribe' : 'Subscribe'
-        .subscription-status{data: {status: subscribtion_status}}
-          .unsubscribed{class: ( 'hidden' if subscribed )}
-            You're not receiving notifications from this thread.
-          .subscribed{class: ( 'hidden' unless subscribed )}
-            You're receiving notifications because you're subscribed to this thread.
+        .cross-project-reference
+          %span
+            Reference:
+            %cite{title: project_ref}
+              = project_ref
+          = clipboard_button(clipboard_text: project_ref)
 
-    - project_ref = cross_project_reference(@project, issuable)
-    .block
-      .title
-      .cross-project-reference
-        %span
-          Reference:
-          %cite{title: project_ref}
-            = project_ref
-        = clipboard_button(clipboard_text: project_ref)
-
-  :javascript
-    new Subscription("#{toggle_subscription_path(issuable)}");
-    new IssuableContext();
\ No newline at end of file
+    :javascript
+      new Subscription("#{toggle_subscription_path(issuable)}");
+      new IssuableContext();
\ No newline at end of file

From ee89e9c8d13c9fd58bb8e36c5ca2d6b35891a1f8 Mon Sep 17 00:00:00 2001
From: Jacob Schatz <jacobschatz@Jacobs-MBP.fios-router.home>
Date: Wed, 27 Jan 2016 22:50:18 -0500
Subject: [PATCH 02/16] Adds prev/next buttons to top area

---
 .../stylesheets/framework/variables.scss      |  3 ++-
 app/assets/stylesheets/pages/issuable.scss    | 24 +++++++++++++++++++
 app/views/shared/issuable/_sidebar.html.haml  | 10 +++++---
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 7af6688963f..f8b6e0e5e6f 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -13,7 +13,7 @@ $list-font-size: 15px;
 $sidebar_collapsed_width: 62px;
 $sidebar_width: 230px;
 $gutter_collapsed_width: 62px;
-$gutter_width: 320px;
+$gutter_width: 250px;
 $avatar_radius: 50%;
 $code_font_size: 13px;
 $code_line_height: 1.5;
@@ -41,6 +41,7 @@ $white-dark: #ededed;
 $gray-light: #f7f7f7;
 $gray-normal: #ededed;
 $gray-dark: #ededed;
+$gray-darkest: #c9c9c9;
 
 $green-light: #31AF64;
 $green-normal: #2FAA60;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index d1f2175bfb7..c229d689e3c 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -75,9 +75,28 @@
     padding:  $gl-padding 0;
     border-bottom: 1px solid #F0F0F0;
 
+    &:first-child {
+      padding-top: 5px;
+    }
+
     &:last-child {
       border: none;
     }
+
+    span {
+      margin-top: 7px;
+      display: inline-block;
+    }
+
+    .issuable-count {
+
+    }
+
+    .gutter-collapse {
+      margin-left: 10px;
+      border-left: 1px solid #F0F0F0;
+      padding-left: 10px;
+    }
   }
 
   .title {
@@ -145,4 +164,9 @@
   overflow: scroll;
   width: $gutter_width;
   padding: 10px 20px;
+
+  .btn {
+    background: $gray-normal;
+    border: 1px solid $gray-darkest;
+  }
 }
\ No newline at end of file
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 2aa6dc840eb..76947ca114d 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -1,14 +1,18 @@
 %aside.right-sidebar
   .issuable-sidebar
     .block
-      = issuable.iid
-      of
-      = issuable_count(:all, @project)
+      %span.issuable-count.pull-left
+        = issuable.iid
+        of
+        = issuable_count(:all, @project)
+      %span.gutter-collapse.pull-right
+        = icon('angle-double-right')
       .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

From f64e35069eb26959a201c25d548c68d00987d30d Mon Sep 17 00:00:00 2001
From: Jacob Schatz <jacobschatz@Jacobs-MBP.fios-router.home>
Date: Wed, 27 Jan 2016 23:47:37 -0500
Subject: [PATCH 03/16] Add js to expand and contract side menu

---
 app/assets/javascripts/application.js.coffee | 21 ++++++++++++++++++++
 app/assets/stylesheets/pages/issuable.scss   | 13 ++++++++----
 app/helpers/application_helper.rb            |  6 +++---
 app/views/shared/issuable/_sidebar.html.haml | 13 ++++++------
 4 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index 48c9890cfb5..040317ed73a 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -212,4 +212,25 @@ $ ->
     $this = $(this)
     $this.attr 'value', $this.val()
 
+  $('.right-sidebar').on 'click', '.gutter-toggle', (e) ->
+    e.preventDefault()
+    $this = $(this)
+    $thisIcon = $this.find 'i'
+    if $thisIcon.hasClass('fa-angle-double-right')
+      $thisIcon.removeClass('fa-angle-double-right')
+        .addClass('fa-angle-double-left')
+      $this
+        .closest('aside')
+        .removeClass('right-sidebar-expanded')
+        .addClass('right-sidebar-collapsed')
+    else
+      $thisIcon.removeClass('fa-angle-double-left')
+        .addClass('fa-angle-double-right')
+      $this
+        .closest('aside')
+        .removeClass('right-sidebar-collapsed')
+        .addClass('right-sidebar-expanded')
+
+    console.log('collapse')
+
   new Aside()
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index c229d689e3c..02ac1b2da0c 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -42,8 +42,6 @@
 
 .issuable-details {
   section {
-    border-right: 1px solid $border-white-light;
-
     .issuable-discussion {
       margin-right: 1px;
     }
@@ -92,7 +90,7 @@
 
     }
 
-    .gutter-collapse {
+    .gutter-toggle {
       margin-left: 10px;
       border-left: 1px solid #F0F0F0;
       padding-left: 10px;
@@ -162,9 +160,16 @@
   transition-duration: .3s;
   background: $gray-light;
   overflow: scroll;
-  width: $gutter_width;
   padding: 10px 20px;
 
+  &.right-sidebar-expanded {
+    width: $gutter_width;
+  }
+
+  &.right-sidebar-collapsed {
+    width: $sidebar_collapsed_width;
+  }
+
   .btn {
     background: $gray-normal;
     border: 1px solid $gray-darkest;
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 57a9ce8294a..b0cd984024f 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -303,7 +303,7 @@ module ApplicationHelper
     end
   end
 
-  def next_issuable_for(project)
+  def next_issuable_for(project, id)
     if project.nil?
       nil
     elsif current_controller?(:issues)
@@ -313,13 +313,13 @@ module ApplicationHelper
     end
   end
 
-  def prev_issuable_for(project)
+  def prev_issuable_for(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
+      project.merge_requests.where("id < ?", id).last
     end
   end
 
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 76947ca114d..e50c4879848 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -1,17 +1,16 @@
-%aside.right-sidebar
+%aside.right-sidebar.right-sidebar-expanded
   .issuable-sidebar
     .block
       %span.issuable-count.pull-left
         = issuable.iid
         of
         = issuable_count(:all, @project)
-      %span.gutter-collapse.pull-right
-        = icon('angle-double-right')
+      %span.pull-right
+        %a.gutter-toggle{href: '#'}
+          = icon('angle-double-right')
       .issuable-nav.pull-right.btn-group{role: 'group', "aria-label" => '...'}
-        %a.btn.btn-default{href: '#'}
-          Prev
-        %a.btn.btn-default{href: '#'}
-          Next
+        = 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'
 
     = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f|
       .block.assignee

From 0b030e00a15f849a5cbb2778a6b88c57a2e43d4b Mon Sep 17 00:00:00 2001
From: Jacob Schatz <jacobschatz@Jacobs-MBP.fios-router.home>
Date: Thu, 28 Jan 2016 00:06:36 -0500
Subject: [PATCH 04/16] Add icon when collapsed.

Hide and show icons in collapse and expanded mode.
---
 app/assets/stylesheets/pages/issuable.scss   | 22 ++++++++++++++++++++
 app/views/shared/issuable/_sidebar.html.haml |  6 ++++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 02ac1b2da0c..6be1163a8a6 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -174,4 +174,26 @@
     background: $gray-normal;
     border: 1px solid $gray-darkest;
   }
+
+  &.right-sidebar-collapsed {
+    .issuable-count, 
+    .issuable-nav,
+    .assignee .title,
+    .assignee .selectbox,
+    .assignee .value .author,
+    .milestone,
+    .labels,
+    .participants,
+    .light,
+    .project-reference {
+      display: none;
+    }
+
+  }
+
+  &.right-sidebar-expanded {
+    .sidebar-collapsed-icon {
+      display: none;
+    }
+  }
 }
\ No newline at end of file
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index e50c4879848..486c1c922d5 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -33,6 +33,8 @@
           = users_select_tag("#{issuable.class.table_name.singularize}[assignee_id]", placeholder: 'Select assignee', class: 'custom-form-control js-select2 js-assignee', selected: issuable.assignee_id, project: @target_project, null_user: true, current_user: true, first_user: true)
 
       .block.milestone
+        .sidebar-collapsed-icon
+          = icon('balance-scale')
         .title
           %label
             Milestone
@@ -54,7 +56,7 @@
           = f.submit class: 'btn hide'
 
       - if issuable.project.labels.any?
-        .block
+        .block.labels
           .title
             %label Labels
             - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
@@ -87,7 +89,7 @@
               You're receiving notifications because you're subscribed to this thread.
 
       - project_ref = cross_project_reference(@project, issuable)
-      .block
+      .block.project-reference
         .title
         .cross-project-reference
           %span

From 9c2bd8b70eedc9969f5ba4c7fc1a7d96369e1438 Mon Sep 17 00:00:00 2001
From: Jacob Schatz <jacobschatz@Jacobs-MBP.fios-router.home>
Date: Thu, 28 Jan 2016 18:26:47 -0500
Subject: [PATCH 05/16] Sidebar collapse and expand work with whole page.

---
 app/assets/javascripts/application.js.coffee  | 11 ++++++--
 app/assets/stylesheets/framework/sidebar.scss | 11 +++++++-
 app/assets/stylesheets/pages/issuable.scss    | 27 ++++++++++++++----
 app/helpers/application_helper.rb             | 28 ++++++++++++++++---
 app/helpers/nav_helper.rb                     | 19 ++++++++++++-
 .../shared/issuable/_participants.html.haml   |  2 ++
 app/views/shared/issuable/_sidebar.html.haml  | 27 +++++++++++++++---
 7 files changed, 108 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index 040317ed73a..02b0a32539a 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/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()
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index e0fc969ff0e..1616c140c0d 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 6be1163a8a6..9bceb06ae4b 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/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 {
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index b0cd984024f..00f38932861 100644
--- a/app/helpers/application_helper.rb
+++ b/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).last
+      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).first
     end
   end
 
diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb
index 20b89cc9db3..2c299d1d794 100644
--- a/app/helpers/nav_helper.rb
+++ b/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
 
diff --git a/app/views/shared/issuable/_participants.html.haml b/app/views/shared/issuable/_participants.html.haml
index da6bacbb74a..ed34b6d0aef 100644
--- a/app/views/shared/issuable/_participants.html.haml
+++ b/app/views/shared/issuable/_participants.html.haml
@@ -1,4 +1,6 @@
 .block.participants
+  .sidebar-collapsed-icon
+    = icon('users')
   .title
     = pluralize participants.count, "participant"
   - participants.each do |participant|
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 486c1c922d5..123eba5f1cf 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -1,4 +1,4 @@
-%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

From 1bba15589a6c8b349bf235058c13120618d516b6 Mon Sep 17 00:00:00 2001
From: Jacob Schatz <jacobschatz@Jacobs-MBP.fios-router.home>
Date: Thu, 28 Jan 2016 19:27:42 -0500
Subject: [PATCH 06/16] Fix icon centering on collapsed view

---
 app/assets/stylesheets/pages/issuable.scss | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 9bceb06ae4b..5d1a488d377 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -183,9 +183,7 @@
   &.right-sidebar-collapsed {
     .issuable-count, 
     .issuable-nav,
-    .assignee .title,
-    .assignee .selectbox,
-    .assignee .value .author,
+    .assignee > *,
     .milestone > *,
     .labels > *,
     .participants > *,
@@ -194,16 +192,17 @@
       display: none;
     }
 
-    .assignee {
-      margin-left: -7px;
-    }
-
     .gutter-toggle {
       margin-left: -207px;
     }
 
     .sidebar-collapsed-icon {
       display: block;
+      float: left;
+      width: 62px;
+      text-align: center;
+      margin-left: -19px;
+}
     }
 
   }

From 541fcc37bf0c8979cc1495b63ac71912cc28f825 Mon Sep 17 00:00:00 2001
From: Jacob Schatz <jacobschatz@Jacobs-MBP.fios-router.home>
Date: Thu, 28 Jan 2016 20:36:48 -0500
Subject: [PATCH 07/16] Add detail to collapsed icons

---
 app/assets/stylesheets/pages/issuable.scss    | 25 ++++++++++++++++++-
 app/helpers/projects_helper.rb                |  6 +++++
 .../shared/issuable/_participants.html.haml   |  2 ++
 app/views/shared/issuable/_sidebar.html.haml  | 14 +++++++++--
 4 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 5d1a488d377..16429e01e0a 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -169,10 +169,28 @@
 
   &.right-sidebar-expanded {
     width: $gutter_width;
+
+    hr {
+      display: none;
+    }
   }
 
   &.right-sidebar-collapsed {
     width: $sidebar_collapsed_width;
+    padding-top: 0;
+
+    hr {
+      margin: 0;
+      color: $gray-normal;
+      border-color: $gray-normal;
+      width: 62px;
+      margin-left: -20px
+    }
+
+    .block {
+      border-bottom: none;
+      padding: 15px 0 0 0;
+    }
   }
 
   .btn {
@@ -202,7 +220,12 @@
       width: 62px;
       text-align: center;
       margin-left: -19px;
-}
+      padding-bottom: 10px;
+
+      span {
+        display: block;
+        margin-top: 0;
+      }
     }
 
   }
diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb
index 77ba612548a..9215f29209c 100644
--- a/app/helpers/projects_helper.rb
+++ b/app/helpers/projects_helper.rb
@@ -20,6 +20,12 @@ module ProjectsHelper
     end
   end
 
+  def link_to_member_avatar(author, opts = {})
+    default_opts = { avatar: true, name: true, size: 16, author_class: 'author', title: ":name" }
+    opts = default_opts.merge(opts)
+    image_tag(avatar_icon(author, opts[:size]), width: opts[:size], class: "avatar avatar-inline #{"s#{opts[:size]}" if opts[:size]}", alt:'') if opts[:avatar]
+  end
+
   def link_to_member(project, author, opts = {})
     default_opts = { avatar: true, name: true, size: 16, author_class: 'author', title: ":name" }
     opts = default_opts.merge(opts)
diff --git a/app/views/shared/issuable/_participants.html.haml b/app/views/shared/issuable/_participants.html.haml
index ed34b6d0aef..ea61935487c 100644
--- a/app/views/shared/issuable/_participants.html.haml
+++ b/app/views/shared/issuable/_participants.html.haml
@@ -1,6 +1,8 @@
 .block.participants
   .sidebar-collapsed-icon
     = icon('users')
+    %span
+      = participants.count
   .title
     = pluralize participants.count, "participant"
   - participants.each do |participant|
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 123eba5f1cf..f4f04a42196 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -26,7 +26,10 @@
     = 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')
+          - if issuable.assignee
+            = link_to_member_avatar(issuable.assignee, size: 24)
+          - else
+            = icon('user')
         .title
           %label
             Assignee
@@ -48,6 +51,11 @@
       .block.milestone
         .sidebar-collapsed-icon
           = icon('balance-scale')
+          %span
+            - if issuable.milestone
+              = issuable.milestone.title
+            - else
+              No
         .title
           %label
             Milestone
@@ -72,6 +80,8 @@
         .block.labels
           .sidebar-collapsed-icon
             = icon('tags')
+            %span
+              = issuable.labels.count
           .title
             %label Labels
             - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
@@ -88,7 +98,7 @@
               { selected: issuable.label_ids }, multiple: true, class: 'select2 js-select2', data: { placeholder: "Select labels" }
 
       = render "shared/issuable/participants", participants: issuable.participants(current_user)
-
+      %hr
       - if current_user
         - subscribed = issuable.subscribed?(current_user)
         .block.light

From e2b6e9c3c531649535e47de0814dd4cb651411fa Mon Sep 17 00:00:00 2001
From: Jacob Schatz <jacobschatz@Jacobs-MBP.fios-router.home>
Date: Sat, 30 Jan 2016 00:30:25 -0500
Subject: [PATCH 08/16] Add ajax calls to return JSON

Fix subtitles on minimize.
Fix styles for show.
---
 app/assets/stylesheets/framework/mobile.scss      | 2 +-
 app/assets/stylesheets/framework/sidebar.scss     | 9 +++++++++
 app/controllers/projects/issues_controller.rb     | 4 +++-
 app/views/projects/issues/show.html.haml          | 1 -
 app/views/projects/merge_requests/_show.html.haml | 1 -
 app/views/shared/issuable/_sidebar.html.haml      | 2 +-
 6 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
index 0997dfc287c..3bfac2ad9b5 100644
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -116,7 +116,7 @@
     display: none;
   }
 
-  aside {
+  aside:not(.right-sidebar){
     display: none;
   }
 
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 1616c140c0d..b7f532c0771 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -284,6 +284,15 @@
     @include collapsed-sidebar;
   }
 
+  .page-gutter {
+    &.right-sidebar-collapsed {
+      @include collapsed-gutter;
+    }
+    &.right-sidebar-expanded {
+      @include expanded-gutter;
+    }
+  }
+
   .collapse-nav {
     display: none;
   }
diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb
index 68244883803..1b6ea280ad4 100644
--- a/app/controllers/projects/issues_controller.rb
+++ b/app/controllers/projects/issues_controller.rb
@@ -98,7 +98,9 @@ class Projects::IssuesController < Projects::ApplicationController
       format.json do
         render json: {
           saved: @issue.valid?,
-          assignee_avatar_url: @issue.assignee.try(:avatar_url)
+          assignee_avatar_url: @issue.assignee.try(:avatar_url),
+          milestone: @issue.milestone.title,
+          labels: @issue.labels.pluck(:id,:title,:color)
         }
       end
     end
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index a567c22c823..030f4a2e644 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -57,6 +57,5 @@
       %section.col-md-12
         .issuable-discussion
           = render 'projects/issues/discussion'
-      = render 'shared/show_aside'
 
 = render 'shared/issuable/sidebar', issuable: @issue
\ No newline at end of file
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index c2ecb48b094..da67645bc2b 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -73,7 +73,6 @@
             %section.col-md-12
               .issuable-discussion
                 = render "projects/merge_requests/discussion"
-            = render 'shared/show_aside'
 
         #commits.commits.tab-pane
           - # This tab is always loaded via AJAX
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index f4f04a42196..0ed2c9c710d 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -23,7 +23,7 @@
           %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|
+    = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update', 'data-type' => 'json'} do |f|
       .block.assignee
         .sidebar-collapsed-icon
           - if issuable.assignee

From d87e317be449274983f5c515edf5285a1bb08c21 Mon Sep 17 00:00:00 2001
From: Jacob Schatz <jacobschatz@Jacobs-MBP.fios-router.home>
Date: Tue, 2 Feb 2016 14:27:45 -0500
Subject: [PATCH 09/16] Added correct colors and styles from antetype mockup.

---
 app/assets/stylesheets/framework/buttons.scss   |  2 +-
 app/assets/stylesheets/framework/issue_box.scss |  2 +-
 app/assets/stylesheets/framework/variables.scss | 15 ++++++++-------
 app/assets/stylesheets/pages/issuable.scss      |  4 ++--
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index c99292c3f83..b3d7874d277 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -2,7 +2,7 @@
   @include border-radius(3px);
   font-size: $gl-font-size;
   font-weight: 500;
-  padding: $gl-vert-padding $gl-padding;
+  padding: $gl-vert-padding $gl-btn-padding;
 
   &:focus,
   &:active {
diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss
index e93dbab0c42..08dcb563dce 100644
--- a/app/assets/stylesheets/framework/issue_box.scss
+++ b/app/assets/stylesheets/framework/issue_box.scss
@@ -9,7 +9,7 @@
 
   display: block;
   float: left;
-  padding: 0 $gl-padding;
+  padding: 0 $gl-btn-padding;
   font-weight: normal;
   margin-right: 10px;
   font-size: $gl-font-size;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index f8b6e0e5e6f..5e249059c29 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -24,6 +24,7 @@ $header-height: 58px;
 $fixed-layout-width: 1280px;
 $gl-gray: #5a5a5a;
 $gl-padding: 16px;
+$gl-btn-padding: 10px;
 $gl-vert-padding: 6px;
 $gl-padding-top:10px;
 $gl-avatar-size: 46px;
@@ -38,12 +39,12 @@ $white-light: #FFFFFF;
 $white-normal: #ededed;
 $white-dark: #ededed;
 
-$gray-light: #f7f7f7;
-$gray-normal: #ededed;
+$gray-light: #faf9f9;
+$gray-normal: #f5f5f5;
 $gray-dark: #ededed;
 $gray-darkest: #c9c9c9;
 
-$green-light: #31AF64;
+$green-light: #38ae67;
 $green-normal: #2FAA60;
 $green-dark: #2CA05B;
 
@@ -55,7 +56,7 @@ $blue-medium-light: #3498CB;
 $blue-medium: #2F8EBF;
 $blue-medium-dark: #2D86B4;
 
-$orange-light: #FC6443;
+$orange-light: rgba(252, 109, 38, 0.80);
 $orange-normal: #E75E40;
 $orange-dark: #CE5237;
 
@@ -67,8 +68,8 @@ $border-white-light: #F1F2F4;
 $border-white-normal: #D6DAE2;
 $border-white-dark: #C6CACF;
 
-$border-gray-light: #d1d1d1;
-$border-gray-normal: #D6DAE2;
+$border-gray-light: rgba(0, 0, 0, 0.06);
+$border-gray-normal: rgba(0, 0, 0, 0.10);;
 $border-gray-dark: #C6CACF;
 
 $border-green-light: #2FAA60;
@@ -79,7 +80,7 @@ $border-blue-light: #2D9FD8;
 $border-blue-normal: #2897CE;
 $border-blue-dark: #258DC1;
 
-$border-orange-light: #ED5C3D;
+$border-orange-light: #fc6d26;
 $border-orange-normal: #CE5237;
 $border-orange-dark: #C14E35;
 
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 16429e01e0a..2c8fc509f20 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -71,7 +71,7 @@
   .block {
     @include clearfix;
     padding:  $gl-padding 0;
-    border-bottom: 1px solid #F0F0F0;
+    border-bottom: 1px solid $border-gray-light;
     // This prevents the mess when resizing the sidebar 
     // of elements repositioning themselves..
     width: 210px;
@@ -195,7 +195,7 @@
 
   .btn {
     background: $gray-normal;
-    border: 1px solid $gray-darkest;
+    border: 1px solid $border-gray-normal;
   }
 
   &.right-sidebar-collapsed {

From 599e554ad4df76e0ec270aa0756a98b9044e877f Mon Sep 17 00:00:00 2001
From: Jacob Schatz <jacobschatz@Jacobs-MBP.fios-router.home>
Date: Tue, 2 Feb 2016 19:42:19 -0500
Subject: [PATCH 10/16] Sidebar works after sidebar ajax calls.

---
 app/assets/javascripts/application.js.coffee      | 2 +-
 app/assets/javascripts/issuable_context.js.coffee | 2 +-
 app/assets/stylesheets/pages/issuable.scss        | 3 ++-
 app/views/projects/issues/update.js.haml          | 6 +++---
 app/views/projects/merge_requests/update.js.haml  | 4 ++--
 app/views/shared/issuable/_sidebar.html.haml      | 2 +-
 6 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index 02b0a32539a..be3b326075d 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -212,7 +212,7 @@ $ ->
     $this = $(this)
     $this.attr 'value', $this.val()
 
-  $('.right-sidebar').on 'click', '.gutter-toggle', (e) ->
+  $(document).on 'click', 'aside .gutter-toggle', (e) ->
     e.preventDefault()
     $this = $(this)
     $thisIcon = $this.find 'i'
diff --git a/app/assets/javascripts/issuable_context.js.coffee b/app/assets/javascripts/issuable_context.js.coffee
index c2144aea25e..d17b1123418 100644
--- a/app/assets/javascripts/issuable_context.js.coffee
+++ b/app/assets/javascripts/issuable_context.js.coffee
@@ -10,7 +10,7 @@ class @IssuableContext
     $(".issuable-sidebar .inline-update").on "change", ".js-assignee", ->
       $(this).submit()
 
-    $(".edit-link").click (e) ->
+    $(document).on "click",".edit-link", (e) ->
       block = $(@).parents('.block')
       block.find('.selectbox').show()
       block.find('.value').hide()
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 2c8fc509f20..b10670afd40 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -97,7 +97,7 @@
 
     .gutter-toggle {
       margin-left: 10px;
-      border-left: 1px solid #F0F0F0;
+      border-left: 1px solid $border-gray-light;
       padding-left: 10px;
     }
   }
@@ -221,6 +221,7 @@
       text-align: center;
       margin-left: -19px;
       padding-bottom: 10px;
+      color: #999999;
 
       span {
         display: block;
diff --git a/app/views/projects/issues/update.js.haml b/app/views/projects/issues/update.js.haml
index 2f0f3fcfb06..3cec66d262b 100644
--- a/app/views/projects/issues/update.js.haml
+++ b/app/views/projects/issues/update.js.haml
@@ -1,3 +1,3 @@
-$('.issuable-sidebar').html("#{escape_javascript(render 'shared/issuable/sidebar', issuable: @issue)}");
-$('.issuable-sidebar').parent().effect('highlight')
-new Issue();
+$('aside.right-sidebar').parent().html("#{escape_javascript(render 'shared/issuable/sidebar', issuable: @issue)}");
+$('aside.right-sidebar').effect('highlight')
+new Issue();
\ No newline at end of file
diff --git a/app/views/projects/merge_requests/update.js.haml b/app/views/projects/merge_requests/update.js.haml
index 93db65ddf79..ce5157d69a2 100644
--- a/app/views/projects/merge_requests/update.js.haml
+++ b/app/views/projects/merge_requests/update.js.haml
@@ -1,3 +1,3 @@
-$('.issuable-sidebar').html("#{escape_javascript(render 'shared/issuable/sidebar', issuable: @merge_request)}");
-$('.issuable-sidebar').parent().effect('highlight')
+$('aside.right-sidebar')[0].outerHTML= "#{escape_javascript(render 'shared/issuable/sidebar', issuable: @merge_request)}";
+$('aside.right-sidebar').effect('highlight')
 merge_request = new MergeRequest();
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 0ed2c9c710d..f4f04a42196 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -23,7 +23,7 @@
           %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', 'data-type' => 'json'} do |f|
+    = 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
           - if issuable.assignee

From d6d3a132b887c286b5b74e2a14be327f3a302d26 Mon Sep 17 00:00:00 2001
From: Jacob Schatz <jacobschatz@Jacobs-MBP.fios-router.home>
Date: Wed, 3 Feb 2016 14:45:08 -0500
Subject: [PATCH 11/16] Fix sidebar replacement for issues & MRs

---
 app/views/projects/issues/update.js.haml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/projects/issues/update.js.haml b/app/views/projects/issues/update.js.haml
index 3cec66d262b..c8e79ade110 100644
--- a/app/views/projects/issues/update.js.haml
+++ b/app/views/projects/issues/update.js.haml
@@ -1,3 +1,3 @@
-$('aside.right-sidebar').parent().html("#{escape_javascript(render 'shared/issuable/sidebar', issuable: @issue)}");
+$('aside.right-sidebar')[0].outerHTML = "#{escape_javascript(render 'shared/issuable/sidebar', issuable: @issue)}");
 $('aside.right-sidebar').effect('highlight')
 new Issue();
\ No newline at end of file

From bb81eff4bfcdee87095b03df04fd1086924984c0 Mon Sep 17 00:00:00 2001
From: Jacob Schatz <jacobschatz@Jacobs-MBP.fios-router.home>
Date: Wed, 3 Feb 2016 15:49:30 -0500
Subject: [PATCH 12/16] Issue sidebar bug fix.

Thanks @rspeicher.
---
 app/controllers/projects/issues_controller.rb | 4 +---
 app/views/projects/issues/update.js.haml      | 4 ++--
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb
index 1b6ea280ad4..68244883803 100644
--- a/app/controllers/projects/issues_controller.rb
+++ b/app/controllers/projects/issues_controller.rb
@@ -98,9 +98,7 @@ class Projects::IssuesController < Projects::ApplicationController
       format.json do
         render json: {
           saved: @issue.valid?,
-          assignee_avatar_url: @issue.assignee.try(:avatar_url),
-          milestone: @issue.milestone.title,
-          labels: @issue.labels.pluck(:id,:title,:color)
+          assignee_avatar_url: @issue.assignee.try(:avatar_url)
         }
       end
     end
diff --git a/app/views/projects/issues/update.js.haml b/app/views/projects/issues/update.js.haml
index c8e79ade110..a54733883b4 100644
--- a/app/views/projects/issues/update.js.haml
+++ b/app/views/projects/issues/update.js.haml
@@ -1,3 +1,3 @@
-$('aside.right-sidebar')[0].outerHTML = "#{escape_javascript(render 'shared/issuable/sidebar', issuable: @issue)}");
-$('aside.right-sidebar').effect('highlight')
+$('aside.right-sidebar')[0].outerHTML = "#{escape_javascript(render 'shared/issuable/sidebar', issuable: @issue)}";
+$('aside.right-sidebar').effect('highlight');
 new Issue();
\ No newline at end of file

From f660d8d0444fc3c953df93f66c42f9895bfe9ade Mon Sep 17 00:00:00 2001
From: Jacob Schatz <jacobschatz@Jacobs-MBP.fios-router.home>
Date: Wed, 3 Feb 2016 16:04:48 -0500
Subject: [PATCH 13/16] Fixes sidebar width.

---
 app/assets/stylesheets/framework/variables.scss |  3 ++-
 app/assets/stylesheets/pages/issuable.scss      | 12 +++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 5e249059c29..44d3d7715d2 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -13,7 +13,8 @@ $list-font-size: 15px;
 $sidebar_collapsed_width: 62px;
 $sidebar_width: 230px;
 $gutter_collapsed_width: 62px;
-$gutter_width: 250px;
+$gutter_width: 312px;
+$gutter_inner_width: 280px;
 $avatar_radius: 50%;
 $code_font_size: 13px;
 $code_line_height: 1.5;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index b10670afd40..6f71ad1f50b 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -74,7 +74,7 @@
     border-bottom: 1px solid $border-gray-light;
     // This prevents the mess when resizing the sidebar 
     // of elements repositioning themselves..
-    width: 210px;
+    width: $gutter_inner_width;
     overflow-x: hidden;
     // --
 
@@ -96,7 +96,7 @@
     }
 
     .gutter-toggle {
-      margin-left: 10px;
+      margin-left: 20px;
       border-left: 1px solid $border-gray-light;
       padding-left: 10px;
     }
@@ -175,6 +175,12 @@
     }
   }
 
+  .subscribe-button {
+    span {
+      margin-top: 0;
+    }
+  }
+
   &.right-sidebar-collapsed {
     width: $sidebar_collapsed_width;
     padding-top: 0;
@@ -211,7 +217,7 @@
     }
 
     .gutter-toggle {
-      margin-left: -207px;
+      margin-left: -$gutter_inner_width + 4;
     }
 
     .sidebar-collapsed-icon {

From e0efdc4bf759ed8129d12aed16e68fb7392eddc7 Mon Sep 17 00:00:00 2001
From: Jacob Schatz <jacobschatz@Jacobs-MBP.fios-router.home>
Date: Wed, 3 Feb 2016 20:35:26 -0500
Subject: [PATCH 14/16] Make size changes based on screen resize.

---
 app/assets/javascripts/application.js.coffee | 36 ++++++++++++++++++++
 app/assets/stylesheets/pages/issuable.scss   |  1 +
 2 files changed, 37 insertions(+)

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index be3b326075d..1abc4794f21 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -212,6 +212,13 @@ $ ->
     $this = $(this)
     $this.attr 'value', $this.val()
 
+  $(document).on 'breakpoint:change', (e, breakpoint) ->
+    if breakpoint is 'sm' or breakpoint is 'xs'
+      $gutterIcon = $('.gutter-toggle').find('i')
+      if $gutterIcon.hasClass('fa-angle-double-right')
+        $gutterIcon.closest('a').trigger('click')
+
+
   $(document).on 'click', 'aside .gutter-toggle', (e) ->
     e.preventDefault()
     $this = $(this)
@@ -240,4 +247,33 @@ $ ->
       $('.right-sidebar')
         .hasClass('right-sidebar-collapsed'), { path: '/' })
 
+  bootstrapBreakpoint = undefined;
+  checkBootstrapBreakpoints = ->
+    if $('.device-xs').is(':visible')
+      bootstrapBreakpoint = "xs"
+    else if $('.device-sm').is(':visible')
+      bootstrapBreakpoint = "sm"
+    else if $('.device-md').is(':visible')
+      bootstrapBreakpoint = "md"
+    else if $('.device-lg').is(':visible')
+      bootstrapBreakpoint = "lg"
+
+  setBootstrapBreakpoints = ->
+    if $('.device-xs').length
+      return
+
+    $("body")
+      .append('<div class="device-xs visible-xs"></div>'+
+        '<div class="device-sm visible-sm"></div>'+
+        '<div class="device-md visible-md"></div>'+
+        '<div class="device-lg visible-lg"></div>')
+    checkBootstrapBreakpoints()
+
+  $(window).on "resize", (e) ->
+    oldBootstrapBreakpoint = bootstrapBreakpoint
+    checkBootstrapBreakpoints()
+    if bootstrapBreakpoint != oldBootstrapBreakpoint
+      $(document).trigger('breakpoint:change',[bootstrapBreakpoint])
+
+  setBootstrapBreakpoints()
   new Aside()
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 6f71ad1f50b..3bfbd9e17b7 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -184,6 +184,7 @@
   &.right-sidebar-collapsed {
     width: $sidebar_collapsed_width;
     padding-top: 0;
+    overflow-x: hidden;
 
     hr {
       margin: 0;

From f25ba6e03c6635b75a46e6f53c3cfee8109b74f9 Mon Sep 17 00:00:00 2001
From: Jacob Schatz <jacobschatz@Jacobs-MBP.fios-router.home>
Date: Thu, 4 Feb 2016 08:50:25 -0500
Subject: [PATCH 15/16] Resize sidebar on initial page refresh.

---
 app/assets/javascripts/application.js.coffee | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index 1abc4794f21..b7c465401be 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -269,11 +269,19 @@ $ ->
         '<div class="device-lg visible-lg"></div>')
     checkBootstrapBreakpoints()
 
-  $(window).on "resize", (e) ->
+  fitSidebarForSize = ->
     oldBootstrapBreakpoint = bootstrapBreakpoint
     checkBootstrapBreakpoints()
     if bootstrapBreakpoint != oldBootstrapBreakpoint
-      $(document).trigger('breakpoint:change',[bootstrapBreakpoint])
+      $(document).trigger('breakpoint:change', [bootstrapBreakpoint])
+
+  checkInitialSidebarSize = ->
+    if bootstrapBreakpoint is "xs" or "sm"
+      $(document).trigger('breakpoint:change', [bootstrapBreakpoint])
+
+  $(window).on "resize", (e) ->
+    fitSidebarForSize()
 
   setBootstrapBreakpoints()
+  checkInitialSidebarSize()
   new Aside()

From 2e6c5fb28e2fb924addffd29345dab45b7980905 Mon Sep 17 00:00:00 2001
From: Jacob Schatz <jacobschatz@Jacobs-MBP.fios-router.home>
Date: Thu, 4 Feb 2016 11:10:11 -0500
Subject: [PATCH 16/16] Properly link to the right issue or merge request

---
 app/helpers/application_helper.rb            | 20 ++++++++++++++++++++
 app/views/shared/issuable/_sidebar.html.haml |  4 ++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 00f38932861..14f098d8355 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -293,6 +293,26 @@ module ApplicationHelper
     end
   end
 
+  def issuable_link_next(project,issuable)
+    if project.nil?
+      nil
+    elsif current_controller?(:issues)
+      namespace_project_issue_path(project.namespace, project, next_issuable_for(project, issuable.id).try(:iid))
+    elsif current_controller?(:merge_requests)
+      namespace_project_merge_request_path(project.namespace, project, next_issuable_for(project, issuable.id).try(:iid))
+    end
+  end
+
+  def issuable_link_prev(project,issuable)
+    if project.nil?
+      nil
+    elsif current_controller?(:issues)
+      namespace_project_issue_path(project.namespace, project, prev_issuable_for(project, issuable.id).try(:iid))
+    elsif current_controller?(:merge_requests)
+      namespace_project_merge_request_path(project.namespace, project, prev_issuable_for(project, issuable.id).try(:iid))
+    end
+  end
+
   def issuable_count(entity, project)
     if project.nil?
       0
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index f4f04a42196..cab500d7244 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -13,12 +13,12 @@
             = icon('angle-double-right')
       .issuable-nav.pull-right.btn-group{role: 'group', "aria-label" => '...'}
         - 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'
+          = link_to 'Prev', issuable_link_prev(@project, issuable), 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'
+          = link_to 'Next', issuable_link_next(@project, issuable), class: 'btn btn-default'
         - else
           %a.btn.btn-default.disabled{href: '#'}
             Next