Use boostrap affix instead of changing position manually.

Update size according to received one
Only show truncated info when append is false

3 files changed, 20 insertions, 19 deletions

diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js
index b8f756d13aa..a813647e1ca 100644
--- a/app/assets/javascripts/build.js
+++ b/app/assets/javascripts/build.js
@@ -41,6 +41,8 @@ $(() => {
       this.updateStageDropdownText(this.buildStage);
       this.sidebarOnResize();
 
+      // this.initAffixTruncatedInfo = _.bind(this.initAffixTruncatedInfo, this);
+
       this.$document
         .off('click', '.js-sidebar-build-toggle')
         .on('click', '.js-sidebar-build-toggle', this.sidebarOnClick.bind(this));
@@ -100,9 +102,15 @@ $(() => {
             $buildContainer.append(log.html);
           } else {
             $buildContainer.html(log.html);
-          }
 
-          this.$truncatedInfo.toggleClass('hidden', !log.truncated);
+            if (log.truncated) {
+              $('.js-truncated-info-size').html(` ${log.size} `);
+              this.$truncatedInfo.removeClass('hidden');
+              this.initAffixTruncatedInfo();
+            } else {
+              this.$truncatedInfo.addClass('hidden');
+            }
+          }
 
           if (log.status !== this.buildStatus) {
             let pageUrl = this.pageUrl;
@@ -174,7 +182,6 @@ $(() => {
         // User is somewhere in middle of Build Log
 
         this.$scrollTopBtn.show();
-        this.fixTruncatedInfo();
 
         if (this.buildStatus === 'success' || this.buildStatus === 'failed') { // Check if Build is completed
           this.$scrollBottomBtn.show();
@@ -201,7 +208,6 @@ $(() => {
 
         this.$scrollTopBtn.hide();
         this.$scrollBottomBtn.show();
-        this.unFixTruncatedInfo();
 
         this.$autoScrollContainer.hide();
         this.$autoScrollStatusText.removeClass('animate');
@@ -213,7 +219,6 @@ $(() => {
 
         this.$scrollTopBtn.show();
         this.$scrollBottomBtn.hide();
-        this.fixTruncatedInfo();
 
         // Show and Reposition Autoscroll Status Indicator
         this.$autoScrollContainer.css(
@@ -226,7 +231,6 @@ $(() => {
 
         this.$scrollTopBtn.hide();
         this.$scrollBottomBtn.hide();
-        this.unFixTruncatedInfo();
 
         // Hide Autoscroll Status Indicator
         this.$autoScrollContainer.hide();
@@ -301,16 +305,10 @@ $(() => {
       });
     };
 
-    Build.prototype.fixTruncatedInfo = () => {
-      $('.js-truncated-info')
-        .removeClass('truncated-info-absolute')
-        .addClass('truncated-info-fixed');
-    };
+    Build.prototype.initAffixTruncatedInfo = function () {
+      const offsetTop = this.$buildTrace.offset().top;
 
-    Build.prototype.unFixTruncatedInfo = () => {
-      $('.js-truncated-info')
-        .removeClass('truncated-info-fixed')
-        .addClass('truncated-info-absolute');
+      this.$truncatedInfo.affix({ offset: { top: offsetTop } });
     };
 
     return Build;
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index c02b4ef94e1..5436d938718 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -70,7 +70,7 @@
     }
 
     // with sidebar
-    &-fixed.sidebar-expanded {
+    &.affix.sidebar-expanded {
       position: fixed;
       top: 0;
       right: 312px;
@@ -78,7 +78,7 @@
     }
 
     // without sidebar
-    &-fixed.sidebar-collapsed {
+    &.affix.sidebar-collapsed {
       position: fixed;
       top: 0;
       margin: 0;
@@ -86,7 +86,7 @@
       left: 20px;
     }
 
-    &-absolute {
+    &.affix-top {
       position: absolute;
       top: 0;
       margin: 0 auto;
diff --git a/app/views/projects/builds/show.html.haml b/app/views/projects/builds/show.html.haml
index 3724a80d4d5..390cd750e39 100644
--- a/app/views/projects/builds/show.html.haml
+++ b/app/views/projects/builds/show.html.haml
@@ -72,7 +72,10 @@
         #up-build-trace
         %pre.build-trace#build-trace
           .js-truncated-info.truncated-info.hidden
-            %p Showing last 50 Kb of log
+            %span<
+              Showing last
+              %span.js-truncated-info-size>
+              Kb of log
           %code.bash.js-build-output
           .build-loader-animation.js-build-refresh