Use GitLab UI when render CI

app/assets/javascripts/ci/application.js.coffee

@@ -10,20 +10,10 @@
 # WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
 # GO AFTER THE REQUIRES BELOW.
 #
-#= require jquery
-#= require bootstrap
-#= require jquery_ujs
-#= require turbolinks
-#= require jquery.turbolinks
-#= require jquery.endless-scroll
 #= require pager
-#= require nprogress
-#= require nprogress-turbolinks
 #= require jquery_nested_form
 #= require_tree .
 #
-#
-
 $(document).on 'click', '.edit-runner-link', (event) ->
   event.preventDefault()

app/assets/stylesheets/application.scss

@@ -61,3 +61,9 @@
  * Styles for JS behaviors.
  */
 @import "behaviors.scss";
+
+/**
+ * CI specific styles:
+ */
+@import "ci/**/*";
+

app/assets/stylesheets/ci/application.scss

-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the top of the
- * compiled file, but it's generally better to create a new file per style scope.
- *
- *= require_self
- */
-
-@import "../base/fonts";
-@import "../base/variables";
-@import "../base/mixins";
-@import "../base/layout";
-@import "../base/gl_variables";
-@import "../base/gl_bootstrap";
-
-/**
- * Customized Twitter bootstrap
- */
-@import '../base/gl_variables';
-@import '../base/gl_bootstrap';
-
-
-/**
- * Font icons
- *
- */
-@import "font-awesome";
-
-/**
- * Generic css (forms, nav etc):
- */
-@import "../generic/**/*";
-
-/**
- * Page specific styles (issues, projects etc):
- */
-
-@import "xterm";
-@import "sections/*";
-
-/*
- * NProgress
- */
-$nprogress-color: #9BC;
-@import 'nprogress';
-@import 'nprogress-bootstrap';
-
-body {
-  padding-top: 0 !important;
-
-  a {
-    color: #3084bb;
-  }
-}

app/assets/stylesheets/ci/builds.scss

+.ci-body {
+  pre.trace {
+    background: #111111;
+    color: #fff;
+    font-family: $monospace_font;
+    white-space: pre;
+    white-space: pre-wrap;       /* css-3 */
+    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+    white-space: -pre-wrap;      /* Opera 4-6 */
+    white-space: -o-pre-wrap;    /* Opera 7 */
+    word-wrap: break-word;       /* Internet Explorer 5.5+ */
+    overflow: auto;
+    overflow-y: hidden;
+    font-size: 12px;
+
+    .fa-refresh {
+      font-size: 24px;
+      margin-left: 20px;
+    }
+  }
+
+  .autoscroll-container {
+    position: fixed;
+    bottom: 10px;
+    right: 20px;
+    z-index: 100;
+  }
+
+  .scroll-controls {
+    position: fixed;
+    bottom: 10px;
+    left: 250px;
+    z-index: 100;
+
+    a {
+      display: block;
+      margin-bottom: 5px;
+    }
+  }
+
+  .page-sidebar-collapsed {
+    .scroll-controls {
+      left: 70px;
+    }
+  }
+
+  .build-widget {
+    padding: 10px;
+    background: $background-color;
+    margin-bottom: 20px;
+    border-radius: 4px;
+
+    .title {
+      margin-top: 0;
+      color: #666;
+      line-height: 1.5;
+    }
+    .attr-name {
+      color: #777;
+    }
+  }
+
+  .alert-disabled {
+    background: $background-color;
+
+    a {
+      color: #3084bb !important;
+    }
+  }
+}

app/assets/stylesheets/ci/lint.scss

+.ci-body {
+  .incorrect-syntax{
+    font-size: 19px;
+    color: red;
+  }
+  .correct-syntax{
+    font-size: 19px;
+    color: #47a447;
+  }
+}

app/assets/stylesheets/ci/projects.scss

