MaDgIK
/
monitor
13
0
Fork 0
Code Issues Pull Requests Projects Releases 15 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>
<div class="uk-width-expand" uk-scrollspy-class> <div class="uk-width-expand" uk-scrollspy-class>
<div class="uk-position-relative"> <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"> <img class="uk-position-top-left" src="assets/monitor-assets/home/mask.svg">
</div> </div>
</div> </div>
@ -72,10 +72,10 @@
<div class="uk-background-norepeat graph-background"> <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-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"> <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> Tap into the OpenAIRE Graph<span class="uk-text-primary">.</span>
</h2> </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 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 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 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. assessment of science back in the hands of the scientific community.
</div> </div>
</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;" <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"> uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<ng-template #numberCard let-numberSize="numberSize" let-name="name" let-url="url"> <ng-template #numberCard let-numberSize="numberSize" let-name="name" let-url="url">
@ -315,7 +315,7 @@
</div> </div>
<div class="uk-container uk-padding-remove-right uk-height-medium uk-position-relative"> <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;" <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%;" <img class="uk-position-absolute" style="width: 250px; right: -10%; bottom:-35%;"
src="assets/monitor-assets/home/mask.svg"> src="assets/monitor-assets/home/mask.svg">
<div> <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 subscriptions = [];
private mutationObserver: MutationObserver; private mutationObserver: MutationObserver;
private user: User; private user: User;
@ViewChildren('scrolling_element') elements: QueryList<ElementRef>;
@ViewChild('contact') contact: ElementRef; @ViewChild('contact') contact: ElementRef;
isMobile: boolean = false; isMobile: boolean = false;
isServer: boolean; isServer: boolean;
constructor( constructor(
private route: ActivatedRoute,
private _router: Router, private _router: Router,
private _meta: Meta, private _meta: Meta,
private _title: Title, private _title: Title,
@ -165,26 +163,6 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit, IDeactiv
if(this.contact) { if(this.contact) {
intersectionObserver.observe(this.contact.nativeElement); 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); this.subscriptions.push(intersectionObserver);
} }