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

[Monitor | Trunk]: 1. Add new assets. 2. Add a new css for theme-changes. 3. Changes on home, about, contact-us 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor@58983 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-06-23 21:01:19 +00:00
parent 0bb9d7dc3f
commit f803378ee0
17 changed files with 292 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
angular.json
View File

@ -25,6 +25,9 @@
"node_modules/datatables.net-dt/css/jquery.dataTables.css" "node_modules/datatables.net-dt/css/jquery.dataTables.css"
], ],
"scripts": [ "scripts": [
"src/assets/common-assets/common/jquery.js",
"src/assets/common-assets/common/uikit.min.js",
"src/assets/common-assets/common/uikit-icons.min.js",
"node_modules/jquery/dist/jquery.js", "node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js" "node_modules/datatables.net/js/jquery.dataTables.js"
] ]
@ -94,6 +97,9 @@
"polyfills": "src/polyfills.ts", "polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json", "tsConfig": "src/tsconfig.spec.json",
"scripts": [ "scripts": [
"src/assets/common-assets/common/jquery.js",
"src/assets/common-assets/common/uikit.min.js",
"src/assets/common-assets/common/uikit-icons.min.js",
"node_modules/jquery/dist/jquery.js", "node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js" "node_modules/datatables.net/js/jquery.dataTables.js"
], ],

1
src/app/app-routing.module.ts
View File

