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

7 files changed, 22 insertions, 15 deletions

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/init.js b/server/sonar-web/src/main/js/apps/coding-rules/init.js
index a156574703d..36d7f608fda 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/init.js
+++ b/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');
   };
 }
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/App.js b/server/sonar-web/src/main/js/apps/component-measures/components/App.js
index 8bdd6bceea1..d75feac2ca2 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/App.js
+++ b/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');
     }
   }
 
diff --git a/server/sonar-web/src/main/js/apps/issues/components/App.js b/server/sonar-web/src/main/js/apps/issues/components/App.js
index 199c814ce92..4a0040f2991 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/App.js
+++ b/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;
diff --git a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js
index b08dbaff992..e07822b61bd 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js
+++ b/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';
diff --git a/server/sonar-web/src/main/js/apps/web-api/components/WebApiApp.tsx b/server/sonar-web/src/main/js/apps/web-api/components/WebApiApp.tsx
index 9a346b3f921..68cb7e591d4 100644
--- a/server/sonar-web/src/main/js/apps/web-api/components/WebApiApp.tsx
+++ b/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');
     }
   }
 
diff --git a/server/sonar-web/src/main/less/components/page.less b/server/sonar-web/src/main/less/components/page.less
index 22fce0f068f..2b5c58b37b1 100644
--- a/server/sonar-web/src/main/less/components/page.less
+++ b/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;
+  }
 }
diff --git a/server/sonar-web/src/main/less/components/search-navigator.less b/server/sonar-web/src/main/less/components/search-navigator.less
index 68332a9ca33..b6c203bdbcc 100644
--- a/server/sonar-web/src/main/less/components/search-navigator.less
+++ b/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;