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

Add new masks. Change logo from svg to png

This commit is contained in:
Konstantinos Triantafyllou 2022-03-14 19:17:49 +02:00
parent 484e8491c1
commit 0a7b6c70c6
11 changed files with 57 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -131,8 +131,8 @@ export class AppComponent {
route: "/",
url: null,
title: 'monitor',
logoUrl: this.logoPath + 'main.svg',
logoSmallUrl: this.logoPath + 'small.svg',
logoUrl: this.logoPath + 'main.png',
logoSmallUrl: this.logoPath + 'small.png',
position: 'left',
badge: true,
menuPosition: 'center'

2
src/app/browse-stakeholder/browse-stakeholder.component.html
View File

@ -18,7 +18,7 @@
</div>
<div class="uk-card-body uk-padding-remove-horizontal">
<div class="uk-text-capitalize uk-text-small type">{{mapType(stakeholder.type)}}</div>
<div class="uk-h6 uk-link uk-margin-remove multi-line-ellipsis lines-2">
<div class="uk-h6 uk-margin-remove multi-line-ellipsis lines-2">
<p *ngIf="stakeholder.name" class="uk-margin-remove">
{{stakeholder.name}}
</p>

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

@ -1,27 +1,3 @@
.home-background {
background-color: white;
}
@media only screen and (min-width: 1200px) {
.home-background {
position: relative;
background-repeat: no-repeat;
background-position: 80% center;
background-size: contain;
background-image: url("~src/assets/monitor-assets/home/monitor.jpg");
height: calc(100vh - 1px);
}
.home-background .mask {
position: absolute;
top: 0;
left: 30%;
bottom: 0;
right: 0;
background-image: url("~src/assets/monitor-assets/home/mask.svg");
background-repeat: no-repeat;
background-position: 80% center;
background-size: contain;
background-attachment: fixed;
}
background-color: var(--light-color);
}

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

@ -1,22 +1,29 @@
<div>
<div class="uk-section home-background">
<div class="mask"></div>
<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">
<div class="uk-width-1-2">
<h1 class="uk-heading-large" uk-scrollspy-class>
A new era of <span class="uk-text-primary">monitoring</span> research<span class="uk-text-primary">.</span>
</h1>
<div class="uk-text-large uk-margin-medium-top" uk-scrollspy-class>
<div>Work together with us to view, understand and visualize</div>
<div>research statistics and indicators.</div>
<div class="uk-grid uk-flex-middle" uk-grid>
<div class="uk-width-3-5 uk-margin-large-bottom">
<h1 class="uk-heading-large" uk-scrollspy-class>
A new era of <span class="uk-text-primary">monitoring</span> research<span class="uk-text-primary">.</span>
</h1>
<div class="uk-text-large uk-margin-medium-top" uk-scrollspy-class>
<div>Work together with us to view, understand and visualize</div>
<div>research statistics and indicators.</div>
</div>
<div class="uk-margin-medium-top" uk-scrollspy-class>
<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/get-started">Get Started</a>
</div>
</div>
<div class="uk-margin-medium-top" uk-scrollspy-class>
<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/get-started">Get Started</a>
<div class="uk-visible@m uk-width-expand" uk-scrollspy-class>
<div class="uk-position-relative">
<img style="padding: 1px" src="assets/monitor-assets/home/monitor.jpg" uk-parallax="y: 300">
<img class="uk-position-top-left" src="assets/monitor-assets/home/mask.svg">
</div>
</div>
</div>
</div>
</div>
<section-scroll [customClass]="'uk-section uk-section-primary'" [map]="map"
<section-scroll [customClass]="'uk-section uk-section-secondary'" [map]="map"
[childrenCustomClass]="'uk-container uk-container-large'">
<div top class="uk-width-1-1">
<div class="top-content uk-container uk-container-large">
@ -25,7 +32,7 @@
class="uk-text-primary">.</span></h2>
</div>
</div>
<div left class="uk-width-1-1 uk-width-1-2@m uk-background-primary monitor-dark-logo-background uk-position-z-index">
<div left class="uk-width-1-1 uk-width-1-2@m uk-background-secondary monitor-dark-logo-background uk-position-z-index">
<div class="imgContainer uk-flex uk-flex-middle uk-flex-center">
<img class="uk-animation-fade" id="ipad" src="assets/monitor-assets/home/ipad.png" alt="ipad" loading="lazy">
</div>
@ -36,7 +43,7 @@
<h3 class="uk-h2">
Get a <span class="uk-text-primary">complete <br> picture.</span>
</h3>
<p class="uk-text-lead">Track and discover your organization’s research output. <br> Use the OpenAIRE Research
<p class="uk-text-large">Track and discover your organization’s research output. <br> Use the OpenAIRE Research
Graph to get a 360o view of <br> your publications-data-code.</p>
</div>
</div>
@ -46,7 +53,7 @@
Monitor <span class="uk-text-primary">open science <br></span> compliance<span
class="uk-text-primary">.</span>
</h3>
<p class="uk-text-lead"> Work with the open science expert community <br> for open and transparent metrics.
<p class="uk-text-large"> Work with the open science expert community <br> for open and transparent metrics.
Discover open <br> science trends for your organization and see how <br> you fare in EOSC.</p>
</div>
</div>
@ -56,7 +63,7 @@
Turn <span class="uk-text-primary">research <br> results </span> to insights<span
class="uk-text-primary">.</span>
</h3>
<p class="uk-text-lead">Understand your community. Measure impact, <br> discover trends, connections and
<p class="uk-text-large">Understand your community. Measure impact, <br> discover trends, connections and
collaborations <br> to improve and optimize your future actions. </p>
</div>
</div>
@ -67,7 +74,7 @@
Tap into the OpenAIRE <br> Research Graph<span class="uk-text-primary">.</span>
</h2>
<div class="uk-flex uk-flex-center uk-margin-large-top uk-margin-medium-bottom" uk-parallax="y: 80, 40, 0, 0">
<div class="uk-width-1-1 uk-flex-center uk-grid" uk-grid uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: false">
<div class="uk-width-1-1 uk-flex-center uk-grid" uk-grid uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<ng-template #numberCard let-numberSize="numberSize" let-name="name" let-url="url">
<a class="uk-card uk-card-default uk-card-hover uk-position-relative uk-padding-small uk-display-block uk-link-reset"
[href]="url" target="_blank" uk-scrollspy-class>
@ -127,9 +134,7 @@
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Global outlook"
customClass="uk-text-primary-gradient"></icon>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Global outlook
</div>
<h5 class="uk-margin-remove-top">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.
@ -140,9 +145,7 @@
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Minimum effort to join"
customClass="uk-text-primary-gradient"></icon>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Minimum effort to join
</div>
<h5 class="uk-margin-remove-top">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.
@ -153,9 +156,7 @@
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Transparent methodology"
customClass="uk-text-primary-gradient"></icon>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Transparent methodology
</div>
<h5 class="uk-margin-remove-top">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.
@ -166,9 +167,7 @@
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Customised to your needs"
customClass="uk-text-primary-gradient"></icon>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Customised to your needs
</div>
<h5 class="uk-margin-remove-top">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.
@ -215,7 +214,7 @@
<!-- Margin right -->
<li *ngFor="let slide of slides; let i=index" class="uk-width-1-1">
<div class="uk-padding-small">
<div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: false">
<div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<ng-container *ngIf="i === 0">
<div *ngFor="let stakeholder of slide" uk-scrollspy-class>
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>

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

@ -21,9 +21,9 @@
<div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
<div class="uk-icon-bg-shadow uk-margin-bottom">
<h5 class="uk-text-primary-gradient uk-margin-remove">0</h5>
<div class="uk-h5 uk-text-primary-gradient uk-margin-remove">0</div>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
<div class="uk-h6 uk-margin-remote-top">
Starting from the OpenAIRE <br> RESEARCH GRAPH
</div>
<div>
@ -34,9 +34,9 @@
<div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
<div class="uk-icon-bg-shadow uk-margin-bottom">
<h5 class="uk-text-primary-gradient uk-margin-remove">1</h5>
<div class="uk-h5 uk-text-primary-gradient uk-margin-remove">1</div>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
<div class="uk-h6 uk-margin-remote-top">
Provide us some information
</div>
<div>
@ -47,9 +47,9 @@
<div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
<div class="uk-icon-bg-shadow uk-margin-bottom">
<h5 class="uk-text-primary-gradient uk-margin-remove">2</h5>
<div class="uk-h5 uk-text-primary-gradient uk-margin-remove">2</div>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
<div class="uk-h6 uk-margin-remote-top">
We get the ball rolling
</div>
<div>
@ -60,9 +60,9 @@
<div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
<div class="uk-icon-bg-shadow uk-margin-bottom">
<h5 class="uk-text-primary-gradient uk-margin-remove">3</h5>
<div class="uk-h5 uk-text-primary-gradient uk-margin-remove">3</div>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
<div class="uk-h6 uk-margin-remote-top">
You validate
</div>
<div>
@ -73,9 +73,9 @@
<div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
<div class="uk-icon-bg-shadow uk-margin-bottom">
<h5 class="uk-text-primary-gradient uk-margin-remove">4</h5>
<div class="uk-h5 uk-text-primary-gradient uk-margin-remove">4</div>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
<div class="uk-h6 uk-margin-remote-top">
You set up your portal
</div>
<div>
@ -86,9 +86,9 @@
<div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
<div class="uk-icon-bg-shadow uk-margin-bottom">
<h5 class="uk-text-primary-gradient uk-margin-remove">5</h5>
<div class="uk-h5 uk-text-primary-gradient uk-margin-remove">5</div>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
<div class="uk-h6 uk-margin-remote-top">
You track, monitor, report
</div>
<div>
@ -101,7 +101,7 @@
</div>
<div class="uk-section uk-margin-large-top uk-container uk-container-large">
<span class="uk-h6 uk-text-primary uk-margin-remove">Inclusion, transparency, quality, state of the art technology.</span>
<h2 class="uk-h1 uk-margin-remove-top uk-margin-medium-bottom">Simplify research <br> tracking & monitoring.</h2>
<h2 class="uk-margin-remove-top uk-margin-medium-bottom">Simplify research <br> tracking & monitoring.</h2>
<div class="uk-padding-large">
<how></how>
</div>

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 53a0cd733b074f967aa0b39749273762c6074e59
Subproject commit 4ccabced6dd8624a0c7cde617891cca4d10e0751

2
src/assets/common-assets

@ -1 +1 @@
Subproject commit 940072a39728d0981d1b732468b9b8afa739428e
Subproject commit 9a06b6e012adb3f7c47659237fe775631a20ff11

2
src/assets/monitor-assets/home/mask.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 677.14 1002.41"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M0,0V1002.41H677.14V0ZM610.28,223,486.33,650,405.77,626.6l124-427Zm23.35,290.67L580.34,697.23l-80.55-23.38L553.07,490.3ZM452,384.54l-123.94,427L247.52,788.1l124-426.95Zm-169.26-119,80.57,23.39L328.07,410.36,247.51,387Zm35.93,177.17L239.38,715.86l-80.56-23.39,79.3-273.17ZM207,436.4,116,749.91,35.39,726.52,126.4,413ZM509.68,940.64l-80.55-23.39L490.4,706.17,571,729.56Z"/></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 677.14 1140.24"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Layer_2-2" data-name="Layer 2"><g id="Layer_1-2-2" data-name="Layer 1-2"><path class="cls-1" d="M0,0V1140.24H677.14V0ZM610.28,223,486.33,650l-80.56-23.4,124-427Zm23.35,290.67L580.34,697.23l-80.55-23.38L553.07,490.3ZM452,384.54l-123.94,427L247.52,788.1l124-426.95Zm-169.26-119,80.57,23.39L328.07,410.36,247.51,387Zm35.93,177.17L239.38,715.86l-80.56-23.39,79.3-273.17ZM207,436.4,116,749.91,35.39,726.52,126.4,413ZM509.68,940.64l-80.55-23.39L490.4,706.17,571,729.56Z"/></g></g></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 598 B

After

Width:  |  Height:  |  Size: 684 B

BIN
src/assets/monitor-assets/home/monitor.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 74 KiB

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

@ -10,14 +10,14 @@
--button-secondary-border-color-hover: transparent;
/*backgrounds*/
--primary-background: #2C2C2C;
--primary-background-image:none;
--secondary-background: var(--monitor-color);
--secondary-background-image:none;
--background-primary:var(--monitor-color);
--background-primary-image:none;
--background-secondary: var(--grey-color);
--background-secondary-image:none;
/*fonts*/
--font-primary-color: var(--monitor-color);
--font-gradient-color: linear-gradient(110deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);
--text-primary-color: var(--monitor-color);
--text-gradient-color: linear-gradient(110deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);
/*slider*/
--slider-dot-background: rgba(var(--monitor-color-rgb), 0.5);
@ -93,4 +93,4 @@ main {
/*.monitorApp .uk-grid-divider>:not(.uk-first-column)::before {*/
/* border-left: 1px solid #DEDEDE;*/
/*}*/
/*}*/

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit a6fbd5fdba27493d9b5bd59d92b632f08c7dbb96
Subproject commit de51fea2dd3c8a64fc3c68ed29a9aa8f71034a54