SONAR-9376 Update footer to correctly resize on the new page layout

server/sonar-web/src/main/js/apps/coding-rules/init.js

@@ -61,7 +61,7 @@ App.on('start', function(
     .done(() => {
       this.layout = new Layout({ el: options.el });
       this.layout.render();
-      $('#footer').addClass('search-navigator-footer');
+      $('#footer').addClass('page-footer-with-sidebar');
 
       const allFacets = [
         'q',
@@ -123,6 +123,6 @@ export default function(
     // $FlowFixMe
     Backbone.history.stop();
     App.layout.destroy();
-    $('#footer').removeClass('search-navigator-footer');
+    $('#footer').removeClass('page-footer-with-sidebar');
   };
 }

server/sonar-web/src/main/js/apps/component-measures/components/App.js

@@ -75,7 +75,7 @@ export default class App extends React.PureComponent {
     key.setScope('measures-files');
     const footer = document.getElementById('footer');
     if (footer) {
-      footer.classList.add('search-navigator-footer');
+      footer.classList.add('page-footer-with-sidebar');
     }
   }
 
@@ -93,7 +93,7 @@ export default class App extends React.PureComponent {
     key.deleteScope('measures-files');
     const footer = document.getElementById('footer');
     if (footer) {
-      footer.classList.remove('search-navigator-footer');
+      footer.classList.remove('page-footer-with-sidebar');
     }
   }
 

server/sonar-web/src/main/js/apps/issues/components/App.js

@@ -138,7 +138,7 @@ export default class App extends React.PureComponent {
 
     const footer = document.getElementById('footer');
     if (footer) {
-      footer.classList.add('search-navigator-footer');
+      footer.classList.add('page-footer-with-sidebar');
     }
 
     this.attachShortcuts();
@@ -187,7 +187,7 @@ export default class App extends React.PureComponent {
 
     const footer = document.getElementById('footer');
     if (footer) {
-      footer.classList.remove('search-navigator-footer');
+      footer.classList.remove('page-footer-with-sidebar');
     }
 
     this.mounted = false;

server/sonar-web/src/main/js/apps/projects/components/AllProjects.js

@@ -59,7 +59,7 @@ export default class AllProjects extends React.PureComponent {
   componentDidMount() {
     this.handleQueryChange(true);
     const footer = document.getElementById('footer');
-    footer && footer.classList.add('search-navigator-footer');
+    footer && footer.classList.add('page-footer-with-sidebar');
   }
 
   componentDidUpdate(prevProps /*: Props */) {
@@ -70,7 +70,7 @@ export default class AllProjects extends React.PureComponent {
 
   componentWillUnmount() {
     const footer = document.getElementById('footer');
-    footer && footer.classList.remove('search-navigator-footer');
+    footer && footer.classList.remove('page-footer-with-sidebar');
   }
 
   getView = () => this.state.query.view || 'overall';

server/sonar-web/src/main/js/apps/web-api/components/WebApiApp.tsx

@@ -59,7 +59,7 @@ export default class WebApiApp extends React.PureComponent<Props, State> {
     this.fetchList();
     const footer = document.getElementById('footer');
     if (footer) {
-      footer.classList.add('search-navigator-footer');
+      footer.classList.add('page-footer-with-sidebar');
     }
   }
 
@@ -72,7 +72,7 @@ export default class WebApiApp extends React.PureComponent<Props, State> {
     this.mounted = false;
     const footer = document.getElementById('footer');
     if (footer) {
-      footer.classList.remove('search-navigator-footer');
+      footer.classList.remove('page-footer-with-sidebar');
     }
   }
 

server/sonar-web/src/main/less/components/page.less

@@ -123,6 +123,14 @@
   }
 }
 
+.page-footer-with-sidebar {
+  padding-left: ~"calc(50vw - 370px + 10px)" !important;
+
+  div {
+    max-width: 980px;
+  }
+}
+
 .page-with-sidebar {
   display: flex;
 }
@@ -288,4 +296,8 @@
   .layout-page-main-header-inner {
     left: 301px;
   }
+
+  .page-footer-with-sidebar {
+    padding-left: 300px + 10px !important;
+  }
 }

server/sonar-web/src/main/less/components/search-navigator.less

@@ -47,11 +47,6 @@
   }
 }
 
-.search-navigator-footer {
-  @padding-left: @sideWidth + 10px;
-  padding-left: @padding-left !important;
-}
-
 .search-navigator-side {
   position: fixed;
   z-index: @search-navigator-side-z-index;