From 7034b3c908e96e3e26aaa66299b75290adc98f02 Mon Sep 17 00:00:00 2001 From: kimsible Date: Mon, 10 Aug 2020 23:28:31 +0200 Subject: [PATCH] Refactor - improve offset content handling with fixed sub-menu and broadcast-message --- client/src/app/+about/about.component.html | 4 +-- client/src/app/+about/about.component.ts | 7 ++++ client/src/app/+admin/admin.component.html | 2 +- client/src/app/+admin/admin.component.scss | 4 --- client/src/app/+admin/admin.component.ts | 9 +++-- .../app/+my-account/my-account.component.html | 2 +- .../app/+my-account/my-account.component.scss | 4 --- .../app/+my-account/my-account.component.ts | 7 +++- client/src/app/app.component.ts | 4 +++ .../src/app/core/wrappers/screen.service.ts | 2 ++ .../misc/top-menu-dropdown.component.html | 2 +- .../misc/top-menu-dropdown.component.ts | 4 +++ client/src/sass/application.scss | 35 +++++++++++-------- 13 files changed, 56 insertions(+), 30 deletions(-) diff --git a/client/src/app/+about/about.component.html b/client/src/app/+about/about.component.html index 04a62240c..b89e6aeeb 100644 --- a/client/src/app/+about/about.component.html +++ b/client/src/app/+about/about.component.html @@ -1,5 +1,5 @@
-
+
Instance @@ -10,7 +10,7 @@
-
+
diff --git a/client/src/app/+about/about.component.ts b/client/src/app/+about/about.component.ts index 0c91cd75f..d24225714 100644 --- 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 d2b348545..aca4d9b0c 100644 --- a/client/src/app/+admin/admin.component.html +++ b/client/src/app/+admin/admin.component.html @@ -1,7 +1,7 @@
-
+
diff --git a/client/src/app/+admin/admin.component.scss b/client/src/app/+admin/admin.component.scss index a764efc76..61a2744ba 100644 --- 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 7fc83351b..66e068c4c 100644 --- 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 d885eb243..b465d0156 100644 --- a/client/src/app/+my-account/my-account.component.html +++ b/client/src/app/+my-account/my-account.component.html @@ -1,7 +1,7 @@
-
+
diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss index 6c1d9519c..a5bb499b4 100644 --- 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 a49db56fa..56373e5f1 100644 --- 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 5c64db522..ee95d2cbb 100644 --- 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 a69fad31d..96fb7ae57 100644 --- 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 e4bc39a58..416bd9bc8 100644 --- 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 @@ -
+
{{ menuEntry.label }} 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 43a9aa352..043b647c9 100644 --- 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 946647ccb..3722348a0 100644 --- 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); }