@ -35,6 +35,7 @@ const routes: Routes = [
resolve: {envSpecific: EnvironmentSpecificResolver} resolve: {envSpecific: EnvironmentSpecificResolver}
}, },
{path: 'error', component: OpenaireErrorPageComponent, resolve: {envSpecific: EnvironmentSpecificResolver}}, {path: 'error', component: OpenaireErrorPageComponent, resolve: {envSpecific: EnvironmentSpecificResolver}},
{ path: 'theme', loadChildren: './openaireLibrary/utils/theme/theme.module#ThemeModule'},
{ {
path: '**', path: '**',
pathMatch: 'full', pathMatch: 'full',

3
src/app/app.component.ts
View File

@ -57,7 +57,6 @@ export class AppComponent {
} }
ngOnInit() { ngOnInit() {
console.log(properties);
this.propertiesService.loadEnvironment() this.propertiesService.loadEnvironment()
.then(es => { .then(es => {
this.properties = this.propertiesService.envSpecific; this.properties = this.propertiesService.envSpecific;
@ -84,7 +83,7 @@ export class AppComponent {
items: [] items: []
}); });
this.menuItems.push({ this.menuItems.push({
rootItem: new MenuItem("stakeholders", "Members in Action", "", "/search/find/stakeholders", false, [], null, {}), rootItem: new MenuItem("stakeholders", "Browse Members", "", "/search/find/stakeholders", false, [], null, {}),
items: [] items: []
}); });
this.menuItems.push({ this.menuItems.push({

31
src/app/contact/contact.component.html
View File

@ -1,15 +1,4 @@
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld> <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
<ng-template #info>
<div class="uk-margin-auto-top uk-margin-remove-bottom uk-text-bold uk-h4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<div class="uk-margin-top">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</ng-template>
<div class="uk-section"> <div class="uk-section">
<div class="uk-align-center"> <div class="uk-align-center">
<div *ngIf="showLoading" class="uk-margin-large"> <div *ngIf="showLoading" class="uk-margin-large">
@ -18,18 +7,14 @@
</div> </div>
<div *ngIf="!showLoading" class="uk-container uk-container-large"> <div *ngIf="!showLoading" class="uk-container uk-container-large">
<div class="uk-grid-divider uk-grid uk-flex-center" uk-grid> <div class="uk-grid-divider uk-grid uk-flex-center" uk-grid>
<!--<div class="uk-width-1-1 uk-hidden@m"> <div class="uk-width-1-1 uk-width-1-2@m">
<ng-container *ngTemplateOutlet="info"></ng-container> <div class="uk-text-center uk-margin-medium-bottom">
</div>--> <h1>Contact us to learn more</h1>
<contact-us formTitle="Contact us to learn more" class="uk-width-1-1 uk-hidden@m" <div>We’d be happy to provide more information on OpenAIRE Monitor – please fill in your details below to send your questions to our team.</div>
[properties]="properties" [errorMessage]="errorMessage" </div>
[contactForm]="contactForm" (sendEmitter)="send($event)"></contact-us> <contact-us [properties]="properties" [errorMessage]="errorMessage" [organizationTypes]="organizationTypes"
<contact-us formTitle="Contact us to learn more" class="uk-width-1-2 uk-visible@m" [contactForm]="contactForm" (sendEmitter)="send($event)"></contact-us>
[properties]="properties" [errorMessage]="errorMessage" </div>
[contactForm]="contactForm" (sendEmitter)="send($event)"></contact-us>
<!--<div class="uk-width-1-2 uk-visible@m">
<ng-container *ngTemplateOutlet="info"></ng-container>
</div>-->
</div> </div>
</div> </div>
</div> </div>

27
src/app/contact/contact.component.ts
View File

@ -9,13 +9,12 @@ import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class"; import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
import {HelperService} from "../openaireLibrary/utils/helper/helper.service"; import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service"; import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
import {FormBuilder, FormGroup, Validators} from "@angular/forms"; import {AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators} from "@angular/forms";
@Component({ @Component({
selector: 'contact', selector: 'contact',
templateUrl: './contact.component.html', templateUrl: './contact.component.html',
}) })
export class ContactComponent implements OnInit { export class ContactComponent implements OnInit {
public url: string = null; public url: string = null;
public pageTitle: string = "OpenAIRE - Monitor | Contact Us"; public pageTitle: string = "OpenAIRE - Monitor | Contact Us";
@ -26,6 +25,11 @@ export class ContactComponent implements OnInit {
public properties: EnvProperties = null; public properties: EnvProperties = null;
public pageContents = null; public pageContents = null;
public divContents = null; public divContents = null;
public organizationTypes: string[] = [
'Funding agency', 'University / Research Center',
'Research Infrastructure', 'Government',
'Non-profit', 'Industry', 'Other'
];
public contactForm: FormGroup; public contactForm: FormGroup;
@ViewChild('AlertModal') modal; @ViewChild('AlertModal') modal;
@ -47,7 +51,6 @@ export class ContactComponent implements OnInit {
this.route.data.subscribe((data: { envSpecific: EnvProperties }) => { this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific; this.properties = data.envSpecific;
this.email = {body: '', subject: '', recipients: []}; this.email = {body: '', subject: '', recipients: []};
if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) { if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
this.piwiksub = this._piwikService.trackView(this.properties, this.pageTitle, this.properties.piwikSiteId).subscribe(); this.piwiksub = this._piwikService.trackView(this.properties, this.pageTitle, this.properties.piwikSiteId).subscribe();
} }
@ -84,25 +87,35 @@ export class ContactComponent implements OnInit {
this.errorMessage = 'Please fill in all the required fields!'; this.errorMessage = 'Please fill in all the required fields!';
} }
} }
private validatorType(options: string[]): ValidatorFn {
return (control: AbstractControl): { [key: string]: boolean } | null => {
if (options.filter(type => type === control.value).length === 0) {
return {'type': false};
}
return null;
}
}
public reset() { public reset() {
this.contactForm = this.fb.group( { this.contactForm = this.fb.group( {
name: this.fb.control('', Validators.required), name: this.fb.control('', Validators.required),
surname: this.fb.control('', Validators.required), surname: this.fb.control('', Validators.required),
email: this.fb.control('', [Validators.required, Validators.email]), email: this.fb.control('', [Validators.required, Validators.email]),
affiliation: this.fb.control('', Validators.required), job: this.fb.control('', Validators.required),
stakeholder: this.fb.control('', Validators.required), organization: this.fb.control('', Validators.required),
organizationType: this.fb.control('', [Validators.required, this.validatorType(this.organizationTypes)]),
subject: this.fb.control('', Validators.required), subject: this.fb.control('', Validators.required),
message: this.fb.control('', Validators.required), message: this.fb.control('', Validators.required),
recaptcha: this.fb.control('', Validators.required), recaptcha: this.fb.control('', Validators.required),
}); });
this.errorMessage = ''; this.errorMessage = '';
} }
private sendMail(admins: any) { private sendMail(admins: any) {
this.showLoading = true; this.showLoading = true;
this._emailService.contact(this.properties, this._emailService.contact(this.properties,
Composer.composeEmailForNewStakeholder(this.contactForm.value, admins), Composer.composeEmailForMonitor(this.contactForm.value, admins),
this.contactForm.value.recaptcha).subscribe( this.contactForm.value.recaptcha).subscribe(
res => { res => {
if (res) { if (res) {

96
src/app/home/home.component.css
View File

@ -69,6 +69,30 @@
width: 16%; width: 16%;
} }
.dashboard-section .info > div {
opacity: 0.4;
position: relative;
}
.dashboard-section .info > div:hover {
opacity: 1;
}
.dashboard-section .info > div > span {
position: absolute;
top: -5px;
left: 0;
display: none;
}
.dashboard-section .info > div > span polygon {
color: var(--portal-main-color);
}
.dashboard-section .info > div.uk-active > span {
display: inline-block;
}
@media (min-width: 1200px) { @media (min-width: 1200px) {
.boat-section { .boat-section {
position: relative; position: relative;
@ -210,13 +234,47 @@
} }
} }
.stakeholder-section .stakeholders .stakeholder {
.stakeholder-section .stakeholders .header { height: 250px;
position: relative;
height: 150px;
} }
.stakeholder-section .stakeholders .header > img { .stakeholder-section .stakeholders .stakeholder.small {
height: 250px;
box-shadow: 0 3px 6px #00000029;
}
.stakeholder-section .stakeholders .stakeholder.medium {
height: 275px;
box-shadow: 0 3px 6px #00000029;
}
.stakeholder-section .stakeholders .stakeholder.large {
height: 300px;
box-shadow: 0 3px 6px #00000029;
}
.stakeholder-section .stakeholders .stakeholder.funder {
background-color: #F8D5E3;
}
.stakeholder-section .stakeholders .stakeholder.ri {
background-color: #9AD5CA;
}
.stakeholder-section .stakeholders .stakeholder.organization {
background-color: #C5E0E9;
}
.stakeholder-section .stakeholders .stakeholder .header {
position: relative;
height: 150px;
background-size: 450px;
background-position: bottom center;
background-repeat: no-repeat;
background-image: url("/assets/monitor-assets/home/stakeholder.svg");
}
.stakeholder-section .stakeholders .stakeholder .header > img {
max-width: 50%; max-width: 50%;
max-height: 50%; max-height: 50%;
position: absolute; position: absolute;
@ -225,7 +283,7 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.stakeholder-section .stakeholders .header > div { .stakeholder-section .stakeholders .stakeholder .header > div {
width: 100%; width: 100%;
position: absolute; position: absolute;
left: 50%; left: 50%;
@ -234,35 +292,11 @@
text-align: center; text-align: center;
} }
.stakeholder-section .stakeholders .header > div > img { .stakeholder-section .stakeholders .stakeholder .header > div > img {
max-width: 50%; max-width: 50%;
max-height: 50%; max-height: 50%;
} }
.stakeholder-section .stakeholders .header.small {
height: 150px;
}
.stakeholder-section .stakeholders .header.medium {
height: 200px;
}
.stakeholder-section .stakeholders .header.large {
height: 300px;
}
.stakeholder-section .stakeholders .funder .header {
background-color: #F8D5E3;
}
.stakeholder-section .stakeholders .ri .header {
background-color: #9AD5CA;
}
.stakeholder-section .stakeholders .organization .header {
background-color: #C5E0E9;
}
@media (min-width: 640px) { @media (min-width: 640px) {
.stakeholder-section .tabs > ul > li { .stakeholder-section .tabs > ul > li {

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

@ -3,11 +3,11 @@
name="OpenAIRE Monitor"> name="OpenAIRE Monitor">
</schema2jsonld> </schema2jsonld>
<div class="uk-section home-background uk-background-top-center"> <div class="uk-section home-background uk-background-top-center">
<div class="uk-container uk-container-large uk-text-center uk-section uk-margin-large-bottom" <div class="uk-container uk-container-large uk-text-center uk-section uk-section-small uk-margin-large-bottom"
uk-parallax="media: @l; y: -200; easing: 0.5"> uk-parallax="media: @l; y: -200; easing: 0.5">
<h1 class="uk-margin-top uk-text-bold">A new era of monitoring research.</h1> <h1 class="uk-margin-top">A new era of monitoring research.</h1>
<h2 class="uk-margin-remove-top uk-text-bold">Open data. Open methodologies.</h2> <h3 class="uk-margin-remove-top">Open data. Open methodologies.</h3>
<div class="uk-margin-medium-top uk-text-large"> <div class="uk-margin-medium-top">
Work together with us to view, understand and visualize<br>research statistics and indicators. Work together with us to view, understand and visualize<br>research statistics and indicators.
</div> </div>
</div> </div>
@ -18,80 +18,97 @@
<div #ref [@captain-left]="(captains)?'after':'before'" class="captain-left uk-visible@m"></div> <div #ref [@captain-left]="(captains)?'after':'before'" class="captain-left uk-visible@m"></div>
<div [@captain-right]="(captains)?'after':'before'" class="captain-right uk-visible@m"></div> <div [@captain-right]="(captains)?'after':'before'" class="captain-right uk-visible@m"></div>
</div> </div>
<div class="uk-container uk-container-large uk-margin-large-top uk-text-justify"> <div class="uk-container uk-container-large uk-margin-large-top">
<div class="uk-margin-left uk-margin-right uk-margin-large-bottom"> <div class="uk-margin-left uk-margin-right uk-margin-large-bottom">
<div class="uk-child-width-1-3@m uk-grid uk-grid-large" uk-grid> <div class="uk-child-width-1-3@m uk-grid info" uk-grid>
<div [@1]="state.toString()" class="clickable" (click)="startAnimation()"> <div [@1]="state.toString()" class="clickable" [class.uk-active]="state === 1" (click)="startAnimation()">
<h5 class="uk-margin-remove-bottom uk-text-bold"> <h5>
Get a complete picture Get a complete picture
</h5> </h5>
<div class="uk-text-large"> <div>
Track and discover your organization’s research output. Use the OpenAIRE Research Graph to get a 360o Track and discover your organization’s research output. Use the OpenAIRE Research Graph to get a 360<span>&#176;</span>
view of your publications-data-code. view of your publications-data-code.
</div> </div>
<span class="uk-icon">
<svg width="30" height="30" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="triangle-up">
<polygon points="5 13 10 8 15 13"></polygon>
</svg>
</span>
</div> </div>
<div [@2]="state.toString()" class="clickable" (click)="startAnimation(2)"> <div [@2]="state.toString()" class="clickable" [class.uk-active]="state === 2" (click)="startAnimation(2)">
<h5 class="uk-margin-remove-bottom uk-text-bold"> <h5>
Monitor open science compliance Monitor open science compliance
</h5> </h5>
<div class="uk-text-large"> <div>
Work with us, the OS expert community, for open and transparent metrics. Discover open science trends Work with the open science expert community for open and transparent metrics. Discover open science trends
for your organization and see how you fare in EOSC. for your organization and see how you fare in EOSC.
</div> </div>
<span class="uk-icon">
<svg width="30" height="30" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="triangle-up">
<polygon points="5 13 10 8 15 13"></polygon>
</svg>
</span>
</div> </div>
<div [@3]="state.toString()" class="clickable" (click)="startAnimation(3)"> <div [@3]="state.toString()" class="clickable" [class.uk-active]="state === 3" (click)="startAnimation(3)">
<h5 class="uk-margin-remove-bottom uk-text-bold"> <h5>
Turn research results to insights Turn research results to insights
</h5> </h5>
<div class="uk-text-large"> <div>
Understand your community. Measure impact, discover trends, connections and collaborations to improve Understand your community. Measure impact, discover trends, connections and collaborations to improve
and optimize your future actions. and optimize your future actions.
</div> </div>
<span class="uk-icon">
<svg width="30" height="30" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="triangle-up">
<polygon points="5 13 10 8 15 13"></polygon>
</svg>
</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div <div class="uk-section">
class="uk-section uk-section-large uk-container uk-container-large uk-margin-large-top boat-section uk-text-large uk-text-justify uk-position-relative"> <h3 class="uk-text-center" uk-parallax="y: -40; easing: 2">Why use OpenAIRE Monitor Dashboard?</h3>
<div class="uk-grid uk-grid-match uk-margin-left uk-margin-right uk-child-width-1-2@m" uk-grid> <div
<div class="boat uk-hidden@m"></div> class="uk-section uk-section-large uk-container uk-container-large uk-margin-large-top boat-section uk-position-relative">
<div class="boat uk-visible@l"></div> <div class="uk-grid uk-grid-match uk-margin-left uk-margin-right uk-child-width-1-2@m" uk-grid>
<div class="first"> <div class="boat uk-hidden@m"></div>
<div> <div class="boat uk-visible@l"></div>
<h3>Global outlook</h3> <div class="first" uk-parallax="y: -40; easing: 2">
<div> <div>
Monitor is built on the OpenAIRE Research Graph. An interconnected scholarly communication shared data <h4>Global outlook</h4>
resource <div>
from open initiatives around the world, of global interest. Monitor is built on the OpenAIRE Research Graph. Linked scholarly information from open initiatives around
the world. Beyond publications.
</div>
</div> </div>
</div> </div>
</div> <div class="second" uk-parallax="y: -40; easing: 2">
<div class="second">
<div>
<h3>Transparent methodology</h3>
<div> <div>
We base our service on open science principles. We rely on open data sources, and document our algorithms for <h4>Transparent methodology</h4>
every metric and indicator we publish. <div>
Based on open science principles: open data sources, well documented metrics and indicators. Open APIs.
Built together with the OS community.
</div>
</div> </div>
</div> </div>
</div> <div class="third" uk-parallax="y: -40; easing: 1">
<div class="third">
<div>
<h3>Customised to your needs</h3>
<div> <div>
Choose from a variety of pre-defined metrics. Select how to visualize them, and who to share with. <h4>Customised to your needs</h4>
Use our advanced tools and expertise add add your own metrics. <div>
A variety of predefined metrics to choose from. Add your own metrics. Select how to visualize them, and who
to share with.
</div>
</div> </div>
</div> </div>
</div> <div class="fourth" uk-parallax="y: -40; easing: 0.5">
<div class="fourth">
<div>
<h3>Minimum effort to join</h3>
<div> <div>
You only share some information with us to include in out backend aggregating and data mining, <h4>Minimum effort to join</h4>
and we deliver a view of your world. As you see fit. <div>
You only share some information with us to include in out backend aggregating and data mining,
and we deliver a view of your world. As you see fit.
</div>
</div> </div>
</div> </div>
</div> </div>
@ -102,29 +119,29 @@
</div> </div>
<div class="uk-section uk-section-large graph-section uk-margin-right uk-margin-left uk-margin-large-top"> <div class="uk-section uk-section-large graph-section uk-margin-right uk-margin-left uk-margin-large-top">
<div class="uk-container uk-margin-medium-top"> <div class="uk-container uk-margin-medium-top">
<div class="uk-text-center uk-margin-medium-bottom"> <div class="uk-text-center uk-margin-large-bottom">
<h2 class="uk-text-bold">Tap into the OpenAIRE Research Graph</h2> <h1>Tap into the OpenAIRE Research Graph</h1>
</div> </div>
<div class="uk-grid uk-child-width-1-5@m uk-child-width-1-2"> <div class="uk-grid uk-child-width-1-5@m uk-child-width-1-2">
<div *ngIf="publicationsSize" class="uk-margin-medium-bottom uk-text-center"> <div *ngIf="publicationsSize" class="uk-margin-medium-bottom uk-text-center">
<div class="uk-h2 uk-margin portal-color uk-text-bold">{{publicationsSize.count|number}} </div> <h4 class="uk-margin portal-color uk-text-bold">{{publicationsSize.count|number}}</h4>
<div class="uk-h5 uk-margin uk-text-uppercase">publications</div> <div class="uk-margin uk-text-uppercase">publications</div>
</div> </div>
<div *ngIf="datasetsSize" class="uk-margin-medium-bottom uk-text-center"> <div *ngIf="datasetsSize" class="uk-margin-medium-bottom uk-text-center">
<div class="uk-h2 uk-margin portal-color uk-text-bold">{{datasetsSize.count|number}} </div> <h4 class="uk-margin portal-color uk-text-bold">{{datasetsSize.count|number}}</h4>
<div class="uk-h5 uk-margin uk-text-uppercase">research data</div> <div class="uk-margin uk-text-uppercase">research data</div>
</div> </div>
<div *ngIf="softwareSize" class="uk-margin-medium-bottom uk-text-center"> <div *ngIf="softwareSize" class="uk-margin-medium-bottom uk-text-center">
<div class="uk-h2 uk-margin portal-color uk-text-bold">{{softwareSize.count|number}} </div> <h4 class="uk-margin portal-color uk-text-bold">{{softwareSize.count|number}} </h4>
<div class="uk-h5 uk-margin uk-text-uppercase">software</div> <div class="uk-margin uk-text-uppercase">software</div>
</div> </div>
<div *ngIf="otherSize" class="uk-margin-medium-bottom uk-text-center"> <div *ngIf="otherSize" class="uk-margin-medium-bottom uk-text-center">
<div class="uk-h2 uk-margin portal-color uk-text-bold">{{otherSize.count|number}} </div> <h4 class="uk-margin portal-color uk-text-bold">{{otherSize.count|number}} </h4>
<div class="uk-h5 uk-margin uk-text-uppercase">other research products</div> <div class="uk-margin uk-text-uppercase">other</div>
</div> </div>
<div *ngIf="fundersSize" class="uk-margin-medium-bottom uk-text-center uk-width-1-5@m uk-width-1-1"> <div *ngIf="fundersSize" class="uk-margin-medium-bottom uk-text-center uk-width-1-5@m uk-width-1-1">
<div class="uk-h2 uk-margin portal-color uk-text-bold">{{fundersSize.count|number}} </div> <h4 class="uk-margin portal-color uk-text-bold">{{fundersSize.count|number}} </h4>
<div class="uk-h5 uk-margin uk-text-uppercase">Funders</div> <div class="uk-margin uk-text-uppercase">Funders</div>
</div> </div>
</div> </div>
</div> </div>
@ -146,25 +163,28 @@
</div> </div>
<div class="stakeholders uk-child-width-1-2 uk-child-width-1-3@m uk-grid uk-flex-top uk-flex-wrap-top" <div class="stakeholders uk-child-width-1-2 uk-child-width-1-3@m uk-grid uk-flex-top uk-flex-wrap-top"
uk-grid="masonry: true"> uk-grid="masonry: true">
<div *ngFor="let stakeholder of stakeholders" [attr.data-type]="stakeholder.type" class="uk-margin-medium-bottom" [ngClass]="stakeholder.type"> <div *ngFor="let stakeholder of stakeholders" [attr.data-type]="stakeholder.type" class="uk-margin-medium-bottom">
<a *ngIf="directLink" [href]="getStakeholderPageUrl(stakeholder)" target="_blank"> <div [ngClass]="[stakeholder.type, stakeholder.size]" class="stakeholder">
<div class="header" [ngClass]="stakeholder.size"> <a *ngIf="directLink" [href]="getStakeholderPageUrl(stakeholder)" target="_blank">
<img *ngIf="stakeholder.logoUrl" class="uk-margin-auto" [src]="stakeholder.logoUrl"> <div class="header">
</div> <img *ngIf="stakeholder.logoUrl" class="uk-margin-auto" [src]="stakeholder.logoUrl">
</a> </div>
<a *ngIf="!directLink" (click)="confirmModalOpen(stakeholder)"> <div class="uk-padding">
<div class="header" [ngClass]="stakeholder.size"> <h6 class="uk-text-bold">{{stakeholder.name}}</h6>
<img *ngIf="stakeholder.logoUrl" class="uk-margin-auto" [src]="stakeholder.logoUrl"> </div>
</div> </a>
</a> <a *ngIf="!directLink" (click)="confirmModalOpen(stakeholder)">
<a *ngIf="directLink" [href]="getStakeholderPageUrl(stakeholder)" target="_blank"> <div class="header">
<h6 class="uk-margin-top uk-text-bold">{{stakeholder.name}}</h6> <img *ngIf="stakeholder.logoUrl" class="uk-margin-auto" [src]="stakeholder.logoUrl">
</a> </div>
<a *ngIf="!directLink" (click)="confirmModalOpen(stakeholder)"> <div class="uk-padding">
<h6 class="uk-margin-top uk-text-bold">{{stakeholder.name}}</h6> <h6 class="uk-text-bold">{{stakeholder.name}}</h6>
</a> </div>
</a>
</div>
</div> </div>
<div *ngIf="stakeholdersNumber === 0" [attr.data-type]="type" class="uk-text-center uk-text-large uk-width-1-1 uk-margin-large-top"> <div *ngIf="stakeholdersNumber === 0" [attr.data-type]="type"
class="uk-text-center uk-width-1-1 uk-margin-large-top">
Nothing here yet. Nothing here yet.
</div> </div>
</div> </div>
@ -180,32 +200,39 @@
</ul> </ul>
</div> </div>
<div class="stakeholders uk-child-width-1-2 uk-grid uk-grid-small" uk-grid=""> <div class="stakeholders uk-child-width-1-2 uk-grid uk-grid-small" uk-grid="">
<div *ngFor="let stakeholder of stakeholders" [attr.data-type]="stakeholder.type" [ngClass]="stakeholder.type"> <div *ngFor="let stakeholder of stakeholders" [attr.data-type]="stakeholder.type">
<a [href]="getStakeholderPageUrl(stakeholder)" target="_blank"> <div [ngClass]="stakeholder.type" class="stakeholder">
<div class="header"> <a [href]="getStakeholderPageUrl(stakeholder)" target="_blank">
<div> <div class="header">
<img *ngIf="stakeholder.logoUrl" class="uk-margin-auto" [src]="stakeholder.logoUrl"> <img *ngIf="stakeholder.logoUrl" class="uk-margin-auto" [src]="stakeholder.logoUrl">
<h6 class="uk-margin-top uk-text-bold">{{stakeholder.name}}</h6>
</div> </div>
</div> <div class="uk-padding">
</a> <h6 class="uk-text-bold">{{stakeholder.name}}</h6>
</div>
</a>
</div>
</div> </div>
<div *ngIf="stakeholdersNumber === 0" [attr.data-type]="type" class="uk-text-center uk-text-large uk-width-1-1 uk-margin-large-top"> <div *ngIf="stakeholdersNumber === 0" [attr.data-type]="type"
class="uk-text-center uk-width-1-1 uk-margin-large-top">
Nothing here yet. Nothing here yet.
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="uk-section uk-section-large uk-container uk-margin-large-top uk-margin-large-bottom"> <div class="uk-section uk-section-large uk-container uk-margin-large-bottom">
<div class="uk-grid uk-grid-large uk-flex uk-flex-middle uk-margin-right uk-margin-left" uk-grid> <div class="uk-grid uk-grid-large uk-flex uk-flex-middle uk-margin-right uk-margin-left" uk-grid>
<div class="uk-width-expand"> <div class="uk-width-expand">
<h2 class="uk-text-bold">Contact us to help you.</h2> <h3>Contact us</h3>
<div class="uk-margin-medium uk-text-large">Are you looking for more? Get in touch with our team and let us help <div class="uk-margin-medium">
you. <p>We invite all organizations involved in scholarly communications and research monitoring to join our
services.</p>
<p><span class="uk-text-bold">Minimum effort to join:</span> You share basic information with us. We aggregate
and data/text mine, you validate.<br></p>
<p>Would you like to know more?</p>
</div> </div>
<div class="uk-inline"><a class="uk-button portal-button" routerLink="/contact-us">Get in Touch</a></div> <div class="uk-inline"><a class="uk-button portal-button" routerLink="/contact-us">Get in Touch</a></div>
</div> </div>
<div class="uk-text-center uk-width-1-1@s uk-width-1-3@m uk-flex-first@m uk-padding-remove-left uk-text-center"> <div class="uk-text-center uk-width-1-1@s uk-width-2-5@m uk-flex-first@m uk-padding-remove-left uk-text-center">
<img class="uk-visible@m" src="assets/monitor-assets/home/seagull.png" width="256"> <img class="uk-visible@m" src="assets/monitor-assets/home/seagull.png" width="256">
<img class="uk-hidden@m" src="assets/monitor-assets/home/seagull.png" width="100"> <img class="uk-hidden@m" src="assets/monitor-assets/home/seagull.png" width="100">
</div> </div>
@ -214,7 +241,7 @@
<div class="uk-section-muted" <div class="uk-section-muted"
uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"> uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}">
<div class="uk-container uk-container-large"> <div class="uk-container uk-container-large">
<other-portals [properties]="properties"></other-portals> <other-portals [properties]="properties" portal="monitor"></other-portals>
</div> </div>
</div> </div>
<modal-alert #AlertModal (alertOutput)="goToPage($event)"> <modal-alert #AlertModal (alertOutput)="goToPage($event)">

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

@ -14,7 +14,6 @@ import {NumberUtils} from "../openaireLibrary/utils/number-utils.class";
import {SearchResearchResultsService} from "../openaireLibrary/services/searchResearchResults.service"; import {SearchResearchResultsService} from "../openaireLibrary/services/searchResearchResults.service";
import {animate, state, style, transition, trigger} from "@angular/animations"; import {animate, state, style, transition, trigger} from "@angular/animations";
import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service"; import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
import {LocalStorageService} from "../openaireLibrary/services/localStorage.service"; import {LocalStorageService} from "../openaireLibrary/services/localStorage.service";
import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder"; import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
import {Session, User} from "../openaireLibrary/login/utils/helper.class"; import {Session, User} from "../openaireLibrary/login/utils/helper.class";
@ -52,37 +51,19 @@ import {UserManagementService} from "../openaireLibrary/services/user-management
state('1', style({ state('1', style({
opacity: 1 opacity: 1
})), })),
state('2', style({
opacity: 0.4
})),
state('3', style({
opacity: 0.4
})),
transition('* => *', [ transition('* => *', [
animate('0.3s') animate('0.3s')
]) ])
]), ]),
trigger('2', [ trigger('2', [
state('1', style({
opacity: 0.4
})),
state('2', style({ state('2', style({
opacity: 1 opacity: 1
})), })),
state('3', style({
opacity: 0.4
})),
transition('* => *', [ transition('* => *', [
animate('0.3s') animate('0.3s')
]) ])
]), ]),
trigger('3', [ trigger('3', [
state('1', style({
opacity: 0.4
})),
state('2', style({
opacity: 0.4
})),
state('3', style({ state('3', style({
opacity: 1 opacity: 1
})), })),

16
src/app/learn-how/learn-how.component.css
View File

@ -1,7 +1,3 @@
.steps {
color: #666666;
}
.steps.uk-visible\@l { .steps.uk-visible\@l {
position: relative; position: relative;
height: 1600px; height: 1600px;
@ -21,7 +17,7 @@
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute; position: absolute;
top: 260px; top: 250px;
left: 270px; left: 270px;
width: 193px; width: 193px;
height: 177px; height: 177px;
@ -40,7 +36,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute; position: absolute;
top: 510px; top: 510px;
left: 680px; left: 700px;
width: 125px; width: 125px;
height: 137px; height: 137px;
} }
@ -57,8 +53,8 @@
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute; position: absolute;
right: 200px; right: 180px;
bottom: 500px; bottom: 470px;
width: 161px; width: 161px;
height: 266px; height: 266px;
} }
@ -75,8 +71,8 @@
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute; position: absolute;
left: 250px; left: 300px;
bottom: 150px; bottom: 120px;
width: 233px; width: 233px;
height: 178px; height: 178px;
} }

6
src/app/learn-how/learn-how.component.html
View File

@ -1,10 +1,10 @@
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld> <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
<div class="uk-section"> <div class="uk-section">
<div class="uk-text-center"> <div class="uk-text-center">
<h1 class="uk-text-bold">See how it works</h1> <h1>See how it works</h1>
<div class="uk-text-large">Use the Monitor Dashboard to view your research results, open science…</div> <div>Use the Monitor Dashboard to view your research results, open science…</div>
</div> </div>
<div class="uk-margin-xlarge-top uk-container uk-container-large uk-text-justify"> <div class="uk-margin-xlarge-top uk-container uk-container-large">
<div class="steps uk-visible@l"> <div class="steps uk-visible@l">
<div class="first"> <div class="first">
<div class="uk-text-center uk-margin-small-bottom"> <div class="uk-text-center uk-margin-small-bottom">

BIN
src/assets/monitor-assets/home/dashboard.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 109 KiB

After

Width:  |  Height:  |  Size: 112 KiB

BIN
src/assets/monitor-assets/home/lighthouse.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 828 KiB

After

Width:  |  Height:  |  Size: 1.2 MiB

14
src/assets/monitor-assets/home/stakeholder.svg Normal file
View File

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="319" height="168" viewBox="0 0 319 168">
<defs>
<filter id="Path_17212" x="0" y="0" width="319" height="168" filterUnits="userSpaceOnUse">
<feOffset dy="3" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="3" result="blur"/>
<feFlood flood-opacity="0.161"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#Path_17212)">
<path id="Path_17212-2" data-name="Path 17212" d="M0,0H301V134.2s-42.014,17.991-81.451,6.034c-40.272-12.21-61.6-14.962-99.828-14.962C44.47,125.277,0,150,0,150Z" transform="translate(9 6)" fill="#fff"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 773 B

24
src/assets/monitor-custom.css
View File

@ -1,24 +1,23 @@
:root { :root {
--portal-main-color: #9ABB55; --portal-main-color: #8DCA26;
--portal-main-contrast: white; --portal-main-contrast: white;
--portal-dark-color: #7c9144; --portal-dark-color: #7cb021;
--openaire-main-color: #313179; --openaire-main-color: #313179;
--explore-portal-color: #D95F2D; --explore-portal-color: #D95F2D;
--provide-portal-color: #37C7E9; --provide-portal-color: #37C7E9;
--monitor-portal-color: #9ABB55; --monitor-portal-color: #8DCA26;
--connect-portal-color: #EBB13E; --connect-portal-color: #EBB13E;
--develop-portal-color: #DA65AB; --develop-portal-color: #DA65AB;
--explore-portal-lower-tone: #a0462c; --explore-portal-lower-tone: #a0462c;
--provide-portal-lower-tone: #3A8FA3; --provide-portal-lower-tone: #3A8FA3;
--monitor-portal-lower-tone: #7c9144; --monitor-portal-lower-tone: #7cb021;
--connect-portal-lower-tone: #b48536; --connect-portal-lower-tone: #b48536;
--develop-portal-lower-tone: #9f4e7e; --develop-portal-lower-tone: #9f4e7e;
} }
.generalSearchForm, .generalSearchForm,
.publicationsSearchForm, .publicationsSearchForm,
.projectsSearchForm, .projectsTableSearchForm, .projectsSearchForm, .projectsTableSearchForm,
@ -32,7 +31,6 @@
background: /*url('search-background.svg')*/ #F7FCFF no-repeat center bottom ; background: /*url('search-background.svg')*/ #F7FCFF no-repeat center bottom ;
background-size: cover !important; background-size: cover !important;
height: inherit; height: inherit;
} }
.monitorApp, .searchForm { .monitorApp, .searchForm {
@ -44,17 +42,15 @@
fill: white; fill: white;
} }
.monitorApp .uk-text-large { .monitorApp h1, .monitorApp .uk-h1, .monitorApp h2, .monitorApp .uk-h2,
font-size: 18px; .monitorApp h3, .monitorApp .uk-h3, .monitorApp h4, .monitorApp .uk-h4,
} .monitorApp h5, .monitorApp .uk-h5, .monitorApp h6 .monitorApp .uk-h6 {
color: #1a1a1a;
.monitorApp h1, .monitorApp h2, .monitorApp h3,
.monitorApp h4, .monitorApp h5, .monitorApp h6 {
color: #212121;
} }
.monitorApp , .monitorApp .uk-card, .monitorApp .color { .monitorApp , .monitorApp .uk-card, .monitorApp .color {
color: #707070; color: #424242;
font-size: 16px;
} }
.monitorApp .portal-button { .monitorApp .portal-button {

36
src/assets/theme-changes.css Normal file
View File

@ -0,0 +1,36 @@
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
.uk-heading-2xlarge, .uk-heading-large, .uk-heading-medium,
.uk-heading-small, .uk-heading-xlarge, h1, h2, h3, h4, h5, h6 {
font-family: "Roboto", sans-serif;
line-height: 1.2;
}
.uk-h1, h1 {
font-size: 54px;
font-weight: 400;
}
.uk-h2, h2 {
font-size: 45px;
font-weight: 400;
}
.uk-h3, h3 {
font-size: 36px;
font-weight: 400;
}
.uk-h4, h4 {
font-size: 27px;
font-weight: 400;
}
.uk-h5, h5 {
font-size: 22px;
font-weight: 500;
}
.uk-h6, h6 {
font-size: 18px;
font-weight: 500;
}

28
src/index.html
View File

@ -40,38 +40,10 @@
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<script>
window.onerror = function (errorMsg) {
if (errorMsg != null && (errorMsg.message && errorMsg.message.indexOf("uikit.js") != -1) || (errorMsg.url &&
errorMsg.url.indexOf("uikit.js") != -1)) {
console.log("********UIKIT Error ***********");
$.getScript("assets/common-assets/common/uikit.min.js?v=1");
$.getScript("assets/common-assets/common/uikit-icons.min.js?v=1");
}
}
</script>
<script src="assets/common-assets/common/jquery.js"></script>
<script src="assets/common-assets/citeproc.js"></script>
<script src="assets/common-assets/common/uikit.min.js?v=1"></script>
<script src="assets/common-assets/common/uikit-icons.min.js?v=1"></script>
<script src="https://cdn.ckeditor.com/4.5.11/full-all/ckeditor.js"></script>
<script>
$(document).ready(function () {
console.log("Is ready - load uikit ***")
$.getScript("assets/common-assets/common/uikit.min.js?v=1");
$.getScript("assets/common-assets/common/uikit-icons.min.js?v=1");
});
</script>
</head> </head>
<body class="" style=""> <body class="" style="">
<div class="uk-offcanvas-content uk-height-viewport"> <div class="uk-offcanvas-content uk-height-viewport">
<app-root></app-root> <app-root></app-root>
</div> </div>

7
src/styles.css
View File

@ -1,6 +1,9 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; @import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "assets/common-assets/common/theme.css";
@import "assets/common-assets/common/custom.css";
@import "assets/common-assets/library.css"; @import "assets/common-assets/library.css";
@import "assets/common-assets/common/custom.css";
@import "assets/common-assets/common/theme.css";
@import "assets/monitor-custom.css"; @import "assets/monitor-custom.css";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import "assets/theme-changes.css";