MaDgIK
/
explore-services
13
0
Fork 0
Code Issues Pull Requests Projects Releases 22 Wiki Activity

[develop | DONE | ADDED] funders page: update cards and lists to prepare for new data to be shown

This commit is contained in:
Alex Martzios 2024-04-08 19:10:44 +03:00
parent 260b263e6f
commit 09b7435243
4 changed files with 153 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
explore/src/app/funders/funders.component.html
View File

@ -121,48 +121,88 @@
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-body">
<!-- funder logo -->
</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>
<!-- 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">
<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" >
{{funder.name}}
<span>{{funder.name}}</span>
</ng-container>
</div>
<div class="info uk-margin-medium-top">
<!-- Monitor dashboard -->
<div class="monitor-dashboard">
<!-- PUBLIC status -->
<!-- <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">
@ -172,7 +212,6 @@
<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"
@ -181,28 +220,6 @@
<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>
</div>
</div>
</div>
</ng-container>
<!-- funder's card for LIST view -->
@ -216,10 +233,13 @@
<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">
<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">
{{funder.name}}
<span>{{funder.name}}</span>
</ng-container>
<ng-container *ngIf="funder.alias" >
<span class="uk-text-uppercase">
@ -227,8 +247,8 @@
</span>
</ng-container>
</div>
<div class="uk-grid uk-grid-divider uk-flex-nowrap" uk-grid>
<div *ngIf="funder.monitorDashboard">
</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"
<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 class="uk-flex uk-flex-middle">
<span>Projects ({{funder.projects | number}})</span>
<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"
<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 class="uk-flex uk-flex-middle">
<span>Research Products ({{funder.researchProducts | number}})</span>
<span>
{{funder.researchProducts | number}}
</span>
</a>
</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">
<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]="1"></icon>
<icon name="open_access" [flex]="true" [ratio]="0.8"></icon>
</span>
<h6 class="uk-margin-remove">{{funder.openAccessPercentage}}%</h6>
</div>
<span class="uk-h6 uk-text-small">Open Access</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"

16
explore/src/app/funders/funders.component.less
View File

@ -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%);
// }
// }

2
explore/src/app/openaireLibrary

@ -1 +1 @@
Subproject commit cafe0e4926f0d9762cd59a71ce1779743db34771
Subproject commit 4f9f2f25057d4d0933f34488960b50286971b587

2
explore/src/assets/openaire-theme

@ -1 +1 @@
Subproject commit 954a1fe8af0653740882c7db4b9bf92b8f9000f4
Subproject commit 9171ec2a63d1fb53f239cfbff26f9b3a1ed9cc61