+.ci-body {
+  .project-title {
+    margin: 0;
+    color: #444;
+    font-size: 20px;
+    line-height: 1.5;
+  }
+
+  .builds {
+    @extend .table;
+
+    .build {
+      &.alert{
+        margin-bottom: 6px;
+      }
+    }
+  }
+
+  .projects-table {
+    td {
+      vertical-align: middle !important;
+    }
+  }
+
+  .commit-info {
+    font-size: 14px;
+
+    .attr-name {
+      font-weight: 300;
+      color: #666;
+      margin-right: 5px;
+    }
+
+    pre.commit-message {
+      font-size: 14px;
+      background: none;
+      padding: 0;
+      margin: 0;
+      border: none;
+      margin: 20px 0;
+      border-bottom: 1px solid #EEE;
+      padding-bottom: 20px;
+      border-radius: 0;
+    }
+  }
+
+  .loading{
+    font-size: 20px;
+  }
+}

app/assets/stylesheets/ci/runners.scss

+.ci-body {
+  .runner-state {
+    padding: 6px 12px;
+    margin-right: 10px;
+    color: #FFF;
+
+    &.runner-state-shared {
+      background: #32b186;
+    }
+    &.runner-state-specific {
+      background: #3498db;
+    }
+  }
+
+  .runner-status-online {
+    color: green;
+  }
+
+  .runner-status-offline {
+    color: gray;
+  }
+
+  .runner-status-paused {
+    color: red;
+  }
+
+  .runner {
+    .btn {
+      padding: 1px 6px;
+    }
+
+    h4 {
+      font-weight: normal;
+    }
+  }
+}

app/assets/stylesheets/ci/sections/builds.scss

-pre.trace {
-  background: #111111;
-  color: #fff;
-  font-family: $monospace_font;
-  white-space: pre;
-  white-space: pre-wrap;       /* css-3 */
-  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-  white-space: -pre-wrap;      /* Opera 4-6 */
-  white-space: -o-pre-wrap;    /* Opera 7 */
-  word-wrap: break-word;       /* Internet Explorer 5.5+ */
-  overflow: auto;
-  overflow-y: hidden;
-  font-size: 12px;
-
-  .fa-refresh {
-    font-size: 24px;
-    margin-left: 20px;
-  }
-}
-
-.autoscroll-container {
-  position: fixed;
-  bottom: 10px;
-  right: 20px;
-  z-index: 100;
-}
-
-.scroll-controls {
-  position: fixed;
-  bottom: 10px;
-  left: 20px;
-  z-index: 100;
-
-  a {
-    display: block;
-    margin-bottom: 5px;
-  }
-}
-
-.build-widget {
-  padding: 10px;
-  background: #f4f4f4;
-  margin-bottom: 20px;
-  border-radius: 4px;
-
-  .title {
-    margin-top: 0;
-    color: #666;
-    line-height: 1.5;
-  }
-  .attr-name {
-    color: #777;
-  }
-}
-
-.alert-disabled {
-  background: #EEE;
-
-  a {
-    color: #3084bb !important;
-  }
-}

app/assets/stylesheets/ci/sections/lint.scss

-.incorrect-syntax{
-  font-size: 19px;
-  color: red;
-}
-.correct-syntax{
-  font-size: 19px;
-  color: #47a447;
-}
\ No newline at end of file

app/assets/stylesheets/ci/sections/login.scss

-.login-block {
-  padding: 15px;
-  margin: 0 auto;
-  text-align: center;
-
-  p {
-    font-size: 15px;
-  }
-
-  .btn-login {
-    padding: 18px 32px;
-  }
-}

app/assets/stylesheets/ci/sections/navbar.scss

-.navbar-static-top {
-  margin-bottom: 20px;
-}
-
-.navbar-ci {
-  background: #224466;
-
-  .navbar-brand {
-    color: #fff;
-
-    &:hover {
-      color: #fff;
-    }
-  }
-  .brand,
-  .nav > li > a {
-    color: #fff;
-
-    &:hover, &:focus, &:active {
-      background: none;
-    }
-  }
-
-  .profile-holder {
-    position: relative;
-
-    img {
-      position: absolute;
-      top: -8px;
-      width: 32px;
-      @include border-radius(32px);
-    }
-
-    span {
-      margin-left: 42px;
-    }
-  }
-
-  .btn-login {
-    padding: 7px 22px;
-    margin-top: 7px;
-    &:hover, &:active, &:focus {
-      background: #018865 !important;
-    }
-  }
-}
-
-.turbolink-spinner {
-  position: absolute;
-  top: 11px;
-  left: 50%;
-  color: #FFF;
-  font-size: 20px;
-}

