Added subnav to labels edit+new and milestones edit+new+show

Added subnav to blame show, blob edit, builds show, commit builds, commit show, environments edit and pipelines show

Added subnav to new enviro view

Added sidebar top position calculation logic

Added sidebar translation to follow the subnav up when the body is scrolled until a certain limit

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

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

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

@@ -1,8 +1,11 @@
+- @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"
 
+%div{ class: container_class }
   - if @conflict
     .alert.alert-danger
       Someone edited the file the same time you did. Please check out

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

@@ -1,7 +1,10 @@
+- @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
 
+%div{ class: container_class }
   .build-page
     = render "header"
 

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

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

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

@@ -1,6 +1,9 @@
+- @no_container = true
 - page_title        "#{@commit.title} (#{@commit.short_id})", "Commits"
 - page_description  @commit.description
+= render "projects/commits/head"
 
+%div{ class: container_class }
   .prepend-top-default
     = render "commit_box"
   - if @commit.status

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,9 @@
+- @no_container = true
 - page_title       @milestone.title, "Milestones"
 - page_description @milestone.description
+= render "projects/issues/head"
 
+%div{ class: container_class }
   .detail-page-header
     .status-box{ class: status_box_class(@milestone) }
       - if @milestone.closed?

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

@@ -1,7 +1,7 @@
 = 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

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