Refactor - improve offset content handling with fixed sub-menu and broadcast-message

diff --git a/client/src/app/+about/about.component.html b/client/src/app/+about/about.component.html
index 04a62240c7ab56bbffbdbad169588435d76159a8..b89e6aeeb80aed2affbd99201248c310ba31e5f5 100644 (file)
--- a/client/src/app/+about/about.component.html
+++ b/client/src/app/+about/about.component.html
@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="sub-menu sub-menu-fixed">
+  <div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed }">
 
     <div class="links">
       <a i18n routerLink="instance" routerLinkActive="active" class="title-page title-page-about">Instance</a>
@@ -10,7 +10,7 @@
     </div>
   </div>
 
-  <div class="margin-content">
+  <div class="margin-content" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }">
     <router-outlet></router-outlet>
   </div>
 </div>

diff --git a/client/src/app/+about/about.component.ts b/client/src/app/+about/about.component.ts
index 0c91cd75f8373924be1dc3958bcc22f2d678b2b1..d242257146a3ca7c4e2b51d454e981d19a74f073 100644 (file)
--- a/client/src/app/+about/about.component.ts
+++ b/client/src/app/+about/about.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core'
+import { ScreenService } from '@app/core'
 
 @Component({
   selector: 'my-about',
@@ -6,5 +7,11 @@ import { Component } from '@angular/core'
 })
 
 export class AboutComponent {
+  constructor (
+    private screenService: ScreenService
+  ) { }
 
+  get isBroadcastMessageDisplayed () {
+    return this.screenService.isBroadcastMessageDisplayed
+  }
 }

diff --git a/client/src/app/+admin/admin.component.html b/client/src/app/+admin/admin.component.html
index d2b34854511aa6f465450e7c7d015b03763c30aa..aca4d9b0cba1c325cec78be921873c8e8f4b8f51 100644 (file)
--- a/client/src/app/+admin/admin.component.html
+++ b/client/src/app/+admin/admin.component.html
@@ -1,7 +1,7 @@
 <div>
   <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
 
-  <div class="margin-content">
+  <div class="margin-content" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }">
     <router-outlet></router-outlet>
   </div>
 </div>

diff --git a/client/src/app/+admin/admin.component.scss b/client/src/app/+admin/admin.component.scss
index a764efc765341e7792d2b61ac5ff3d420eebb16b..61a2744ba736cec74bd52619713308e513cb2817 100644 (file)
--- a/client/src/app/+admin/admin.component.scss
+++ b/client/src/app/+admin/admin.component.scss
@@ -6,7 +6,3 @@ my-top-menu-dropdown {
 }
 
 @include sub-menu-h1;
-
-::ng-deep .anchor {
-  top: #{-($header-height + $sub-menu-height + 20px)}; // offsetTop scrollToAnchor
-}

diff --git a/client/src/app/+admin/admin.component.ts b/client/src/app/+admin/admin.component.ts
index 7fc83351bcf16d3808f4d5c32344c70dc2b0cae8..66e068c4ccaeb718b6940a16a53559e53be7d8b3 100644 (file)
--- a/client/src/app/+admin/admin.component.ts
+++ b/client/src/app/+admin/admin.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core'
-import { AuthService } from '@app/core'
+import { AuthService, ScreenService } from '@app/core'
 import { ListOverflowItem } from '@app/shared/shared-main'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { UserRight } from '@shared/models'
@@ -15,8 +15,13 @@ export class AdminComponent implements OnInit {
 
   constructor (
     private auth: AuthService,
+    private screen: ScreenService,
     private i18n: I18n
-  ) {}
+  ) { }
+
+  get isBroadcastMessageDisplayed () {
+    return this.screen.isBroadcastMessageDisplayed
+  }
 
   ngOnInit () {
     const federationItems: TopMenuDropdownParam = {

diff --git a/client/src/app/+my-account/my-account.component.html b/client/src/app/+my-account/my-account.component.html
index d885eb24363cb8d5e5db0c008e46ec4291a69900..b465d0156b1ffbf344520a5f63015b8f27fd348f 100644 (file)
--- a/client/src/app/+my-account/my-account.component.html
+++ b/client/src/app/+my-account/my-account.component.html
@@ -1,7 +1,7 @@
 <div class="row">
   <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
 
-  <div class="margin-content pb-5">
+  <div class="margin-content pb-5" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }">
     <router-outlet></router-outlet>
   </div>
 </div>

diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss
index 6c1d9519cff35d5b1aa042e7880992757fa11503..a5bb499b42cb52fbe1d034ee1a3aabcce10ba3c1 100644 (file)
--- a/client/src/app/+my-account/my-account.component.scss
+++ b/client/src/app/+my-account/my-account.component.scss
@@ -11,7 +11,3 @@
 
   @include sub-menu-h1;
 }
-
-::ng-deep .anchor {
-  top: #{-($header-height + $sub-menu-height + 20px)}; // offsetTop scrollToAnchor
-}

diff --git a/client/src/app/+my-account/my-account.component.ts b/client/src/app/+my-account/my-account.component.ts
index a49db56fa243a9f9d3df329c8406752e0c9b7589..56373e5f18efd08080eaeb17c8c5476f5b26c734 100644 (file)
--- a/client/src/app/+my-account/my-account.component.ts
+++ b/client/src/app/+my-account/my-account.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core'
-import { AuthService, ServerService, AuthUser } from '@app/core'
+import { AuthService, ScreenService, ServerService, AuthUser } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ServerConfig } from '@shared/models'
 import { TopMenuDropdownParam } from '../shared/shared-main/misc/top-menu-dropdown.component'
