Merge branch 'ee-new-nav-tech-debt' into 'master'

EE- new nav tech debt

See merge request gitlab-org/gitlab-ee!3695

app/assets/javascripts/contextual_sidebar.js

@@ -9,7 +9,7 @@ export default class ContextualSidebar {
   }
 
   initDomElements() {
-    this.$page = $('.page-with-sidebar');
+    this.$page = $('.layout-page');
     this.$sidebar = $('.nav-sidebar');
     this.$innerScroll = $('.nav-sidebar-inner-scroll', this.$sidebar);
     this.$overlay = $('.mobile-overlay');

app/assets/javascripts/issuable_bulk_update_sidebar.js

@@ -21,7 +21,7 @@ export default class IssuableBulkUpdateSidebar {
   }
 
   initDomElements() {
-    this.$page = $('.page-with-sidebar');
+    this.$page = $('.layout-page');
     this.$sidebar = $('.right-sidebar');
     this.$sidebarInnerContainer = this.$sidebar.find('.issuable-sidebar');
     this.$bulkEditCancelBtn = $('.js-bulk-update-menu-hide');

app/assets/javascripts/main.js

@@ -129,7 +129,7 @@ $(function () {
   });
 
   if (bootstrapBreakpoint === 'xs') {
-    const $rightSidebar = $('aside.right-sidebar, .page-with-sidebar');
+    const $rightSidebar = $('aside.right-sidebar, .layout-page');
 
     $rightSidebar
       .removeClass('right-sidebar-expanded')
@@ -189,7 +189,7 @@ $(function () {
     trigger: 'focus',
     // set the viewport to the main content, excluding the navigation bar, so
     // the navigation can't overlap the popover
-    viewport: '.page-with-sidebar'
+    viewport: '.layout-page'
   });
   $('.trigger-submit').on('change', function () {
     return $(this).parents('form').submit();

app/assets/javascripts/right_sidebar.js

@@ -42,11 +42,11 @@ import Cookies from 'js-cookie';
       if ($thisIcon.hasClass('fa-angle-double-right')) {
         $allGutterToggleIcons.removeClass('fa-angle-double-right').addClass('fa-angle-double-left');
         $('aside.right-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
-        $('.page-with-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
+        $('.layout-page').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
       } else {
         $allGutterToggleIcons.removeClass('fa-angle-double-left').addClass('fa-angle-double-right');
         $('aside.right-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
-        $('.page-with-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
+        $('.layout-page').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
 
         if (gl.lazyLoader) gl.lazyLoader.loadCheck();
       }
@@ -173,7 +173,7 @@ import Cookies from 'js-cookie';
 
     Sidebar.prototype.setCollapseAfterUpdate = function($block) {
       $block.addClass('collapse-after-update');
-      return $('.page-with-sidebar').addClass('with-overlay');
+      return $('.layout-page').addClass('with-overlay');
     };
 
     Sidebar.prototype.onSidebarDropdownHidden = function(e) {
@@ -187,7 +187,7 @@ import Cookies from 'js-cookie';
     Sidebar.prototype.sidebarDropdownHidden = function($block) {
       if ($block.hasClass('collapse-after-update')) {
         $block.removeClass('collapse-after-update');
-        $('.page-with-sidebar').removeClass('with-overlay');
+        $('.layout-page').removeClass('with-overlay');
         return this.toggleSidebar('hide');
       }
     };

app/assets/stylesheets/framework/header.scss

-.content-wrapper.page-with-new-nav {
-  margin-top: $header-height;
-}
-
 .navbar-gitlab {
   &.navbar-gitlab {
     padding: 0 16px;

app/assets/stylesheets/framework/layout.scss

@@ -24,6 +24,7 @@ body {
 }
 
 .content-wrapper {
+  margin-top: $header-height;
   padding-bottom: 100px;
 }
 
@@ -105,11 +106,11 @@ body {
   }
 }
 
-.page-with-sidebar > .content-wrapper {
+.layout-page > .content-wrapper {
   min-height: calc(100vh - #{$header-height});
 }
 
-.with-performance-bar .page-with-sidebar {
+.with-performance-bar .layout-page {
   margin-top: $header-height + $performance-bar-height;
 }
 

app/assets/stylesheets/pages/boards.scss

@@ -482,7 +482,7 @@
   border-top: 1px solid $border-color;
 }
 
-.page-with-contextual-sidebar.page-with-sidebar .issue-boards-sidebar {
+.page-with-contextual-sidebar.layout-page .issue-boards-sidebar {
   .issuable-sidebar-header {
     position: relative;
   }

app/views/layouts/_page.html.haml

-.page-with-sidebar{ class: page_with_sidebar_class }
+.layout-page{ class: page_with_sidebar_class }
   - if defined?(nav) && nav
     = render "layouts/nav/sidebar/#{nav}"
-  .content-wrapper.page-with-new-nav
+  .content-wrapper
     .mobile-overlay
     .alert-wrapper
       = render "layouts/header/ee_license_banner"

spec/ee/spec/features/epics/epics_list_spec.rb

@@ -23,7 +23,7 @@ describe 'epics list', :js do
     end
 
     it 'renders the list correctly' do
-      page.within('.page-with-new-nav .content') do
+      page.within('.content-wrapper .content') do
         expect(find('.top-area')).to have_content('All 2')
         within('.issuable-list') do
           expect(page).to have_content(epics.first.title)
@@ -33,7 +33,7 @@ describe 'epics list', :js do
     end
 
     it 'renders the epic detail correctly after clicking the link' do
-      page.within('.page-with-new-nav .content .issuable-list') do
+      page.within('.content-wrapper .content .issuable-list') do
         click_link(epics.first.title)
       end
 

spec/javascripts/right_sidebar_spec.js

@@ -41,7 +41,7 @@ import '~/right_sidebar';
         loadFixtures(fixtureName);
         this.sidebar = new Sidebar;
         $aside = $('.right-sidebar');
-        $page = $('.page-with-sidebar');
+        $page = $('.layout-page');
         $icon = $aside.find('i');
         $toggle = $aside.find('.js-sidebar-toggle');
         return $labelsIcon = $aside.find('.sidebar-collapsed-icon');