app/assets/stylesheets/ci/sections/projects.scss

-.project-title {
-  margin: 0;
-  color: #444;
-  font-size: 20px;
-  line-height: 1.5;
-}
-
-.builds {
-  @extend .table;
-
-  .build {
-    &.alert{
-      margin-bottom: 6px;
-    }
-  }
-}
-
-.projects-table {
-  td {
-    vertical-align: middle !important;
-  }
-}
-
-.commit-info {
-  font-size: 14px;
-
-  .attr-name {
-    font-weight: 300;
-    color: #666;
-    margin-right: 5px;
-  }
-
-  pre.commit-message {
-    font-size: 14px;
-    background: none;
-    padding: 0;
-    margin: 0;
-    border: none;
-    margin: 20px 0;
-    border-bottom: 1px solid #EEE;
-    padding-bottom: 20px;
-    border-radius: 0;
-  }
-}
-
-.search{
-  width: 300px;
-
-  .search-input{
-    height: 35px;
-  }
-
-  form{
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-}
-
-.loading{
-  font-size: 20px;
-}

app/assets/stylesheets/ci/sections/runners.scss

-.runner-state {
-  padding: 6px 12px;
-  margin-right: 10px;
-  color: #FFF;
-
-  &.runner-state-shared {
-    background: #32b186;
-  }
-  &.runner-state-specific {
-    background: #3498db;
-  }
-}
-
-.runner-status-online {
-  color: green;
-}
-
-.runner-status-offline {
-  color: gray;
-}
-
-.runner-status-paused {
-  color: red;
-}
-
-.runner {
-  .btn {
-    padding: 1px 6px;
-  }
-
-  h4 {
-    font-weight: normal;
-  }
-}

app/assets/stylesheets/ci/sections/setup.scss

-.welcome-block {
-  margin-top: 50px;
-  color: #555;
-  font-size: 16px;
-  line-height: 1.5;
-
-  h1, h2, h3 {
-    font-weight: bold;
-    margin-bottom: 20px;
-  }
-}

app/controllers/ci/builds_controller.rb

@@ -7,6 +7,7 @@ module Ci
     before_filter :authorize_manage_project!, except: [:status, :show, :retry, :cancel]
     before_filter :authorize_manage_builds!, only: [:retry, :cancel]
     before_filter :build, except: [:show]
+    layout 'ci/project'
     def show
       if params[:id] =~ /\A\d+\Z/

app/controllers/ci/commits_controller.rb

@@ -6,6 +6,7 @@ module Ci
     before_filter :authorize_access_project!, except: [:status, :show, :cancel]
     before_filter :authorize_manage_builds!, only: [:cancel]
     before_filter :commit, only: :show
+    layout 'ci/project'
     def show
       @builds = @commit.builds

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

 %h4.page-title
-  = link_to ci_project_path(@project)
+  = link_to @project.name, ci_project_path(@project)
   @
   = @commit.short_sha

app/views/ci/commits/show.html.haml

@@ -63,7 +63,7 @@
       %i.fa.fa-time
       #{time_interval_in_words @commit.duration}
-%table.builds
+%table.table.builds
   %thead
     %tr
       %th Status
@@ -81,7 +81,7 @@
   %h3
     Retried builds
-  %table.builds
+  %table.table.builds
     %thead
       %tr
         %th Status

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

@@ -16,7 +16,8 @@
     %li{class: 'active'}
       = link_to @ref, ci_project_path(@project, ref: @ref)
-
+  %li.pull-right
+    = link_to 'View on GitLab', @project.gitlab_url, no_turbolink.merge( class: 'btn btn-sm' )
 - if @ref
   %p
@@ -37,7 +38,7 @@
-%table.builds
+%table.table.builds
   %thead
     %tr
       %th Status