CI build page UI update

Added sidebar
Removed elements not present in design

7 files changed, 160 insertions, 58 deletions

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index b28327ce12d..e0ca546350b 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -267,8 +267,8 @@ $ ->
       $(document).trigger('breakpoint:change', [bootstrapBreakpoint])
 
   $(window)
-    .off "resize"
-    .on "resize", (e) ->
+    .off "resize.app"
+    .on "resize.app", (e) ->
       fitSidebarForSize()
 
   gl.awardsHandler = new AwardsHandler()
diff --git a/app/assets/javascripts/ci/build.coffee b/app/assets/javascripts/ci/build.coffee
index 98d05e41273..f763ba96e33 100644
--- a/app/assets/javascripts/ci/build.coffee
+++ b/app/assets/javascripts/ci/build.coffee
@@ -1,19 +1,31 @@
-class CiBuild
+class @CiBuild
   @interval: null
   @state: null
 
-  constructor: (build_url, build_status, build_state) ->
+  constructor: (@build_url, @build_status, @state) ->
     clearInterval(CiBuild.interval)
 
-    @state = build_state
+    # Init breakpoint checker
+    @bp = Breakpoints.get()
+    @hideSidebar()
+    $('.js-build-sidebar').niceScroll()
+    $(document)
+      .off 'click', '.js-sidebar-build-toggle'
+      .on 'click', '.js-sidebar-build-toggle', @toggleSidebar
 
-    @initScrollButtonAffix()
+    $(window)
+      .off 'resize.build'
+      .on 'resize.build', @hideSidebar
 
-    if build_status == "running" || build_status == "pending"
+    if $('#build-trace').length
+      @getInitialBuildTrace()
+      @initScrollButtonAffix()
+
+    if @build_status is "running" or @build_status is "pending"
       #
       # Bind autoscroll button to follow build output
       #
-      $("#autoscroll-button").bind "click", ->
+      $('#autoscroll-button').on 'click', ->
         state = $(this).data("state")
         if "enabled" is state
           $(this).data "state", "disabled"
@@ -27,26 +39,37 @@ class CiBuild
       # Only valid for runnig build when output changes during time
       #
       CiBuild.interval = setInterval =>
-        if window.location.href.split("#").first() is build_url
-          last_state = @state
-          $.ajax
-            url: build_url + "/trace.json?state=" + encodeURIComponent(@state)
-            dataType: "json"
-            success: (log) =>
-              return unless last_state is @state
-
-              if log.state and log.status is "running"
-                @state = log.state
-                if log.append
-                  $('.fa-refresh').before log.html
-                else
-                  $('#build-trace code').html log.html
-                  $('#build-trace code').append '<i class="fa fa-refresh fa-spin"/>'
-                @checkAutoscroll()
-              else if log.status isnt build_status
-                Turbolinks.visit build_url
+        if window.location.href.split("#").first() is @build_url
+          @getBuildTrace()
       , 4000
 
+  getInitialBuildTrace: ->
+    $.ajax
+      url: @build_url
+      dataType: 'json'
+      success: (build_data) ->
+        $('.js-build-output').html build_data.trace_html
+
+        if build_data.status is 'success' or build_data.status is 'failed'
+          $('.js-build-refresh').remove()
+
+  getBuildTrace: ->
+    $.ajax
+      url: "#{@build_url}/trace.json?state=#{encodeURIComponent(@state)}"
+      dataType: "json"
+      success: (log) =>
+        if log.state
+          @state = log.state
+
+        if log.status is "running"
+          if log.append
+            $('.js-build-output').append log.html
+          else
+            $('.js-build-output').html log.html
+          @checkAutoscroll()
+        else if log.status isnt @build_status
+          Turbolinks.visit @build_url
+
   checkAutoscroll: ->
     $("html,body").scrollTop $("#build-trace").height()  if "enabled" is $("#autoscroll-button").data("state")
 
@@ -61,4 +84,22 @@ class CiBuild
           $body.outerHeight() - ($buildTrace.outerHeight() + $buildTrace.offset().top)
     )
 
-@CiBuild = CiBuild
+  shouldHideSidebar: ->
+    bootstrapBreakpoint = @bp.getBreakpointSize()
+
+    bootstrapBreakpoint is 'xs' or bootstrapBreakpoint is 'sm'
+
+  toggleSidebar: =>
+    if @shouldHideSidebar()
+      $('.js-build-sidebar')
+        .toggleClass 'right-sidebar-expanded right-sidebar-collapsed'
+
+  hideSidebar: =>
+    if @shouldHideSidebar()
+      $('.js-build-sidebar')
+        .removeClass 'right-sidebar-expanded'
+        .addClass 'right-sidebar-collapsed'
+    else
+      $('.js-build-sidebar')
+        .removeClass 'right-sidebar-collapsed'
+        .addClass 'right-sidebar-expanded'
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 94985413746..06a688690f8 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -273,7 +273,9 @@
   padding-right: 0;
 
   @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-    padding-right: $sidebar_collapsed_width;
