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

[Monitor Dashboard | new-theme]: Updated develop page and added example | Made graph and feedback line sticky in indicators' page. 

1. develop.component.ts: Added example bullet for research products & Updated view of bullets (removed quotes - type bold).
2. page-content.component.ts:
   a. Added <div id="page_content_sticky_footer" #sticky_footer> and <div id="page_content_footer" #footer>.
   b. Added methods "ngAfterContentChecked()", "observeStickyFooter()", "calcStickyFooterOffset()" to calculate offset of sticky footer.
3. monitor.component.html: Added graph & feedback line as sticky_footer in >= medium screens and as footer in small screens.
This commit is contained in:
Konstantina Galouni 2022-08-29 14:57:05 +03:00
parent f77cfb48f9
commit de78e628bf
1 changed files with 73 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
dashboard/sharedComponents/page-content/page-content.component.ts
View File

@ -1,14 +1,34 @@
import {AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from "@angular/core";
import {
AfterViewInit,
ChangeDetectorRef,
Component,
ElementRef,
Input,
OnDestroy,
OnInit,
ViewChild
} from "@angular/core";
import {LayoutService} from "../sidebar/layout.service";
import {Subscription} from "rxjs";
declare var UIkit;
declare var ResizeObserver;
@Component({
selector: '[page-content]',
template: `
<div id="page_content">
<div id="page_content_sticky_footer" #sticky_footer class="uk-blur-background"
[attr.uk-sticky]="'bottom: true;'" [attr.offset]="footer_offset">
<div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical">
<ng-content select="[sticky_footer]"></ng-content>
</div>
</div>
</div>
<div id="page_content_header" #header class="uk-blur-background"
[attr.uk-sticky]="(headerSticky && shouldSticky)?'media: @m':null" [attr.offset]="offset">
[attr.uk-sticky]="(headerSticky && shouldSticky)?'media: @m':null" [attr.offset]="offset"
[attr.style]="'margin-top: '+(footer_height? '-'+footer_height+'px': '0')">
<div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical">
<ng-content select="[header]"></ng-content>
@ -28,6 +48,13 @@ declare var UIkit;
<ng-content select="[inner]"></ng-content>
</div>
</div>
<div id="page_content_footer" #footer>
<div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical">
<ng-content select="[footer]"></ng-content>
</div>
</div>
</div>
</div>
`,
})
@ -40,8 +67,12 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('actions') actions: ElementRef;
private headerObserver: IntersectionObserver;
private bottomObserver: IntersectionObserver;
constructor(private layoutService: LayoutService) {
public footer_offset: number = 0;
public footer_height: number = 0;
@ViewChild("sticky_footer") sticky_footer;
subscriptions = [];
constructor(private layoutService: LayoutService, private cdr: ChangeDetectorRef) {
}
ngOnInit() {
@ -78,6 +109,10 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
}, {threshold: 0.5});
this.headerObserver.observe(this.header.nativeElement);
}
if(this.sticky_footer) {
this.observeStickyFooter();
}
}
}
@ -88,5 +123,39 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
if(this.headerObserver) {
this.headerObserver.disconnect();
}
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) {
subscription.unsubscribe();
} else if (subscription instanceof Function) {
subscription();
} else if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
subscription.disconnect();
}
});
}
ngAfterContentChecked() {
if(this.sticky_footer && typeof document !== 'undefined') {
this.footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement);
}
}
public observeStickyFooter() {
let resizeObs = new ResizeObserver(entries => {
entries.forEach(entry => {
setTimeout(() => {
// console.log(entry);
this.footer_offset = this.calcStickyFooterOffset(entry.target);
this.cdr.detectChanges();
});
})
});
this.subscriptions.push(resizeObs);
resizeObs.observe(this.sticky_footer.nativeElement);
}
calcStickyFooterOffset(element) {
this.footer_height = element.offsetHeight;
return window.innerHeight-this.footer_height;
}
}