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

[Monitor | Trunk]: home page redesign 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor@59691 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-10-26 13:11:13 +00:00
parent b2681211bb
commit f97ac0af4c
17 changed files with 243 additions and 531 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,8 +9,10 @@
<div class="uk-grid-divider uk-grid uk-flex-center" uk-grid>
<div class="uk-width-1-1 uk-width-1-2@m">
<div class="uk-text-center uk-margin-medium-bottom">
<h1>Contact us to learn more</h1>
<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>
<h1 class="uk-h2">Contact us to learn more</h1>
<h6 class="uk-text-muted uk-margin-remove-top">
We’d be happy to provide more information on OpenAIRE Monitor – please fill in your details below to send your questions to our team.
</h6>
</div>
<contact-us [properties]="properties" [errorMessage]="errorMessage" [organizationTypes]="organizationTypes"
[contactForm]="contactForm" (sendEmitter)="send($event)"></contact-us>

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

@ -106,7 +106,6 @@ export class ContactComponent implements OnInit {
job: 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),
message: this.fb.control('', Validators.required),
recaptcha: this.fb.control('', Validators.required),
});

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

@ -1,309 +1,90 @@
@media (min-width:1200px) {
.home-background {
@media only screen and (min-width:1200px) {
.girl-background {
background-size: 210px;
background-repeat: no-repeat;
background-position: center right;
background-image: url("/assets/monitor-assets/home/girl.png");
padding-bottom: 100px;
}
.dashboard-section .dashboard {
background-image: url("/assets/monitor-assets/home/dashboard-background.svg");
background-size: contain;
background-repeat: no-repeat;
background-image: url("/assets/monitor-assets/home/lighthouse.png");
background-position: center;
}
}
.dashboard-section{
background-image: url("/assets/monitor-assets/home/graph-background.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: left center;
margin-top: 18vw;
}
@media (max-width:1599px) {
.dashboard-section {
margin-top: 12vw;
}
}
.dashboard-section .dashboard {
transform: translateY(-50%);
background-image: url("/assets/monitor-assets/home/dashboard.png");
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
margin-left: auto;
margin-right: auto;
position: relative;
margin-bottom: -10%;
width: 50%;
height: 0;
padding-top: 25%;
border: 1px solid #E6E6E6;
border-radius: 5px;
box-shadow: 0 3px 10px #00000029;
}
.dashboard-section .dashboard .captain-left {
background-image: url("/assets/monitor-assets/home/captain-left.png");
background-size: contain;
background-repeat: no-repeat;
background-position: top center;
left: -10%;
bottom: -5%;
position: absolute;
height: 36%;
width: 17%;
}
.dashboard-section .dashboard .captain-right {
background-image: url("/assets/monitor-assets/home/captain-right.png");
background-size: contain;
background-repeat: no-repeat;
background-position: top center;
right: -8%;
bottom: -5%;
position: absolute;
height: 35%;
width: 16%;
}
.dashboard-section .info > div {
opacity: 0.4;
position: relative;
opacity: 0.3;
}
.dashboard-section .info > .uk-active > h5 {
color: var(--portal-main-color);
}
.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) {
.boat-section {
position: relative;
z-index: 0;
height: 300px;
}
.boat-section .first {
position: absolute;
top: 0;
left: 8%;
width: 32%;
z-index: 2;
}
.boat-section .second {
position: absolute;
top: 3%;
right: 8%;
width: 34%;
z-index: 2;
}
.boat-section .third {
position: absolute;
bottom: 6%;
left: 7%;
width: 34%;
}
.boat-section .fourth {
position: absolute;
bottom: 4%;
right: 7%;
width: 34%;
}
}
@media (min-width: 960px) and (max-width: 1199px){
.boat-section {
background-image: url("/assets/monitor-assets/home/boat.png");
@media only screen and (min-width:960px) {
.hologram {
background-image: url("/assets/monitor-assets/home/hologram.png");
background-size: 20%;
background-repeat: no-repeat;
background-position: center center;
background-size: 30% ;
background-position: bottom center;
}
}
@media (max-width: 959px), (min-width: 1200px) {
.boat-section > div.uk-grid > * {
padding: 0;
}
}
.boat-section .boat {
background-image: url("/assets/monitor-assets/home/boat.png");
background-size: contain;
background-repeat: no-repeat;
margin: 0 0 -30px 50%;
width: 50%;
height: 30vw;
}
.boat-section .boat:not(.uk-hidden\@m) {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
width: 30%;
height: 42%;
z-index: 1;
opacity: 0.9;
margin: 0;
}
.boat-section > div:not(.boat):not(.uk-grid), .boat-section > div.uk-grid > div > div {
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 3px 6px #00000029;
padding: 35px;
margin-bottom: 10px;
}
.graph-section {
background-image: url("/assets/monitor-assets/home/graph-background.svg");
background-size: cover;
background-repeat: no-repeat;
}
.stakeholder-section .tabs {
display: flex;
justify-content: center;
width: 100%;
}
.stakeholder-section .tabs > ul {
list-style: none;
display: flex;
flex-wrap: nowrap;
margin-bottom: 0;
font-size: 16px;
overflow-x: auto;
}
.stakeholder-section .tabs > ul > li {
display: inline-block;
color: #707070;
padding: 5px 15px;
cursor: pointer;
user-select: none;
white-space: nowrap;
margin-left: 25px;
}
.stakeholder-section .tabs > ul > li:hover {
color: #1a1a1a;
padding: 5vh 0;
}
.stakeholder-section .stakeholders {
padding-top: 20px;
min-height: 300px;
}
@media (max-width: 639px) {
.stakeholder-section .uk-subnav-pill > li > a {
color: currentColor;
font-size: 13px;
text-transform: none;
opacity: 0.5;
border-radius: 40px;
border: 1px solid currentColor;
padding: 6px 18px;
line-height: 18px;
}
.stakeholder-section .tabs > ul > li:nth-child(1) {
margin-left: 0;
}
.stakeholder-section .uk-subnav-pill > li:hover > a {
opacity: 1;
}
.stakeholder-section .tabs > ul > li.uk-active {
color: #1a1a1a;
border-bottom: var(--portal-main-color) solid 2px;
}
.stakeholder-section .uk-subnav-pill > li.uk-active > a {
opacity: 1;
border-color: var(--portal-main-color);
color: var(--portal-main-contrast);
background-color: var(--portal-main-color);
font-weight: bold;
}
.stakeholders.uk-grid-small > * {
padding-left: 2px;
}
.stakeholder-section .uk-card {
border-radius: 36px;
color: currentColor;
font-family: "Roboto", sans-serif;
padding: 60px 20px;
}
.stakeholders.uk-grid-small > .uk-grid-margin {
margin-top: 2px;
}
}
.stakeholder-section .stakeholders .stakeholder {
height: 250px;
}
.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-height: 35%;
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
}
.stakeholder-section .stakeholders .stakeholder .header > div {
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.stakeholder-section .stakeholders .stakeholder .header > div > img {
max-width: 50%;
max-height: 50%;
}
@media (min-width: 640px) {
.stakeholder-section .tabs > ul > li {
z-index: 2;
}
.stakeholder-section .tabs > ul > li.uk-active {
color: #1a1a1a;
border: #E3E3E3 solid 1px;
border-bottom: #F9F9F9 solid 1px;
}
.stakeholder-section .stakeholders {
border-top: #E3E3E3 solid 1px;
margin-top: -1px;
.stakeholder-section .uk-card img {
max-height: 60px;
}
@media only screen and (max-width:639px) {
.stakeholder-section .uk-subnav-pill {
flex-wrap: nowrap;
overflow-x: auto;
}
}

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

@ -1,147 +1,176 @@
<schema2jsonld [URL]="properties.domain + properties.baseLink"
[logoURL]="properties.domain + properties.baseLink+'/assets/common-assets/logo-small-monitor.png'" type="home"
[logoURL]="properties.domain + properties.baseLink+'/assets/common-assets/logo-small-monitor.png'"
type="home"
name="OpenAIRE Monitor">
</schema2jsonld>
<div class="uk-section home-background uk-background-top-center">
<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">
<h1 class="uk-margin-top">A new era of monitoring research.</h1>
<h3 class="uk-margin-remove-top">Open data. Open methodologies.</h3>
<div class="uk-margin-medium-top">
Work together with us to view, understand and visualize<br>research statistics and indicators.
<div class="image-front-topbar"
style="background: transparent linear-gradient(180deg, #F4F4F4 0%, #F5F5F5 83%, #FAFAFA 100%) no-repeat;">
<div
class="uk-section 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">
<div class="uk-padding-small">
<h1 class="uk-margin-top">A new era of monitoring research.</h1>
<div class="girl-background">
<h4 class="uk-margin-remove-top">Open data. Open methodologies.</h4>
<div class="uk-margin-medium-top uk-text-muted">
Work together with us to view, understand and visualize<br>research statistics and indicators.
</div>
</div>
</div>
</div>
<div class="uk-section dashboard-section">
<div class="dashboard">
<div class="captain-left uk-hidden@m"></div>
<div class="captain-right uk-hidden@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>
<div class="uk-section uk-container uk-container-large dashboard-section">
<div class="uk-padding-small">
<div class="dashboard uk-flex uk-flex-center">
<img class="uk-width-1-2@l" src="/assets/monitor-assets/home/dashboard.png">
</div>
<div class="uk-container uk-container-large uk-margin-large-top">
<div class="uk-margin-large-top">
<div class="uk-margin-left uk-margin-right uk-margin-large-bottom">
<div class="uk-child-width-1-3@m uk-grid info" uk-grid>
<div [@1]="state.toString()" class="clickable" [class.uk-active]="state === 1" (click)="startAnimation()">
<h5>
Get a complete picture
</h5>
<div>
<div class="uk-text-muted">
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.
</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 [@2]="state.toString()" class="clickable" [class.uk-active]="state === 2" (click)="startAnimation(2)">
<h5>
Monitor open science compliance
</h5>
<div>
<div class="uk-text-muted">
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.
</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 [@3]="state.toString()" class="clickable" [class.uk-active]="state === 3" (click)="startAnimation(3)">
<h5>
Turn research results to insights
</h5>
<div>
<div class="uk-text-muted">
Understand your community. Measure impact, discover trends, connections and collaborations to improve
and optimize your future actions.
</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 class="uk-section">
<h3 class="uk-text-center" uk-parallax="y: 0, -100; easing: 0.5">Why use OpenAIRE Monitor Dashboard?</h3>
<div
class="uk-section uk-section-large uk-container uk-container-large uk-margin-large-top boat-section uk-position-relative">
<div class="uk-grid uk-grid-match uk-margin-left uk-margin-right uk-child-width-1-2@m" uk-grid>
<div class="boat uk-hidden@m"></div>
<div class="boat uk-visible@l"></div>
<div class="first" uk-parallax="y: 40, -60; easing: 0.5">
<div>
<h4>Global outlook</h4>
<div class="uk-section uk-container uk-container-large">
<div class="uk-padding-small hologram uk-position-relative">
<div class="uk-grid uk-grid-match uk-child-width-1-2 uk-visible@m" uk-grid>
<div uk-parallax="y: 40, -60; easing: 0.5">
<div class="uk-margin-medium-left uk-margin-xlarge-bottom uk-width-3-4">
<h5 class="uk-text-secondary">Global outlook</h5>
<div>
Monitor is built on the OpenAIRE Research Graph. Linked scholarly information from open initiatives around
the world. Beyond publications.
Monitor is built on the OpenAIRE Research Graph. An interconnected scholarly communication shared data
resource from open initiatives around the world, of global interest.
</div>
</div>
</div>
<div class="second" uk-parallax="y: 40, -60; easing: 0.5">
<div>
<h4>Transparent methodology</h4>
<div uk-parallax="y: 40, -60; easing: 0.5" class="uk-flex uk-flex-right">
<div class="uk-width-3-4 uk-margin-xlarge-bottom">
<h5 class="uk-text-secondary">Transparent methodology</h5>
<div>
Based on open science principles: open data sources, well documented metrics and indicators. Open APIs.
Built together with the OS community.
We base our service on open science principles. We rely on open data sources, and document our algorithms
for every metric and indicator we publish.
</div>
</div>
</div>
<div class="third" uk-parallax="y: -100; easing: 0.5">
<div>
<h4>Customised to your needs</h4>
<div uk-parallax="y: -100; easing: 0.5">
<div class="uk-width-3-4 uk-margin-bottom">
<h5 class="uk-text-secondary">Customised to your needs</h5>
<div>
A variety of predefined metrics to choose from. Add your own metrics. Select how to visualize them, and who
to share with.
Choose from a variety of pre-defined metrics. Select how to visualize them, and who to share with. Use our
advanced tools and expertise add add your own metrics.
</div>
</div>
</div>
<div class="fourth" uk-parallax="y: -100; easing: 2">
<div>
<h4>Minimum effort to join</h4>
<div uk-parallax="y: -100; easing: 2" class="uk-flex uk-flex-center">
<div class="uk-width-3-4 uk-margin-medium-left uk-margin-bottom">
<h5 class="uk-text-secondary">Minimum effort to join</h5>
<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.
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 class="uk-hidden@m uk-grid uk-child-width-1-1" uk-grid>
<div>
<h5 class="uk-text-secondary">Global outlook</h5>
<div>
Monitor is built on the OpenAIRE Research Graph. An interconnected scholarly communication shared data
resource from open initiatives around the world, of global interest.
</div>
</div>
<div>
<h5 class="uk-text-secondary">Transparent methodology</h5>
<div>
We base our service on open science principles. We rely on open data sources, and document our algorithms for
every metric and indicator we publish.
</div>
</div>
<div>
<h5 class="uk-text-secondary">Customised to your needs</h5>
<div>
Choose from a variety of pre-defined metrics. Select how to visualize them, and who to share with. Use our
advanced tools and expertise add add your own metrics.
</div>
</div>
<div>
<h5 class="uk-text-secondary">Minimum effort to join</h5>
<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 class="uk-text-center uk-margin-large">
<a class="uk-button portal-button" routerLink="/about">Learn More</a>
</div>
</div>
<div class="uk-text-center">
<a class="uk-button portal-button" routerLink="/about">Learn More</a>
</div>
<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-text-center uk-margin-large-bottom">
<h1>Tap into the OpenAIRE Research Graph</h1>
</div>
<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">
<h4 class="uk-margin portal-color uk-text-bold">{{publicationsSize.count|number}}</h4>
<div class="uk-margin uk-text-uppercase">publications</div>
</div>
<div *ngIf="datasetsSize" class="uk-margin-medium-bottom uk-text-center">
<h4 class="uk-margin portal-color uk-text-bold">{{datasetsSize.count|number}}</h4>
<div class="uk-margin uk-text-uppercase">research data</div>
</div>
<div *ngIf="softwareSize" class="uk-margin-medium-bottom uk-text-center">
<h4 class="uk-margin portal-color uk-text-bold">{{softwareSize.count|number}} </h4>
<div class="uk-margin uk-text-uppercase">software</div>
</div>
<div *ngIf="otherSize" class="uk-margin-medium-bottom uk-text-center">
<h4 class="uk-margin portal-color uk-text-bold">{{otherSize.count|number}} </h4>
<div class="uk-margin uk-text-uppercase">other</div>
</div>
<div *ngIf="fundersSize" class="uk-margin-medium-bottom uk-text-center uk-width-1-5@m uk-width-1-1">
<h4 class="uk-margin portal-color uk-text-bold">{{fundersSize.count|number}} </h4>
<div class="uk-margin uk-text-uppercase">Funders</div>
<div class="graph-section">
<div class="uk-section uk-container uk-margin-large">
<div class="uk-text-center uk-padding-small">
<h2>Tap into the OpenAIRE Research Graph</h2>
<div class="uk-flex uk-flex-center">
<div class="uk-width-3-4@m uk-margin-large-top uk-grid uk-child-width-1-5@m uk-child-width-1-2">
<div *ngIf="publicationsSize" class="uk-margin-medium-bottom uk-text-center">
<h3 class="uk-margin-remove portal-color">
<span class="uk-text-bold number">{{publicationsSize.number|number}}</span>{{publicationsSize.size}}
</h3>
<div class="uk-margin-small uk-text-large uk-text-uppercase">publications</div>
</div>
<div *ngIf="datasetsSize" class="uk-margin-medium-bottom uk-text-center">
<h3 class="uk-margin-remove portal-color">
<span class="uk-text-bold number">{{datasetsSize.number|number}}</span>{{datasetsSize.size}}
</h3>
<div class="uk-margin-small uk-text-large uk-text-uppercase">datasets</div>
</div>
<div *ngIf="softwareSize" class="uk-margin-medium-bottom uk-text-center">
<h3 class="uk-margin-remove portal-color">
<span class="uk-text-bold number">{{softwareSize.number|number}}</span>{{softwareSize.size}}
</h3>
<div class="uk-margin-small uk-text-large uk-text-uppercase">software</div>
</div>
<div *ngIf="otherSize" class="uk-margin-medium-bottom uk-text-center">
<h3 class="uk-margin-remove portal-color">
<span class="uk-text-bold number">{{otherSize.number|number}}</span>{{otherSize.size}}
</h3>
<div class="uk-margin-small uk-text-large uk-text-uppercase">other</div>
</div>
<div *ngIf="fundersSize" class="uk-margin-medium-bottom uk-text-center">
<h3 class="uk-margin-remove portal-color">
<span class="uk-text-bold number">{{fundersSize.number|number}}</span>{{fundersSize.size}}
</h3>
<div class="uk-margin-small uk-text-large uk-text-uppercase">Funders</div>
</div>
</div>
</div>
</div>
</div>
@ -151,91 +180,44 @@
</div>
<div *ngIf="!loading && stakeholders && stakeholders.length > 0"
class="uk-section uk-section-large uk-margin-right uk-margin-left uk-margin-large-top stakeholder-section">
<div class="uk-container uk-visible@s" uk-filter="target: .stakeholders">
<div class="tabs">
<ul>
<li class="uk-active" uk-filter-control (click)="type = null">All</li>
<li uk-filter-control="[data-type='funder']" (click)="type = 'funder'">Funders</li>
<li uk-filter-control="[data-type='ri']" (click)="type = 'ri'">Research Initiatives</li>
<!--<li uk-filter-control="[data-type='project']" (click)="type = 'project'">Projects</li>-->
<li uk-filter-control="[data-type='organization']" (click)="type = 'organization'">Organizations</li>
</ul>
</div>
<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">
<div *ngFor="let stakeholder of stakeholders" [attr.data-type]="stakeholder.type" class="uk-margin-medium-bottom">
<div [ngClass]="[stakeholder.type, stakeholder.size]" class="stakeholder">
<a *ngIf="directLink" [href]="getStakeholderPageUrl(stakeholder)" target="_blank">
<div class="header">
<img *ngIf="stakeholder.logoUrl" class="uk-margin-auto" [src]="stakeholder.logoUrl">
</div>
<div class="uk-padding">
<h6 class="uk-text-bold">{{stakeholder.name}}</h6>
</div>
</a>
<a *ngIf="!directLink" (click)="confirmModalOpen(stakeholder)">
<div class="header">
<img *ngIf="stakeholder.logoUrl" class="uk-margin-auto" [src]="stakeholder.logoUrl">
</div>
<div class="uk-padding">
<h6 class="uk-text-bold">{{stakeholder.name}}</h6>
</div>
</a>
</div>
</div>
<div *ngIf="stakeholdersNumber === 0" [attr.data-type]="type"
class="uk-text-center uk-width-1-1 uk-margin-large-top">
Nothing here yet.
</div>
</div>
</div>
<div class="uk-container uk-hidden@s" uk-filter="target: .stakeholders">
<div class="tabs">
<ul>
<li class="uk-active" uk-filter-control (click)="type = null">All</li>
<li uk-filter-control="[data-type='funder']" (click)="type = 'funder'">Funders</li>
<li uk-filter-control="[data-type='ri']" (click)="type = 'ri'">Research Initiatives</li>
<!--<li uk-filter-control="[data-type='project']" (click)="type = 'project'">Projects</li>-->
<li uk-filter-control="[data-type='organization']" (click)="type = 'organization'">Organizations</li>
</ul>
</div>
<div class="stakeholders uk-child-width-1-2 uk-grid uk-grid-small" uk-grid="">
<div class="uk-container" uk-filter="target: .stakeholders">
<ul class="uk-subnav uk-subnav-pill">
<li class="uk-active" uk-filter-control><a (click)="type = null">All</a></li>
<li uk-filter-control="[data-type='funder']"><a (click)="type = 'funder'">Funders</a></li>
<li uk-filter-control="[data-type='ri']"><a (click)="type = 'ri'">Research Initiatives</a></li>
<!--<li uk-filter-control="[data-type='project']"><a (click)="type = 'project'">Projects</a></li>-->
<li uk-filter-control="[data-type='organization']"><a (click)="type = 'organization'">Organizations</a></li>
</ul>
<div class="stakeholders uk-margin-large-top uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-grid uk-flex-top uk-flex-wrap-top"
uk-grid="masonry: true" uk-height-match="target: .uk-card; row: false;">
<div *ngFor="let stakeholder of stakeholders" [attr.data-type]="stakeholder.type">
<div [ngClass]="stakeholder.type" class="stakeholder">
<a [href]="getStakeholderPageUrl(stakeholder)" target="_blank">
<div class="header">
<img *ngIf="stakeholder.logoUrl" class="uk-margin-auto" [src]="stakeholder.logoUrl">
</div>
<div class="uk-padding">
<h6 class="uk-text-bold">{{stakeholder.name}}</h6>
</div>
</a>
</div>
<a *ngIf="directLink" [href]="getStakeholderPageUrl(stakeholder)" target="_blank">
<div class="uk-card uk-card-default uk-text-center">
<img *ngIf="stakeholder.logoUrl" class="uk-margin-auto" [src]="stakeholder.logoUrl">
<div class="uk-text-light uk-margin-medium-top">{{stakeholder.name}}</div>
</div>
</a>
<a *ngIf="!directLink" (click)="confirmModalOpen(stakeholder)">
<div class="uk-card uk-card-default uk-text-center">
<img *ngIf="stakeholder.logoUrl" class="uk-margin-auto" [src]="stakeholder.logoUrl">
<div class="uk-text-light uk-margin-medium-top">{{stakeholder.name}}</div>
</div>
</a>
</div>
<div *ngIf="stakeholdersNumber === 0" [attr.data-type]="type"
class="uk-text-center uk-width-1-1 uk-margin-large-top">
class="uk-text-center uk-text-large uk-width-1-1 uk-margin-large-top uk-padding-large">
Nothing here yet.
</div>
</div>
</div>
</div>
<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-width-expand">
<h3>Contact us</h3>
<div class="uk-margin-medium">
<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 class="uk-inline"><a class="uk-button portal-button" routerLink="/contact-us">Get in Touch</a></div>
</div>
<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-hidden@m" src="assets/monitor-assets/home/seagull.png" width="100">
<div class="uk-section uk-container uk-text-center uk-margin-large-bottom">
<div class="uk-padding-small">
<h3>Contact us to help you.</h3>
<div class="uk-text-muted uk-margin-medium">
Are you looking for more? Get in touch with our team and let us help you.
</div>
<a class="uk-button portal-button" routerLink="/contact-us">CONTACT US</a>
</div>
</div>
<div class="uk-section-muted"

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

@ -23,30 +23,7 @@ import {UserManagementService} from "../openaireLibrary/services/user-management
selector: 'home',
templateUrl: 'home.component.html',
styleUrls: ['home.component.css'],
encapsulation: ViewEncapsulation.None,
animations: [
trigger('captain-left', [
state('before', style({
transform: 'translateX(-300px)'
})),
state('after', style({
transform: 'translateX(0)'
})),
transition('before => after', [
animate('0.7s')
])
]),
trigger('captain-right', [
state('before', style({
transform: 'translateX(300px)'
})),
state('after', style({
transform: 'translateX(0)'
})),
transition('before => after', [
animate('0.7s')
])
]),
trigger('1', [
state('1', style({
opacity: 1
@ -77,7 +54,7 @@ export class HomeComponent {
public piwiksub: any;
public pageTitle = "OpenAIRE | Monitor";
public stakeholders: any[] = [];
public stakeholders: Stakeholder[] = [];
public selected: Stakeholder = null;
public pageContents = null;
public divContents = null;
@ -100,9 +77,6 @@ export class HomeComponent {
numberSubs = [];
public state = 1;
private timeouts: any[] = [];
public observer: IntersectionObserver;
public captains: boolean = false;
@ViewChild('ref') ref: ElementRef;
@ViewChild('AlertModal') modal;
public directLink: boolean = true;
private user: User;
@ -157,20 +131,10 @@ export class HomeComponent {
})
});
if(typeof document != "undefined") {
this.initAnimations();
this.startAnimation();
}
}
public initAnimations() {
this.observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting == true && this.captains == false) {
this.captains = true;
}
}, {threshold: [0]});
this.observer.observe(this.ref.nativeElement);
}
public startAnimation(state = 1) {
this.clearTimeouts();
this.state = state;
@ -282,9 +246,6 @@ export class HomeComponent {
this.status = this.errorCodes.NONE;
} else {
this.stakeholders = stakeholders.filter(stakeholder => stakeholder.isActive && (stakeholder.isPublic || this.isStakeholderManager()));
this.stakeholders.forEach((stakeholder, index, stakeholders) => {
this.setSizeOfStakeholder(index);
});
}
this.loading = false;
},
@ -299,17 +260,6 @@ export class HomeComponent {
return Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user) || Session.isCommunityCurator(this.user);
}
private setSizeOfStakeholder(index) {
let mod = index % 9;
if (mod === 0 || mod === 4 || mod === 8) {
this.stakeholders[index].size = 'large';
} else if (mod === 1 || mod === 5 || mod === 6) {
this.stakeholders[index].size = 'small';
} else {
this.stakeholders[index].size = 'medium';
}
}
public confirmModalOpen(result: Stakeholder) {
this.selected = result;
this.modal.cancelButton = true;
@ -344,9 +294,6 @@ export class HomeComponent {
this.piwiksub.unsubscribe();
}
this.clearTimeouts();
if(this.observer) {
this.observer.disconnect();
}
}
private handleError(message: string, error): number {
@ -358,7 +305,7 @@ export class HomeComponent {
code = error.status;
}
console.error("Communities (component): " + message, error);
console.error("Home Component: " + message, error);
return this.errorMessages.getErrorCode(code);
}

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1020 KiB

BIN
src/assets/monitor-assets/home/captain-left.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 289 KiB

BIN
src/assets/monitor-assets/home/captain-right.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 305 KiB

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

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="891.972" height="404" viewBox="0 0 891.972 404">
<g id="Group_11723" data-name="Group 11723" transform="translate(-250 -759)">
<g id="Group_3098" data-name="Group 3098" transform="translate(-80 574.953)">
<path id="Path_16420" data-name="Path 16420" d="M338.05,210.66l-18.6,6.887-19.11,7.078-33.015,12.223-9.235,3.424-19.136,7.084" transform="translate(855.417 86.511)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="3"/>
<path id="Path_17201" data-name="Path 17201" d="M131.762,0,107.036,22.093,81.626,44.8l-43.9,39.214L25.446,95,0,117.726" transform="translate(1057.45 316.813) rotate(-20)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="1"/>
<path id="Path_17202" data-name="Path 17202" d="M110.125,0,89.459,18.465,68.221,37.444,31.53,70.218,21.267,79.4,0,98.393" transform="translate(1122.86 315.774) rotate(50)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="1"/>
</g>
<circle id="Ellipse_360" data-name="Ellipse 360" cx="124" cy="124" r="124" transform="translate(250 759)" fill="#8bcc00" opacity="0.5"/>
<g id="Ellipse_372" data-name="Ellipse 372" transform="translate(906 984)" fill="none" stroke="#4687e6" stroke-width="1">
<circle cx="89.5" cy="89.5" r="89.5" stroke="none"/>
<circle cx="89.5" cy="89.5" r="89" fill="none"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 112 KiB

After

Width:  |  Height:  |  Size: 180 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 448 KiB

7
src/assets/monitor-assets/home/graph-background.svg
View File

@ -1 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1371 639.26"><defs><style>.cls-1{fill:#f2f5ef;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M1371,18.29V586.17S822.32,711.35,0,577.29V46.4C57.54,60.75,321,116,747.72,48.2,1233.15-28.87,1357.73,6.79,1371,18.29Z"/></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="1367" height="393.812" viewBox="0 0 1367 393.812">
<g id="Group_11724" data-name="Group 11724" transform="translate(1 -2386)">
<path id="Path_2342" data-name="Path 2342" d="M1366-68.381S1070.67-131.445,608.9-142.3C354.509-148.279-.867-68.381-.867-68.381V190.035s538.452,102.97,836.881,41.69c286.66-60.522,529.986,0,529.986,0Z" transform="translate(-0.133 2528.619)" fill="#eff3f8"/>
<path id="Path_2356" data-name="Path 2356" d="M-.867,176.956s295.142,63.063,756.615,73.918c254.234,5.98,609.385-73.918,609.385-73.918V-81.46s-538.111-102.97-836.35-41.69c-286.478,60.522-529.65,0-529.65,0Z" transform="translate(0.867 2528.619)" fill="#eff3f8" opacity="0.499"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 368 B

After

Width:  |  Height:  |  Size: 731 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 177 KiB

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 933 KiB

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 296 KiB

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

@ -1,14 +0,0 @@
<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

Before

Width:  |  Height:  |  Size: 773 B

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

@ -18,19 +18,6 @@
--develop-portal-lower-tone: #9f4e7e;
}
.generalSearchForm,
.publicationsSearchForm,
.projectsSearchForm, .projectsTableSearchForm,
.organizationsSearchForm,
.datasetsSearchForm,
.softwareSearchForm,
.orpsSearchForm,
.datasourcesSearchForm, .compatibleDatasourcesSearchForm, .compatibleDatasourcesTableSearchForm, .datasourcesTableSearchForm,
.journalsSearchForm, .journalsTableSearchForm,
.entityRegistriesSearchForm, .entityRegistriesTableSearchForm {
background: #F9F9F9 !important;
}
.tm-toolbar .uk-subnav-line .custom-monitor-li {
background: var(--portal-main-color);
}
@ -44,15 +31,24 @@
fill: white;
}
.monitorApp h1, .monitorApp .uk-h1, .monitorApp h2, .monitorApp .uk-h2,
.monitorApp h3, .monitorApp .uk-h3, .monitorApp h4, .monitorApp .uk-h4,
.monitorApp h5, .monitorApp .uk-h5, .monitorApp h6 .monitorApp .uk-h6 {
.uk-card {
color: #1a1a1a;
}
.monitorApp , .monitorApp .uk-card, .monitorApp .color {
color: #424242;
main {
min-height: calc(100vh - 100px);
line-height: 23px;
font-size: 16px;
color: #1a1a1a;
font-family: "Open Sans", sans-serif;
}
.monitorApp .uk-text-small {
font-size: 14px;
}
.monitorApp .uk-text-muted {
color: #4D4D4D !important;
}
.monitorApp .portal-button {