Merge branch '18844-missing-subnavs-on-some-pages' into 'master'

Added subnav to all views bar issuable views

## What does this MR do?

Adds subnav to all views apart from issue and MR views. The full list is available in screenshots below.

It also adds some JS to the builds page to simply handle the repositioning of the fixed position sidebar with the addition of the subnav.

## Are there points in the code the reviewer needs to double check?

## Why was this MR needed?

~UX and apparently ~regression .

## What are the relevant issue numbers?

Closes #18844.

## Screenshots (if relevant)

### Label

#### Edit

![Screen_Shot_2016-08-24_at_23.45.25](/uploads/3e5ded9e60f0eccc37672ab0a1423bfb/Screen_Shot_2016-08-24_at_23.45.25.png)

#### New

![Screen_Shot_2016-08-24_at_23.45.13](/uploads/767c6e97c91a5ded904f5b495950f5a8/Screen_Shot_2016-08-24_at_23.45.13.png)

### Milestone

#### Edit

![Screen_Shot_2016-08-24_at_23.45.37](/uploads/27562162415a6ae403e7117df009b208/Screen_Shot_2016-08-24_at_23.45.37.png)

#### New

![Screen_Shot_2016-08-24_at_23.45.43](/uploads/43c655b0a2af9a8da335a2efc31cb2df/Screen_Shot_2016-08-24_at_23.45.43.png)

#### Show

![Screen_Shot_2016-08-24_at_23.45.53](/uploads/68c3e0788c81f5897c7db11bb2b02a4c/Screen_Shot_2016-08-24_at_23.45.53.png)

### Commit

#### Show

![Screen_Shot_2016-08-26_at_14.15.20](/uploads/9f96e0587e4866fa95e28c224a185844/Screen_Shot_2016-08-26_at_14.15.20.png)

#### Builds

![Screen_Shot_2016-08-26_at_15.28.46](/uploads/9f0d8ababc8362874a3e2b5d877c7668/Screen_Shot_2016-08-26_at_15.28.46.png)

### Blob

#### Blame

![Screen_Shot_2016-08-26_at_14.18.03](/uploads/2999f2cd304e3b9be6530a52407eca59/Screen_Shot_2016-08-26_at_14.18.03.png)

#### Edit

![Screen_Shot_2016-08-26_at_14.20.32](/uploads/bb7b00bbe835228a8ec8b371e9364cb8/Screen_Shot_2016-08-26_at_14.20.32.png)

### Pipelines

#### Show

![Screen_Shot_2016-08-26_at_15.44.30](/uploads/ee84c51597ab04a07a6c953704280e7b/Screen_Shot_2016-08-26_at_15.44.30.png)

#### Show build

![Screen_Shot_2016-08-26_at_15.45.55](/uploads/dd78ef3dc083186095cdc84f41c80b21/Screen_Shot_2016-08-26_at_15.45.55.png)

#### Edit Envrionment

![Screen_Shot_2016-08-26_at_15.48.33](/uploads/4e9340e11eedeaeddebb708f02db3598/Screen_Shot_2016-08-26_at_15.48.33.png)

## Does this MR meet the acceptance criteria?

- [ ] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [ ] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [ ] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)
Closes #18844

See merge request !5998

app/assets/javascripts/build.js

@@ -15,18 +15,17 @@
       this.hideSidebar = bind(this.hideSidebar, this);
       this.toggleSidebar = bind(this.toggleSidebar, this);
       this.updateDropdown = bind(this.updateDropdown, this);
+      this.$document = $(document);
       clearInterval(Build.interval);
       // Init breakpoint checker
       this.bp = Breakpoints.get();
-      $('.js-build-sidebar').niceScroll();
+      this.initSidebar();
 
       this.populateJobs(this.build_stage);
       this.updateStageDropdownText(this.build_stage);
-      this.hideSidebar();
 
-      $(document).off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.toggleSidebar);
       $(window).off('resize.build').on('resize.build', this.hideSidebar);
-      $(document).off('click', '.stage-item').on('click', '.stage-item', this.updateDropdown);
+      this.$document.off('click', '.stage-item').on('click', '.stage-item', this.updateDropdown);
       $('#js-build-scroll > a').off('click').on('click', this.stepTrace);
       this.updateArtifactRemoveDate();
       if ($('#build-trace').length) {
@@ -62,6 +61,21 @@
       }
     }
 
