MaDgIK
/
irish-monitor
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[master | DONE | CHANGED] resources pages: tweaks for mobile view

This commit is contained in:
Alex Martzios 2024-04-01 12:34:11 +03:00
parent e950ce5939
commit a4cbb92a27
12 changed files with 180 additions and 558 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 894667955c788cc72db30ce68fa284b4fd02bd45
Subproject commit e8ec49a69b57983f7cb5088d6dce921744012996

6
src/app/resources/engagement/engagement.component.html
View File

@ -62,7 +62,7 @@
</div>
<div class="uk-flex uk-child-width-1-1 uk-child-width-1-2@m uk-margin-large-top">
<div class="uk-section">
<div class="uk-width-1-1 uk-width-1-2@m uk-margin-auto">
<div class="uk-width-1-1 uk-width-1-2@m uk-margin-auto" [ngClass]="isMobile ? 'uk-container' : ''">
<div class="uk-text-large uk-text-primary">Contact us</div>
<h2 class="uk-h3 uk-margin-remove">Stay in the loop</h2>
<div class="uk-margin-top">
@ -71,8 +71,8 @@
<a class="uk-button uk-button-primary uk-margin-medium-top" routerLink="/contact-us">contact us</a>
</div>
</div>
<div class="uk-banner uk-overflow-hidden uk-position-relative">
<img class="uk-position-bottom-right uk-visible@m" style="margin: -10px"
<div class="uk-visible@m uk-banner uk-overflow-hidden uk-position-relative">
<img class="uk-position-bottom-right" style="margin: -10px"
src="assets/irish-assets/resources/dashboard-half-height.png" alt="National Monitor Dashboard" loading="lazy">
</div>
</div>

39
src/app/resources/engagement/engagement.component.less
View File

