MaDgIK
/
monitor
13
0
Fork 0
Code Issues Pull Requests Projects Releases 12 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: "/", route: "/",
url: null, url: null,
title: 'monitor', title: 'monitor',
logoUrl: this.logoPath + 'main.svg', logoUrl: this.logoPath + 'main.png',
logoSmallUrl: this.logoPath + 'small.svg', logoSmallUrl: this.logoPath + 'small.png',
position: 'left', position: 'left',
badge: true, badge: true,
menuPosition: 'center' menuPosition: 'center'

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

@ -18,7 +18,7 @@
</div> </div>
<div class="uk-card-body uk-padding-remove-horizontal"> <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-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"> <p *ngIf="stakeholder.name" class="uk-margin-remove">
{{stakeholder.name}} {{stakeholder.name}}
</p> </p>

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

@ -1,27 +1,3 @@
.home-background { .home-background {
background-color: white; background-color: var(--light-color);
}
@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;
}
} }

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

@ -1,22 +1,29 @@
<div> <div>
<div class="uk-section home-background"> <div class="uk-section uk-padding-remove-bottom uk-overflow-hidden home-background">
<div class="mask"></div>
<div class="uk-container uk-container-large" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200"> <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"> <div class="uk-grid uk-flex-middle" uk-grid>
<h1 class="uk-heading-large" uk-scrollspy-class> <div class="uk-width-3-5 uk-margin-large-bottom">
A new era of <span class="uk-text-primary">monitoring</span> research<span class="uk-text-primary">.</span> <h1 class="uk-heading-large" uk-scrollspy-class>
</h1> A new era of <span class="uk-text-primary">monitoring</span> research<span class="uk-text-primary">.</span>
<div class="uk-text-large uk-margin-medium-top" uk-scrollspy-class> </h1>
<div>Work together with us to view, understand and visualize</div> <div class="uk-text-large uk-margin-medium-top" uk-scrollspy-class>
<div>research statistics and indicators.</div> <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>
<div class="uk-margin-medium-top" uk-scrollspy-class> <div class="uk-visible@m uk-width-expand" uk-scrollspy-class>
<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/get-started">Get Started</a> <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>
</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'"> [childrenCustomClass]="'uk-container uk-container-large'">
<div top class="uk-width-1-1"> <div top class="uk-width-1-1">
<div class="top-content uk-container uk-container-large"> <div class="top-content uk-container uk-container-large">
@ -25,7 +32,7 @@
class="uk-text-primary">.</span></h2> class="uk-text-primary">.</span></h2>
</div> </div>
</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"> <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"> <img class="uk-animation-fade" id="ipad" src="assets/monitor-assets/home/ipad.png" alt="ipad" loading="lazy">
</div> </div>
@ -36,7 +43,7 @@
<h3 class="uk-h2"> <h3 class="uk-h2">
Get a <span class="uk-text-primary">complete <br> picture.</span> Get a <span class="uk-text-primary">complete <br> picture.</span>
</h3> </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> Graph to get a 360o view of <br> your publications-data-code.</p>
</div> </div>
</div> </div>
@ -46,7 +53,7 @@
Monitor <span class="uk-text-primary">open science <br></span> compliance<span Monitor <span class="uk-text-primary">open science <br></span> compliance<span
class="uk-text-primary">.</span> class="uk-text-primary">.</span>
</h3> </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> Discover open <br> science trends for your organization and see how <br> you fare in EOSC.</p>
</div> </div>
</div> </div>
@ -56,7 +63,7 @@
Turn <span class="uk-text-primary">research <br> results </span> to insights<span Turn <span class="uk-text-primary">research <br> results </span> to insights<span
class="uk-text-primary">.</span> class="uk-text-primary">.</span>
</h3> </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> collaborations <br> to improve and optimize your future actions. </p>
</div> </div>
</div> </div>
@ -67,7 +74,7 @@
Tap into the OpenAIRE <br> Research Graph<span class="uk-text-primary">.</span> Tap into the OpenAIRE <br> Research Graph<span class="uk-text-primary">.</span>
</h2> </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-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"> <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" <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> [href]="url" target="_blank" uk-scrollspy-class>
@ -127,9 +134,7 @@
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Global outlook" <icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Global outlook"
customClass="uk-text-primary-gradient"></icon> customClass="uk-text-primary-gradient"></icon>
</div> </div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom"> <h5 class="uk-margin-remove-top">Global outlook</h5>
Global outlook
</div>
<div> <div>
Monitor is built on the OpenAIRE Research Graph. An interconnected scholarly communication shared data Monitor is built on the OpenAIRE Research Graph. An interconnected scholarly communication shared data
resource from open initiatives around the world, of global interest. 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" <icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Minimum effort to join"
customClass="uk-text-primary-gradient"></icon> customClass="uk-text-primary-gradient"></icon>
</div> </div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom"> <h5 class="uk-margin-remove-top">Minimum effort to join</h5>
Minimum effort to join
</div>
<div> <div>
You only share some information with us to include in out backend aggregating and data mining, and we 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. 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" <icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Transparent methodology"
customClass="uk-text-primary-gradient"></icon> customClass="uk-text-primary-gradient"></icon>
</div> </div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom"> <h5 class="uk-margin-remove-top">Transparent methodology</h5>
Transparent methodology
</div>
<div> <div>
We base our service on open science principles. We rely on open data sources, and document our algorithms 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. for every metric and indicator we publish.
@ -166,9 +167,7 @@
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Customised to your needs" <icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Customised to your needs"
customClass="uk-text-primary-gradient"></icon> customClass="uk-text-primary-gradient"></icon>
</div> </div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom"> <h5 class="uk-margin-remove-top">Customised to your needs</h5>
Customised to your needs
</div>
<div> <div>
Choose from a variety of pre-defined metrics. Select how to visualize them, and who to share with. Use our 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. advanced tools and expertise add add your own metrics.
@ -215,7 +214,7 @@
<!-- Margin right --> <!-- Margin right -->
<li *ngFor="let slide of slides; let i=index" class="uk-width-1-1"> <li *ngFor="let slide of slides; let i=index" class="uk-width-1-1">
<div class="uk-padding-small"> <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"> <ng-container *ngIf="i === 0">
<div *ngFor="let stakeholder of slide" uk-scrollspy-class> <div *ngFor="let stakeholder of slide" uk-scrollspy-class>
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder> <browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>

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

