aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorkimsible <kimsible@users.noreply.github.com>2020-08-10 23:28:31 +0200
committerChocobozzz <chocobozzz@cpy.re>2020-08-11 08:03:28 +0200
commit7034b3c908e96e3e26aaa66299b75290adc98f02 (patch)
tree93a1e08ec555de097805228f4dbb8166ebb82608 /client
parent30bc55c88b3b7416c2224925e88639694fd32746 (diff)
downloadPeerTube-7034b3c908e96e3e26aaa66299b75290adc98f02.tar.gz
PeerTube-7034b3c908e96e3e26aaa66299b75290adc98f02.tar.zst
PeerTube-7034b3c908e96e3e26aaa66299b75290adc98f02.zip
Refactor - improve offset content handling with fixed sub-menu and broadcast-message
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+about/about.component.html4
-rw-r--r--client/src/app/+about/about.component.ts7
-rw-r--r--client/src/app/+admin/admin.component.html2
-rw-r--r--client/src/app/+admin/admin.component.scss4
-rw-r--r--client/src/app/+admin/admin.component.ts9
-rw-r--r--client/src/app/+my-account/my-account.component.html2
-rw-r--r--client/src/app/+my-account/my-account.component.scss4
-rw-r--r--client/src/app/+my-account/my-account.component.ts7
-rw-r--r--client/src/app/app.component.ts4
-rw-r--r--client/src/app/core/wrappers/screen.service.ts2
-rw-r--r--client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html2
-rw-r--r--client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts4
-rw-r--r--client/src/sass/application.scss35
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 @@
1<div class="row"> 1<div class="row">
2 <div class="sub-menu sub-menu-fixed"> 2 <div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed }">
3 3
4 <div class="links"> 4 <div class="links">
5 <a i18n routerLink="instance" routerLinkActive="active" class="title-page title-page-about">Instance</a> 5 <a i18n routerLink="instance" routerLinkActive="active" class="title-page title-page-about">Instance</a>
@@ -10,7 +10,7 @@
10 </div> 10 </div>
11 </div> 11 </div>
12 12
13 <div class="margin-content"> 13 <div class="margin-content" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }">
14 <router-outlet></router-outlet> 14 <router-outlet></router-outlet>
15 </div> 15 </div>
16</div> 16</div>
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 @@
1import { Component } from '@angular/core' 1import { Component } from '@angular/core'
2import { ScreenService } from '@app/core'
2 3
3@Component({ 4@Component({
4 selector: 'my-about', 5 selector: 'my-about',
@@ -6,5 +7,11 @@ import { Component } from '@angular/core'
6}) 7})
7 8
8export class AboutComponent { 9export class AboutComponent {
10 constructor (
11 private screenService: ScreenService
12 ) { }
9 13
14 get isBroadcastMessageDisplayed () {
15 return this.screenService.isBroadcastMessageDisplayed
16 }
10} 17}
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 @@
1<div> 1<div>
2 <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown> 2 <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
3 3
4 <div class="margin-content"> 4 <div class="margin-content" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }">
5 <router-outlet></router-outlet> 5 <router-outlet></router-outlet>
6 </div> 6 </div>
7</div> 7</div>
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 {
6} 6}
7 7
8@include sub-menu-h1; 8@include sub-menu-h1;
9
10::ng-deep .anchor {
11 top: #{-($header-height + $sub-menu-height + 20px)}; // offsetTop scrollToAnchor
12}
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 @@
1import { Component, OnInit } from '@angular/core' 1import { Component, OnInit } from '@angular/core'
2import { AuthService } from '@app/core' 2import { AuthService, ScreenService } from '@app/core'
3import { ListOverflowItem } from '@app/shared/shared-main' 3import { ListOverflowItem } from '@app/shared/shared-main'
4import { I18n } from '@ngx-translate/i18n-polyfill' 4import { I18n } from '@ngx-translate/i18n-polyfill'
5import { UserRight } from '@shared/models' 5import { UserRight } from '@shared/models'
@@ -15,8 +15,13 @@ export class AdminComponent implements OnInit {
15 15
16 constructor ( 16 constructor (
17 private auth: AuthService, 17 private auth: AuthService,
18 private screen: ScreenService,
18 private i18n: I18n 19 private i18n: I18n
19 ) {} 20 ) { }
21
22 get isBroadcastMessageDisplayed () {
23 return this.screen.isBroadcastMessageDisplayed
24 }
20 25
21 ngOnInit () { 26 ngOnInit () {
22 const federationItems: TopMenuDropdownParam = { 27 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 @@
1<div class="row"> 1<div class="row">
2 <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown> 2 <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
3 3
4 <div class="margin-content pb-5"> 4 <div class="margin-content pb-5" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }">
5 <router-outlet></router-outlet> 5 <router-outlet></router-outlet>
6 </div> 6 </div>
7</div> 7</div>
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 @@
11 11
12 @include sub-menu-h1; 12 @include sub-menu-h1;
13} 13}
14
15::ng-deep .anchor {
16 top: #{-($header-height + $sub-menu-height + 20px)}; // offsetTop scrollToAnchor
17}
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 @@
1import { Component, OnInit } from '@angular/core' 1import { Component, OnInit } from '@angular/core'
2import { AuthService, ServerService, AuthUser } from '@app/core' 2import { AuthService, ScreenService, ServerService, AuthUser } from '@app/core'
3import { I18n } from '@ngx-translate/i18n-polyfill' 3import { I18n } from '@ngx-translate/i18n-polyfill'
4import { ServerConfig } from '@shared/models' 4import { ServerConfig } from '@shared/models'
5import { TopMenuDropdownParam } from '../shared/shared-main/misc/top-menu-dropdown.component' 5import { TopMenuDropdownParam } from '../shared/shared-main/misc/top-menu-dropdown.component'
@@ -18,9 +18,14 @@ export class MyAccountComponent implements OnInit {
18 constructor ( 18 constructor (
19 private serverService: ServerService, 19 private serverService: ServerService,
20 private authService: AuthService, 20 private authService: AuthService,
21 private screenService: ScreenService,
21 private i18n: I18n 22 private i18n: I18n
22 ) { } 23 ) { }
23 24
25 get isBroadcastMessageDisplayed () {
26 return this.screenService.isBroadcastMessageDisplayed
27 }
28
24 ngOnInit (): void { 29 ngOnInit (): void {
25 this.serverConfig = this.serverService.getTmpConfig() 30 this.serverConfig = this.serverService.getTmpConfig()
26 this.serverService.getConfig() 31 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 {
110 peertubeLocalStorage.setItem(AppComponent.BROADCAST_MESSAGE_KEY, this.serverConfig.broadcastMessage.message) 110 peertubeLocalStorage.setItem(AppComponent.BROADCAST_MESSAGE_KEY, this.serverConfig.broadcastMessage.message)
111 111
112 this.broadcastMessage = null 112 this.broadcastMessage = null
113 this.screenService.isBroadcastMessageDisplayed = false
113 } 114 }
114 115
115 private initRouteEvents () { 116 private initRouteEvents () {
@@ -191,6 +192,7 @@ export class AppComponent implements OnInit, AfterViewInit {
191 this.serverService.configReloaded 192 this.serverService.configReloaded
192 ).subscribe(async config => { 193 ).subscribe(async config => {
193 this.broadcastMessage = null 194 this.broadcastMessage = null
195 this.screenService.isBroadcastMessageDisplayed = false
194 196
195 const messageConfig = config.broadcastMessage 197 const messageConfig = config.broadcastMessage
196 198
@@ -211,6 +213,8 @@ export class AppComponent implements OnInit, AfterViewInit {
211 dismissable: messageConfig.dismissable, 213 dismissable: messageConfig.dismissable,
212 class: classes[messageConfig.level] 214 class: classes[messageConfig.level]
213 } 215 }
216
217 this.screenService.isBroadcastMessageDisplayed = true
214 } 218 }
215 }) 219 })
216 } 220 }
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'
2 2
3@Injectable() 3@Injectable()
4export class ScreenService { 4export class ScreenService {
5 isBroadcastMessageDisplayed = false
6
5 private windowInnerWidth: number 7 private windowInnerWidth: number
6 private lastFunctionCallTime: number 8 private lastFunctionCallTime: number
7 private cacheForMs = 500 9 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 @@
1<div class="sub-menu sub-menu-fixed" [ngClass]="{ 'no-scroll': isModalOpened }"> 1<div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed, 'no-scroll': isModalOpened }">
2 <ng-container *ngFor="let menuEntry of menuEntries; index as id"> 2 <ng-container *ngFor="let menuEntry of menuEntries; index as id">
3 3
4 <a *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ menuEntry.label }}</a> 4 <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 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 {
53 return this.screen.isInSmallView(marginLeft) 53 return this.screen.isInSmallView(marginLeft)
54 } 54 }
55 55
56 get isBroadcastMessageDisplayed () {
57 return this.screen.isBroadcastMessageDisplayed
58 }
59
56 ngOnInit () { 60 ngOnInit () {
57 this.updateChildLabels(window.location.pathname) 61 this.updateChildLabels(window.location.pathname)
58 62
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 {
138 flex-grow: 1; 138 flex-grow: 1;
139 } 139 }
140 140
141 my-top-menu-dropdown + .margin-content {
142 padding-top: $sub-menu-height + $sub-menu-margin-bottom;
143 }
144
145 .sub-menu { 141 .sub-menu {
146 background-color: pvar(--submenuColor); 142 background-color: pvar(--submenuColor);
147 width: 100%; 143 width: 100%;
@@ -149,22 +145,20 @@ label {
149 align-items: center; 145 align-items: center;
150 padding-left: $not-expanded-horizontal-margins; 146 padding-left: $not-expanded-horizontal-margins;
151 padding-right: $not-expanded-horizontal-margins; 147 padding-right: $not-expanded-horizontal-margins;
152 148 height: $sub-menu-height;
153 & + .margin-content { 149 margin-bottom: $sub-menu-margin-bottom;
154 padding-top: $sub-menu-margin-bottom;
155 }
156 150
157 &.sub-menu-fixed { 151 &.sub-menu-fixed {
158 height: $sub-menu-height;
159 position: fixed; 152 position: fixed;
160 z-index: #{z('header') - 1}; 153 z-index: #{z('header') - 1};
161
162 & + .margin-content {
163 padding-top: $sub-menu-height + $sub-menu-margin-bottom;
164 }
165 } 154 }
166 } 155 }
167 156
157 // Use an appropriate offset top when sub-menu fixed
158 .margin-content.offset-content {
159 padding-top: $sub-menu-height + $sub-menu-margin-bottom;
160 }
161
168 // Override some properties if the main content is expanded (no menu on the left) 162 // Override some properties if the main content is expanded (no menu on the left)
169 &.expanded { 163 &.expanded {
170 margin-left: 0; 164 margin-left: 0;
@@ -305,9 +299,17 @@ table {
305 } 299 }
306} 300}
307 301
302/* offsetTop for scrollToAnchor */
303
308.anchor { 304.anchor {
309 position: relative; 305 position: relative;
310 top: #{-($header-height + 20px)}; // offsetTop scrollToAnchor 306 top: #{-($header-height + 20px)};
307}
308
309.offset-content { // if sub-menu fixed
310 .anchor {
311 top: #{-($header-height + $sub-menu-height + 20px)};
312 }
311} 313}
312 314
313@media screen and (max-width: #{breakpoint(xxl)}) { 315@media screen and (max-width: #{breakpoint(xxl)}) {
@@ -363,6 +365,11 @@ table {
363 overflow-x: auto; 365 overflow-x: auto;
364 } 366 }
365 367
368 // Use an appropriate offset top when sub-menu fixed
369 .margin-content.offset-content {
370 padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view;
371 }
372
366 .admin-sub-header { 373 .admin-sub-header {
367 @include admin-sub-header-responsive(15px*2); 374 @include admin-sub-header-responsive(15px*2);
368 } 375 }