+    &:not(.build-sidebar) {
+      padding-right: $sidebar_collapsed_width;
+    }
   }
 
   @media (min-width: $screen-md-min) {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 99e3df119ed..847b2f80bdf 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -260,3 +260,6 @@ $calendar-header-color: #b8b8b8;
 $calendar-hover-bg: #ecf3fe;
 $calendar-border-color: rgba(#000, .1);
 $calendar-unselectable-bg: #faf9f9;
+
+$ci-output-bg: #1d1f21;
+$ci-text-color: #c5c8c6;
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 44222e8e8a4..e8f1935d239 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -53,37 +53,92 @@
       left: 70px;
     }
   }
+}
 
-  .build-widget {
-    padding: 10px;
-    background: $background-color;
-    margin-bottom: 20px;
-    border-radius: 4px;
+.build-header {
+  position: relative;
+  padding-right: 40px;
 
-    .title {
-      margin-top: 0;
-      color: #666;
-      line-height: 1.5;
-    }
-    .attr-name {
-      color: #777;
-    }
+  @media (min-width: $screen-sm-min) {
+    padding-right: 0;
   }
 
-  .alert-disabled {
-    background: $background-color;
+  a {
+    color: $gl-gray;
 
-    a {
-      color: #3084bb !important;
+    &:hover {
+      color: $gl-link-color;
+      text-decoration: none;
     }
   }
+
+  code {
+    color: $code-color;
+  }
+
+  .avatar {
+    float: none;
+    margin-right: 2px;
+    margin-left: 2px;
+  }
 }
 
 table.builds {
-
   .build-link {
     a {
       color: $gl-dark-link-color;
     }
   }
 }
+
+.build-trace {
+  background: $ci-output-bg;
+  color: $ci-text-color;
+  white-space: pre;
+  overflow-x: auto;
+  font-size: 12px;
+
+  .fa-refresh {
+    font-size: 24px;
+  }
+
+  .bash {
+    display: block;
+  }
+}
+
+.right-sidebar.build-sidebar {
+  padding-top: $gl-padding;
+  padding-bottom: $gl-padding;
+
+  &.right-sidebar-collapsed {
+    display: none;
+  }
+
+  .block {
+    width: 100%;
+  }
+
+  .build-sidebar-header {
+    padding-top: 0;
+
+    .gutter-toggle {
+      margin-top: 0;
+    }
+  }
+}
+
+.build-detail-row {
+  margin-bottom: 5px;
+}
+
+.build-light-text {
+  color: $gl-placeholder-color;
+}
+
+.build-gutter-toggle {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  margin-top: -17px;
+}
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 787c387379e..ea453ce356a 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -29,7 +29,7 @@
   }
 }
 
-.issuable-sidebar {
+.right-sidebar {
   a {
     color: inherit;
   }
@@ -74,6 +74,10 @@
     }
   }
 
+  .block-first {
+    padding-top: 0;
+  }
+
   .title {
     color: $gl-text-color;
     margin-bottom: 10px;
diff --git a/app/assets/stylesheets/pages/xterm.scss b/app/assets/stylesheets/pages/xterm.scss
index 3f28e402929..8d855ce99b0 100644
--- a/app/assets/stylesheets/pages/xterm.scss
+++ b/app/assets/stylesheets/pages/xterm.scss
@@ -11,18 +11,15 @@
   $magenta: #cd00cd;
   $cyan: #00cdcd;
   $white: #e5e5e5;
-  $l-black: #7f7f7f;
-  $l-red: #f00;
-  $l-green: #0f0;
-  $l-yellow: #ff0;
-  $l-blue: #5c5cff;
-  $l-magenta: #f0f;
-  $l-cyan: #0ff;
-  $l-white: #fff;
+  $l-black: #373b41;
+  $l-red: #c66;
+  $l-green: #b5bd68;
+  $l-yellow: #f0c674;
+  $l-blue: #81a2be;
+  $l-magenta: #b294bb;
+  $l-cyan: #8abeb7;
+  $l-white: $ci-text-color;
 
-  .term-bold {
-    font-weight: bold;
-  }
   .term-italic {
     font-style: italic;
   }