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

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>

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
+  }
 }

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>

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
-}

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 = {

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>

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
-}

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()

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
       }
     })
   }

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

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>

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)
 

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);
       }