Add you-we component in order to create a sticky behaviour
This commit is contained in:
parent
bccfd41875
commit
b99cc07ccc
|
|
@ -8,9 +8,10 @@ import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumb
|
|||
import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
|
||||
import {SliderTabsModule} from "../openaireLibrary/sharedComponents/tabs/slider-tabs.module";
|
||||
import {HelperModule} from "../openaireLibrary/utils/helper/helper.module";
|
||||
import {YouWeComponent} from "./you-we.component";
|
||||
|
||||
@NgModule({
|
||||
declarations: [HowItWorksComponent, FaqsComponent],
|
||||
declarations: [HowItWorksComponent, FaqsComponent, YouWeComponent],
|
||||
imports: [CommonModule, RouterModule.forChild([
|
||||
{
|
||||
path: '',
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import {Subscriber} from "rxjs";
|
|||
import {Breadcrumb} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
|
||||
import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
|
||||
import {properties} from "../../environments/environment";
|
||||
import {StakeholderEntities} from "../openaireLibrary/monitor/entities/stakeholder";
|
||||
|
||||
@Component({
|
||||
selector: 'how-it-works',
|
||||
|
|
@ -21,7 +22,9 @@ import {properties} from "../../environments/environment";
|
|||
<div class="uk-flex uk-flex-column uk-flex-center uk-margin-bottom" uk-scrollspy-class>
|
||||
<h1 class="uk-margin-medium-top" uk-scrollspy-class>How it works<span class="uk-text-primary">.</span></h1>
|
||||
<div class="uk-text-large" style="max-width: 550px;" uk-scrollspy-class>
|
||||
Join the OpenAIRE Monitor service and we will create for you a dashboard to track and understand and position your organization's research activities and their impact, discover and evaluate Open Science trends for your organization and make data-driven decisions. Here's how it works.
|
||||
Join the OpenAIRE Monitor service and we will create for you a dashboard to track and understand and
|
||||
position your organization's research activities and their impact, discover and evaluate Open Science
|
||||
trends for your organization and make data-driven decisions. Here's how it works.
|
||||
</div>
|
||||
<div class="uk-margin-medium-top uk-margin-large-bottom" uk-scrollspy-class>
|
||||
<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/get-started">Get Started</a>
|
||||
|
|
@ -30,261 +33,282 @@ import {properties} from "../../environments/environment";
|
|||
</div>
|
||||
</div>
|
||||
<div class="uk-padding"></div>
|
||||
<img class="uk-visible@m uk-position-bottom-right" src="assets/monitor-assets/about/hero.svg" loading="lazy">
|
||||
<img class="uk-visible@l uk-position-bottom-right" src="assets/monitor-assets/about/hero.svg" loading="lazy">
|
||||
</div>
|
||||
<div class="uk-container uk-section uk-section-small uk-margin-large-bottom">
|
||||
<div class="uk-container uk-section uk-section-small">
|
||||
<div class="uk-width-1-1">
|
||||
<div class="uk-sticky uk-blur-background uk-visible@m" uk-sticky [attr.offset]="offset">
|
||||
<div class="uk-sticky uk-blur-background uk-visible@l" uk-sticky [attr.offset]="offset">
|
||||
<slider-tabs flexPosition="center" customClass="uk-text-large" connect="#tabs-content">
|
||||
<slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section" [tabId]="section"></slider-tab>
|
||||
<slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section"
|
||||
[tabId]="section"></slider-tab>
|
||||
</slider-tabs>
|
||||
</div>
|
||||
<div class="uk-sticky uk-blur-background uk-hidden@m" uk-sticky>
|
||||
<div class="uk-sticky uk-blur-background uk-hidden@l" uk-sticky>
|
||||
<slider-tabs flexPosition="center">
|
||||
<slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section" [tabId]="section"></slider-tab>
|
||||
<slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section"
|
||||
[tabId]="section"></slider-tab>
|
||||
</slider-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="tabs-content" class="uk-switcher">
|
||||
<ul id="tabs-content" class="uk-switcher uk-margin-large-bottom">
|
||||
<li>
|
||||
<!-- FUNDER -->
|
||||
<div>
|
||||
<h2 class="uk-h1 uk-text-center uk-margin-large-top uk-margin-large-bottom">Are you a <span class="uk-text-primary">funder?</span></h2>
|
||||
<div class="uk-grid uk-grid-large uk-grid-divider uk-child-width-1-2@m" uk-grid uk-height-match="target: .uk-card">
|
||||
<div class="uk-flex uk-flex-column uk-flex-middle">
|
||||
<span class="uk-h3 uk-margin-medium-bottom">You</span>
|
||||
<div class="uk-card uk-card-default uk-width-1-1 uk-overflow-hidden uk-margin-large-bottom">
|
||||
<you-we [type]="stakeholderEntities.FUNDER" id="funder">
|
||||
<ng-container you>
|
||||
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
|
||||
<div class="uk-card-body uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 1a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">You provide Information about your funded projects and <a href="https://www.openaire.eu/funders-how-to-join-guide" target="_blank">join OpenAIRE</a>.</p>
|
||||
<p>All information is exchanged under confidential agreements and we only make public what you agree on.</p>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">You provide Information about your funded projects and
|
||||
<a href="https://www.openaire.eu/funders-how-to-join-guide" target="_blank">join OpenAIRE</a>.</p>
|
||||
<p>All information is exchanged under confidential agreements and we only make public what you agree
|
||||
on.</p>
|
||||
</div>
|
||||
<img class="uk-width-xsmall uk-position-bottom-left custom-translate-bottom-left" src="assets/monitor-assets/about/icon1.svg">
|
||||
<img class="uk-width-xsmall uk-position-bottom-left custom-translate-bottom-left"
|
||||
src="assets/monitor-assets/about/icon1.svg">
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 2a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">You validate the results and approve for them to be shown on the <a href="https://explore.openaire.eu" target="_blank">Explore</a> portal.</p>
|
||||
<p>Examine your dashboard and the showcased information to ensure you are satisfied with what you see.</p>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">You validate the results and approve for them to be shown
|
||||
on the <a href="https://explore.openaire.eu" target="_blank">Explore</a> portal.</p>
|
||||
<p>Examine your dashboard and the showcased information to ensure you are satisfied with what you
|
||||
see.</p>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 3a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with us</p>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with
|
||||
us</p>
|
||||
<ul class="uk-list uk-list-disc">
|
||||
<li>to understand any gaps and deviations within the dashboard</li>
|
||||
<li>to verify the data integrity</li>
|
||||
<li>to discuss the addition of any new metrics and indicators that might interest you</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-width-1-1 uk-overflow-hidden uk-margin-large-bottom">
|
||||
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
|
||||
<div class="uk-card-body uk-margin-medium-bottom">
|
||||
<span class="uk-text-primary">Step 4a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Customise your dashboard and make your own profile.</p>
|
||||
<p>Select the <a href="https://monitor.openaire.eu/indicators/funder" target="_blank">metrics</a> of interest to you and the ones you want to publish, to keep private, or to share just with colleagues.</p>
|
||||
<p>Select the <a href="https://monitor.openaire.eu/indicators/funder" target="_blank">metrics</a> of
|
||||
interest to you and the ones you want to publish, to keep private, or to share just with colleagues.
|
||||
</p>
|
||||
</div>
|
||||
<img class="uk-width-xsmall uk-position-bottom-left" src="assets/monitor-assets/about/icon3.svg">
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-width-1-1">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
|
||||
<span class="uk-text-primary">Step 5a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Select your team</p>
|
||||
<p>And make them collaborators of the service.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-flex uk-flex-column uk-flex-middle">
|
||||
<span class="uk-h3 uk-margin-medium-bottom">We</span>
|
||||
<div class="uk-card uk-card-default uk-overflow-hidden uk-width-1-1 uk-margin-large-bottom">
|
||||
</ng-container>
|
||||
<ng-container we>
|
||||
<div class="uk-card uk-card-default uk-overflow-hidden uk-position-relative uk-margin-large-bottom">
|
||||
<div class="uk-card-body uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 1b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">We ingest your project metadata and mine the <a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a>.</p>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">We ingest your project metadata and mine the <a
|
||||
href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a>.
|
||||
</p>
|
||||
<p>We infer links to research results: publications, datasets, software, etc.</p>
|
||||
</div>
|
||||
<img class="uk-width-xsmall uk-position-bottom-right" src="assets/monitor-assets/about/icon2.svg">
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 2b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">We present the results to you on our Beta portal.</p>
|
||||
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create your dashboard.</p>
|
||||
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create
|
||||
your dashboard.</p>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 3b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">We produce well-documented visualisations of simple & more advanced composite indicators.</p>
|
||||
<p>Aligned with the Open Science principles and following an evidence-based approach, and based on the funded research activities.</p>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">We produce well-documented visualisations of simple & more
|
||||
advanced composite indicators.</p>
|
||||
<p>Aligned with the Open Science principles and following an evidence-based approach, and based on the
|
||||
funded research activities.</p>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 4b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">We refine until we are happy with the results.</p>
|
||||
<p>We present to you your dashboard.</p>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-width-1-1">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
|
||||
<span class="uk-text-primary">Step 5b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Notify you about new metrics and indicators</p>
|
||||
<p>as we keep enriching the Graph, which you may find useful and add to your profile</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</you-we>
|
||||
</li>
|
||||
<li>
|
||||
<!-- RESEARCH INITIATIVE -->
|
||||
<div>
|
||||
<h2 class="uk-h1 uk-text-center uk-margin-large-top uk-margin-large-bottom">Are you a <span class="uk-text-primary">research initiative?</span></h2>
|
||||
<div class="uk-grid uk-grid-large uk-grid-divider uk-child-width-1-2@m" uk-grid uk-height-match="target: .uk-card">
|
||||
<div class="uk-flex uk-flex-column uk-flex-middle">
|
||||
<span class="uk-h3 uk-margin-medium-bottom">You</span>
|
||||
<div class="uk-card uk-card-default uk-width-1-1 uk-overflow-hidden uk-margin-large-bottom">
|
||||
<you-we [type]="stakeholderEntities.RI" id="ri">
|
||||
<ng-container you>
|
||||
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
|
||||
<div class="uk-card-body uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 1a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">You state your interest on having a research initiative dashboard.</p>
|
||||
<p>All information is exchanged under confidential agreements and we only make public what you agree on.</p>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">You state your interest on having a research initiative
|
||||
dashboard.</p>
|
||||
<p>All information is exchanged under confidential agreements and we only make public what you agree
|
||||
on.</p>
|
||||
</div>
|
||||
<img class="uk-width-xsmall uk-position-bottom-left custom-translate-bottom-left" src="assets/monitor-assets/about/icon1.svg">
|
||||
<img class="uk-width-xsmall uk-position-bottom-left custom-translate-bottom-left"
|
||||
src="assets/monitor-assets/about/icon1.svg">
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 2a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">You configure the criteria to identify the research products that you want to be accounted for.</p>
|
||||
<p>You use the administration dashboard we created for you. If this is not enough, you give us input for the implementation of a customised full-text mining algorithm.</p>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">You configure the criteria to identify the research
|
||||
products that you want to be accounted for.</p>
|
||||
<p>You use the administration dashboard we created for you. If this is not enough, you give us input for
|
||||
the implementation of a customised full-text mining algorithm.</p>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 3a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with us</p>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with
|
||||
us</p>
|
||||
<ul class="uk-list uk-list-disc">
|
||||
<li>to understand any gaps and deviations within the dashboard</li>
|
||||
<li>to verify the data integrity</li>
|
||||
<li>to discuss the addition of any new metrics and indicators that might interest you</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-width-1-1 uk-overflow-hidden uk-margin-large-bottom">
|
||||
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
|
||||
<div class="uk-card-body uk-margin-medium-bottom">
|
||||
<span class="uk-text-primary">Step 4a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Customise your dashboard and make your own profile.</p>
|
||||
<p>Select the <a href="https://monitor.openaire.eu/indicators/funder" target="_blank">metrics</a> of interest to you and the ones you want to publish, to keep private, or to share just with colleagues.</p>
|
||||
<p>Select the <a href="https://monitor.openaire.eu/indicators/funder" target="_blank">metrics</a> of
|
||||
interest to you and the ones you want to publish, to keep private, or to share just with colleagues.
|
||||
</p>
|
||||
</div>
|
||||
<img class="uk-width-xsmall uk-position-bottom-left" src="assets/monitor-assets/about/icon3.svg">
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-width-1-1">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
|
||||
<span class="uk-text-primary">Step 5a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Select your team</p>
|
||||
<p>And make them collaborators of the service.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-flex uk-flex-column uk-flex-middle">
|
||||
<span class="uk-h3 uk-margin-medium-bottom">We</span>
|
||||
<div class="uk-card uk-card-default uk-width-1-1 uk-overflow-hidden uk-margin-large-bottom">
|
||||
</ng-container>
|
||||
<ng-container we>
|
||||
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
|
||||
<div class="uk-card-body uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 1b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">We set up an administration dashboard that you can use to specify which research products of the <a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a> are relevant for you.</p>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">We set up an administration dashboard that you can use
|
||||
to specify which research products of the <a href="https://graph.openaire.eu" target="_blank"
|
||||
class="text-graph">OpenAIRE Research Graph</a> are
|
||||
relevant for you.</p>
|
||||
<p>If needed, we develop a customized full-text mining algorithm to identify your publications.</p>
|
||||
</div>
|
||||
<img class="uk-width-xsmall uk-position-bottom-right" src="assets/monitor-assets/about/icon2.svg">
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 2b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">We present the results to you on our Beta portal.</p>
|
||||
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create your dashboard.</p>
|
||||
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create
|
||||
your dashboard.</p>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 3b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">We produce well-documented visualisations of simple & more advanced composite indicators.</p>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">We produce well-documented visualisations of simple & more
|
||||
advanced composite indicators.</p>
|
||||
<p>Aligned with the Open Science principles and following an evidence-based approach.</p>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 4b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">We refine until we are happy with the results.</p>
|
||||
<p>We present to you your dashboard.</p>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-width-1-1">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
|
||||
<span class="uk-text-primary">Step 5b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Notify you about new metrics and indicators</p>
|
||||
<p>as we keep enriching the Graph, which you may find useful and add to your profile</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</you-we>
|
||||
</li>
|
||||
<li>
|
||||
<!-- RESEARCH INSTITUTION -->
|
||||
<div>
|
||||
<h2 class="uk-h1 uk-text-center uk-margin-large-top uk-margin-large-bottom">Are you a <span class="uk-text-primary">research institution?</span></h2>
|
||||
<div class="uk-grid uk-grid-large uk-grid-divider uk-child-width-1-2@m" uk-grid uk-height-match="target: .uk-card">
|
||||
<div class="uk-flex uk-flex-column uk-flex-middle">
|
||||
<span class="uk-h3 uk-margin-medium-bottom">You</span>
|
||||
<div class="uk-card uk-card-default uk-width-1-1 uk-overflow-hidden uk-margin-large-bottom">
|
||||
<you-we [type]="stakeholderEntities.ORGANIZATION" id="organizations">
|
||||
<ng-container you>
|
||||
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
|
||||
<div class="uk-card-body uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 1a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">You state your interest on having an institutional dashboard for your institution.</p>
|
||||
<p>All information is exchanged under confidential agreements and we only make public what you agree on.</p>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">You state your interest on having an institutional
|
||||
dashboard for your institution.</p>
|
||||
<p>All information is exchanged under confidential agreements and we only make public what you agree
|
||||
on.</p>
|
||||
</div>
|
||||
<img class="uk-width-xsmall uk-position-bottom-left custom-translate-bottom-left" src="assets/monitor-assets/about/icon1.svg">
|
||||
<img class="uk-width-xsmall uk-position-bottom-left custom-translate-bottom-left"
|
||||
src="assets/monitor-assets/about/icon1.svg">
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 2a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">You validate and approve the results.</p>
|
||||
<p>You examine your dashboard and the showcased information to ensure you are satisfied with what you see.</p>
|
||||
<p>You examine your dashboard and the showcased information to ensure you are satisfied with what you
|
||||
see.</p>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 3a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with us</p>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with
|
||||
us</p>
|
||||
<ul class="uk-list uk-list-disc">
|
||||
<li>to understand any gaps and deviations within the dashboard</li>
|
||||
<li>to verify the data integrity</li>
|
||||
<li>to discuss the addition of any new metrics and indicators that might interest you</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-width-1-1 uk-overflow-hidden uk-margin-large-bottom">
|
||||
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
|
||||
<div class="uk-card-body uk-margin-medium-bottom">
|
||||
<span class="uk-text-primary">Step 4a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Customise your dashboard and make your own profile.</p>
|
||||
<p>Select the <a href="https://monitor.openaire.eu/indicators/funder" target="_blank">metrics</a> of interest to you and the ones you want to publish, to keep private, or to share just with colleagues.</p>
|
||||
<p>Select the <a href="https://monitor.openaire.eu/indicators/funder" target="_blank">metrics</a> of
|
||||
interest to you and the ones you want to publish, to keep private, or to share just with colleagues.
|
||||
</p>
|
||||
</div>
|
||||
<img class="uk-width-xsmall uk-position-bottom-left" src="assets/monitor-assets/about/icon3.svg">
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-width-1-1">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
|
||||
<span class="uk-text-primary">Step 5a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Select your team</p>
|
||||
<p>And make them collaborators of the service.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-flex uk-flex-column uk-flex-middle">
|
||||
<span class="uk-h3 uk-margin-medium-bottom">We</span>
|
||||
<div class="uk-card uk-card-default uk-width-1-1 uk-overflow-hidden uk-margin-large-bottom">
|
||||
</ng-container>
|
||||
<ng-container we>
|
||||
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
|
||||
<div class="uk-card-body uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 1b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Starting from the <a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a> we check for existing data for your institution.</p>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Starting from the <a href="https://graph.openaire.eu"
|
||||
target="_blank" class="text-graph">OpenAIRE
|
||||
Research Graph</a> we check for existing data for your institution.</p>
|
||||
<p>We infer links to research results: publications, datasets, software, etc.</p>
|
||||
</div>
|
||||
<img class="uk-width-xsmall uk-position-bottom-right" src="assets/monitor-assets/about/icon2.svg">
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 2b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">We present the results to you on our Beta portal.</p>
|
||||
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create your dashboard.</p>
|
||||
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create
|
||||
your dashboard.</p>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 3b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">We produce well-documented visualisations of simple & more advanced composite indicators.</p>
|
||||
<p>Aligned with the Open Science principles and following an evidence-based approach, and based on the institution’s research activities.</p>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">We produce well-documented visualisations of simple & more
|
||||
advanced composite indicators.</p>
|
||||
<p>Aligned with the Open Science principles and following an evidence-based approach, and based on the
|
||||
institution’s research activities.</p>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 4b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">We refine until we are happy with the results.</p>
|
||||
<p>We present to you your dashboard.</p>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-width-1-1">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
|
||||
<span class="uk-text-primary">Step 5b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Notify you about new metrics and indicators</p>
|
||||
<p>as we keep enriching the Graph, which you may find useful and add to your profile</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</you-we>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.custom-translate-bottom-left {
|
||||
/* transform: translate(-15px, 15px); */
|
||||
margin-bottom: -15px;
|
||||
margin-left: -15px;
|
||||
transform: translate(-20%, 20%);
|
||||
}
|
||||
`]
|
||||
})
|
||||
|
|
@ -295,8 +319,10 @@ export class HowItWorksComponent {
|
|||
public description: string = "OpenAIRE - Monitor | How it works";
|
||||
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'About - How it works'}];
|
||||
public properties: EnvProperties = properties;
|
||||
public sections: string[] = ['Funders', 'Research Initiatives', 'Research Institutions'];
|
||||
public sections: string[] = [StakeholderEntities.FUNDERS, StakeholderEntities.RIS, StakeholderEntities.ORGANIZATIONS];
|
||||
public activeSection: string = StakeholderEntities.FUNDERS;
|
||||
public offset: number;
|
||||
public stakeholderEntities = StakeholderEntities;
|
||||
subscriptions = [];
|
||||
|
||||
constructor(
|
||||
|
|
|
|||
|
|
@ -0,0 +1,91 @@
|
|||
import {
|
||||
AfterContentChecked, AfterViewInit,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
ElementRef,
|
||||
Input,
|
||||
OnDestroy,
|
||||
ViewChild
|
||||
} from "@angular/core";
|
||||
import {StakeholderEntities} from "../openaireLibrary/monitor/entities/stakeholder";
|
||||
|
||||
@Component({
|
||||
selector: 'you-we',
|
||||
template: `
|
||||
<div>
|
||||
<h2 class="uk-h1 uk-text-center uk-margin-large-top uk-margin-large-bottom">Are you a <span class="uk-text-primary">{{type}}?</span></h2>
|
||||
<div #sticky class="uk-container uk-background-default uk-blur-background uk-sticky uk-visible@l"
|
||||
uk-sticky="animation: uk-animation-slide-bottom" [attr.bottom]="'#' + id" [attr.top]="'100vh -' + height + 'px'" [attr.offset]="offset">
|
||||
<div class="uk-grid uk-grid-large uk-grid-divider uk-child-width-1-2@l">
|
||||
<span class="uk-h3 uk-text-center">You</span>
|
||||
<span class="uk-h3 uk-text-center">We</span>
|
||||
</div>
|
||||
</div>
|
||||
<div [id]="id" class="uk-grid uk-grid-large uk-grid-divider uk-child-width-1-2@l" uk-grid uk-height-match="target: .uk-card">
|
||||
<div class="uk-flex uk-flex-column uk-flex-middle uk-child-width-1-1">
|
||||
<div class="uk-margin-top uk-margin-xlarge-bottom">
|
||||
<span class="uk-h3 uk-text-center uk-margin-bottom uk-hidden@l">You</span>
|
||||
<ng-content select="[you]"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-flex uk-flex-column uk-flex-middle uk-child-width-1-1">
|
||||
<div class="uk-margin-top uk-margin-xlarge-bottom">
|
||||
<span class="uk-h3 uk-text-center uk-margin-bottom uk-hidden@l">We</span>
|
||||
<ng-content select="[we]"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class YouWeComponent implements AfterViewInit, AfterContentChecked, OnDestroy {
|
||||
@Input()
|
||||
public type: StakeholderEntities.FUNDER | StakeholderEntities.RI | StakeholderEntities.ORGANIZATION = StakeholderEntities.FUNDER;
|
||||
@Input()
|
||||
public id;
|
||||
@ViewChild('sticky') sticky: ElementRef;
|
||||
public offset: number
|
||||
public height: number;
|
||||
private subscriptions: any[] = [];
|
||||
|
||||
constructor(private cdr: ChangeDetectorRef) {
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
if(this.sticky) {
|
||||
this.observeSticky();
|
||||
}
|
||||
}
|
||||
|
||||
ngAfterContentChecked() {
|
||||
if(this.sticky && typeof document !== 'undefined') {
|
||||
this.offset = this.calcOffset(this.sticky.nativeElement);
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.subscriptions.forEach(subscription => {
|
||||
if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
|
||||
subscription.disconnect();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public observeSticky() {
|
||||
let resizeObs = new ResizeObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
setTimeout(() => {
|
||||
this.offset = this.calcOffset(entry.target);
|
||||
this.cdr.detectChanges();
|
||||
});
|
||||
})
|
||||
});
|
||||
this.subscriptions.push(resizeObs);
|
||||
resizeObs.observe(this.sticky.nativeElement);
|
||||
}
|
||||
|
||||
calcOffset(element) {
|
||||
this.height = element.offsetHeight;
|
||||
return window.innerHeight-this.height;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue