explore-services/explore/src/app/funders/funders.component.html

341 lines
21 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="pageDescription"></schema2jsonld>
<div class="funders">
<div class="uk-background-muted">
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<div class="uk-container uk-container-large uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-grid uk-grid-large uk-grid-stack uk-flex-middle uk-padding-small" uk-grid>
<div class="uk-width-1-2@m uk-width-1-1 uk-flex uk-flex-column uk-flex-center">
<span class="uk-align-left uk-margin-remove-bottom uk-flex uk-flex-middle">
<span class="custom-coins-dot"></span>
<span uk-scrollspy-class class="uk-text-large funders-title">Funders</span>
</span>
<div style="max-width: 600px;">
<h1 uk-scrollspy-class class="uk-h1 uk-margin-remove-top">
<span>Be an integral part of the open R&I ecosystem<span class="custom-handshake-dot"></span></span>
</h1>
<div uk-scrollspy-class>
Welcome to the Funders page on OpenAIRE Explore. Discover key details about each funder, their commitment to open access, and the impactful research they enable. Our aim? To foster transparency, inspire collaboration.
<!-- Welcome to the Funders' page on OpenAIRE Explore. This dedicated hub spotlights our ever-growing extensive network of funding partners:
{{formatNumber(projectsNumber)}} grants from
{{formatNumber(fundersNumber)}} funders currently linked to
{{formatNumber(researchProductsNumber)}} funded research outputs.
Discover key details about each funder, their commitment to open access, and the impactful research they enable.
Our aim? To foster transparency, inspire collaboration. -->
</div>
<div class="uk-margin-medium-top" uk-scrollspy-class>
<a class="uk-button uk-button-primary uk-text-uppercase" target="_blank" href="https://www.openaire.eu/funders-how-to-join-guide">
Join Us
</a>
</div>
<div *ngIf="showContentWithNumbers" class="uk-margin-medium-top" uk-scrollspy-class>
<div class="uk-grid uk-grid-divider" uk-grid>
<div class="uk-flex uk-flex-column uk-flex-center">
<span class="uk-h4 uk-text-primary uk-margin-xsmall-bottom">
{{formatNumber(projectsNumber)}}+
</span>
<span class="uk-text-uppercase">
grants
</span>
</div>
<div class="uk-flex uk-flex-column uk-flex-center">
<span class="uk-h4 uk-text-primary uk-margin-xsmall-bottom">
{{formatNumber(fundersNumber)}}
</span>
<span class="uk-text-uppercase">
funders
</span>
</div>
<div class="uk-flex uk-flex-column uk-flex-center">
<span class="uk-h4 uk-text-primary uk-margin-xsmall-bottom">
{{formatNumber(researchProductsNumber)}}+
</span>
<span class="uk-text-uppercase">
funded research outputs
</span>
</div>
</div>
</div>
</div>
</div>
<div class="uk-width-1-2@m uk-width-1-1 uk-text-center" uk-scrollspy-class>
<img src="assets/explore-assets/funders/funders.png" alt="Funders advertisement image">
</div>
</div>
</div>
</div>
<ng-container *ngIf="showLoading">
<div class="uk-container uk-container-large uk-section">
<loading></loading>
</div>
</ng-container>
<ng-container *ngIf="!showLoading && funders?.length">
<div class="uk-container uk-container-large">
<div id="target" class="uk-section uk-padding-remove-top uk-margin-top" uk-height-match="target: .alias;">
<div>
<div *ngIf="funders" class="uk-padding-small uk-padding-remove-vertical uk-margin-medium-bottom uk-flex uk-flex-wrap uk-flex-middle uk-flex-between">
<div class="uk-flex uk-flex-wrap uk-flex-middle uk-flex-between uk-width-auto@m uk-width-1-1 uk-margin-top">
<div class="uk-width-small uk-margin-medium-right">
<div input
type="select" placeholder="Show" inputClass="border-bottom"
[options]="showOptions" [(value)]="show" (valueChange)="filtering()">
</div>
</div>
<div class="uk-width-small uk-margin-medium-right">
<div input
type="select" placeholder="Sort by" inputClass="border-bottom"
[options]="sortOptions" [(value)]="sortBy" (valueChange)="sortByChanged()">
</div>
</div>
<div class="uk-width-xsmall">
<div input
type="select" placeholder="Results per page" inputClass="border-bottom"
[options]="pageOptions" [(value)]="pageSize" (valueChange)="sizeChanged($event)">
</div>
</div>
</div>
<div class="uk-flex uk-flex-middle uk-width-auto@m uk-width-1-1 uk-margin-top">
<div search-input [searchControl]="keywordControl" searchInputClass="border-bottom" iconPosition="right"
placeholder="Search funder" [disabled]="showLoading" class="uk-width-auto@m uk-width-medium@s uk-width-1-1">
</div>
<div class="uk-visible@m uk-flex uk-flex-middle uk-margin-medium-left">
<a (click)="gridView = true"
class="uk-link-reset custom-view-button" [ngClass]="gridView ? 'active' : ''">
<icon [name]="'apps'" [ratio]="1.5" [type]="'round'" [flex]="true"></icon>
</a>
<a (click)="gridView = false"
class="uk-link-reset custom-view-button uk-margin-xsmall-left" [ngClass]="gridView ? '' : 'active'">
<icon [name]="'view_list'" [ratio]="1.5" [type]="'round'" [flex]="true"></icon>
</a>
</div>
</div>
</div>
</div>
<div class="uk-margin-large-bottom" uk-height-match="target: .name;">
<div *ngIf="!displayedFunders || displayedFunders?.length == 0" class="uk-text-center uk-margin-large-top">
No funders available
</div>
<div class="uk-grid uk-grid-match uk-padding-small" [ngClass]="gridView ? 'uk-child-width-1-2@m uk-child-width-1-3@l' : 'uk-child-width-1-1'"
uk-grid uk-height-match="target: .data;">
<div *ngFor="let funder of displayedFunders.slice((currentPage-1)*pageSize, currentPage*pageSize)">
<!-- funder's card for GRID view -->
<ng-container *ngIf="gridView || isMobile; else elseBlock">
<div class="uk-card uk-card-default uk-card-hover funder-grid">
<!-- <div class="uk-position-top-left uk-padding-small">
<span class="uk-text-xsmall">flag</span>
</div> -->
<!-- <div class="uk-position-top-right uk-padding-small">
<div class="uk-flex uk-flex-middle uk-text-xsmall uk-text-meta">
<div class="uk-icon-bg uk-icon-bg-small">
<icon name="done" [flex]="true"></icon>
</div>
<span class="uk-margin-xsmall-left">Registered</span>
</div>
</div> -->
<div class="uk-card-media-top uk-margin-medium-top uk-padding-large uk-padding-remove-vertical uk-flex uk-flex-center uk-flex-middle uk-height-xsmall">
<img *ngIf="funder.logoUrl; else elseBlock" [src]="funder | logoUrl" [alt]="funder.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply" loading="lazy">
<ng-template #elseBlock>
<img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply" loading="lazy">
</ng-template>
</div>
<div class="uk-padding-small uk-padding-remove-vertical uk-padding-remove-left uk-margin-medium-left">
<!-- alias -->
<div class="alias uk-text-uppercase uk-text-small uk-margin-top type">
<ng-container *ngIf="funder.alias">
{{funder.alias}}
</ng-container>
</div>
<div class="uk-flex">
<div class="uk-width-expand name uk-h6 uk-margin-remove multi-line-ellipsis lines-2">
<ng-container *ngIf="funder.name" >
<span>{{funder.name}}</span>
</ng-container>
</div>
<!-- <div class="uk-width-auto uk-margin-left">
<a href="" class="uk-flex-inline uk-flex-middle uk-text-uppercase uk-button uk-button-text custom-external">
<icon name="payment" [flex]="true"></icon>
</a>
</div> -->
</div>
</div>
<div class="data uk-background-muted uk-flex uk-flex-middle uk-padding-small uk-padding-remove-left uk-margin-top">
<div class="uk-flex uk-flex-middle uk-width-1-1 uk-child-width-1-2 uk-margin-medium-left">
<div>
<!-- Projects -->
<div *ngIf="funder.projects" class="uk-flex uk-flex-column" [class.uk-margin-small-bottom]="funder.researchProducts">
<span class="uk-text-meta uk-text-xsmall">
Projects
</span>
<a
class="uk-link-text uk-text-large uk-text-bold"
[routerLink]="properties.searchLinkToProjects" [queryParams]="{'funder': urlEncodeAndQuote(funder.id)}">
<span>
{{funder.projects | number}}
</span>
</a>
</div>
<!-- Research products -->
<div *ngIf="funder.researchProducts" class="uk-flex uk-flex-column">
<span class="uk-text-meta uk-text-xsmall">
Research Products
</span>
<a
class="uk-link-text uk-text-large uk-text-bold"
[routerLink]="properties.searchLinkToResults" [queryParams]="{'relfunder': urlEncodeAndQuote(funder.id)}">
<span>
{{funder.researchProducts | number}}
</span>
</a>
</div>
</div>
<div class="uk-flex uk-flex-column uk-flex-middle uk-flex-center">
<div class="uk-progress-semicircle uk-progress-semicircle-small" [attr.percentage]="funder.openAccessPercentage" [style]="'--percentage:' + funder.openAccessPercentage"></div>
<div class="uk-flex uk-flex-middle uk-margin-top">
<icon class="open-access" [name]="'open_access'" [flex]="true" [ratio]="0.8"></icon>
<span class="uk-text-xsmall uk-margin-xsmall-left">Open Access</span>
</div>
</div>
</div>
</div>
<div class="monitor-dashboard uk-padding-small uk-padding-remove-left uk-margin-medium-left">
<a *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus != 'PRIVATE' && funder.monitorDashboardStatus != 'RESTRICTED'"
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
target="_blank" [href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'monitor.openaire.eu/dashboard/'+funder.alias">
<span class="uk-flex uk-flex-middle">
<img src="assets/common-assets/common/Symbol.png" alt="OpenAIRE logo"
class="uk-margin-xsmall-right" style="width: 17px; height: 17px;" loading="lazy">
<span class="monitor-dashboard-link uk-text-uppercase">Monitor Dashboard</span>
</span>
</a>
<span *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus == 'RESTRICTED'"
class="uk-flex uk-flex-middle">
<img src="assets/common-assets/common/Symbol.png" alt="OpenAIRE logo"
class="uk-margin-xsmall-right" style="width: 17px; height: 17px;" loading="lazy">
<span class="monitor-dashboard-link uk-text-uppercase uk-text-bold uk-text-small">Monitor Dashboard</span>
<icon class="uk-margin-xsmall-left" name="closed_access" [flex]="true" [ratio]="1"></icon>
</span>
</div>
</div>
</ng-container>
<!-- funder's card for LIST view -->
<ng-template #elseBlock>
<div class="uk-card uk-card-default uk-card-hover uk-padding-small funder-list">
<div class="uk-grid uk-grid-divider uk-grid-small" uk-grid>
<div class="uk-width-expand uk-flex uk-flex-middle">
<div class="uk-width-1-6 uk-flex uk-flex-middle uk-flex-center">
<img *ngIf="funder.logoUrl; else elseBlock" [src]="funder | logoUrl" [alt]="funder.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply" loading="lazy">
<ng-template #elseBlock>
<img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply" loading="lazy">
</ng-template>
</div>
<div class="uk-width-expand uk-grid uk-grid-divider uk-child-width-1-2 uk-margin-left" uk-grid>
<div class="uk-flex uk-flex-column uk-flex-center">
<div class="uk-flex uk-flex-middle">
<!-- <span class="uk-text-xsmall uk-margin-small-right">flag</span> -->
<div class="uk-h6 uk-margin-remove uk-text-truncate">
<ng-container *ngIf="funder.name">
<span>{{funder.name}}</span>
</ng-container>
<ng-container *ngIf="funder.alias" >
<span class="uk-text-uppercase">
({{funder.alias}})
</span>
</ng-container>
</div>
</div>
<div *ngIf="funder.monitorDashboard" class="uk-margin-top">
<a *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus != 'PRIVATE' && funder.monitorDashboardStatus != 'RESTRICTED'"
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
target="_blank" [href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'monitor.openaire.eu/dashboard/'+funder.alias">
<span class="uk-flex uk-flex-middle">
<img src="assets/common-assets/common/Symbol.png" alt="OpenAIRE logo"
class="uk-margin-xsmall-right" style="width: 17px; height: 17px;" loading="lazy">
<span class="monitor-dashboard-link uk-text-uppercase">Monitor Dashboard</span>
</span>
</a>
<span *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus == 'RESTRICTED'"
class="uk-flex uk-flex-middle">
<img src="assets/common-assets/common/Symbol.png" alt="OpenAIRE logo"
class="uk-margin-xsmall-right" style="width: 17px; height: 17px;" loading="lazy">
<span class="monitor-dashboard-link uk-text-uppercase uk-text-bold uk-text-small">Monitor Dashboard</span>
<icon class="uk-margin-xsmall-left" name="closed_access" [flex]="true" [ratio]="1"></icon>
</span>
</div>
</div>
<div class="uk-flex uk-flex-middle uk-child-width-1-3">
<div>
<div *ngIf="funder.projects" class="uk-flex uk-flex-column">
<span class="uk-text-meta uk-text-xsmall">
Projects
</span>
<a
class="uk-link-text uk-text-large uk-text-bold"
[routerLink]="properties.searchLinkToProjects" [queryParams]="{'funder': urlEncodeAndQuote(funder.id)}">
<span>
{{funder.projects | number}}
</span>
</a>
</div>
</div>
<div>
<div *ngIf="funder.researchProducts" class="uk-flex uk-flex-column">
<span class="uk-text-meta uk-text-xsmall">
Research Products
</span>
<a
class="uk-link-text uk-text-large uk-text-bold"
[routerLink]="properties.searchLinkToResults" [queryParams]="{'relfunder': urlEncodeAndQuote(funder.id)}">
<span>
{{funder.researchProducts | number}}
</span>
</a>
</div>
</div>
<div>
<div *ngIf="funder.openAccessResearchProducts && funder.researchProducts" class="uk-flex uk-flex-column">
<span class="uk-text-meta uk-text-xsmall">Open Access</span>
<div class="uk-flex uk-flex-middle">
<span class="uk-margin-xsmall-right open-access">
<icon name="open_access" [flex]="true" [ratio]="0.8"></icon>
</span>
<span class="uk-text-large uk-text-bold">{{funder.openAccessPercentage}}%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="uk-width-auto uk-flex uk-flex-column uk-flex-center uk-margin-right">
<div class="uk-flex uk-flex-middle uk-text-xsmall uk-text-meta uk-margin-bottom">
<div class="uk-icon-bg uk-icon-bg-small">
<icon name="done" [flex]="true"></icon>
</div>
<span class="uk-margin-xsmall-left">Registered</span>
</div>
<div>
<a href="" class="uk-flex-inline uk-flex-middle uk-text-uppercase uk-button uk-button-text custom-external">
<icon name="payment" [flex]="true"></icon>
</a>
</div>
</div> -->
</div>
</div>
</ng-template>
</div>
</div>
</div>
<paging-no-load *ngIf="displayedFunders.length > pageSize"
(pageChange)="updateCurrentPage($event)"
[currentPage]="currentPage" [size]="pageSize"
[totalResults]="displayedFunders.length">
</paging-no-load>
</div>
</div>
</ng-container>
</div>