Merge pull request #4109 from abpframework/fix/3757

Fixed UI problems on tablet view

npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html

@@ -22,14 +22,23 @@
 
       <ng-template #navigations>
         <abp-routes
-          *abpReplaceableTemplate="{ componentKey: routesComponentKey }"
+          *abpReplaceableTemplate="{
+            componentKey: routesComponentKey,
+            inputs: {
+              smallScreen: { value: smallScreen }
+            }
+          }"
           class="mx-auto"
           [smallScreen]="smallScreen"
-          [isDropdownChildDynamic]="isDropdownChildDynamic"
         ></abp-routes>
 
         <abp-nav-items
-          *abpReplaceableTemplate="{ componentKey: navItemsComponentKey }"
+          *abpReplaceableTemplate="{
+            componentKey: navItemsComponentKey,
+            inputs: {
+              smallScreen: { value: smallScreen }
+            }
+          }"
           [smallScreen]="smallScreen"
         ></abp-nav-items>
       </ng-template>

npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts

@@ -15,8 +15,6 @@ export class ApplicationLayoutComponent implements AfterViewInit, OnDestroy {
   // required for dynamic component
   static type = eLayoutType.application;
 
-  isDropdownChildDynamic: boolean;
-
   isCollapsed = true;
 
   smallScreen: boolean; // do not set true or false
@@ -31,8 +29,7 @@ export class ApplicationLayoutComponent implements AfterViewInit, OnDestroy {
 
   private checkWindowWidth() {
     setTimeout(() => {
-      if (window.innerWidth < 768) {
-        this.isDropdownChildDynamic = false;
+      if (window.innerWidth < 992) {
         if (this.smallScreen === false) {
           this.isCollapsed = false;
           setTimeout(() => {
@@ -41,7 +38,6 @@ export class ApplicationLayoutComponent implements AfterViewInit, OnDestroy {
         }
         this.smallScreen = true;
       } else {
-        this.isDropdownChildDynamic = true;
         this.smallScreen = false;
       }
     }, 0);

npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html

@@ -77,16 +77,14 @@
       class="dropdown-submenu"
       ngbDropdown
       #dropdownSubmenu="ngbDropdown"
-      [display]="isDropdownChildDynamic ? 'dynamic' : 'static'"
       placement="right-top"
       [autoClose]="true"
       *abpPermission="child.requiredPolicy"
-      (openChange)="openChange($event, childrenContainer)"
     >
       <div ngbDropdownToggle [class.dropdown-toggle]="false">
         <a
           abpEllipsis="210px"
-          [abpEllipsisEnabled]="isDropdownChildDynamic"
+          [abpEllipsisEnabled]="!smallScreen"
           role="button"
           class="btn d-block text-left dropdown-toggle"
         >

npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts

@@ -1,8 +1,8 @@
-import { Component, OnInit, TrackByFunction, Input, Renderer2 } from '@angular/core';
-import { Observable } from 'rxjs';
 import { ABP, ConfigState } from '@abp/ng.core';
-import { map } from 'rxjs/operators';
+import { Component, Input, Renderer2, TrackByFunction } from '@angular/core';
 import { Select } from '@ngxs/store';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'abp-routes',
@@ -15,9 +15,6 @@ export class RoutesComponent {
   @Input()
   smallScreen: boolean;
 
-  @Input()
-  isDropdownChildDynamic: boolean;
-
   get visibleRoutes$(): Observable<ABP.FullRoute[]> {
     return this.routes$.pipe(map(routes => getVisibleRoutes(routes)));
   }
@@ -25,17 +22,6 @@ export class RoutesComponent {
   trackByFn: TrackByFunction<ABP.FullRoute> = (_, item) => item.name;
 
   constructor(private renderer: Renderer2) {}
-
-  openChange(event: boolean, childrenContainer: HTMLDivElement) {
-    if (!event) {
-      Object.keys(childrenContainer.style)
-        .filter(key => Number.isInteger(+key))
-        .forEach(key => {
-          this.renderer.removeStyle(childrenContainer, childrenContainer.style[key]);
-        });
-      this.renderer.removeStyle(childrenContainer, 'left');
-    }
-  }
 }
 
 function getVisibleRoutes(routes: ABP.FullRoute[]) {

npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts

@@ -46,7 +46,7 @@ export default `
 .container > .card {
     box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 992px) {
     .navbar .dropdown:hover > .dropdown-menu {
         display: block;
     }