Adds prev/next buttons to top area

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;

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

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

 %aside.right-sidebar
   .issuable-sidebar
     .block
+      %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