MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[angular-16 | DONE | CHANGED]: Make dashboard-sidebar sticky instead of fixed.

This commit is contained in:
Konstantinos Triantafyllou 2023-10-25 15:16:13 +03:00
parent aebcb81c7b
commit a953195dc8
4 changed files with 99 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dashboard/sharedComponents/sidebar/sideBar.component.html
View File

@ -1,8 +1,8 @@
<aside id="sidebar_main" class="uk-visible@m"> <div id="sidebar_main" uk-sticky="end: .sidebar_main_swipe;" [attr.offset]="offset" class="uk-visible@m">
<div sidebar-content> <div sidebar-content>
<ng-container *ngTemplateOutlet="menu; context: {mobile: false}"></ng-container> <ng-container *ngTemplateOutlet="menu; context: {mobile: false}"></ng-container>
</div> </div>
</aside> </div>
<div class="uk-hidden@m"> <div class="uk-hidden@m">
<div id="sidebar_offcanvas" #sidebar_offcanvas [attr.uk-offcanvas]="'overlay: true'"> <div id="sidebar_offcanvas" #sidebar_offcanvas [attr.uk-offcanvas]="'overlay: true'">
<div class="uk-offcanvas-bar uk-padding-remove"> <div class="uk-offcanvas-bar uk-padding-remove">

4
dashboard/sharedComponents/sidebar/sideBar.component.ts
View File

@ -30,6 +30,7 @@ export class SideBarComponent implements OnInit, AfterViewInit, OnDestroy, OnCha
@Input() queryParamsHandling; @Input() queryParamsHandling;
@ViewChild("nav") nav: ElementRef; @ViewChild("nav") nav: ElementRef;
@ViewChild("sidebar_offcanvas") sidebar_offcanvas: ElementRef; @ViewChild("sidebar_offcanvas") sidebar_offcanvas: ElementRef;
public offset: number;
public properties = properties; public properties = properties;
private subscriptions: any[] = []; private subscriptions: any[] = [];
private init: boolean = false; private init: boolean = false;
@ -45,6 +46,9 @@ export class SideBarComponent implements OnInit, AfterViewInit, OnDestroy, OnCha
} }
ngOnInit() { ngOnInit() {
if (typeof document !== "undefined") {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
}
this.setActiveMenuItem(); this.setActiveMenuItem();
} }

5
monitor-admin/topic/topic.component.html
View File

@ -1,4 +1,5 @@
<aside *ngIf="stakeholder" id="sidebar_main"> <div class="uk-flex">
<aside *ngIf="stakeholder" uk-sticky="end: .sidebar_main_swipe;" [attr.offset]="offset" id="sidebar_main">
<div sidebar-content> <div sidebar-content>
<div class="back"> <div class="back">
<a [routerLink]="'/admin/' + stakeholder.alias" class="uk-flex uk-flex-middle uk-flex-center"> <a [routerLink]="'/admin/' + stakeholder.alias" class="uk-flex uk-flex-middle uk-flex-center">
@ -324,6 +325,8 @@
[stakeholder]="stakeholder" [changed]="change.asObservable()"></indicators> [stakeholder]="stakeholder" [changed]="change.asObservable()"></indicators>
</div> </div>
</div> </div>
</div>
<modal-alert #deleteModal classTitle="uk-background-primary uk-light" (alertOutput)="deleteElement()" <modal-alert #deleteModal classTitle="uk-background-primary uk-light" (alertOutput)="deleteElement()"
[overflowBody]="false"> [overflowBody]="false">
<div [class.uk-invisible]="loading" class="uk-position-relative"> <div [class.uk-invisible]="loading" class="uk-position-relative">

4
monitor-admin/topic/topic.component.ts
View File

@ -38,6 +38,7 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
private topicSubscriptions: any[] = []; private topicSubscriptions: any[] = [];
private subscriptions: any[] = []; private subscriptions: any[] = [];
public properties: EnvProperties = properties; public properties: EnvProperties = properties;
public offset: number;
public stakeholderUtils: StakeholderUtils = new StakeholderUtils(); public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
public loading: boolean = false; public loading: boolean = false;
public stakeholder: Stakeholder; public stakeholder: Stakeholder;
@ -95,6 +96,9 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
} }
public ngOnInit() { public ngOnInit() {
if (typeof document !== "undefined") {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
}
let subscription: Subscription; let subscription: Subscription;
this.subscriptions.push(this.topicIndexSubject.asObservable().subscribe(index => { this.subscriptions.push(this.topicIndexSubject.asObservable().subscribe(index => {
this.topicChanged(() => { this.topicChanged(() => {