fix organigram auto link navigation

T-Systems-MMS · Mar 5, 2020 · 4113384 · 4113384
1 parent c6d8e60
commit 4113384
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 42 deletions.
diff --git a/...ontend/src/app/modules/organigram/components/organigram-node/organigram-node.component.ts b/...ontend/src/app/modules/organigram/components/organigram-node/organigram-node.component.ts
@@ -29,7 +29,14 @@ export class OrganigramNodeComponent implements OnInit {
       this.expand = Expanded.isExpanded;
       if (nodePath.length === this.node.depth + 2) {
         // Scroll to this node if it is the leave of the route
-        (this.thisNode.nativeElement as HTMLElement).scrollIntoView();
+        /*
+         * Set Timpout ist needed until Angular has fixed this issue:
+         * https://github.com/angular/angular/issues/35879 or
+         * https://github.com/angular/angular/issues/19742
+         */
+        setTimeout(() => {
+          (this.thisNode.nativeElement as HTMLElement).scrollIntoView();
+        }, 100);
       }
     }
   }

diff --git a/Phonebook.Frontend/src/app/shared/components/navigation/navigation.component.scss b/Phonebook.Frontend/src/app/shared/components/navigation/navigation.component.scss
@@ -17,54 +17,58 @@ mat-sidenav-container {
     display: flex;
     flex-flow: column;
 
-    #pb-greetings {
-      flex: 1;
-    }
+    .navigation {
+      z-index: 1;
 
-    .beta-tag {
-      vertical-align: top !important;
-      background-color: mat-color(mat-palette($mat-teal, 500));
-      text-transform: uppercase;
-      color: white;
-      padding: 2px 5px;
-      border-radius: 10px;
-    }
+      #pb-greetings {
+        flex: 1;
+      }
 
-    .version {
-      vertical-align: baseline;
-    }
+      .beta-tag {
+        vertical-align: top !important;
+        background-color: mat-color(mat-palette($mat-teal, 500));
+        text-transform: uppercase;
+        color: white;
+        padding: 2px 5px;
+        border-radius: 10px;
+      }
 
-    .table-settings {
-      position: absolute;
-      right: 0;
-      margin-right: 16px;
-      vertical-align: middle;
-    }
+      .version {
+        vertical-align: baseline;
+      }
 
-    .row-toolbar {
-      width: 100%;
-      margin-bottom: 0;
-      display: flex;
-      align-items: center;
-    }
+      .table-settings {
+        position: absolute;
+        right: 0;
+        margin-right: 16px;
+        vertical-align: middle;
+      }
 
-    #search {
-      margin: auto;
-      height: 3rem;
-    }
+      .row-toolbar {
+        width: 100%;
+        margin-bottom: 0;
+        display: flex;
+        align-items: center;
+      }
 
-    .pb-missing-userimage-info {
-      flex: 2;
-      margin: 0 auto;
-    }
+      #search {
+        margin: auto;
+        height: 3rem;
+      }
 
-    .pb-opacity-background {
-      background: rgba(0, 0, 0, 0.15);
-    }
+      .pb-missing-userimage-info {
+        flex: 2;
+        margin: 0 auto;
+      }
 
-    @media (max-width: 599px) {
-      #search {
-        height: 2.5rem;
+      .pb-opacity-background {
+        background: rgba(0, 0, 0, 0.15);
+      }
+
+      @media (max-width: 599px) {
+        #search {
+          height: 2.5rem;
+        }
       }
     }
   }
@@ -75,7 +79,7 @@ mat-sidenav-container {
 #pb-nav-mobile app-profile-picture {
   display: inline-block;
   position: relative;
-  top: -2px;  // the height and width in 4px more than from the other icons
+  top: -2px; // the height and width in 4px more than from the other icons
   left: -2px; // --> moving it 2px
   width: 28px;
   height: 28px;