Merge branch 'issue-page-keeps-jumping-up' into 'master'

Issue page keeps jumping up

This happens when the discussion side is smaller than the sidebar and the sidebar will need to scroll. When this happens I calculate the height of the two and see if the discussion panel is smaller and make them the same height and add a class `no-affix` which makes the sidebar relative positioning so it won't stick to the top.

See merge request !2417

3 files changed, 36 insertions, 1 deletions

diff --git a/app/assets/javascripts/issue.js.coffee b/app/assets/javascripts/issue.js.coffee
index 0d26c58a81d..cbc70cd846c 100644
--- a/app/assets/javascripts/issue.js.coffee
+++ b/app/assets/javascripts/issue.js.coffee
@@ -6,11 +6,25 @@ class @Issue
   constructor: ->
     # Prevent duplicate event bindings
     @disableTaskList()
-
+    @fixAffixScroll()
     if $('a.btn-close').length
       @initTaskList()
       @initIssueBtnEventListeners()
 
+  fixAffixScroll: ->
+    fixAffix = ->
+      $discussion = $('.issuable-discussion')
+      $sidebar = $('.issuable-sidebar')
+      if $sidebar.hasClass('no-affix')
+        $sidebar.removeClass(['affix-top','affix'])
+      discussionHeight = $discussion.height()
+      sidebarHeight = $sidebar.height()
+      if sidebarHeight > discussionHeight
+        $discussion.height(sidebarHeight + 50)
+        $sidebar.addClass('no-affix')
+    $(window).on('resize', fixAffix)
+    fixAffix()
+
   initTaskList: ->
     $('.detail-page-description .js-task-list-container').taskList('enable')
     $(document).on 'tasklist:changed', '.detail-page-description .js-task-list-container', @updateTaskList
diff --git a/app/assets/javascripts/merge_request.js.coffee b/app/assets/javascripts/merge_request.js.coffee
index 1f46e331427..6af5a48a0bb 100644
--- a/app/assets/javascripts/merge_request.js.coffee
+++ b/app/assets/javascripts/merge_request.js.coffee
@@ -15,6 +15,8 @@ class @MergeRequest
     this.$('.show-all-commits').on 'click', =>
       this.showAllCommits()
 
+    @fixAffixScroll();
+
     @initTabs()
 
     # Prevent duplicate event bindings
@@ -28,6 +30,20 @@ class @MergeRequest
   $: (selector) ->
     this.$el.find(selector)
 
+  fixAffixScroll: ->
+    fixAffix = ->
+      $discussion = $('.issuable-discussion')
+      $sidebar = $('.issuable-sidebar')
+      if $sidebar.hasClass('no-affix')
+        $sidebar.removeClass(['affix-top','affix'])
+      discussionHeight = $discussion.height()
+      sidebarHeight = $sidebar.height()
+      if sidebarHeight > discussionHeight
+        $discussion.height(sidebarHeight + 50)
+        $sidebar.addClass('no-affix')
+    $(window).on('resize', fixAffix)
+    fixAffix()
+
   initTabs: ->
     if @opts.action != 'new'
       # `MergeRequests#new` has no tab-persisting or lazy-loading behavior
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index eae3590a189..977ada0ff38 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -20,6 +20,11 @@
       position: fixed;
       top: 70px;
       margin-right: 35px;
+
+      &.no-affix {
+        position: relative;
+        top: 0;
+      }
     }
   }
 }