Merge branch 'build-scroll-controls-position' into 'master'

Affix the build scroll controls

Closes #4709

See merge request !3109

app/assets/javascripts/ci/build.coffee

@@ -4,6 +4,8 @@ class CiBuild
   constructor: (build_url, build_status) ->
     clearInterval(CiBuild.interval)
 
+    @initScrollButtonAffix()
+
     if build_status == "running" || build_status == "pending"
       #
       # Bind autoscroll button to follow build output
@@ -38,4 +40,15 @@ class CiBuild
   checkAutoscroll: ->
     $("html,body").scrollTop $("#build-trace").height()  if "enabled" is $("#autoscroll-button").data("state")
 
+  initScrollButtonAffix: ->
+    $buildScroll = $('#js-build-scroll')
+    $body = $('body')
+    $buildTrace = $('#build-trace')
+
+    $buildScroll.affix(
+      offset:
+        bottom: ->
+          $body.outerHeight() - ($buildTrace.outerHeight() + $buildTrace.offset().top)
+    )
+
 @CiBuild = CiBuild

app/assets/stylesheets/pages/builds.scss

@@ -27,10 +27,25 @@
   }
 
   .scroll-controls {
-    position: fixed;
-    bottom: 10px;
-    left: 250px;
-    z-index: 100;
+    &.affix-top {
+      position: absolute;
+      top: 10px;
+      right: 25px;
+    }
+
+    &.affix-bottom {
+      position: absolute;
+      right: 25px;
+    }
+
+    &.affix {
+      right: 30px;
+      bottom: 15px;
+
+      @media (min-width: $screen-md-min) {
+        right: 26%;
+      }
+    }
 
     a {
       display: block;

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

@@ -70,7 +70,7 @@
           .autoscroll-container
             %button.btn.btn-success.btn-sm#autoscroll-button{:type => "button", :data => {:state => 'disabled'}} enable autoscroll
           .clearfix
-      .scroll-controls
+      #js-build-scroll.scroll-controls
         = link_to '#up-build-trace', class: 'btn' do
           %i.fa.fa-angle-up
         = link_to '#down-build-trace', class: 'btn' do