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

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;
   }

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;
 

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;
   }
 }
 

app/views/projects/branches/index.html.haml

+- @no_container = true
 - page_title "Branches"
 = render "projects/commits/head"
-.row-content-block
+
+%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
@@ -25,7 +28,7 @@
               = sort_title_oldest_updated
     .oneline
       Protected branches can be managed in project settings
-- unless @branches.empty?
+  - unless @branches.empty?
     %ul.content-list.all-branches
       - @branches.each do |branch|
         = render "projects/branches/branch", branch: branch

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

+- @no_container = true
 - page_title "Builds"
 = render "projects/pipelines/head"
 
-.top-area
+%div{ class: (container_class) }
+  .top-area
     %ul.nav-links
       %li{class: ('active' if @scope.nil?)}
         = link_to project_builds_path(@project) do
@@ -35,7 +37,7 @@
           = icon('wrench')
           %span CI Lint
 
-%ul.content-list
+  %ul.content-list
     - if @builds.blank?
       %li
         .nothing-here-block No builds to show

app/views/projects/commits/_head.html.haml

-%ul.nav-links
+.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
@@ -22,3 +25,4 @@
       = nav_link(controller: [:tags, :releases]) do
         = link_to namespace_project_tags_path(@project.namespace, @project) do
           Tags
+      .fade-right

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

+- @no_container = true
+
 - page_title "Commits", @ref
 = content_for :meta_tags do
   - if current_user
@@ -5,7 +7,8 @@
 
 = render "head"
 
-.row-content-block.second-block
+%div{ class: (container_class) }
+  .row-content-block.second-block.content-component-block
     .tree-ref-holder
       = render 'shared/ref_switcher', destination: 'commits'
 
@@ -32,10 +35,10 @@
     %ul.breadcrumb.repo-breadcrumb
       = commits_breadcrumbs
 
-%div{id: dom_id(@project)}
+  %div{id: dom_id(@project)}
     #commits-list.content_list= render "commits", project: @project
-.clear
-= spinner
+  .clear
+  = spinner
 
 :javascript
   CommitsList.init(#{@limit});

app/views/projects/compare/index.html.haml

+- @no_container = true
 - page_title "Compare"
 = render "projects/commits/head"
 
-.row-content-block
+%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
@@ -12,5 +14,5 @@
     %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
+  .prepend-top-20
     = render "form"

app/views/projects/network/_head.html.haml

-.row-content-block.append-bottom-default
+- @no_container = true
+
+%div{ class: (container_class) }
+  .row-content-block.second-block.content-component-block
     .tree-ref-holder
       = render partial: 'shared/ref_switcher', locals: {destination: 'graph'}
 

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

 - page_title "Network", @ref
 = render "projects/commits/head"
 = render "head"
-.project-network
+%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'

app/views/projects/pipelines/_head.html.haml

-%ul.nav-links
+%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

app/views/projects/pipelines/index.html.haml

+- @no_container = true
 - page_title "Pipelines"
 = render "projects/pipelines/head"
 
-.top-area
+%div{ class: (container_class) }
+  .top-area
     %ul.nav-links
       %li{class: ('active' if @scope.nil?)}
         = link_to project_pipelines_path(@project) do
@@ -36,7 +38,7 @@
           = icon('wrench')
           %span CI Lint
 
-%ul.content-list.pipelines
+  %ul.content-list.pipelines
     - stages = @pipelines.stages
     - if @pipelines.blank?
       %li

app/views/projects/tags/index.html.haml

+- @no_container = true
 - page_title "Tags"
 = render "projects/commits/head"
 
-.row-content-block
+%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
@@ -10,7 +12,7 @@
     .oneline
       Tags give the ability to mark specific points in history as being important
 
-.tags
+  .tags
     - unless @tags.empty?
       %ul.content-list
         - @tags.each do |tag|

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

+- @no_container = true
+
 - page_title @path.presence || "Files", @ref
 = content_for :meta_tags do
   - if current_user
@@ -5,12 +7,13 @@
 = render 'projects/last_push'
 = render "projects/commits/head"
 
-.tree-controls
+%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
+  #tree-holder.tree-holder.clearfix
     .nav-block
       = render 'projects/tree/tree_header', tree: @tree
 

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)