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

Change table image in scrolling section of home page

This commit is contained in:
Konstantinos Triantafyllou 2023-01-16 10:30:32 +02:00
parent b73363206a
commit 1c634dc0d7
6 changed files with 72 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,23 @@
<ng-template #scrolling_text let-position_class="position_class" let-id="id">
<div #scrolling_element [class]="position_class" [attr.uk-parallax]="'target: #' + id + '; start: 0vh; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 99%,0'">
<h3 class="uk-h2 uk-text-primary">
Monitor, discover and understand.
</h3>
<p class="uk-text-large">Track your organization’s research output in a comprehensive manner. Identify research pathways across key dimensions with granular and timely indicators.</p>
</div>
<div #scrolling_element [class]="position_class" [attr.uk-parallax]="'target: #' + id + '; start: 150vh; end: 100% + 100vh - 200vh; opacity: 0,1 20%,1 99%,0'">
<h3 class="uk-h2">
<span class="uk-text-primary">Enhance</span> open science uptake<span class="uk-text-primary">.</span>
</h3>
<p class="uk-text-large">Work with the Open Science expert community for open and transparent metrics. Discover Open Science costs and trends for your organization. See how you fare in the European Open Science Cloud.</p>
</div>
<div #scrolling_element [class]="position_class" [attr.uk-parallax]="'target: #' + id + '; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1'">
<h3 class="uk-h2">
Turn data into <span class="uk-text-primary">actionable insights.</span>
</h3>
<p class="uk-text-large">See what works and what not, reveal hidden potential. Measure research impact, discover trends, connections and collaborations to improve and optimize your future actions.</p>
</div>
</ng-template>
<div *ngIf="!isMobile" class="uk-visible@m">
<div class="uk-section uk-padding-remove-bottom uk-overflow-hidden home-background">
<div class="uk-container uk-container-large" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
@ -24,48 +44,28 @@
</div>
</div>
</div>
<ng-template #scrolling_text let-position_class="position_class">
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 0vh; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 99%,0">
<h3 class="uk-h2 uk-text-primary">
Monitor, discover and understand.
</h3>
<p class="uk-text-large">Track your organization’s research output in a comprehensive manner. Identify research pathways across key dimensions with granular and timely indicators.</p>
</div>
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 200vh; opacity: 0,1 20%,1 99%,0">
<h3 class="uk-h2">
<span class="uk-text-primary">Enhance</span> open science uptake<span class="uk-text-primary">.</span>
</h3>
<p class="uk-text-large">Work with the Open Science expert community for open and transparent metrics. Discover Open Science costs and trends for your organization. See how you fare in the European Open Science Cloud.</p>
</div>
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1">
<h3 class="uk-h2">
Turn data into <span class="uk-text-primary">actionable insights.</span>
</h3>
<p class="uk-text-large">See what works and what not, reveal hidden potential. Measure research impact, discover trends, connections and collaborations to improve and optimize your future actions.</p>
</div>
</ng-template>
<div class="uk-section uk-section-secondary">
<div class="uk-container uk-container-large">
<div class="uk-width-1-1">
<span class="uk-h6 uk-text-primary">Funders. Research Institutions. Research Initiatives.</span>
<h2 class="uk-h1 uk-margin-remove-top uk-width-3-5@l">Simplify research monitoring & evaluation<span class="uk-text-primary">.</span></h2>
</div>
<div id="js-sticky-parallax-images-all" style="min-height: 300vh">
<div class="uk-height-viewport monitor-dark-logo-background uk-sticky" uk-sticky="bottom: #js-sticky-parallax-images-all; target-offset: true">
<div class="uk-grid" uk-grid style="height: 100vh;">
<div id="scrolling-section" style="min-height: 300vh">
<div class="uk-height-viewport monitor-dark-logo-background uk-sticky" uk-sticky="bottom: #scrolling-section; target-offset: true">
<div class="uk-grid" style="height: 100vh;" uk-grid>
<div class="uk-width-expand uk-first-column uk-position-relative uk-height-1-1">
<div class="monitor-dark-logo-background">
<div uk-parallax="target: #js-sticky-parallax-images-all;">
<div uk-parallax="target: #scrolling-section;">
<img class="uk-position-center" src="assets/monitor-assets/home/ipad.png" alt="ipad" loading="lazy"
uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; opacity: 1; easing:0"
uk-parallax="target: #scrolling-section; start: 100vh; opacity: 1; easing:0"
style="height: 75vh;">
</div>
</div>
</div>
<div class="uk-inline uk-width-expand uk-height-1-1">
<div>
<div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
<ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-center-left'}"></ng-container>
<div uk-parallax="target: #scrolling-section; y: 55vh, 45vh;">
<ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-center-left', id: 'scrolling-section'}"></ng-container>
</div>
</div>
</div>
@ -303,42 +303,44 @@
</div>
</div>
</div>
<ng-template #scrolling_text let-position_class="position_class">
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 0vh; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 99%,0">
<h3 class="uk-h2 uk-text-primary">
Monitor, discover and understand.
</h3>
<p class="uk-text-large">Track your organization’s research output in a comprehensive manner. Identify research pathways across key dimensions with granular and timely indicators.</p>
</div>
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 200vh; opacity: 0,1 20%,1 99%,0">
<h3 class="uk-h2">
<span class="uk-text-primary">Enhance</span> open science uptake<span class="uk-text-primary">.</span>
</h3>
<p class="uk-text-large">Work with the Open Science expert community for open and transparent metrics. Discover Open Science costs and trends for your organization. See how you fare in the European Open Science Cloud.</p>
</div>
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1">
<h3 class="uk-h2">
Turn data into <span class="uk-text-primary">actionable insights.</span>
</h3>
<p class="uk-text-large">See what works and what not, reveal hidden potential. Measure research impact, discover trends, connections and collaborations to improve and optimize your future actions.</p>
</div>
</ng-template>
<div class="uk-section uk-section-large uk-section-secondary">
<div class="uk-container uk-container-large">
<div>
<span class="uk-text-large uk-text-primary">Funders. Research Institutions. Research Initiatives.</span>
<h2 class="uk-h1 uk-margin-remove-top">Simplify research monitoring & evaluation<span class="uk-text-primary">.</span></h2>
</div>
<div id="js-sticky-parallax-images-all" style="min-height: 300vh">
<div class="uk-sticky" uk-sticky="bottom: #js-sticky-parallax-images-all">
<div id="scrolling-section-tablet" class="uk-visible@s" style="min-height: 300vh">
<div class="uk-sticky uk-height-viewport" uk-sticky="bottom: #scrolling-section-tablet; target-offset: true">
<div class="uk-grid uk-grid-small" style="height: 100vh;" uk-grid>
<div class="uk-width-expand uk-first-column uk-position-relative uk-height-1-1">
<div>
<div uk-parallax="target: #scrolling-section-tablet;">
<img class="uk-position-center" src="assets/monitor-assets/home/ipad-tablet.png" alt="ipad" loading="lazy"
uk-parallax="target: #scrolling-section-tablet; start: 100vh; opacity: 1; easing:0"
style="height: 45vh;">
</div>
</div>
</div>
<div class="uk-inline uk-width-expand uk-height-1-1">
<div>
<div uk-parallax="target: #scrolling-section-tablet; y: 55vh, 45vh;">
<ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-center-left', id: 'scrolling-section-tablet'}"></ng-container>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="scrolling-section-mobile" class="uk-hidden@s" style="min-height: 300vh">
<div class="uk-sticky" uk-sticky="bottom: #scrolling-section-mobile">
<div>
<div style="height: 100vh;">
<div class="uk-text-center uk-padding" style="height: 45vh;" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; opacity: 1; easing:0">
<img class="uk-height-1-1" src="assets/monitor-assets/home/ipad-mobile.png" alt="ipad" loading="lazy">
<div class="uk-text-center uk-padding" style="height: 45vh;" uk-parallax="target: #scrolling-section-mobile; start: 100vh; opacity: 1; easing:0">
<img class="uk-height-1-1" src="assets/monitor-assets/home/ipad-mobile.png" alt="ipad" loading="lazy">
</div>
<div class="uk-position-relative" style="height: 55vh;">
<ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-center', id: 'scrolling-section-mobile'}"></ng-container>
</div>
<div class="uk-position-relative" style="height: 55vh;">
<ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-center'}"></ng-container>
</div>
</div>
</div>
</div>
@ -510,7 +512,7 @@
<li [id]="'all'" class="uk-overflow-auto">
<div class="uk-padding-small uk-padding-remove-right" uk-height-match="target: .uk-card; row: false">
<div class="uk-grid uk-grid-small uk-flex-nowrap" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<div *ngFor="let stakeholder of stakeholders" class="uk-width-4-5 uk-flex-none" uk-scrollspy-class>
<div *ngFor="let stakeholder of stakeholders" class="uk-width-4-5 uk-width-2-5@s uk-flex-none" uk-scrollspy-class>
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
</div>
@ -519,7 +521,7 @@
<li [id]="stakeholderEntities.FUNDERS" class="uk-overflow-auto">
<div class="uk-padding-small uk-padding-remove-right" uk-height-match="target: .uk-card; row: false">
<div class="uk-flex uk-grid uk-grid-small uk-flex-nowrap" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<div *ngFor="let funder of funders" class="uk-width-4-5 uk-flex-none" uk-scrollspy-class>
<div *ngFor="let funder of funders" class="uk-width-4-5 uk-width-2-5@s uk-flex-none" uk-scrollspy-class>
<browse-stakeholder [stakeholder]="funder"></browse-stakeholder>
</div>
</div>
@ -528,7 +530,7 @@
<li [id]="stakeholderEntities.RIS" class="uk-overflow-auto">
<div class="uk-padding-small uk-padding-remove-right" uk-height-match="target: .uk-card; row: false">
<div class="uk-flex uk-grid uk-grid-small uk-flex-nowrap" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<div *ngFor="let ri of ris" class="uk-width-4-5 uk-flex-none" uk-scrollspy-class>
<div *ngFor="let ri of ris" class="uk-width-4-5 uk-width-2-5@s uk-flex-none" uk-scrollspy-class>
<browse-stakeholder [stakeholder]="ri"></browse-stakeholder>
</div>
</div>
@ -537,7 +539,7 @@
<li [id]="stakeholderEntities.ORGANIZATIONS" class="uk-overflow-auto">
<div class="uk-padding-small uk-padding-remove-right" uk-height-match="target: .uk-card; row: false">
<div class="uk-flex uk-grid uk-grid-small uk-flex-nowrap" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<div *ngFor="let organization of organizations" class="uk-width-4-5 uk-flex-none" uk-scrollspy-class>
<div *ngFor="let organization of organizations" class="uk-width-4-5 uk-width-2-5@s uk-flex-none" uk-scrollspy-class>
<browse-stakeholder [stakeholder]="organization"></browse-stakeholder>
</div>
</div>

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

