[Explore | develop]: funders.component.html: [Bug fix] Updated height-match cases and added uk-grid-match to fix and align heights of cards and their contents | funders.component.ts: Added check to not show when there is just one project for a funder (it is the custom unidentified project added for the data).
This commit is contained in:
parent
185344d878
commit
20ac495013
|
|
@ -74,7 +74,7 @@
|
|||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!showLoading && funders?.length">
|
||||
<div class="uk-container uk-container-large" uk-height-match="target: .percentage;">
|
||||
<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">
|
||||
|
|
@ -120,14 +120,15 @@
|
|||
<div *ngIf="!displayedFunders || displayedFunders?.length == 0" class="uk-text-center uk-margin-large-top">
|
||||
No funders available
|
||||
</div>
|
||||
<div class="uk-grid uk-padding-small" [ngClass]="gridView ? 'uk-child-width-1-2@m uk-child-width-1-3@l' : 'uk-child-width-1-1'"
|
||||
<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: .info;">
|
||||
<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 uk-card-body funder-grid">
|
||||
<div class="uk-card uk-card-default uk-card-hover funder-grid">
|
||||
<!-- OA % -->
|
||||
<div class="percentage uk-flex uk-flex-right uk-margin-bottom">
|
||||
<!-- <div class="percentage uk-flex uk-flex-right uk-margin-bottom">-->
|
||||
<div class="uk-position-top-right uk-padding-small">
|
||||
<div *ngIf="funder.openAccessResearchProducts && funder.researchProducts" class="uk-text-center">
|
||||
<div class="uk-flex uk-flex-middle uk-flex-center">
|
||||
<span class="uk-margin-xsmall-right open-access">
|
||||
|
|
@ -138,66 +139,68 @@
|
|||
<span class="uk-h6 uk-text-small">Open Access</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- funder logo -->
|
||||
<div class="uk-card-media-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">
|
||||
<ng-template #elseBlock>
|
||||
<img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply">
|
||||
</ng-template>
|
||||
</div>
|
||||
<!-- funder alias -->
|
||||
<div class="alias uk-text-uppercase uk-text-small uk-margin-top type">
|
||||
<ng-container *ngIf="funder.alias">
|
||||
{{funder.alias}}
|
||||
</ng-container>
|
||||
</div>
|
||||
<!-- funder name -->
|
||||
<div class="name uk-h6 uk-margin-remove multi-line-ellipsis lines-2">
|
||||
<ng-container *ngIf="funder.name" >
|
||||
{{funder.name}}
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="info uk-margin-medium-top">
|
||||
<!-- Monitor dashboard -->
|
||||
<div>
|
||||
<!-- PUBLIC status -->
|
||||
<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">
|
||||
<div class="uk-card-body">
|
||||
<!-- funder logo -->
|
||||
<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">
|
||||
<ng-template #elseBlock>
|
||||
<img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply">
|
||||
</ng-template>
|
||||
</div>
|
||||
<!-- funder alias -->
|
||||
<div class="alias uk-text-uppercase uk-text-small uk-margin-top type">
|
||||
<ng-container *ngIf="funder.alias">
|
||||
{{funder.alias}}
|
||||
</ng-container>
|
||||
</div>
|
||||
<!-- funder name -->
|
||||
<div class="name uk-h6 uk-margin-remove multi-line-ellipsis lines-2">
|
||||
<ng-container *ngIf="funder.name" >
|
||||
{{funder.name}}
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="info uk-margin-medium-top">
|
||||
<!-- Monitor dashboard -->
|
||||
<div class="monitor-dashboard">
|
||||
<!-- PUBLIC status -->
|
||||
<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;">
|
||||
<span class="monitor-dashboard-link uk-text-uppercase">Monitor Dashboard</span>
|
||||
</span>
|
||||
</a>
|
||||
<!-- RESTRICTED status -->
|
||||
<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;">
|
||||
<span class="monitor-dashboard-link uk-text-uppercase">Monitor Dashboard</span>
|
||||
<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>
|
||||
</a>
|
||||
<!-- RESTRICTED status -->
|
||||
<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;">
|
||||
<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>
|
||||
<!-- Projects -->
|
||||
<div>
|
||||
<a *ngIf="funder.projects"
|
||||
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
|
||||
[routerLink]="properties.searchLinkToProjects" [queryParams]="{'funder': urlEncodeAndQuote(funder.id)}">
|
||||
<span class="uk-flex uk-flex-middle">
|
||||
<span>Projects ({{funder.projects | number}})</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Research products -->
|
||||
<div>
|
||||
<a *ngIf="funder.researchProducts"
|
||||
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
|
||||
[routerLink]="properties.searchLinkToResults" [queryParams]="{'relfunder': urlEncodeAndQuote(funder.id)}">
|
||||
<span class="uk-flex uk-flex-middle">
|
||||
<span>Research Products ({{funder.researchProducts | number}})</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Projects -->
|
||||
<div>
|
||||
<a *ngIf="funder.projects"
|
||||
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
|
||||
[routerLink]="properties.searchLinkToProjects" [queryParams]="{'funder': urlEncodeAndQuote(funder.id)}">
|
||||
<span class="uk-flex uk-flex-middle">
|
||||
<span>Projects ({{funder.projects | number}})</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Research products -->
|
||||
<div>
|
||||
<a *ngIf="funder.researchProducts"
|
||||
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
|
||||
[routerLink]="properties.searchLinkToResults" [queryParams]="{'relfunder': urlEncodeAndQuote(funder.id)}">
|
||||
<span class="uk-flex uk-flex-middle">
|
||||
<span>Research Products ({{funder.researchProducts | number}})</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -164,21 +164,23 @@ export class FundersComponent implements OnInit {
|
|||
// 3rd call
|
||||
let queriedFunders3 = data[2][1][0].values;
|
||||
queriedFunders3.forEach(queriedFunder => {
|
||||
if(this.fundersMap.has(queriedFunder.id)) {
|
||||
this.fundersMap.get(queriedFunder.id).projects = +queriedFunder.number;
|
||||
} else {
|
||||
this.fundersMap.set(queriedFunder.id, {
|
||||
"id": queriedFunder.id,
|
||||
"name": queriedFunder.name,
|
||||
"alias": '',
|
||||
"researchProducts": 0,
|
||||
"openAccessResearchProducts": 0,
|
||||
"openAccessPercentage": 0,
|
||||
"projects": +queriedFunder.number,
|
||||
"monitorDashboard": '',
|
||||
"monitorDashboardStatus": '',
|
||||
"logoUrl": ''
|
||||
});
|
||||
if(+queriedFunder.number > 1) {
|
||||
if (this.fundersMap.has(queriedFunder.id)) {
|
||||
this.fundersMap.get(queriedFunder.id).projects = +queriedFunder.number;
|
||||
} else {
|
||||
this.fundersMap.set(queriedFunder.id, {
|
||||
"id": queriedFunder.id,
|
||||
"name": queriedFunder.name,
|
||||
"alias": '',
|
||||
"researchProducts": 0,
|
||||
"openAccessResearchProducts": 0,
|
||||
"openAccessPercentage": 0,
|
||||
"projects": +queriedFunder.number,
|
||||
"monitorDashboard": '',
|
||||
"monitorDashboardStatus": '',
|
||||
"logoUrl": ''
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue