[develop | DONE | ADDED] funders page: update cards and lists to prepare for new data to be shown
This commit is contained in:
parent
260b263e6f
commit
09b7435243
|
|
@ -121,88 +121,105 @@
|
|||
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: .info;">
|
||||
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">
|
||||
<!-- OA % -->
|
||||
<!-- <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">
|
||||
<icon name="open_access" [flex]="true" [ratio]="1"></icon>
|
||||
</span>
|
||||
<h6 class="uk-margin-remove">{{funder.openAccessPercentage}}%</h6>
|
||||
<!-- <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-h6 uk-text-small">Open Access</span>
|
||||
<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-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" 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>
|
||||
<!-- funder alias -->
|
||||
<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>
|
||||
<!-- 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 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 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;" loading="lazy">
|
||||
<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;" 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>
|
||||
<!-- Projects -->
|
||||
</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>
|
||||
<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>
|
||||
<!-- 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>
|
||||
<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>
|
||||
<!-- 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 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 -->
|
||||
|
|
@ -216,19 +233,22 @@
|
|||
<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-margin-medium-left">
|
||||
<div class="name uk-h6 uk-text-truncate">
|
||||
<ng-container *ngIf="funder.name">
|
||||
{{funder.name}}
|
||||
</ng-container>
|
||||
<ng-container *ngIf="funder.alias" >
|
||||
<span class="uk-text-uppercase">
|
||||
({{funder.alias}})
|
||||
</span>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="uk-grid uk-grid-divider uk-flex-nowrap" uk-grid>
|
||||
<div *ngIf="funder.monitorDashboard">
|
||||
<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">
|
||||
|
|
@ -246,44 +266,70 @@
|
|||
<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>
|
||||
<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>
|
||||
<div *ngIf="funder.projects" class="uk-flex uk-flex-column">
|
||||
<span class="uk-text-meta uk-text-xsmall">
|
||||
Projects
|
||||
</span>
|
||||
</a>
|
||||
<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>
|
||||
<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>
|
||||
<div *ngIf="funder.researchProducts" class="uk-flex uk-flex-column">
|
||||
<span class="uk-text-meta uk-text-xsmall">
|
||||
Research Products
|
||||
</span>
|
||||
</a>
|
||||
<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-middle uk-flex-center">
|
||||
<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">
|
||||
<icon name="open_access" [flex]="true" [ratio]="1"></icon>
|
||||
</span>
|
||||
<h6 class="uk-margin-remove">{{funder.openAccessPercentage}}%</h6>
|
||||
<!-- <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-h6 uk-text-small">Open Access</span>
|
||||
<span class="uk-margin-xsmall-left">Registered</span>
|
||||
</div>
|
||||
</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"
|
||||
|
|
|
|||
|
|
@ -38,11 +38,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.uk-card {
|
||||
&.funder-grid {
|
||||
border-bottom: 4px solid fade(@funder-color, 30%);
|
||||
}
|
||||
&.funder-list {
|
||||
border-left: 4px solid fade(@funder-color, 30%);
|
||||
}
|
||||
}
|
||||
// .uk-card {
|
||||
// &.funder-grid {
|
||||
// border-bottom: 4px solid fade(@funder-color, 30%);
|
||||
// }
|
||||
// &.funder-list {
|
||||
// border-left: 4px solid fade(@funder-color, 30%);
|
||||
// }
|
||||
// }
|
||||
|
|
@ -1 +1 @@
|
|||
Subproject commit cafe0e4926f0d9762cd59a71ce1779743db34771
|
||||
Subproject commit 4f9f2f25057d4d0933f34488960b50286971b587
|
||||
|
|
@ -1 +1 @@
|
|||
Subproject commit 954a1fe8af0653740882c7db4b9bf92b8f9000f4
|
||||
Subproject commit 9171ec2a63d1fb53f239cfbff26f9b3a1ed9cc61
|
||||
Loading…
Reference in New Issue