Fix menu dropdown overflow

Weird issue conflicting with the dropdown config from the menu component
This commit is contained in:
Chocobozzz 2021-04-26 15:56:49 +02:00
parent 03a5e95ce1
commit 27f4a1ecbc
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 9 additions and 14 deletions

View File

@ -1,16 +1,16 @@
import { ViewportScroller } from '@angular/common'
import { HotkeysService } from 'angular2-hotkeys' import { HotkeysService } from 'angular2-hotkeys'
import * as debug from 'debug' import * as debug from 'debug'
import { switchMap } from 'rxjs/operators' import { switchMap } from 'rxjs/operators'
import { ViewportScroller } from '@angular/common'
import { Component, OnInit, ViewChild } from '@angular/core' import { Component, OnInit, ViewChild } from '@angular/core'
import { Router } from '@angular/router' import { Router } from '@angular/router'
import { scrollToTop } from '@app/helpers'
import { AuthService, AuthStatus, AuthUser, MenuService, RedirectService, ScreenService, ServerService, UserService } from '@app/core' import { AuthService, AuthStatus, AuthUser, MenuService, RedirectService, ScreenService, ServerService, UserService } from '@app/core'
import { scrollToTop } from '@app/helpers'
import { LanguageChooserComponent } from '@app/menu/language-chooser.component' import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component' import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component'
import { ServerConfig, UserRight, VideoConstant } from '@shared/models'
import { NgbDropdown, NgbDropdownConfig } from '@ng-bootstrap/ng-bootstrap'
import { PeertubeModalService } from '@app/shared/shared-main/peertube-modal/peertube-modal.service' import { PeertubeModalService } from '@app/shared/shared-main/peertube-modal/peertube-modal.service'
import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
import { ServerConfig, UserRight, VideoConstant } from '@shared/models'
const logger = debug('peertube:menu:MenuComponent') const logger = debug('peertube:menu:MenuComponent')
@ -56,22 +56,17 @@ export class MenuComponent implements OnInit {
private screenService: ScreenService, private screenService: ScreenService,
private menuService: MenuService, private menuService: MenuService,
private modalService: PeertubeModalService, private modalService: PeertubeModalService,
private dropdownConfig: NgbDropdownConfig,
private router: Router private router: Router
) { ) { }
this.dropdownConfig.container = 'body'
}
get isInMobileView () { get isInMobileView () {
return this.screenService.isInMobileView() return this.screenService.isInMobileView()
} }
get dropdownContainer () { get dropdownContainer () {
if (this.isInMobileView) { if (this.isInMobileView) return null
return null
} else { return 'body' as 'body'
return this.dropdownConfig.container
}
} }
get language () { get language () {

View File

@ -4,7 +4,7 @@
<a *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings" #routerLink (click)="onActiveLinkScrollToTop(routerLink)">{{ menuEntry.label }}</a> <a *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings" #routerLink (click)="onActiveLinkScrollToTop(routerLink)">{{ menuEntry.label }}</a>
<div *ngIf="!menuEntry.routerLink && isDisplayed(menuEntry)" ngbDropdown class="parent-entry" <div *ngIf="!menuEntry.routerLink && isDisplayed(menuEntry)" ngbDropdown class="parent-entry"
#dropdown="ngbDropdown" autoClose="true"> #dropdown="ngbDropdown" autoClose="true" container="body">
<span <span
*ngIf="isInSmallView" *ngIf="isInSmallView"
tabindex=0 tabindex=0