Merge branch '18058-sub-nav' into 'master'

Sub navigation

## What does this MR do?
Styles sub nav   
cc @dzaporozhets  @skyruler @jschatz1 

## What are the relevant issue numbers?
#18058 and #17983 

## Screenshots (if relevant)
![Screen_Shot_2016-06-03_at_12.10.26_PM](/uploads/8b948c32699a93ab0a390bda31e0e411/Screen_Shot_2016-06-03_at_12.10.26_PM.png)
![Screen_Shot_2016-06-03_at_12.10.34_PM](/uploads/241115c35d0618f3de739be9a670416d/Screen_Shot_2016-06-03_at_12.10.34_PM.png)

See merge request !4468

15 files changed, 345 insertions, 266 deletions

diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 6981f834d30..fab96404a6c 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -61,6 +61,11 @@
     margin-bottom: -$gl-padding;
   }
 
+  &.content-component-block {
+    padding: 11px 0;
+    background-color: $white-light;
+  }
+
   .title {
     color: $gl-text-color;
   }
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 7eb7a8e4544..a811778df70 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -41,8 +41,7 @@
 
     a {
       display: inline-block;
-      padding: 14px;
-      padding-top: $gl-padding;
+      padding: $gl-btn-padding;
       padding-bottom: 11px;
       margin-bottom: -1px;
       font-size: 15px;
@@ -67,6 +66,27 @@
       color: #78a;
     }
   }
