MaDgIK
/
monitor
13
0
Fork 0
Code Issues Pull Requests Projects Releases 12 Wiki Activity

[develop | TEMP]: Remove uk-parallax from home page until is fixed from browsers.

This commit is contained in:
Konstantinos Triantafyllou 2023-11-08 13:50:39 +02:00
parent 7e9c42eff4
commit 37046a25fc
2 changed files with 5 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/home/home.component.html
View File

@ -43,7 +43,7 @@
</div>
<div class="uk-width-expand" uk-scrollspy-class>
<div class="uk-position-relative">
<img style="padding: 1px" src="assets/monitor-assets/home/monitor.jpg" uk-parallax="y: 300">
<img style="padding: 1px" src="assets/monitor-assets/home/monitor.jpg">
<img class="uk-position-top-left" src="assets/monitor-assets/home/mask.svg">
</div>
</div>
@ -72,10 +72,10 @@
<div class="uk-background-norepeat graph-background">
<div class="uk-section uk-section-large uk-container uk-container-large uk-margin-large-top uk-margin-large-bottom uk-overflow-hidden">
<div class="uk-flex uk-flex-column uk-flex-middle">
<h2 class="uk-h1 uk-width-1-2@m uk-text-center" uk-parallax="scale: 1.7, 1.3, 1,1">
<h2 class="uk-h1 uk-width-1-2@m uk-text-center">
Tap into the OpenAIRE Graph<span class="uk-text-primary">.</span>
</h2>
<div class="uk-width-1-2@m uk-text-center uk-margin-top" uk-parallax="y: 80, 40, 0, 0">
<div class="uk-width-1-2@m uk-text-center uk-margin-top">
The OpenAIRE Graph is one of the largest open scholarly record collections
worldwide, key in fostering Open Science and establishing its practices in the daily
research activities. Conceived as a public and transparent good, populated out of data
@ -83,7 +83,7 @@
assessment of science back in the hands of the scientific community.
</div>
</div>
<div class="uk-flex uk-flex-center uk-margin-top uk-margin-medium-bottom" uk-parallax="y: 80, 40, 0, 0">
<div class="uk-flex uk-flex-center uk-margin-top uk-margin-medium-bottom">
<div class="uk-width-1-1 uk-flex-center uk-grid" uk-grid uk-height-match="target: .targetName;"
uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<ng-template #numberCard let-numberSize="numberSize" let-name="name" let-url="url">
@ -315,7 +315,7 @@
</div>
<div class="uk-container uk-padding-remove-right uk-height-medium uk-position-relative">
<img class="uk-position-absolute" style="width: 250px; right: -10%; bottom:-35%; padding: 1px;"
src="assets/monitor-assets/home/monitor.jpg" uk-parallax="y: 200">
src="assets/monitor-assets/home/monitor.jpg">
<img class="uk-position-absolute" style="width: 250px; right: -10%; bottom:-35%;"
src="assets/monitor-assets/home/mask.svg">
<div>

22
src/app/home/home.component.ts
View File

@ -70,13 +70,11 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit, IDeactiv
private subscriptions = [];
private mutationObserver: MutationObserver;
private user: User;
@ViewChildren('scrolling_element') elements: QueryList<ElementRef>;
@ViewChild('contact') contact: ElementRef;
isMobile: boolean = false;
isServer: boolean;
constructor(
private route: ActivatedRoute,
private _router: Router,
private _meta: Meta,
private _title: Title,
@ -165,26 +163,6 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit, IDeactiv
if(this.contact) {
intersectionObserver.observe(this.contact.nativeElement);
}
this.mutationObserver = new MutationObserver(entries => {
entries.forEach(entry => {
if (entry.attributeName === 'style') {
let opacities: number[] = this.elements.map(element => +element.nativeElement.style.opacity);
let active: number = opacities.indexOf(Math.max(...opacities));
this.elements.forEach((element, index) => {
if (index === active) {
element.nativeElement.classList.remove('uk-disabled');
} else {
element.nativeElement.classList.add('uk-disabled');
}
})
}
})
});
this.elements.changes.subscribe(() => {
this.elements.forEach(element => {
this.mutationObserver.observe(element.nativeElement, {attributes: true});
});
});
this.subscriptions.push(intersectionObserver);
}