@ -70,6 +70,7 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit, IDeactiv
@ViewChild('AlertModal') modal;
private errorMessages: ErrorMessagesComponent;
private subscriptions = [];
private mutationObserver: MutationObserver;
private user: User;
@ViewChildren('scrolling_element') elements: QueryList<ElementRef>;
@ViewChild('contact') contact: ElementRef;
@ -141,6 +142,9 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit, IDeactiv
value.disconnect();
}
});
if(this.mutationObserver) {
this.mutationObserver.disconnect();
}
}
ngAfterViewInit() {
@ -169,7 +173,7 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit, IDeactiv
if(this.contact) {
intersectionObserver.observe(this.contact.nativeElement);
}
let mutationObserver = new MutationObserver(entries => {
this.mutationObserver = new MutationObserver(entries => {
entries.forEach(entry => {
if (entry.attributeName === 'style') {
let opacities: number[] = this.elements.map(element => +element.nativeElement.style.opacity);
@ -184,11 +188,12 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit, IDeactiv
}
})
});
this.elements.forEach(element => {
mutationObserver.observe(element.nativeElement, {attributes: true});
this.elements.changes.subscribe(() => {
this.elements.forEach(element => {
this.mutationObserver.observe(element.nativeElement, {attributes: true});
});
});
this.subscriptions.push(intersectionObserver);
this.subscriptions.push(mutationObserver);
}
private getPageContents() {

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit e0c45b1065a2456620f8b4774ab27ecc17b0bb87
Subproject commit da144c1c77012fa4489dd84f013d499f9df8f72a

2
src/assets/common-assets

@ -1 +1 @@
Subproject commit 0c6b2ac12b4796e41bf4cc8de93c157efa866543
Subproject commit cd44ace5d067999ed6d852f20204d5a05385580b

BIN
src/assets/monitor-assets/home/ipad-tablet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit 996b48573c7cc42a8c50ac447f1fd84c7f0836c4
Subproject commit 99ecab0b4e9ceed21424c8fa26ef270b4695b11e