@ -21,9 +21,9 @@
<div> <div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom"> <div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
<div class="uk-icon-bg-shadow uk-margin-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>
<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 Starting from the OpenAIRE <br> RESEARCH GRAPH
</div> </div>
<div> <div>
@ -34,9 +34,9 @@
<div> <div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom"> <div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
<div class="uk-icon-bg-shadow uk-margin-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>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom"> <div class="uk-h6 uk-margin-remote-top">
Provide us some information Provide us some information
</div> </div>
<div> <div>
@ -47,9 +47,9 @@
<div> <div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom"> <div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
<div class="uk-icon-bg-shadow uk-margin-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>
<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 We get the ball rolling
</div> </div>
<div> <div>
@ -60,9 +60,9 @@
<div> <div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom"> <div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
<div class="uk-icon-bg-shadow uk-margin-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>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom"> <div class="uk-h6 uk-margin-remote-top">
You validate You validate
</div> </div>
<div> <div>
@ -73,9 +73,9 @@
<div> <div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom"> <div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
<div class="uk-icon-bg-shadow uk-margin-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>
<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 You set up your portal
</div> </div>
<div> <div>
@ -86,9 +86,9 @@
<div> <div>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom"> <div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
<div class="uk-icon-bg-shadow uk-margin-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>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom"> <div class="uk-h6 uk-margin-remote-top">
You track, monitor, report You track, monitor, report
</div> </div>
<div> <div>
@ -101,7 +101,7 @@
</div> </div>
<div class="uk-section uk-margin-large-top uk-container uk-container-large"> <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> <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"> <div class="uk-padding-large">
<how></how> <how></how>
</div> </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; --button-secondary-border-color-hover: transparent;
/*backgrounds*/ /*backgrounds*/
--primary-background: #2C2C2C; --background-primary:var(--monitor-color);
--primary-background-image:none; --background-primary-image:none;
--secondary-background: var(--monitor-color); --background-secondary: var(--grey-color);
--secondary-background-image:none; --background-secondary-image:none;
/*fonts*/ /*fonts*/
--font-primary-color: var(--monitor-color); --text-primary-color: var(--monitor-color);
--font-gradient-color: linear-gradient(110deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%); --text-gradient-color: linear-gradient(110deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);
/*slider*/ /*slider*/
--slider-dot-background: rgba(var(--monitor-color-rgb), 0.5); --slider-dot-background: rgba(var(--monitor-color-rgb), 0.5);
@ -93,4 +93,4 @@ main {
/*.monitorApp .uk-grid-divider>:not(.uk-first-column)::before {*/ /*.monitorApp .uk-grid-divider>:not(.uk-first-column)::before {*/
/* border-left: 1px solid #DEDEDE;*/ /* border-left: 1px solid #DEDEDE;*/
/*}*/ /*}*/

2
src/assets/openaire-theme

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