Fix z-index with custom homepage

diff --git a/client/e2e/src/po/video-upload.po.ts b/client/e2e/src/po/video-upload.po.ts
index 38395ea2f0b4ed81d44184a5aef24461f4ea924a..8605139c9f583451d681f0c5ecd18955ede94d7e 100644 (file)
--- a/client/e2e/src/po/video-upload.po.ts
+++ b/client/e2e/src/po/video-upload.po.ts
@@ -3,7 +3,7 @@ import { getCheckbox, selectCustomSelect } from '../utils'
 
 export class VideoUploadPage {
   async navigateTo () {
-    const publishButton = await $('.header .publish-button')
+    const publishButton = await $('.root-header .publish-button')
 
     await publishButton.waitForClickable()
     await publishButton.click()

diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 629c04e6b07c7d53c97a82bd5d9a1e99c398023f..6a833b039f974ae5cc40dae7696999ce67e1204e 100644 (file)
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -3,7 +3,7 @@
 <my-hotkeys-cheatsheet></my-hotkeys-cheatsheet>
 
 <div class="peertube-container" [ngClass]="{ 'user-logged-in': isUserLoggedIn(), 'user-not-logged-in': !isUserLoggedIn() }">
-  <div class="header">
+  <div class="root-header">
 
     <div class="top-left-block">
       <span class="icon icon-menu" role="button" [title]="getToggleTitle()" (click)="menu.toggleMenu()"></span>
@@ -14,7 +14,7 @@
       </a>
     </div>
 
-    <div class="header-right">
+    <div class="root-header-right">
       <my-header class="w-100 d-flex justify-content-end"></my-header>
     </div>
   </div>

diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 31e9987c6b98f19daf709d5add4686eb35009cf6..229a99a2df729cfc7d596f1a969fa4a504e15d44 100644 (file)
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -15,7 +15,7 @@
   width: 100%;
 }
 
-.header {
+.root-header {
   height: $header-height;
   position: fixed;
   top: 0;
@@ -49,7 +49,7 @@
   }
 }
 
-.header-right {
+.root-header-right {
   height: $header-height;
   display: flex;
   align-items: center;

diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
index bbb266448bef86b7436eef2a2031a419b8cfb239..f4b74a2d415ca36fdbe01f4f13636efda505f013 100644 (file)
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -80,7 +80,7 @@ $input-border-radius: 3px;
   }
 
   &.maximized {
-    z-index: #{z(header) - 1};
+    z-index: #{z(root-header) - 1};
     position: fixed;
     top: $header-height;
     left: $menu-width;

diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 225cad9c200c78b1c04b1f1c2e76ced6c54bb368..c02359f2867dd8f97c0c61e2fbaeedfea23dad87 100644 (file)
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -176,7 +176,7 @@ $zindex: (
   tooltip         : 14000,
   loadbar         : 15000,
   privacymsg      : 17500,
-  header          : 17500,
+  root-header     : 17500,
   help-popover    : 17600,
   dropdown        : 17600,
   modal           : 19000,

diff --git a/client/src/sass/z-index.scss b/client/src/sass/z-index.scss
index d362af0dd28f0b757a2d5d447a6e8a0634a80552..f8b0e1cc0a4548558377c1326472b25cbb25b311 100644 (file)
--- a/client/src/sass/z-index.scss
+++ b/client/src/sass/z-index.scss
@@ -1,8 +1,8 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.header {
-  z-index: z(header);
+.root-header {
+  z-index: z(root-header);
 }
 
 .help-popover {
@@ -10,7 +10,7 @@
 }
 
 ngx-loading-bar {
-  z-index: z(header) + 1 !important;
+  z-index: z(root-header) + 1 !important;
 }
 
 // Dropdown added to body, override default z-index