aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorKim <1877318+kimsible@users.noreply.github.com>2020-05-11 11:12:58 +0200
committerGitHub <noreply@github.com>2020-05-11 11:12:58 +0200
commit8544d8f561f6cd630973da041f36e46500fe95b7 (patch)
tree8a5b82d3e4b65308ce6584993cb3507450277f94
parent70afd522ba3fc08fd407f622aad0f15e8e88b249 (diff)
downloadPeerTube-8544d8f561f6cd630973da041f36e46500fe95b7.tar.gz
PeerTube-8544d8f561f6cd630973da041f36e46500fe95b7.tar.zst
PeerTube-8544d8f561f6cd630973da041f36e46500fe95b7.zip
Fix regression my-account menu overflow-x on screen width < 800px (#2707)
* Fix: correct my-account menu overflow-x on touchscreens * Add menuLeftDisplayed support for account-sub-menu * Handle menu in screen service + clean top-menu-dropdown * Add comment on menuWidth menu service to allow backtracking Co-authored-by: Rigel Kent <par@rigelk.eu> Co-authored-by: kimsible <kimsible@users.noreply.github.com> Co-authored-by: Rigel Kent <par@rigelk.eu>
-rw-r--r--client/src/app/core/menu/menu.service.ts1
-rw-r--r--client/src/app/shared/menu/top-menu-dropdown.component.html2
-rw-r--r--client/src/app/shared/menu/top-menu-dropdown.component.ts17
-rw-r--r--client/src/app/shared/misc/screen.service.ts7
-rw-r--r--client/src/sass/application.scss6
5 files changed, 23 insertions, 10 deletions
diff --git a/client/src/app/core/menu/menu.service.ts b/client/src/app/core/menu/menu.service.ts
index ecb2bceb7..81093c666 100644
--- a/client/src/app/core/menu/menu.service.ts
+++ b/client/src/app/core/menu/menu.service.ts
@@ -7,6 +7,7 @@ import { debounceTime } from 'rxjs/operators'
7export class MenuService { 7export class MenuService {
8 isMenuDisplayed = true 8 isMenuDisplayed = true
9 isMenuChangedByUser = false 9 isMenuChangedByUser = false
10 menuWidth = 240 // should be kept equal to $menu-width
10 11
11 constructor ( 12 constructor (
12 private screenService: ScreenService 13 private screenService: ScreenService
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.html b/client/src/app/shared/menu/top-menu-dropdown.component.html
index d577f757d..07ec1ac97 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.html
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.html
@@ -3,7 +3,7 @@
3 3
4 <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ menuEntry.label }}</a> 4 <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ menuEntry.label }}</a>
5 5
6 <div *ngIf="!menuEntry.routerLink" ngbDropdown [container]="container" class="parent-entry" 6 <div *ngIf="!menuEntry.routerLink" ngbDropdown container="body" class="parent-entry"
7 #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)"> 7 #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
8 <span 8 <span
9 *ngIf="isInSmallView" 9 *ngIf="isInSmallView"
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.ts b/client/src/app/shared/menu/top-menu-dropdown.component.ts
index f98240804..3f121e785 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.ts
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.ts
@@ -11,6 +11,7 @@ import { Subscription } from 'rxjs'
11import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap' 11import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
12import { GlobalIconName } from '@app/shared/images/global-icon.component' 12import { GlobalIconName } from '@app/shared/images/global-icon.component'
13import { ScreenService } from '@app/shared/misc/screen.service' 13import { ScreenService } from '@app/shared/misc/screen.service'
14import { MenuService } from '@app/core/menu'
14 15
15export type TopMenuDropdownParam = { 16export type TopMenuDropdownParam = {
16 label: string 17 label: string
@@ -36,7 +37,6 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
36 37
37 suffixLabels: { [ parentLabel: string ]: string } 38 suffixLabels: { [ parentLabel: string ]: string }
38 hasIcons = false 39 hasIcons = false
39 container: undefined | 'body' = undefined
40 isModalOpened = false 40 isModalOpened = false
41 currentMenuEntryIndex: number 41 currentMenuEntryIndex: number
42 42
@@ -46,11 +46,17 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
46 constructor ( 46 constructor (
47 private router: Router, 47 private router: Router,
48 private modalService: NgbModal, 48 private modalService: NgbModal,
49 private screen: ScreenService 49 private screen: ScreenService,
50 private menuService: MenuService
50 ) { } 51 ) { }
51 52
52 get isInSmallView () { 53 get isInSmallView () {
53 return this.screen.isInSmallView() 54 let marginLeft = 0
55 if (this.menuService.isMenuDisplayed) {
56 marginLeft = this.menuService.menuWidth
57 }
58
59 return this.screen.isInSmallView(marginLeft)
54 } 60 }
55 61
56 ngOnInit () { 62 ngOnInit () {
@@ -63,11 +69,6 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
63 this.hasIcons = this.menuEntries.some( 69 this.hasIcons = this.menuEntries.some(
64 e => e.children && e.children.some(c => !!c.iconName) 70 e => e.children && e.children.some(c => !!c.iconName)
65 ) 71 )
66
67 // We have to set body for the container to avoid scroll overflow on mobile and small views
68 if (this.isInSmallView) {
69 this.container = 'body'
70 }
71 } 72 }
72 73
73 ngOnDestroy () { 74 ngOnDestroy () {
diff --git a/client/src/app/shared/misc/screen.service.ts b/client/src/app/shared/misc/screen.service.ts
index 9c71a8c83..fa9c71e5b 100644
--- a/client/src/app/shared/misc/screen.service.ts
+++ b/client/src/app/shared/misc/screen.service.ts
@@ -10,7 +10,12 @@ export class ScreenService {
10 this.refreshWindowInnerWidth() 10 this.refreshWindowInnerWidth()
11 } 11 }
12 12
13 isInSmallView () { 13 isInSmallView (marginLeft = 0) {
14 if (marginLeft > 0) {
15 const contentWidth = this.getWindowInnerWidth() - marginLeft
16 return contentWidth < 800
17 }
18
14 return this.getWindowInnerWidth() < 800 19 return this.getWindowInnerWidth() < 800
15 } 20 }
16 21
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index bbecd8ba8..d637c94d9 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -320,6 +320,7 @@ table {
320 padding-left: 15px; 320 padding-left: 15px;
321 padding-right: 15px; 321 padding-right: 15px;
322 margin-bottom: $sub-menu-margin-bottom-small-view; 322 margin-bottom: $sub-menu-margin-bottom-small-view;
323 overflow-x: auto;
323 } 324 }
324 325
325 .admin-sub-header { 326 .admin-sub-header {
@@ -388,6 +389,11 @@ table {
388 .admin-sub-header { 389 .admin-sub-header {
389 @include admin-sub-header-responsive($expanded-horizontal-margins/3 + $menu-width/2); 390 @include admin-sub-header-responsive($expanded-horizontal-margins/3 + $menu-width/2);
390 } 391 }
392
393 .sub-menu {
394 overflow-x: auto;
395 width: calc(100vw - #{$menu-width});
396 }
391 } 397 }
392 } 398 }
393} 399}