+
+  &.sub-nav {
+    background-color: $background-color;
+
+    .container-fluid {
+      background-color: $background-color;
+    }
+
+    li {
+
+      a {
+        margin: 0;
+        padding: 11px 10px 9px;
+      }
+
+      &.active a {
+        border-bottom: none;
+        color: $link-underline-blue;
+      }
+    }
+  }
 }
 
 .top-area {
@@ -81,6 +101,10 @@
     width: 50%;
     line-height: 28px;
 
+    &.wiki-page {
+      padding: 16px 10px 11px;
+    }
+
     /* Small devices (phones, tablets, 768px and lower) */
     @media (max-width: $screen-sm-min) {
       width: 100%;
@@ -104,6 +128,10 @@
     margin-bottom: 0;
     border-bottom: none;
 
+    li a {
+      padding: 16px 10px 11px;
+    }
+
     /* Small devices (phones, tablets, 768px and lower) */
     @media (max-width: $screen-sm-max) {
       width: 100%;
@@ -309,8 +337,8 @@
   }
 
   .nav-control {
-    .fade-right {
 
+    .fade-right {
       @media (min-width: $screen-xs-max) {
         right: 67px;
       }
@@ -321,6 +349,24 @@
   }
 }
 
+.scrolling-tabs-container {
+  position: relative;
+
+  .nav-links {
+    @include scrolling-links();
+
+    .fade-right {
+      @include fade(left, rgba(255, 255, 255, 0.4), $background-color);
+      right: 0;
+    }
+
+    .fade-left {
+      @include fade(right, rgba(255, 255, 255, 0.4), $background-color);
+      left: 0;
+    }
+  }
+}
+
 .nav-block {
   position: relative;
 
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index edef336481d..ad78eb65769 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -489,9 +489,11 @@ pre.light-well {
   margin: 0;
 }
 
-.project-show-activity {
-  .activity-filter-block {
-    margin-top: -1px;
+
+.activity-filter-block {
+  .controls {
+    padding-bottom: 10px;
+    border-bottom: 1px solid $border-color;
   }
 }
 
diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml
index 08148b1a18b..0d59c3884cd 100644
--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -1,32 +1,35 @@
+- @no_container = true
 - page_title "Branches"
 = render "projects/commits/head"
-.row-content-block
-  .pull-right
-    - if can? current_user, :push_code, @project
-      = link_to new_namespace_project_branch_path(@project.namespace, @project), class: 'btn btn-create' do
-        = icon('plus')
-        New branch
-       
-    .dropdown.inline
-      %button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
-        %span.light
-        - if @sort.present?
-          = @sort.humanize
-        - else
-          Name
-        %b.caret
-      %ul.dropdown-menu.dropdown-menu-align-right
-        %li
-          = link_to namespace_project_branches_path(sort: nil) do
+
+%div{ class: (container_class) }
+  .row-content-block.second-block.content-component-block
+    .pull-right
+      - if can? current_user, :push_code, @project
+        = link_to new_namespace_project_branch_path(@project.namespace, @project), class: 'btn btn-create' do
+          = icon('plus')
+          New branch
+         
+      .dropdown.inline
+        %button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
+          %span.light
+          - if @sort.present?
+            = @sort.humanize
+          - else
             Name
-          = link_to namespace_project_branches_path(sort: 'recently_updated') do
-            = sort_title_recently_updated
-          = link_to namespace_project_branches_path(sort: 'last_updated') do
-            = sort_title_oldest_updated
-  .oneline
-    Protected branches can be managed in project settings
-- unless @branches.empty?
-  %ul.content-list.all-branches
-    - @branches.each do |branch|
-      = render "projects/branches/branch", branch: branch
-  = paginate @branches, theme: 'gitlab'
+          %b.caret
+        %ul.dropdown-menu.dropdown-menu-align-right
+          %li
+            = link_to namespace_project_branches_path(sort: nil) do
+              Name
+            = link_to namespace_project_branches_path(sort: 'recently_updated') do
+              = sort_title_recently_updated
+            = link_to namespace_project_branches_path(sort: 'last_updated') do
+              = sort_title_oldest_updated
+    .oneline
+      Protected branches can be managed in project settings
+  - unless @branches.empty?
+    %ul.content-list.all-branches
+      - @branches.each do |branch|
+        = render "projects/branches/branch", branch: branch
+    = paginate @branches, theme: 'gitlab'
diff --git a/app/views/projects/builds/index.html.haml b/app/views/projects/builds/index.html.haml
index 818d5d28f04..55d2ac89ebc 100644
--- a/app/views/projects/builds/index.html.haml
+++ b/app/views/projects/builds/index.html.haml
@@ -1,62 +1,64 @@
+- @no_container = true
 - page_title "Builds"
 = render "projects/pipelines/head"
 
-.top-area
-  %ul.nav-links
-    %li{class: ('active' if @scope.nil?)}
-      = link_to project_builds_path(@project) do
-        All
-        %span.badge.js-totalbuilds-count
-          = number_with_delimiter(@all_builds.count(:id))
-
-
-    %li{class: ('active' if @scope == 'running')}
-      = link_to project_builds_path(@project, scope: :running) do
-        Running
-        %span.badge.js-running-count
-          = number_with_delimiter(@all_builds.running_or_pending.count(:id))
-
-    %li{class: ('active' if @scope == 'finished')}
-      = link_to project_builds_path(@project, scope: :finished) do
-        Finished
-        %span.badge.js-running-count
-          = number_with_delimiter(@all_builds.finished.count(:id))
-
-  .nav-controls
-    - if can?(current_user, :update_build, @project)
-      - if @all_builds.running_or_pending.any?
-        = link_to 'Cancel running', cancel_all_namespace_project_builds_path(@project.namespace, @project),
-          data: { confirm: 'Are you sure?' }, class: 'btn btn-danger', method: :post
-
-      - unless @repository.gitlab_ci_yml
-        = link_to 'Get started with Builds', help_page_path('ci/quick_start', 'README'), class: 'btn btn-info'
-
-      = link_to ci_lint_path, class: 'btn btn-default' do
-        = icon('wrench')
-        %span CI Lint
-
-%ul.content-list
-  - if @builds.blank?
-    %li
-      .nothing-here-block No builds to show
-  - else
-    .table-holder
-      %table.table.builds
-        %thead
-          %tr
-            %th Status
-            %th Build ID
-            %th Commit
-            %th Ref
-            %th Stage
-            %th Name
-            %th Tags
-            %th Duration
-            %th Finished at
-            - if @project.build_coverage_enabled?
-              %th Coverage
-            %th
-
-        = render @builds, commit_sha: true, ref: true, stage: true, allow_retry: true, coverage: @project.build_coverage_enabled?
-
-    = paginate @builds, theme: 'gitlab'
+%div{ class: (container_class) }
+  .top-area
+    %ul.nav-links
+      %li{class: ('active' if @scope.nil?)}
+        = link_to project_builds_path(@project) do
+          All
+          %span.badge.js-totalbuilds-count
+            = number_with_delimiter(@all_builds.count(:id))
+
+
+      %li{class: ('active' if @scope == 'running')}
+        = link_to project_builds_path(@project, scope: :running) do
+          Running
+          %span.badge.js-running-count
+            = number_with_delimiter(@all_builds.running_or_pending.count(:id))
+
+      %li{class: ('active' if @scope == 'finished')}
+        = link_to project_builds_path(@project, scope: :finished) do
+          Finished
+          %span.badge.js-running-count
+            = number_with_delimiter(@all_builds.finished.count(:id))
+
+    .nav-controls
+      - if can?(current_user, :update_build, @project)
+        - if @all_builds.running_or_pending.any?
+          = link_to 'Cancel running', cancel_all_namespace_project_builds_path(@project.namespace, @project),
+            data: { confirm: 'Are you sure?' }, class: 'btn btn-danger', method: :post
+
+        - unless @repository.gitlab_ci_yml
+          = link_to 'Get started with Builds', help_page_path('ci/quick_start', 'README'), class: 'btn btn-info'
+
+        = link_to ci_lint_path, class: 'btn btn-default' do
+          = icon('wrench')
+          %span CI Lint
+
+  %ul.content-list
+    - if @builds.blank?
+      %li
+        .nothing-here-block No builds to show
+    - else
+      .table-holder
+        %table.table.builds
+          %thead
+            %tr
+              %th Status
+              %th Build ID
+              %th Commit
+              %th Ref
+              %th Stage
+              %th Name
+              %th Tags
+              %th Duration
+              %th Finished at
+              - if @project.build_coverage_enabled?
+                %th Coverage
+              %th
+
+          = render @builds, commit_sha: true, ref: true, stage: true, allow_retry: true, coverage: @project.build_coverage_enabled?
+
+      = paginate @builds, theme: 'gitlab'
diff --git a/app/views/projects/commits/_head.html.haml b/app/views/projects/commits/_head.html.haml
index 1c136133ab0..a72e8ba73ad 100644
--- a/app/views/projects/commits/_head.html.haml
+++ b/app/views/projects/commits/_head.html.haml
@@ -1,24 +1,28 @@
-%ul.nav-links
-  = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file)) do
-    = link_to project_files_path(@project) do
-      Files
+.scrolling-tabs-container
+  %ul.nav-links.sub-nav.scrolling-tabs
+    %div{ class: (container_class) }
+      .fade-left
+      = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file)) do
+        = link_to project_files_path(@project) do
+          Files
 
-  = nav_link(controller: [:commit, :commits]) do
-    = link_to namespace_project_commits_path(@project.namespace, @project, current_ref) do
-      Commits
+      = nav_link(controller: [:commit, :commits]) do
+        = link_to namespace_project_commits_path(@project.namespace, @project, current_ref) do
+          Commits
 
-  = nav_link(controller: %w(network)) do
-    = link_to namespace_project_network_path(@project.namespace, @project, current_ref) do
-      Network
+      = nav_link(controller: %w(network)) do
+        = link_to namespace_project_network_path(@project.namespace, @project, current_ref) do
+          Network
 
-  = nav_link(controller: :compare) do
-    = link_to namespace_project_compare_index_path(@project.namespace, @project, from: @repository.root_ref, to: current_ref) do
-      Compare
+      = nav_link(controller: :compare) do
+        = link_to namespace_project_compare_index_path(@project.namespace, @project, from: @repository.root_ref, to: current_ref) do
+          Compare
 
-  = nav_link(html_options: {class: branches_tab_class}) do
-    = link_to namespace_project_branches_path(@project.namespace, @project) do
-      Branches
+      = nav_link(html_options: {class: branches_tab_class}) do
+        = link_to namespace_project_branches_path(@project.namespace, @project) do
+          Branches
 
-  = nav_link(controller: [:tags, :releases]) do
-    = link_to namespace_project_tags_path(@project.namespace, @project) do
-      Tags
+      = nav_link(controller: [:tags, :releases]) do
+        = link_to namespace_project_tags_path(@project.namespace, @project) do
+          Tags
+      .fade-right
diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml
index 2c21923ed4f..76ba0bea36d 100644
--- a/app/views/projects/commits/show.html.haml
+++ b/app/views/projects/commits/show.html.haml
@@ -1,3 +1,5 @@
+- @no_container = true
+
 - page_title "Commits", @ref
 = content_for :meta_tags do
   - if current_user
@@ -5,37 +7,38 @@
 
 = render "head"
 
-.row-content-block.second-block
-  .tree-ref-holder
-    = render 'shared/ref_switcher', destination: 'commits'
+%div{ class: (container_class) }
+  .row-content-block.second-block.content-component-block
+    .tree-ref-holder
+      = render 'shared/ref_switcher', destination: 'commits'
+
+    .block-controls.hidden-xs.hidden-sm
+      - if @merge_request.present?
+        .control
+          = link_to "View Open Merge Request", namespace_project_merge_request_path(@project.namespace, @project, @merge_request), class: 'btn'
+      - elsif create_mr_button?(@repository.root_ref, @ref)
+        .control
+          = link_to create_mr_path(@repository.root_ref, @ref), class: 'btn btn-success' do
+            = icon('plus')
+            Create Merge Request
 
-  .block-controls.hidden-xs.hidden-sm
-    - if @merge_request.present?
-      .control
-        = link_to "View Open Merge Request", namespace_project_merge_request_path(@project.namespace, @project, @merge_request), class: 'btn'
-    - elsif create_mr_button?(@repository.root_ref, @ref)
       .control
-        = link_to create_mr_path(@repository.root_ref, @ref), class: 'btn btn-success' do
-          = icon('plus')
-          Create Merge Request
+        = form_tag(namespace_project_commits_path(@project.namespace, @project, @id), method: :get, class: 'pull-left commits-search-form') do
+          = search_field_tag :search, params[:search], { placeholder: 'Filter by commit message', id: 'commits-search', class: 'form-control search-text-input', spellcheck: false }
 
-    .control
-      = form_tag(namespace_project_commits_path(@project.namespace, @project, @id), method: :get, class: 'pull-left commits-search-form') do
-        = search_field_tag :search, params[:search], { placeholder: 'Filter by commit message', id: 'commits-search', class: 'form-control search-text-input', spellcheck: false }
-
-    - if current_user && current_user.private_token
-      .control
-        = link_to namespace_project_commits_path(@project.namespace, @project, @ref, {format: :atom, private_token: current_user.private_token}), title: "Commits Feed", class: 'btn' do
-          = icon("rss")
+      - if current_user && current_user.private_token
+        .control
+          = link_to namespace_project_commits_path(@project.namespace, @project, @ref, {format: :atom, private_token: current_user.private_token}), title: "Commits Feed", class: 'btn' do
+            = icon("rss")
 
 
-  %ul.breadcrumb.repo-breadcrumb
-    = commits_breadcrumbs
+    %ul.breadcrumb.repo-breadcrumb
+      = commits_breadcrumbs
 
-%div{id: dom_id(@project)}
-  #commits-list.content_list= render "commits", project: @project
-.clear
-= spinner
+  %div{id: dom_id(@project)}
+    #commits-list.content_list= render "commits", project: @project
+  .clear
+  = spinner
 
 :javascript
   CommitsList.init(#{@limit});
diff --git a/app/views/projects/compare/index.html.haml b/app/views/projects/compare/index.html.haml
index 0b8ed23b305..c322942aeba 100644
--- a/app/views/projects/compare/index.html.haml
+++ b/app/views/projects/compare/index.html.haml
@@ -1,16 +1,18 @@
+- @no_container = true
 - page_title "Compare"
 = render "projects/commits/head"
 
-.row-content-block
-  Compare branches, tags or commit ranges.
-  %br
-  Fill input field with commit id like
-  %code.label-branch 4eedf23
-  or branch/tag name like
-  %code.label-branch master
-  and press compare button for the commits list and a code diff.
-  %br
-  Changes are shown <b>from</b> the version in the first field <b>to</b> the version in the second field.
+%div{ class: (container_class) }
+  .row-content-block.second-block.content-component-block
+    Compare branches, tags or commit ranges.
+    %br
+    Fill input field with commit id like
+    %code.label-branch 4eedf23
+    or branch/tag name like
+    %code.label-branch master
+    and press compare button for the commits list and a code diff.
+    %br
+    Changes are shown <b>from</b> the version in the first field <b>to</b> the version in the second field.
 
-.prepend-top-20
-  = render "form"
+  .prepend-top-20
+    = render "form"
diff --git a/app/views/projects/network/_head.html.haml b/app/views/projects/network/_head.html.haml
index c609c505def..86295a3d011 100644
--- a/app/views/projects/network/_head.html.haml
+++ b/app/views/projects/network/_head.html.haml
@@ -1,6 +1,9 @@
-.row-content-block.append-bottom-default
-  .tree-ref-holder
-    = render partial: 'shared/ref_switcher', locals: {destination: 'graph'}
+- @no_container = true
 
-  .oneline
-    You can move around the graph by using the arrow keys.
+%div{ class: (container_class) }
+  .row-content-block.second-block.content-component-block
+    .tree-ref-holder
+      = render partial: 'shared/ref_switcher', locals: {destination: 'graph'}
+
+    .oneline
+      You can move around the graph by using the arrow keys.
diff --git a/app/views/projects/network/show.html.haml b/app/views/projects/network/show.html.haml
index 326180ebe4e..bf9baaea889 100644
--- a/app/views/projects/network/show.html.haml
+++ b/app/views/projects/network/show.html.haml
@@ -1,20 +1,21 @@
 - page_title "Network", @ref
 = render "projects/commits/head"
 = render "head"
-.project-network
-  .controls
-    = form_tag namespace_project_network_path(@project.namespace, @project, @id), method: :get, class: 'form-inline network-form' do |f|
-      = text_field_tag :extended_sha1, @options[:extended_sha1], placeholder: "Input an extended SHA1 syntax", class: 'search-input form-control input-mx-250 search-sha'
-      = button_tag class: 'btn btn-success' do
-        = icon('search')
-      .inline.prepend-left-20
-        .checkbox.light
-          = label_tag :filter_ref do
-            = check_box_tag :filter_ref, 1, @options[:filter_ref]
-            %span Begin with the selected commit
+%div{ class: (container_class) }
+  .project-network
+    .controls
+      = form_tag namespace_project_network_path(@project.namespace, @project, @id), method: :get, class: 'form-inline network-form' do |f|
+        = text_field_tag :extended_sha1, @options[:extended_sha1], placeholder: "Input an extended SHA1 syntax", class: 'search-input form-control input-mx-250 search-sha'
+        = button_tag class: 'btn btn-success' do
+          = icon('search')
+        .inline.prepend-left-20
+          .checkbox.light
+            = label_tag :filter_ref do
+              = check_box_tag :filter_ref, 1, @options[:filter_ref]
+              %span Begin with the selected commit
 
-  .network-graph
-    = spinner nil, true
+    .network-graph
+      = spinner nil, true
 
 :javascript
   network_graph = new Network({
diff --git a/app/views/projects/pipelines/_head.html.haml b/app/views/projects/pipelines/_head.html.haml
index d284694efb7..f278d4e0538 100644
--- a/app/views/projects/pipelines/_head.html.haml
+++ b/app/views/projects/pipelines/_head.html.haml
@@ -1,14 +1,15 @@
-%ul.nav-links
-  - if project_nav_tab? :pipelines
-    = nav_link(controller: :pipelines) do
-      = link_to project_pipelines_path(@project), title: 'Pipelines', class: 'shortcuts-pipelines' do
-        %span
-          Pipelines
-          %span.badge.count.ci_counter= number_with_delimiter(@project.pipelines.running_or_pending.count)
+%ul.nav-links.sub-nav
+  %div{ class: (container_class) }
+    - if project_nav_tab? :pipelines
+      = nav_link(controller: :pipelines) do
+        = link_to project_pipelines_path(@project), title: 'Pipelines', class: 'shortcuts-pipelines' do
+          %span
+            Pipelines
+            %span.badge.count.ci_counter= number_with_delimiter(@project.pipelines.running_or_pending.count)
 
-  - if project_nav_tab? :builds
-    = nav_link(controller: %w(builds)) do
-      = link_to project_builds_path(@project), title: 'Builds', class: 'shortcuts-builds' do
-        %span
-          Builds
-          %span.badge.count.builds_counter= number_with_delimiter(@project.running_or_pending_build_count)
+    - if project_nav_tab? :builds
+      = nav_link(controller: %w(builds)) do
+        = link_to project_builds_path(@project), title: 'Builds', class: 'shortcuts-builds' do
+          %span
+            Builds
+            %span.badge.count.builds_counter= number_with_delimiter(@project.running_or_pending_build_count)
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index 453767920b5..a78450e09d4 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -1,58 +1,60 @@
+- @no_container = true
 - page_title "Pipelines"
 = render "projects/pipelines/head"
 
-.top-area
-  %ul.nav-links
-    %li{class: ('active' if @scope.nil?)}
-      = link_to project_pipelines_path(@project) do
-        All
-        %span.badge.js-totalbuilds-count
-          = number_with_delimiter(@pipelines_count)
-
-    %li{class: ('active' if @scope == 'running')}
-      = link_to project_pipelines_path(@project, scope: :running) do
-        Running
-        %span.badge.js-running-count
-          = number_with_delimiter(@running_or_pending_count)
-
-    %li{class: ('active' if @scope == 'branches')}
-      = link_to project_pipelines_path(@project, scope: :branches) do
-        Branches
-
-    %li{class: ('active' if @scope == 'tags')}
-      = link_to project_pipelines_path(@project, scope: :tags) do
-        Tags
-
-  .nav-controls
-    - if can? current_user, :create_pipeline, @project
-      = link_to new_namespace_project_pipeline_path(@project.namespace, @project), class: 'btn btn-create' do
-        = icon('plus')
-        New pipeline
-
-      - unless @repository.gitlab_ci_yml
-        = link_to 'Get started with Pipelines', help_page_path('ci/quick_start', 'README'), class: 'btn btn-info'
-
-      = link_to ci_lint_path, class: 'btn btn-default' do
-        = icon('wrench')
-        %span CI Lint
-
-%ul.content-list.pipelines
-  - stages = @pipelines.stages
-  - if @pipelines.blank?
-    %li
-      .nothing-here-block No pipelines to show
-  - else
-    .table-holder
-      %table.table.builds
-        %tbody
-          %th ID
-          %th Commit
-          - stages.each do |stage|
-            %th.stage
-              %span.has-tooltip{ title: "#{stage.titleize}" }
-                = stage.titleize.pluralize
-          %th Duration
-          %th
-        = render @pipelines, commit_sha: true, stage: true, allow_retry: true, stages: stages
-
-    = paginate @pipelines, theme: 'gitlab'
+%div{ class: (container_class) }
+  .top-area
+    %ul.nav-links
+      %li{class: ('active' if @scope.nil?)}
+        = link_to project_pipelines_path(@project) do
+          All
+          %span.badge.js-totalbuilds-count
+            = number_with_delimiter(@pipelines_count)
+
+      %li{class: ('active' if @scope == 'running')}
+        = link_to project_pipelines_path(@project, scope: :running) do
+          Running
+          %span.badge.js-running-count
+            = number_with_delimiter(@running_or_pending_count)
+
+      %li{class: ('active' if @scope == 'branches')}
+        = link_to project_pipelines_path(@project, scope: :branches) do
+          Branches
+
+      %li{class: ('active' if @scope == 'tags')}
+        = link_to project_pipelines_path(@project, scope: :tags) do
+          Tags
+
+    .nav-controls
+      - if can? current_user, :create_pipeline, @project
+        = link_to new_namespace_project_pipeline_path(@project.namespace, @project), class: 'btn btn-create' do
+          = icon('plus')
+          New pipeline
+
+        - unless @repository.gitlab_ci_yml
+          = link_to 'Get started with Pipelines', help_page_path('ci/quick_start', 'README'), class: 'btn btn-info'
+
+        = link_to ci_lint_path, class: 'btn btn-default' do
+          = icon('wrench')
+          %span CI Lint
+
+  %ul.content-list.pipelines
+    - stages = @pipelines.stages
+    - if @pipelines.blank?
+      %li
+        .nothing-here-block No pipelines to show
+    - else
+      .table-holder
+        %table.table.builds
+          %tbody
+            %th ID
+            %th Commit
+            - stages.each do |stage|
+              %th.stage
+                %span.has-tooltip{ title: "#{stage.titleize}" }
+                  = stage.titleize.pluralize
+            %th Duration
+            %th
+          = render @pipelines, commit_sha: true, stage: true, allow_retry: true, stages: stages
+
+      = paginate @pipelines, theme: 'gitlab'
diff --git a/app/views/projects/tags/index.html.haml b/app/views/projects/tags/index.html.haml
index 8f381663e6e..9ff805a8989 100644
--- a/app/views/projects/tags/index.html.haml
+++ b/app/views/projects/tags/index.html.haml
@@ -1,28 +1,30 @@
+- @no_container = true
 - page_title "Tags"
 = render "projects/commits/head"
 
-.row-content-block
-  - if can? current_user, :push_code, @project
-    .pull-right
-      = link_to new_namespace_project_tag_path(@project.namespace, @project), class: 'btn btn-create new-tag-btn' do
-        = icon('plus')
-        New tag
-  .oneline
-    Tags give the ability to mark specific points in history as being important
+%div{ class: (container_class) }
+  .row-content-block.second-block.content-component-block
+    - if can? current_user, :push_code, @project
+      .pull-right
+        = link_to new_namespace_project_tag_path(@project.namespace, @project), class: 'btn btn-create new-tag-btn' do
+          = icon('plus')
+          New tag
+    .oneline
+      Tags give the ability to mark specific points in history as being important
 
-.tags
-  - unless @tags.empty?
-    %ul.content-list
-      - @tags.each do |tag|
-        = render 'tag', tag: @repository.find_tag(tag)
+  .tags
+    - unless @tags.empty?
+      %ul.content-list
+        - @tags.each do |tag|
+          = render 'tag', tag: @repository.find_tag(tag)
 
-    = paginate @tags, theme: 'gitlab'
+      = paginate @tags, theme: 'gitlab'
 
-  - else
-    .nothing-here-block
-      Repository has no tags yet.
-      %br
-      %small
-        Use git tag command to add a new one:
+    - else
+      .nothing-here-block
+        Repository has no tags yet.
         %br
-        %span.monospace git tag -a v1.4 -m 'version 1.4'
+        %small
+          Use git tag command to add a new one:
+          %br
+          %span.monospace git tag -a v1.4 -m 'version 1.4'
diff --git a/app/views/projects/tree/show.html.haml b/app/views/projects/tree/show.html.haml
index 59f60c4687c..2abcfcdd7b2 100644
--- a/app/views/projects/tree/show.html.haml
+++ b/app/views/projects/tree/show.html.haml
@@ -1,3 +1,5 @@
+- @no_container = true
+
 - page_title @path.presence || "Files", @ref
 = content_for :meta_tags do
   - if current_user
@@ -5,13 +7,14 @@
 = render 'projects/last_push'
 = render "projects/commits/head"
 
-.tree-controls
-  = render 'projects/find_file_link'
-  - if can? current_user, :download_code, @project
-    = render 'projects/repositories/download_archive', ref: @ref, btn_class: 'hidden-xs hidden-sm btn-grouped', split_button: true
+%div{ class: (container_class) }
+  .tree-controls
+    = render 'projects/find_file_link'
+    - if can? current_user, :download_code, @project
+      = render 'projects/repositories/download_archive', ref: @ref, btn_class: 'hidden-xs hidden-sm btn-grouped', split_button: true
 
-#tree-holder.tree-holder.clearfix
-  .nav-block
-    = render 'projects/tree/tree_header', tree: @tree
+  #tree-holder.tree-holder.clearfix
+    .nav-block
+      = render 'projects/tree/tree_header', tree: @tree
 
-  = render 'projects/tree/tree_content', tree: @tree
+    = render 'projects/tree/tree_content', tree: @tree
diff --git a/app/views/projects/wikis/edit.html.haml b/app/views/projects/wikis/edit.html.haml
index aaa15dd3bbe..cbd69ee1a73 100644
--- a/app/views/projects/wikis/edit.html.haml
+++ b/app/views/projects/wikis/edit.html.haml
@@ -2,7 +2,7 @@
 = render 'nav'
 
 .top-area
-  .nav-text
+  .nav-text.wiki-page
     %strong
       - if @page.persisted?
         = link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)