Finish styling sub nav

11 files changed, 234 insertions, 211 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/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/show.html.haml b/app/views/projects/commits/show.html.haml
index 288a912f409..76ba0bea36d 100644
--- a/app/views/projects/commits/show.html.haml
+++ b/app/views/projects/commits/show.html.haml
@@ -8,7 +8,7 @@
 = render "head"
 
 %div{ class: (container_class) }
-  .row-content-block.second-block
+  .row-content-block.second-block.content-component-block
     .tree-ref-holder
       = render 'shared/ref_switcher', destination: 'commits'
 
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'