Fix dropdown-user placement and menu-left scroll on touchscreens (#2706)

diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 32e48d6b602dd4c03cdb2d13e65c4fb66aeb0145..1cb51ef55c0654a714a690ec70f2d8df6fefd762 100644 (file)
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -11,7 +11,7 @@
           <div class="logged-in-username">{{ user.username }}</div>
         </div>
 
-        <div class="logged-in-more" ngbDropdown placement="right-top auto" container="body" autoClose="outside">
+        <div class="logged-in-more" ngbDropdown [placement]="placement" container="body" autoClose="outside">
           <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button"></my-global-icon>
 
           <div ngbDropdownMenu>

diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 9ae40493d844a98c34e325c91a5b2903b5a9f192..5bff0c328560cb3dc31efbbd5eabf7a30d21cfc6 100644 (file)
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -27,6 +27,10 @@ menu {
     overflow-y: auto;
   }
 
+  @media not all and (hover: hover) and (pointer: fine) {
+    overflow-y: auto;
+  }
+
   &.logged-in {
     .panel-block {
       margin-bottom: 20px;

diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index 75bae090ea5e82bf31d88d103bbb86400c1293dc..015c14bce70aee2cb83ffe0a1d2e9c23a53c7058 100644 (file)
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -8,6 +8,7 @@ import { HotkeysService } from 'angular2-hotkeys'
 import { ServerConfig, VideoConstant } from '@shared/models'
 import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { ScreenService } from '@app/shared/misc/screen.service'
 
 @Component({
   selector: 'my-menu',
@@ -43,8 +44,21 @@ export class MenuComponent implements OnInit {
     private serverService: ServerService,
     private redirectService: RedirectService,
     private hotkeysService: HotkeysService,
+    private screenService: ScreenService,
     private i18n: I18n
-  ) {}
+  ) { }
+
+  get isInMobileView () {
+    return this.screenService.isInMobileView()
+  }
+
+  get placement () {
+    if (this.isInMobileView) {
+      return 'left-top auto'
+    } else {
+      return 'right-top auto'
+    }
+  }
 
   ngOnInit () {
     this.serverConfig = this.serverService.getTmpConfig()