+    Build.prototype.initSidebar = function() {
+      this.$sidebar = $('.js-build-sidebar');
+      this.sidebarTranslationLimits = {
+        min: $('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight()
+      }
+      this.sidebarTranslationLimits.max = this.sidebarTranslationLimits.min + $('.scrolling-tabs-container').outerHeight();
+      this.$sidebar.css({
+        top: this.sidebarTranslationLimits.max
+      });
+      this.$sidebar.niceScroll();
+      this.hideSidebar();
+      this.$document.off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.toggleSidebar);
+      this.$document.off('scroll.translateSidebar').on('scroll.translateSidebar', this.translateSidebar.bind(this));
+    };
+
     Build.prototype.getInitialBuildTrace = function() {
       var removeRefreshStatuses = ['success', 'failed', 'canceled', 'skipped']
 
@@ -129,15 +143,23 @@
 
     Build.prototype.toggleSidebar = function() {
       if (this.shouldHideSidebar()) {
-        return $('.js-build-sidebar').toggleClass('right-sidebar-expanded right-sidebar-collapsed');
+        return this.$sidebar.toggleClass('right-sidebar-expanded right-sidebar-collapsed');
       }
     };
 
+    Build.prototype.translateSidebar = function(e) {
+      var newPosition = this.sidebarTranslationLimits.max - document.body.scrollTop;
+      if (newPosition < this.sidebarTranslationLimits.min) newPosition = this.sidebarTranslationLimits.min;
+      this.$sidebar.css({
+        top: newPosition
+      });
+    };
+
     Build.prototype.hideSidebar = function() {
       if (this.shouldHideSidebar()) {
-        return $('.js-build-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
+        return this.$sidebar.removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
       } else {
-        return $('.js-build-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
+        return this.$sidebar.removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
       }
     };
 

app/assets/stylesheets/pages/builds.scss

@@ -233,3 +233,9 @@
   right: 0;
   margin-top: -17px;
 }
+
+@media (min-width: $screen-md-min) {
+  .sub-nav.build {
+    width: calc(100% + #{$gutter_width});
+  }
+}

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

+- @no_container = true
 - page_title "Blame", @blob.path, @ref
+= render "projects/commits/head"
 
-%h3.page-title Blame view
+%div{ class: container_class }
+  %h3.page-title Blame view
 
-#blob-content-holder.tree-holder
+  #blob-content-holder.tree-holder
     .file-holder
       .file-title
         = blob_icon @blob.mode, @blob.name

app/views/projects/blob/edit.html.haml

+- @no_container = true
 - page_title "Edit", @blob.path, @ref
 - content_for :page_specific_javascripts do
   = page_specific_javascript_tag('lib/ace.js')
   = page_specific_javascript_tag('blob_edit/blob_edit_bundle.js')
+= render "projects/commits/head"
 
-- if @conflict
+%div{ class: container_class }
+  - if @conflict
     .alert.alert-danger
       Someone edited the file the same time you did. Please check out
       = link_to "the file", namespace_project_blob_path(@project.namespace, @project, tree_join(@target_branch, @file_path)), target: "_blank"
       and make sure your changes will not unintentionally remove theirs.
 
-.file-editor
+  .file-editor
     %ul.nav-links.no-bottom.js-edit-mode
       %li.active
         = link_to '#editor' do

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

+- @no_container = true
 - page_title "#{@build.name} (##{@build.id})", "Builds"
 - trace_with_state = @build.trace_with_state
 - header_title project_title(@project, "Builds", project_builds_path(@project))
+= render "projects/pipelines/head", build_subnav: true
 
-.build-page
+%div{ class: container_class }
+  .build-page
     = render "header"
 
     - if @build.stuck?
@@ -44,9 +47,9 @@
 
       #down-build-trace
 
-= render "sidebar"
+  = render "sidebar"
 
-:javascript
+  :javascript
     new Build({
       page_url: "#{namespace_project_build_url(@project.namespace, @project, @build)}",
       build_url: "#{namespace_project_build_url(@project.namespace, @project, @build, :json)}",

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

+- @no_container = true
 - page_title "Builds", "#{@commit.title} (#{@commit.short_id})", "Commits"
+= render "projects/commits/head"
 
-.prepend-top-default
+%div{ class: container_class }
+  .prepend-top-default
     = render "commit_box"
 
-= render "ci_menu"
-= render "builds"
+  = render "ci_menu"
+  = render "builds"

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

+- @no_container = true
 - page_title        "#{@commit.title} (#{@commit.short_id})", "Commits"
 - page_description  @commit.description
+= render "projects/commits/head"
 
-.prepend-top-default
+%div{ class: container_class }
+  .prepend-top-default
     = render "commit_box"
-- if @commit.status
+  - if @commit.status
     = render "ci_menu"
-- else
+  - else
     %div.block-connector
-= render "projects/diffs/diffs", diffs: @diffs
-= render "projects/notes/notes_with_form"
-- if can_collaborate_with_project?
+  = render "projects/diffs/diffs", diffs: @diffs
+  = render "projects/notes/notes_with_form"
+  - if can_collaborate_with_project?
     - %w(revert cherry-pick).each do |type|
       = render "projects/commit/change", type: type, commit: @commit, title: @commit.title

app/views/projects/environments/edit.html.haml

+- @no_container = true
 - page_title "Edit", @environment.name, "Environments"
+= render "projects/pipelines/head"
 
-%h3.page-title
+%div{ class: container_class }
+  %h3.page-title
     Edit environment
-%hr
-= render 'form'
+  %hr
+  = render 'form'

app/views/projects/environments/new.html.haml

+- @no_container = true
 - page_title 'New Environment'
+= render "projects/pipelines/head"
 
-%h3.page-title
+%div{ class: container_class }
+  %h3.page-title
     New environment
-%hr
-= render 'form'
+  %hr
+  = render 'form'

app/views/projects/labels/edit.html.haml

+- @no_container = true
 - page_title "Edit", @label.name, "Labels"
+= render "projects/issues/head"
 
-%h3.page-title
+%div{ class: container_class }
+  %h3.page-title
     Edit Label
-%hr
-= render 'form'
+  %hr
+  = render 'form'

app/views/projects/labels/new.html.haml

+- @no_container = true
 - page_title "New Label"
+= render "projects/issues/head"
 
-%h3.page-title
+%div{ class: container_class }
+  %h3.page-title
     New Label
-%hr
-= render 'form'
+  %hr
+  = render 'form'

app/views/projects/milestones/edit.html.haml

+- @no_container = true
 - page_title "Edit", @milestone.title, "Milestones"
+= render "projects/issues/head"
 
-%h3.page-title
+%div{ class: container_class }
+
+  %h3.page-title
     Edit Milestone ##{@milestone.iid}
 
-%hr
+  %hr
 
-= render "form"
+  = render "form"

app/views/projects/milestones/new.html.haml

+- @no_container = true
 - page_title "New Milestone"
+= render "projects/issues/head"
 
-%h3.page-title
+%div{ class: container_class }
+  %h3.page-title
     New Milestone
 
-%hr
+  %hr
 
-= render "form"
+  = render "form"

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

+- @no_container = true
 - page_title       @milestone.title, "Milestones"
 - page_description @milestone.description
+= render "projects/issues/head"
 
-.detail-page-header
+%div{ class: container_class }
+  .detail-page-header
     .status-box{ class: status_box_class(@milestone) }
       - if @milestone.closed?
         Closed
@@ -28,7 +31,7 @@
         = link_to namespace_project_milestone_path(@project.namespace, @project, @milestone), data: { confirm: 'Are you sure?' }, method: :delete, class: "btn btn-grouped btn-danger" do
           Delete
 
-.detail-page-description.milestone-detail
+  .detail-page-description.milestone-detail
     %h2.title
       = markdown_field(@milestone, :title)
     %div
@@ -38,12 +41,12 @@
             = preserve do
               = markdown_field(@milestone, :description)
 
-- if @milestone.total_items_count(current_user).zero?
+  - if @milestone.total_items_count(current_user).zero?
     .alert.alert-success.prepend-top-default
       %span Assign some issues to this milestone.
-- elsif @milestone.complete?(current_user) && @milestone.active?
+  - elsif @milestone.complete?(current_user) && @milestone.active?
     .alert.alert-success.prepend-top-default
       %span All issues for this milestone are closed. You may close this milestone now.
 
-= render 'shared/milestones/summary', milestone: @milestone, project: @project
-= render 'shared/milestones/tabs', milestone: @milestone
+  = render 'shared/milestones/summary', milestone: @milestone, project: @project
+  = render 'shared/milestones/tabs', milestone: @milestone

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

 = content_for :sub_nav do
   .scrolling-tabs-container.sub-nav-scroll
     = render 'shared/nav_scroll'
-    .nav-links.sub-nav.scrolling-tabs
+    .nav-links.sub-nav.scrolling-tabs{ class: ('build' if local_assigns.fetch(:build_subnav, false)) }
       %ul{ class: (container_class) }
         - if project_nav_tab? :pipelines
           = nav_link(controller: :pipelines) do

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

+- @no_container = true
 - page_title "Pipeline"
+= render "projects/pipelines/head"
 
-.prepend-top-default
+%div{ class: container_class }
+  .prepend-top-default
     - if @commit
       = render "projects/pipelines/info"
     %div.block-connector
 
-= render "projects/commit/pipeline", pipeline: @pipeline
+  = render "projects/commit/pipeline", pipeline: @pipeline