@@ -18,9 +18,14 @@ export class MyAccountComponent implements OnInit {
   constructor (
     private serverService: ServerService,
     private authService: AuthService,
+    private screenService: ScreenService,
     private i18n: I18n
   ) { }
 
+  get isBroadcastMessageDisplayed () {
+    return this.screenService.isBroadcastMessageDisplayed
+  }
+
   ngOnInit (): void {
     this.serverConfig = this.serverService.getTmpConfig()
     this.serverService.getConfig()

diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 5c64db522bb2ac85536aa5fdf213c945ec350f90..ee95d2cbb47c589eb2d43c14f56bcec6a666d932 100644 (file)
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -110,6 +110,7 @@ export class AppComponent implements OnInit, AfterViewInit {
     peertubeLocalStorage.setItem(AppComponent.BROADCAST_MESSAGE_KEY, this.serverConfig.broadcastMessage.message)
 
     this.broadcastMessage = null
+    this.screenService.isBroadcastMessageDisplayed = false
   }
 
   private initRouteEvents () {
@@ -191,6 +192,7 @@ export class AppComponent implements OnInit, AfterViewInit {
       this.serverService.configReloaded
     ).subscribe(async config => {
       this.broadcastMessage = null
+      this.screenService.isBroadcastMessageDisplayed = false
 
       const messageConfig = config.broadcastMessage
 
@@ -211,6 +213,8 @@ export class AppComponent implements OnInit, AfterViewInit {
           dismissable: messageConfig.dismissable,
           class: classes[messageConfig.level]
         }
+
+        this.screenService.isBroadcastMessageDisplayed = true
       }
     })
   }

diff --git a/client/src/app/core/wrappers/screen.service.ts b/client/src/app/core/wrappers/screen.service.ts
index a69fad31df46e45e931c2d8f05e0c61f07eec9ac..96fb7ae57bc3a61dcc5a89efbcb06c11d348e701 100644 (file)
--- a/client/src/app/core/wrappers/screen.service.ts
+++ b/client/src/app/core/wrappers/screen.service.ts
@@ -2,6 +2,8 @@ import { Injectable } from '@angular/core'
 
 @Injectable()
 export class ScreenService {
+  isBroadcastMessageDisplayed = false
+
   private windowInnerWidth: number
   private lastFunctionCallTime: number
   private cacheForMs = 500

diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
index e4bc39a58393dc90ba07659922516e7805282cd0..416bd9bc806515e80fad80ec38716e8dc3fa71c3 100644 (file)
--- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
+++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
@@ -1,4 +1,4 @@
-<div class="sub-menu sub-menu-fixed" [ngClass]="{ 'no-scroll': isModalOpened }">
+<div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed, 'no-scroll': isModalOpened }">
   <ng-container *ngFor="let menuEntry of menuEntries; index as id">
 
     <a *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ menuEntry.label }}</a>

diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts
index 43a9aa35209b055d02d2932c9536587bf238dfee..043b647c9b3813f904cf9d97dbeae56623f4dfa6 100644 (file)
--- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts
+++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts
@@ -53,6 +53,10 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
     return this.screen.isInSmallView(marginLeft)
   }
 
+  get isBroadcastMessageDisplayed () {
+    return this.screen.isBroadcastMessageDisplayed
+  }
+
   ngOnInit () {
     this.updateChildLabels(window.location.pathname)
 

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 946647ccbbfc9ea7dddca2af952239d0efba119a..3722348a03a4824eeba27f9e27d0eed84ef8322f 100644 (file)
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -138,10 +138,6 @@ label {
     flex-grow: 1;
   }
 
-  my-top-menu-dropdown + .margin-content {
-    padding-top: $sub-menu-height + $sub-menu-margin-bottom;
-  }
-
   .sub-menu {
     background-color: pvar(--submenuColor);
     width: 100%;
@@ -149,22 +145,20 @@ label {
     align-items: center;
     padding-left: $not-expanded-horizontal-margins;
     padding-right: $not-expanded-horizontal-margins;
-
-    & + .margin-content {
-      padding-top: $sub-menu-margin-bottom;
-    }
+    height: $sub-menu-height;
+    margin-bottom: $sub-menu-margin-bottom;
 
     &.sub-menu-fixed {
-      height: $sub-menu-height;
       position: fixed;
       z-index: #{z('header') - 1};
-
-      & + .margin-content {
-        padding-top: $sub-menu-height + $sub-menu-margin-bottom;
-      }
     }
   }
 
+  // Use an appropriate offset top when sub-menu fixed
+  .margin-content.offset-content {
+    padding-top: $sub-menu-height + $sub-menu-margin-bottom;
+  }
+
   // Override some properties if the main content is expanded (no menu on the left)
   &.expanded {
     margin-left: 0;
@@ -305,9 +299,17 @@ table {
   }
 }
 
+/* offsetTop for scrollToAnchor */
+
 .anchor {
   position: relative;
-  top: #{-($header-height + 20px)}; // offsetTop scrollToAnchor
+  top: #{-($header-height + 20px)};
+}
+
+.offset-content { // if sub-menu fixed
+  .anchor {
+    top: #{-($header-height + $sub-menu-height + 20px)};
+  }
 }
 
 @media screen and (max-width: #{breakpoint(xxl)}) {
@@ -363,6 +365,11 @@ table {
         overflow-x: auto;
       }
 
+      // Use an appropriate offset top when sub-menu fixed
+      .margin-content.offset-content {
+        padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view;
+      }
+
       .admin-sub-header {
         @include admin-sub-header-responsive(15px*2);
       }