@ -60,6 +60,45 @@
}
}
}
@media (max-width: @breakpoint-small-max) {
.graphics {
grid-gap: 20px;
.graphic {
max-width: 80px;
&.graphic1 {
transform: translateY(60%);
}
&.graphic2 {
transform: translateY(45%);
}
&.graphic3 {
transform: translateY(25%);
}
&.graphic4 {
transform: translateY(45%);
}
}
}
.card {
height: unset;
.info {
height: 100%;
a {
display: inline-block;
}
}
}
}
.uk-label.training {
background-color: @training-color;
border-color: @training-color;

13
src/app/resources/engagement/engagement.component.ts
View File

@ -1,10 +1,11 @@
import {Component, OnInit} from "@angular/core";
import {ChangeDetectorRef, Component, OnInit} from "@angular/core";
import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component";
import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
import {ActivatedRoute, Router} from "@angular/router";
import {Meta, Title} from "@angular/platform-browser";
import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
import {Breadcrumb} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
import {LayoutService} from "../../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
@Component({
selector: 'engagement',
@ -16,16 +17,24 @@ export class EngagementComponent extends BaseComponent implements OnInit {
description = 'Engagement & Training';
breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'resources - engagement & training'}];
isMobile: boolean = false;
constructor(protected _route: ActivatedRoute,
protected _piwikService: PiwikService,
protected _meta: Meta,
protected seoService: SEOService,
protected _title: Title,
protected _router: Router) {
protected _router: Router,
private cdr: ChangeDetectorRef,
private layoutService: LayoutService) {
super();
}
ngOnInit() {
this.setMetadata();
this.layoutService.isMobile.subscribe(isMobile => {
this.isMobile = isMobile;
this.cdr.detectChanges();
});
}
}

558
src/app/resources/how-it-works/the-five-monitors.component.html
View File

@ -2,20 +2,20 @@
<div>
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
<div class="uk-margin-medium-top uk-margin-medium-bottom">
<div class="uk-margin-medium-top" [class.uk-margin-medium-bottom]="!isMobile">
<h1 class="uk-h2 uk-text-center uk-width-1-1 uk-width-1-2@m uk-margin-auto">
Navigating Ireland’s Open Access
</h1>
<div class="uk-grid uk-flex-middle uk-margin-medium-top" uk-grid>
<div class="uk-width-1-1 uk-width-1-4@m">
<h2 class="uk-h3">
<h2 class="uk-h3" [class.uk-text-center]="isMobile">
5 Tailored Dashboards for Insights.
</h2>
</div>
<div class="uk-width-1-1 uk-width-expand@m">
<img src="assets/irish-assets/resources/dashboard-half-height.png">
</div>
<div class="uk-width-1-1 uk-width-1-4@m">
<div class="uk-width-1-1 uk-width-1-4@m" [class.uk-text-center]="isMobile">
<img src="assets/irish-assets/resources/five-monitors-badges.png">
</div>
</div>
@ -58,11 +58,20 @@
</div>
</div>
</div>
<div class="uk-sticky uk-hidden@l" [attr.uk-sticky]="shouldSticky?'':null">
<div>
<slider-tabs tabsClass="uk-subnav uk-subnav-pill-alt" [border]="false" flexPosition="center" customClass="uk-flex uk-flex-center uk-text-large"
[arrows]="false" containerClass="uk-padding-xsmall uk-blur-background uk-border-rounded-xlarge" connect="#tabs-content">
<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 uk-margin-large-bottom">
<li>
<you-we [type]="'Research Performing Organisation (RPO)'" id="rpo" [titleClass]="null" backgroundClass="uk-background-secondary">
<ng-container you>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-top uk-margin-large-bottom">
<div class="uk-card-body">
<span class="uk-text-primary">Step 1a</span>
<p class="uk-text-large uk-margin-xsmall-top">Assign a Primary Dashboard Manager</p>
@ -81,7 +90,7 @@
</div>
</ng-container>
<ng-container we>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-overflow-hidden uk-position-relative uk-margin-large-bottom">
<div class="uk-card uk-blur-background uk-box-shadow-large uk-overflow-hidden uk-position-relative uk-margin-top uk-margin-large-bottom">
<div class="uk-card-body">
<span class="uk-text-primary">Step 1b</span>
<p class="uk-text-large uk-margin-xsmall-top">
@ -106,7 +115,7 @@
<li>
<you-we [type]="'Research Funding Organisation (RFO)'" id="rfo" [titleClass]="null" backgroundClass="uk-background-secondary">
<ng-container you>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-top uk-margin-large-bottom">
<div class="uk-card-body">
<span class="uk-text-primary">Step 1a</span>
<p class="uk-text-large uk-margin-xsmall-top">Assign a Primary Dashboard Manager</p>
@ -138,7 +147,7 @@
</div>
</ng-container>
<ng-container we>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-top uk-margin-large-bottom">
<div class="uk-card-body">
<span class="uk-text-primary">Step 1b</span>
<p class="uk-text-large uk-margin-xsmall-top">Invite your RFOs Primary Manager via email</p>
@ -170,7 +179,7 @@
<li>
<you-we [type]="'Researcher'" id="researcher" [titleClass]="null" backgroundClass="uk-background-secondary">
<ng-container you>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-top uk-margin-large-bottom">
<div class="uk-card-body">
<span class="uk-text-primary">Step 1a</span>
<p class="uk-text-large uk-margin-xsmall-top">Access Your Profile with ORCID iD</p>
@ -184,7 +193,7 @@
</div>
</ng-container>
<ng-container we>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-top uk-margin-large-bottom">
<div class="uk-card-body">
<span class="uk-text-primary">Step 1b</span>
<p class="uk-text-large uk-margin-xsmall-top">Troubleshoot your Monitor</p>
@ -201,7 +210,7 @@
<li>
<you-we [type]="'Institutional Repository'" id="repository" [titleClass]="null" backgroundClass="uk-background-secondary">
<ng-container you>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-top uk-margin-large-bottom">
<div class="uk-card-body">
<span class="uk-text-primary">Step 1a</span>
<p class="uk-text-large uk-margin-xsmall-top">Find Your Repository’s Monitor Dashboard & Register to OpenAIRE PROVIDE</p>
@ -215,7 +224,7 @@
</div>
</ng-container>
<ng-container we>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-top uk-margin-large-bottom">
<div class="uk-card-body">
<span class="uk-text-primary">Step 1b</span>
<p class="uk-text-large uk-margin-xsmall-top">Invite you as a Manager via email</p>
@ -233,529 +242,4 @@
</ul>
</div>
</div>
</div>
<!-- <div class="uk-visible@m">
<div class="uk-position-relative">
<div class="uk-banner">
<div class="uk-container uk-container-large uk-section uk-section-small">
<div class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-text-center uk-margin-bottom" uk-scrollspy-class>
<h1 class="uk-h2 uk-margin-top" uk-scrollspy-class>The 5 Monitors</h1>
<div class="uk-text-large uk-width-1-2@l uk-width-2-3" uk-scrollspy-class>
5 distinct types of dashboards to navigate Ireland’s Open Access landscape. Each dashboard is tailored to provide unique insights and data relevant to different aspects of Open Science.
</div>
</div>
</div>
</div>
<div class="uk-container uk-container-large uk-position-relative">
<div class="uk-grid uk-flex-middle uk-flex-center uk-child-width-1-5 uk-text-center five-boxes" uk-grid>
<div>
<div class="uk-card uk-border-rounded uk-card-body uk-flex uk-flex-center uk-flex-middle country uk-height-small">
{{entities.country}} {{entities.stakeholder}}
</div>
</div>
<div>
<div class="uk-card uk-border-rounded uk-card-body uk-flex uk-flex-center uk-flex-middle organization uk-height-small">
Research Performing Organisation ({{entities.organization}})
</div>
</div>
<div>
<div class="uk-card uk-border-rounded uk-card-body uk-flex uk-flex-center uk-flex-middle funder uk-height-small">
Research Funding Organisation ({{entities.funder}})
</div>
</div>
<div>
<div class="uk-card uk-border-rounded uk-card-body uk-flex uk-flex-center uk-flex-middle researcher uk-height-small">
Researcher
</div>
</div>
<div>
<div class="uk-card uk-border-rounded uk-card-body uk-flex uk-flex-center uk-flex-middle datasource uk-height-small">
{{entities.datasource}}
</div>
</div>
</div>
</div>
</div>
<div class="uk-container uk-container-large uk-section uk-section-small">
<div class="uk-width-2-3@m">
<h3 class="uk-margin-remove">National Monitor</h3>
<h3 class="uk-margin-remove">The Broad Perspective</h3>
<p class="uk-text-large">
The National Monitor offers an expansive view, featuring cross-country benchmarking and in-depth breakdowns specific to Ireland. It is meant to serve as a key resource for policymakers, publishers, and anyone interested in a comprehensive national overview. Take a look at the National Monitor for detailed insights into the broader Open Access landscape.
</p>
</div>
</div>
<div class="uk-container uk-container-large uk-section uk-section-small">
<div class="uk-width-2-3@m">
<h3>Dive Deeper with Tailored Dashboards</h3>
<p class="uk-text-large">
For RPOs, RFOs, Researchers, and Institutional Repositories, we invite you to explore your individual monitors. Each dashboard is equipped to give you a detailed understanding of your role and impact within Open Access research. Discover how each dashboard works in the sections below.
</p>
</div>
</div>
<div class="uk-section uk-section-small">
<div class="uk-sticky uk-blur-background uk-visible@l" [attr.uk-sticky]="shouldSticky?'':null" [attr.offset]="offset">
<div class="uk-container">
<div class="uk-padding uk-padding-remove-right uk-padding-remove-bottom">
<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-tabs>
</div>
</div>
</div>
<ul id="tabs-content" class="uk-switcher uk-margin-large-bottom">
<li>
<you-we [type]="'Research Performing Organisation (RPO)'" id="rpo">
<ng-container you>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body">
<span class="uk-text-primary">Step 1a</span>
<p class="uk-text-large uk-margin-xsmall-top">Assign a Primary Dashboard Manager</p>
<p>Nominate a primary dashboard manager by filling out <a href="https://app.onlinesurveys.jisc.ac.uk/s/maynoothuniversity/national-open-access-monitor-dashboard-manager-application-form" target="_blank">an application form</a>. If you already have a primary dashboard manager or prefer not to be one, proceed to step 2. </p>
</div>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large 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">Find Your RPO's Monitor Dashboard</p>
<p>Head to the <a routerLink="/rpo">RPO Monitor page</a> and look up your organization. If you can't find it or it appears under multiple names, please <a routerLink="/contact-us">contact us</a>. </p>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large 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">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>
</div>
</ng-container>
<ng-container we>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-overflow-hidden uk-position-relative uk-margin-large-bottom">
<div class="uk-card-body">
<span class="uk-text-primary">Step 1b</span>
<p class="uk-text-large uk-margin-xsmall-top">
Invite your RPOs Primary Manager via email
</p>
<p>Primary managers will have the ability to invite additional managers. They will also have access to our Sandbox environment for data previews and use of OpenOrgs, OpenAIRE's organization deduplication service.</p>
</div>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large 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">Troubleshoot your Monitor</p>
<p>We built your profile if it is missing and help you deduplicate your organization’s name via the OpenORgs service.</p>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large 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">Interact with you Through 1-on-1 expert consultations</p>
<p>to understand any gaps and deviations within the dashboard to verify the data integrity</p>
</div>
</ng-container>
</you-we>
</li>
<li>
<you-we [type]="'Research Funding Organisation (RFO)'" id="rfo">
<ng-container you>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body">
<span class="uk-text-primary">Step 1a</span>
<p class="uk-text-large uk-margin-xsmall-top">Assign a Primary Dashboard Manager</p>
<p>Nominate a primary dashboard manager by completing <a href="https://app.onlinesurveys.jisc.ac.uk/s/maynoothuniversity/national-open-access-monitor-dashboard-manager-application-form" target="_blank">our application form</a>. If you already have a primary dashboard manager or prefer not to be one, proceed to step 2.</p>
</div>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large 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">Find Your RFO's Monitor Dashboard</p>
<p>Head to the <a routerLink="/rfo">RFO Monitor page</a> and look up your organization. If you can't find it or it appears under multiple names, please <a routerLink="/contact-us">contact us</a>.</p>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large 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">Discover Your Monitor and consider joining OpenAIRE (Optional)</p>
<p>Explore your personalized dashboard at your leisure. You have the option to join OpenAIRE, allowing us to develop a specialized text mining algorithm to enrich your profile. This marks the final step if you choose not to join OpenAIRE.</p>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large 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">Join OpenAIRE - You provide Information about your funded projects and join OpenAIRE.</p>
<p>All information is exchanged under confidential agreements and we only make public what you agree on.
</p>
</div>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative">
<span class="uk-text-primary">Step 5a</span>
<p class="uk-text-large uk-margin-xsmall-top">validate the results and approve for them to be shown on your Monitor dashboard.</p>
<p>Examine your dashboard in the Sandbox environment and the showcased information to ensure you are satisfied with what you see.</p>
</div>
</ng-container>
<ng-container we>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body">
<span class="uk-text-primary">Step 1b</span>
<p class="uk-text-large uk-margin-xsmall-top">Invite your RFOs Primary Manager via email</p>
<p>Primary managers will have the ability to invite additional managers. They will also have access to our Sandbox environment for data previews and curation.</p>
</div>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large 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">Troubleshoot your Monitor</p>
<p>We built your profile if it is missing and help you with any additional issues</p>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large 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">Interact with you Through 1-on-1 expert consultations</p>
<p>to understand any gaps and deviations within the dashboard to verify the data integrity</p>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large 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">Ingest your project metadata and mine the <a href="https://graph.openaire.eu" target="_blank">OpenAIRE Graph</a>.</p>
<p>We infer links to research results: publications, datasets, software, etc, via dedicated text mining algorithms.</p>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative">
<span class="uk-text-primary">Step 5b</span>
<p class="uk-text-large uk-margin-xsmall-top">Refine until you are happy with the results.</p>
</div>
</ng-container>
</you-we>
</li>
<li>
<you-we [type]="'Researcher'" id="researcher">
<ng-container you>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body">
<span class="uk-text-primary">Step 1a</span>
<p class="uk-text-large uk-margin-xsmall-top">Access Your Profile with ORCID iD</p>
<p>Log in using your ORCID iD to grant OpenAIRE access to your ORCID record. Then, visit the <a routerLink="/researcher">Researcher Monitors</a> to search for your ORCID iD. If it’s not listed, contact us. Note that only research products affiliated with an Irish RPO will be displayed in your profile. </p>
</div>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large 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">Claim Additional Records</p>
<p>From your profile (click the circle with your initials at the top right), navigate to the 'My ORCID Links' page and allow OpenAIRE to enhance your ORCID record. Search for your research products and claim them. These will appear in your ORCID record following the next update of the OpenAIRE Graph.</p>
</div>
</ng-container>
<ng-container we>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body">
<span class="uk-text-primary">Step 1b</span>
<p class="uk-text-large uk-margin-xsmall-top">Troubleshoot your Monitor</p>
<p>If your profile is missing, we are here to help build it. Remember, OpenAIRE syncs with ORCID, so research products not in ORCID or unaffiliated with an Irish organization will not appear in your record.</p>
</div>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large 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">Support you in understanding any gaps or deviations within your dashboard and to provide assistance as needed.</p>
</div>
</ng-container>
</you-we>
</li>
<li>
<you-we [type]="'Institutional Repository'" id="repository">
<ng-container you>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body">
<span class="uk-text-primary">Step 1a</span>
<p class="uk-text-large uk-margin-xsmall-top">Find Your Repository’s Monitor Dashboard & Register to OpenAIRE PROVIDE</p>
<p>Navigate to the <a routerLink="/repository">Repository Monitor page</a> and search for your repository. If it is not listed, this indicates that you need to register with OpenAIRE. You can complete this process by following <a href="http://Navigate%20to%20the%20Repository%20Monitor%20page%20and%20search%20for%20your%20repository.%20If%20it's%20not%20listed,%20this%20typically%20indicates%20that%20you%20need%20to%20register%20with%20OpenAIRE.%20You%20can%20complete%20this%20process%20here.%20If%20your%20repository%20already%20has%20a%20Monitor%20dashboard%20but%20hasn't%20been%20registered%20in%20OpenAIRE%20PROVIDE,%20please%20contact%20us%20for%20assistance." target="_blank">these</a> instructions. If your repository already has a Monitor dashboard but your have not been registered in OpenAIRE PROVIDE, please <a routerLink="/contact-us">contact us</a> for assistance.</p>
</div>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large 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">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>
</div>
</ng-container>
<ng-container we>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body">
<span class="uk-text-primary">Step 1b</span>
<p class="uk-text-large uk-margin-xsmall-top">Invite you as a Manager via email</p>
<p>As a manager, you will receive access to the PROVIDE dashboard. OpenAIRE PROVIDE is a service designed for Institutional Repository Managers to register, validate, and enrich their records. It also offers insights into usage statistics, including views and downloads. This dashboard allows you to efficiently manage your records and comply with Open Access requirements.</p>
</div>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large 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">Interact with you through 1-on-1 expert consultations</p>
<p>to understand any gaps and deviations within the dashboard to verify the data integrity</p>
</div>
</ng-container>
</you-we>
</li>
</ul>
</div>
</div> -->
<!-- <div class="uk-hidden@m">
<div class="uk-banner">
<div class="uk-container uk-container-large">
<div class="uk-text-center" uk-scrollspy-class>
<h1 class="uk-margin-medium-top uk-margin-medium-bottom" uk-scrollspy-class>How it works<span class="uk-text-primary">.</span></h1>
<div class="uk-text-large" uk-scrollspy-class>
Join the OpenAIRE Monitor service and we will create for you a dashboard to track, 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-scrollspy-class>
<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/get-started">Get Started</a>
</div>
</div>
</div>
<div class="uk-position-relative uk-height-medium" style="overflow-x: hidden; overflow-x: clip;">
<img class="uk-width-large uk-position-absolute" src="assets/monitor-assets/about/hero.svg" loading="lazy"
style="bottom: -70px; right: -80px;">
</div>
</div>
<div class="uk-section uk-section-large uk-margin-medium-top">
<div class="uk-sticky uk-blur-background" [attr.uk-sticky]="shouldSticky?'':null">
<div class="uk-padding-small uk-padding-remove-right uk-padding-remove-bottom">
<slider-tabs flexPosition="center" customClass="uk-text-large" connect="#tabs-content-mobile">
<slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section"
[tabId]="section"></slider-tab>
</slider-tabs>
</div>
</div>
<div class="uk-container uk-container-large">
<ul id="tabs-content-mobile" class="uk-switcher uk-margin-large-bottom">
<li id="funder">
<div class="uk-h1 uk-text-center uk-margin-xlarge-top uk-margin-xlarge-bottom">
Are you a <span class="uk-text-primary">Funder?</span>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 1a</span>
<h5 class="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>.</h5>
<p>All information is exchanged under confidential agreements and we only make public what you agree
on.</p>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 1b</span>
<h5 class="uk-margin-xsmall-top">We ingest your project metadata and mine the <a
href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Graph</a>.
</h5>
<p>We infer links to research results: publications, datasets, software, etc.</p>
</div>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 2a</span>
<h5 class="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.</h5>
<p>Examine your dashboard and the showcased information to ensure you are satisfied with what you
see.</p>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 2b</span>
<h5 class="uk-margin-xsmall-top">We present the results to you on our Beta portal.</h5>
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create
your dashboard.</p>
</div>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 3a</span>
<h5 class="uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with
us</h5>
<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-margin-large-top">
<span class="uk-text-primary">Step 3b</span>
<h5 class="uk-margin-xsmall-top">We produce well-documented visualisations of simple & more
advanced composite indicators.</h5>
<p>Aligned with the Open Science principles and following an evidence-based approach, and based on the
funded research activities.</p>
</div>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 4a</span>
<h5 class="uk-margin-xsmall-top">Customise your dashboard and make your own profile.</h5>
<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>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 4b</span>
<h5 class="uk-margin-xsmall-top">We refine until we are happy with the results.</h5>
<p>We present your dashboard to you.</p>
</div>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 5a</span>
<h5 class="uk-margin-xsmall-top">Select your team</h5>
<p>And make them collaborators of the service.</p>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 5b</span>
<h5 class="uk-margin-xsmall-top">Notify you about new metrics and indicators</h5>
<p>as we keep enriching the Graph, which you may find useful and add to your profile</p>
</div>
</div>
</li>
<li id="ri">
<div class="uk-h1 uk-text-center uk-margin-xlarge-top uk-margin-xlarge-bottom">
Are you a <span class="uk-text-primary">Research Initiative?</span>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 1a</span>
<h5 class="uk-margin-xsmall-top">You state your interest in having a research initiative
dashboard.</h5>
<p>All information is exchanged under confidential agreements and we only make public what you agree
on.</p>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 1b</span>
<h5 class="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 Graph</a> are
relevant for you.</h5>
<p>If needed, we develop a customized full-text mining algorithm to identify your publications.</p>
</div>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 2a</span>
<h5 class="uk-margin-xsmall-top">You configure the criteria to identify the research
products that you want to be accounted for.</h5>
<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-margin-large-top">
<span class="uk-text-primary">Step 2b</span>
<h5 class="uk-margin-xsmall-top">We present the results to you on our Beta portal.</h5>
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create
your dashboard.</p>
</div>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 3a</span>
<h5 class="uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with
us</h5>
<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-margin-large-top">
<span class="uk-text-primary">Step 3b</span>
<h5 class="uk-margin-xsmall-top">We produce well-documented visualisations of simple & more
advanced composite indicators.</h5>
<p>Aligned with the Open Science principles and following an evidence-based approach, and based on the
institution’s research activities.</p>
</div>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 4a</span>
<h5 class="uk-margin-xsmall-top">Customise your dashboard and make your own profile.</h5>
<p>Select the <a href="https://monitor.openaire.eu/indicators/ri" 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>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 4b</span>
<h5 class="uk-margin-xsmall-top">We refine until we are happy with the results.</h5>
<p>We present your dashboard to you.</p>
</div>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 5a</span>
<h5 class="uk-margin-xsmall-top">Select your team</h5>
<p>And make them collaborators of the service.</p>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 5b</span>
<h5 class="uk-margin-xsmall-top">Notify you about new metrics and indicators</h5>
<p>as we keep enriching the Graph, which you may find useful and add to your profile</p>
</div>
</div>
</li>
<li id="organizations">
<div class="uk-h1 uk-text-center uk-margin-xlarge-top uk-margin-xlarge-bottom">
Are you a <span class="uk-text-primary">Research Institution?</span>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 1a</span>
<h5 class="uk-margin-xsmall-top">You state your interest in having an institutional
dashboard for your institution.</h5>
<p>All information is exchanged under confidential agreements and we only make public what you agree
on.</p>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 1b</span>
<h5 class="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.</h5>
<p>We infer links to research results: publications, datasets, software, etc.</p>
</div>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 2a</span>
<h5 class="uk-margin-xsmall-top">You validate and approve the results.</h5>
<p>You examine your dashboard and the showcased information to ensure you are satisfied with what you
see.</p>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 2b</span>
<h5 class="uk-margin-xsmall-top">We present the results to you on our Beta portal.</h5>
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create
your dashboard.</p>
</div>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 3a</span>
<h5 class="uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with
us</h5>
<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-margin-large-top">
<span class="uk-text-primary">Step 3b</span>
<h5 class="uk-margin-xsmall-top">We produce well-documented visualisations of simple & more
advanced composite indicators.</h5>
<p>Aligned with the Open Science principles and following an evidence-based approach, and based on the
institution’s research activities.</p>
</div>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 4a</span>
<h5 class="uk-margin-xsmall-top">Customise your dashboard and make your own profile.</h5>
<p>Select the <a href="https://monitor.openaire.eu/indicators/organization" 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>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 4b</span>
<h5 class="uk-margin-xsmall-top">We refine until we are happy with the results.</h5>
<p>We present your dashboard to you.</p>
</div>
</div>
<div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 5a</span>
<h5 class="uk-margin-xsmall-top">Select your team</h5>
<p>And make them collaborators of the service.</p>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 5b</span>
<h5 class="uk-margin-xsmall-top">Notify you about new metrics and indicators</h5>
<p>as we keep enriching the Graph, which you may find useful and add to your profile</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div> -->
</div>

10
src/app/resources/how-it-works/the-five-monitors.component.ts
View File

@ -5,6 +5,7 @@ import {Meta, Title} from "@angular/platform-browser";
import {SEOService} from "src/app/openaireLibrary/sharedComponents/SEO/SEO.service";
import {StakeholderBaseComponent} from "../../openaireLibrary/monitor-admin/utils/stakeholder-base.component";
import {Breadcrumb} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
import {LayoutService} from "../../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
@Component({
selector: 'the-five-monitors',
@ -19,18 +20,25 @@ export class TheFiveMonitorsComponent extends StakeholderBaseComponent{
public offset: number;
public shouldSticky: boolean = true;
isMobile: boolean = false;
constructor(protected _route: ActivatedRoute,
protected _piwikService: PiwikService,
protected _meta: Meta,
protected seoService: SEOService,
protected _title: Title,
protected _router: Router,
private cdr: ChangeDetectorRef) {
private cdr: ChangeDetectorRef,
private layoutService: LayoutService) {
super();
}
ngOnInit() {
this.setMetadata();
this.layoutService.isMobile.subscribe(isMobile => {
this.isMobile = isMobile;
this.cdr.detectChanges();
});
}
ngAfterViewInit() {

59
src/app/resources/how-it-works/user-actions.component.html
View File

@ -1,4 +1,4 @@
<div>
<div *ngIf="!isMobile" class="uk-visible@m">
<div class="uk-banner dark uk-padding-remove-vertical uk-light">
<div class="uk-container uk-container-large uk-section uk-section-small">
<div>
@ -59,3 +59,60 @@
</div>
</div>
</div>
<div *ngIf="isMobile || isServer" class="uk-hidden@m">
<div class="uk-banner dark uk-padding-remove-vertical uk-light">
<div class="uk-container uk-container-large uk-section uk-section-small">
<div>
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
<div class="uk-text-center" uk-scrollspy-class>
<h1 class="uk-heading-small uk-margin-medium-top uk-margin-bottom">User Actions</h1>
<div uk-scrollspy-class>
Once you are logged in (researchers should use their ORCID ID), you will be all set to access the following
</div>
</div>
</div>
</div>
<div uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
<div>
<div class="uk-sticky uk-background-default uk-padding-small uk-padding-remove-right" uk-sticky>
<slider-tabs type="scrollable" position="horizontal">
<slider-tab tabId="adding" tabTitle="Add to ORCID"></slider-tab>
<slider-tab tabId="linking" tabTitle="Linking"></slider-tab>
<slider-tab tabId="upload" tabTitle="Upload DOIs"></slider-tab>
</slider-tabs>
</div>
</div>
<div class="uk-container uk-container-large uk-section uk-section-small uk-text-break">
<div id="adding" class="uk-margin-xlarge-bottom">
<h3>Adding research products to your ORCID record via ~ My ORCID LINKS ~</h3>
<p>Researchers who log in using their ORCID ID have the ability to claim additional research outputs as their own. Once claimed, this information synchronizes with their ORCID profile and will be reflected in both the ORCID system and this portal following the next update of the OpenAIRE Graph, which occurs approximately monthly. This integration ensures that researchers can see their claimed research outputs in both places, maintaining consistency and visibility of their work.</p>
<p>To claim your research products in OpenAIRE and synchronize them with your ORCID profile, you will need to follow a few simple steps. Once logged in with your ORCID iD, navigate to the top right corner of any page and click on your initials. From there, select “My ORCiD links.” This action will prompt you to grant OpenAIRE permission to access (once) and update your ORCID works.</p>
<p>After you have granted permission, you will see a list of all your works associated with your ORCID ID. You can then view, update, or remove these works from both your ORCID record and the National Open Access Monitor, Ireland. To expand your record, use the “Discover research products related to you” link, located at the top right of the page. This feature allows you to use the search function to find your Irish publications and other research products. Once you find them, you can easily add them to your ORCID record by clicking on “link”.</p>
</div>
<div id="linking" class="uk-margin-xlarge-bottom">
<h3>Linking research products via ~ Link ~</h3>
<p>'Linking' is a functionality provided by OpenAIRE enabling users to connect research results with projects, research communities, or other research outcomes. This linked information is subsequently integrated into the OpenAIRE Graph and, consequently, becomes accessible in the National Open Access Monitor, Ireland.</p>
<h5 class="uk-text-italic">Where to Find the Linking Feature?</h5>
<p>To access the Linking feature, sign in to your account, click on the circle with your initials in the top right corner, and select 'Link'. Additionally, the linking option is available under any research product while browsing. Each Monitor includes a 'Browse Research Products' tab at the top for easy navigation and access.</p>
<h5 class="uk-text-italic">Types of Research Results for Linking</h5>
<p>Users have two options for linking research results:</p>
<p><span class="uk-text-bold">1. Existing OpenAIRE Results:</span> Link to research results already present within OpenAIRE.</p>
<p><span class="uk-text-bold">2. External Content Providers:</span> Link to research results hosted on external platforms like Crossref, Datacite, or ORCID. </p>
<h5 class="uk-text-italic">Visibility of New Links</h5>
<p>The visibility of newly created links depends on their origin:</p>
<p><span class="uk-text-bold">1. Links to Existing OpenAIRE Results:</span> These will be visible on the portal after the next OpenAIRE Graph update, which occurs nearly monthly.</p>
<p><span class="uk-text-bold">2. Links to Results on External Platforms:</span> Links to research results on platforms like Crossref, Datacite, or ORCID will be immediately visible through the portal.</p>
<h5 class="uk-text-italic">Managing ‘My Links’</h5>
<p>All users can manage their links through the 'My Links' page. After linking results, users can view and manage their list of created links, including the option to delete them if needed.</p>
</div>
<div id="upload" class="uk-margin-xlarge-bottom">
<h3>Upload DOIs</h3>
<p>Accessing the "Upload DOIs" feature on the OA Monitor platform is a straightforward process that allows users to obtain detailed information about their publications. Here's how you can use this feature:</p>
<p>First, sign in to your account. Once you are logged in, locate the circle with your initials at the top right corner of the page and click on it. In the dropdown menu, select 'Upload DOIs'. This will take you to a page specifically designed for uploading Digital Object Identifiers (DOIs).</p>
<p>On this page, you have the option to upload a CSV file that contains a list of DOIs. Once your CSV file is uploaded, the system will process the information and generate a comprehensive report. This report includes a wealth of details about the publications associated with the given DOIs.</p>
<p>The information provided in the report covers various aspects such as the publication title, its access mode (which could be Open, Closed, Embargo, or Restricted), and the access routes (like gold, hybrid, or bronze). It also indicates whether the publication is green (self-archived) and if it is published in an OA (Open Access) diamond Journal. The report also highlights the total number of DOIs found in your list and identifies if there are any duplicates or invalid DOIs.</p>
</div>
</div>
</div>
</div>

17
src/app/resources/how-it-works/user-actions.component.ts
View File

@ -1,10 +1,12 @@
import {Component} from "@angular/core";
import {ChangeDetectorRef, Component, Inject, PLATFORM_ID} from "@angular/core";
import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component";
import {ActivatedRoute, Router} from "@angular/router";
import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
import {Meta, Title} from "@angular/platform-browser";
import {Breadcrumb} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
import {isPlatformServer} from "@angular/common";
import {LayoutService} from "../../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
@Component({
selector: 'user-actions',
@ -16,16 +18,27 @@ export class UserActionsComponent extends BaseComponent{
description = 'User Actions';
breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'resources - user actions'}];
isMobile: boolean = false;
isServer: boolean;
constructor(protected _route: ActivatedRoute,
protected _piwikService: PiwikService,
protected _meta: Meta,
protected seoService: SEOService,
protected _title: Title,
protected _router: Router) {
protected _router: Router,
private cdr: ChangeDetectorRef,
private layoutService: LayoutService,
@Inject(PLATFORM_ID) private platform: any) {
super();
this.isServer = isPlatformServer(this.platform);
}
ngOnInit() {
this.setMetadata();
this.layoutService.isMobile.subscribe(isMobile => {
this.isMobile = isMobile;
this.cdr.detectChanges();
});
}
}

4
src/app/resources/how-it-works/you-we.component.ts
View File

@ -38,13 +38,13 @@ declare var UIkit;
<div 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">
<div class="uk-margin-top uk-margin-large-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">
<div class="uk-margin-top uk-margin-large-bottom">
<span class="uk-h3 uk-text-center uk-margin-bottom uk-hidden@l">We</span>
<ng-content select="[we]"></ng-content>
</div>

10
src/app/resources/methodology/methodological-approach.component.html
View File

@ -67,7 +67,7 @@
</div>
</div>
</div>
<div class="uk-section uk-margin-medium-top uk-position-relative">
<div class="uk-section uk-margin-medium-top uk-position-relative" [ngClass]="isMobile ? 'uk-padding-remove-bottom' : ''">
<div class="uk-container uk-container-large">
<div class="uk-grid uk-child-width-1-2@m" uk-grid>
<div>
@ -96,7 +96,7 @@
</div>
</div>
</div>
<div class="uk-section uk-section-small uk-position-relative">
<div class="uk-position-relative" [ngClass]="isMobile ? '' : 'uk-section uk-section-small'">
<img class="uk-position-center-left uk-visible@m"
src="assets/common-assets/common/graph-nodes-2.svg" alt="OpenAIRE Graph" loading="lazy">
<div class="uk-container uk-container-large uk-width-1-1 uk-width-1-2@m">
@ -127,7 +127,7 @@
</div>
<div class="uk-flex uk-child-width-1-1 uk-child-width-1-2@m uk-margin-large-top">
<div class="uk-section">
<div class="uk-width-1-1 uk-width-1-2@m uk-margin-auto">
<div class="uk-width-1-1 uk-width-1-2@m uk-margin-auto" [ngClass]="isMobile ? 'uk-container' : ''">
<div class="uk-text-large uk-text-primary">Contact us</div>
<h2 class="uk-h3 uk-margin-remove">Your Feedback Matters</h2>
<div class="uk-margin-top">
@ -138,8 +138,8 @@
<a class="uk-button uk-button-primary uk-margin-medium-top" routerLink="/contact-us">contact us</a>
</div>
</div>
<div class="uk-banner uk-overflow-hidden uk-position-relative">
<img class="uk-position-bottom-right uk-visible@m" style="margin: -10px;"
<div class="uk-visible@m uk-banner uk-overflow-hidden uk-position-relative">
<img class="uk-position-bottom-right" style="margin: -10px;"
src="assets/irish-assets/resources/dashboard-half-height.png" alt="National Monitor Dashboard" loading="lazy">
</div>
</div>

13
src/app/resources/methodology/methodological-approach.component.ts
View File

@ -1,10 +1,11 @@
import {Component, OnInit} from "@angular/core";
import {ChangeDetectorRef, Component, OnInit} from "@angular/core";
import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component";
import {ActivatedRoute, Router} from "@angular/router";
import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
import {Meta, Title} from "@angular/platform-browser";
import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
import {Breadcrumb} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
import {LayoutService} from "../../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
@Component({
selector: 'methodological-approach',
@ -16,16 +17,24 @@ export class MethodologicalApproachComponent extends BaseComponent implements O
description = 'Methodological Approach';
breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'resources - methodological approach'}];
isMobile: boolean = false;
constructor(protected _route: ActivatedRoute,
protected _piwikService: PiwikService,
protected _meta: Meta,
protected seoService: SEOService,
protected _title: Title,
protected _router: Router) {
protected _router: Router,
private cdr: ChangeDetectorRef,
private layoutService: LayoutService) {
super();
}
ngOnInit() {
this.setMetadata();
this.layoutService.isMobile.subscribe(isMobile => {
this.isMobile = isMobile;
this.cdr.detectChanges();
});
}
}

7
src/app/resources/methodology/terminology.component.ts
View File

@ -1,4 +1,4 @@
import {ChangeDetectorRef, Component} from "@angular/core";
import {ChangeDetectorRef, Component, Inject, PLATFORM_ID} from "@angular/core";
import {Meta, Title} from "@angular/platform-browser";
import {ActivatedRoute, Router} from "@angular/router";
import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
@ -7,6 +7,7 @@ import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
import {LayoutService} from "../../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
import {HelperService} from "../../openaireLibrary/utils/helper/helper.service";
import {Breadcrumb} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
import {isPlatformServer} from "@angular/common";
@Component({
selector: 'terminology',
@ -33,8 +34,10 @@ export class TerminologyComponent extends BaseComponent{
protected _router: Router,
private cdr: ChangeDetectorRef,
private layoutService: LayoutService,
private helper: HelperService) {
private helper: HelperService,
@Inject(PLATFORM_ID) private platform: any) {
super();
this.isServer = isPlatformServer(this.platform);
}
ngOnInit() {