From 89ac391d781bf47f92a2698901ef3cf16790f313 Mon Sep 17 00:00:00 2001 From: minodora-c Date: Thu, 3 Mar 2022 11:44:07 +0100 Subject: [PATCH 1/3] responsive toolbar adjusted the toolbar so that parts of the menu gets hidden when the screen is smaller and there are many toolbar items --- src/app/top-bar/top-bar.component.html | 57 +++++++++------- src/app/top-bar/top-bar.component.scss | 12 +--- src/app/top-bar/top-bar.component.ts | 90 +++++++++++++++++++++----- 3 files changed, 108 insertions(+), 51 deletions(-) diff --git a/src/app/top-bar/top-bar.component.html b/src/app/top-bar/top-bar.component.html index 328e2bd..1c5db17 100644 --- a/src/app/top-bar/top-bar.component.html +++ b/src/app/top-bar/top-bar.component.html @@ -1,14 +1,17 @@
-
+ \ No newline at end of file diff --git a/src/app/top-bar/top-bar.component.scss b/src/app/top-bar/top-bar.component.scss index 292901a..eb6d055 100644 --- a/src/app/top-bar/top-bar.component.scss +++ b/src/app/top-bar/top-bar.component.scss @@ -62,16 +62,6 @@ header { height: 100%; } -.hidden-button { - display: none; -} - -@media (max-width: 1199px) { - .hidden-button { - display: block; - } -} - .dropdown-item:active { background-color: gray; } @@ -84,4 +74,4 @@ header { .active-link { background-color: #264998; color: #fff!important; -} \ No newline at end of file +} diff --git a/src/app/top-bar/top-bar.component.ts b/src/app/top-bar/top-bar.component.ts index 1c3db2e..6d2be50 100644 --- a/src/app/top-bar/top-bar.component.ts +++ b/src/app/top-bar/top-bar.component.ts @@ -13,31 +13,87 @@ export class TopBarComponent implements OnInit { * top bar to be shown over all the other components */ constructor(public authService: AuthenticationService, - private router: Router) {} + private router: Router) { } - ngOnInit() { } + ngOnInit() { } - /** - * logout from account - */ + ngAfterViewInit() { + this.onResized(); + } + + onNavBtn() { + /* + var hlinks = document.getElementById("ulHiddenLinks"); + if (hlinks.className.includes("d-none")) { + hlinks.classList.remove("d-none") + } else { + hlinks.classList.add("d-none") + } + */ + } + + onResized() { + var btn = document.getElementById("greedy-nav-btn"); + var vlinks = document.getElementById("ulVisibleLinks"); + var vlinksChildren = vlinks.getElementsByTagName("li"); + var hlinks = document.getElementById("ulHiddenLinks"); + var hlinksChildren = hlinks.getElementsByTagName("li"); + + var numVisibleItems = 0; + var totalSpace = vlinks.clientWidth; + var usedSpace = 0; + var remainingSpace = totalSpace - usedSpace - 20; + + // get all links in one array + for (var k = 0; k < hlinksChildren.length; k++) { + vlinks.append(hlinksChildren[0]); + } + + // set visible links + for (var i = 0; i < vlinksChildren.length; i++) { + if (vlinksChildren[i].clientWidth < remainingSpace) { + usedSpace += vlinksChildren[i].clientWidth; + remainingSpace = totalSpace - usedSpace; + numVisibleItems++; + } else { + break; + } + } + + // set hidden links + for (var j = vlinksChildren.length - 1; j >= numVisibleItems; j--) { + hlinks.prepend(vlinksChildren[j]); + } + + // TODO update button + var divHiddenLinks = document.getElementById("divHiddenLinks"); + var height = hlinksChildren.length * 60 + 20 + 'px'; + divHiddenLinks.style.height = height; + + } + + /** + * logout from account + */ logout() { this.authService.logout().subscribe( - (didlogout: Boolean) => { - if (didlogout) { - this.router.navigate(['/login']); - } - }, - (error: any) => { - console.log('logout error: ', error); - }); - } + (didlogout: Boolean) => { + if (didlogout) { + this.router.navigate(['/login']); + } + }, + (error: any) => { + console.log('logout error: ', error); + }); + } - /** - * go to home path on icon click - */ + /** + * go to home path on icon click + */ goToDashboard() { this.router.navigate(['/' + this.authService.homePath()], { replaceUrl: true }); } + } From 6105f33fa548ec8e75e5eb070875c5e117ea210e Mon Sep 17 00:00:00 2001 From: minodora-c Date: Fri, 4 Mar 2022 12:45:13 +0100 Subject: [PATCH 2/3] adjusted top bar #187 --- src/app/top-bar/top-bar.component.html | 21 ++++++------- src/app/top-bar/top-bar.component.scss | 22 +++++++++++++ src/app/top-bar/top-bar.component.ts | 43 ++++++++++++++++---------- 3 files changed, 58 insertions(+), 28 deletions(-) diff --git a/src/app/top-bar/top-bar.component.html b/src/app/top-bar/top-bar.component.html index 1c5db17..a1f78f0 100644 --- a/src/app/top-bar/top-bar.component.html +++ b/src/app/top-bar/top-bar.component.html @@ -1,5 +1,5 @@
-