MaDgIK
/
explore-services
13
0
Fork 0
Code Issues Pull Requests Projects Releases 19 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 No funders available
</div> </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'" <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)"> <div *ngFor="let funder of displayedFunders.slice((currentPage-1)*pageSize, currentPage*pageSize)">
<!-- funder's card for GRID view --> <!-- funder's card for GRID view -->
<ng-container *ngIf="gridView || isMobile; else elseBlock"> <ng-container *ngIf="gridView || isMobile; else elseBlock">
<div class="uk-card uk-card-default uk-card-hover funder-grid"> <div class="uk-card uk-card-default uk-card-hover funder-grid">
<!-- OA % --> <!-- <div class="uk-position-top-left uk-padding-small">
<!-- <div class="percentage uk-flex uk-flex-right uk-margin-bottom">--> <span class="uk-text-xsmall">flag</span>
<div class="uk-position-top-right uk-padding-small"> </div> -->
<div *ngIf="funder.openAccessResearchProducts && funder.researchProducts" class="uk-text-center"> <!-- <div class="uk-position-top-right uk-padding-small">
<div class="uk-flex uk-flex-middle uk-flex-center"> <div class="uk-flex uk-flex-middle uk-text-xsmall uk-text-meta">
<span class="uk-margin-xsmall-right open-access"> <div class="uk-icon-bg uk-icon-bg-small">
<icon name="open_access" [flex]="true" [ratio]="1"></icon> <icon name="done" [flex]="true"></icon>
</span>
<h6 class="uk-margin-remove">{{funder.openAccessPercentage}}%</h6>
</div> </div>
<span class="uk-h6 uk-text-small">Open Access</span> <span class="uk-margin-xsmall-left">Registered</span>
</div> </div>
</div> </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"> <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"> <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> <ng-template #elseBlock>
<img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply" loading="lazy"> <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply" loading="lazy">
</ng-template> </ng-template>
</div> </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"> <div class="alias uk-text-uppercase uk-text-small uk-margin-top type">
<ng-container *ngIf="funder.alias"> <ng-container *ngIf="funder.alias">
{{funder.alias}} {{funder.alias}}
</ng-container> </ng-container>
</div> </div>
<!-- funder name --> <div class="uk-flex">
<div class="name uk-h6 uk-margin-remove multi-line-ellipsis lines-2"> <div class="uk-width-expand name uk-h6 uk-margin-remove multi-line-ellipsis lines-2">
<ng-container *ngIf="funder.name" > <ng-container *ngIf="funder.name" >
{{funder.name}} <span>{{funder.name}}</span>
</ng-container> </ng-container>
</div> </div>
<div class="info uk-margin-medium-top"> <!-- <div class="uk-width-auto uk-margin-left">
<!-- Monitor dashboard --> <a href="" class="uk-flex-inline uk-flex-middle uk-text-uppercase uk-button uk-button-text custom-external">
<div class="monitor-dashboard"> <icon name="payment" [flex]="true"></icon>
<!-- PUBLIC status --> </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'" <a *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus != 'PRIVATE' && funder.monitorDashboardStatus != 'RESTRICTED'"
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text" 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"> 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 class="monitor-dashboard-link uk-text-uppercase">Monitor Dashboard</span>
</span> </span>
</a> </a>
<!-- RESTRICTED status -->
<span *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus == 'RESTRICTED'" <span *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus == 'RESTRICTED'"
class="uk-flex uk-flex-middle"> class="uk-flex uk-flex-middle">
<img src="assets/common-assets/common/Symbol.png" alt="OpenAIRE logo" <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> <icon class="uk-margin-xsmall-left" name="closed_access" [flex]="true" [ratio]="1"></icon>
</span> </span>
</div> </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> </div>
</ng-container> </ng-container>
<!-- funder's card for LIST view --> <!-- 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"> <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply" loading="lazy">
</ng-template> </ng-template>
</div> </div>
<div class="uk-width-expand uk-margin-medium-left"> <div class="uk-width-expand uk-grid uk-grid-divider uk-child-width-1-2 uk-margin-left" uk-grid>
<div class="name uk-h6 uk-text-truncate"> <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"> <ng-container *ngIf="funder.name">
{{funder.name}} <span>{{funder.name}}</span>
</ng-container> </ng-container>
<ng-container *ngIf="funder.alias" > <ng-container *ngIf="funder.alias" >
<span class="uk-text-uppercase"> <span class="uk-text-uppercase">
@ -227,8 +247,8 @@
</span> </span>
</ng-container> </ng-container>
</div> </div>
<div class="uk-grid uk-grid-divider uk-flex-nowrap" uk-grid> </div>
<div *ngIf="funder.monitorDashboard"> <div *ngIf="funder.monitorDashboard" class="uk-margin-top">
<a *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus != 'PRIVATE' && funder.monitorDashboardStatus != 'RESTRICTED'" <a *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus != 'PRIVATE' && funder.monitorDashboardStatus != 'RESTRICTED'"
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text" 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"> 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> <icon class="uk-margin-xsmall-left" name="closed_access" [flex]="true" [ratio]="1"></icon>
</span> </span>
</div> </div>
</div>
<div class="uk-flex uk-flex-middle uk-child-width-1-3">
<div> <div>
<a *ngIf="funder.projects" <div *ngIf="funder.projects" class="uk-flex uk-flex-column">
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text" <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)}"> [routerLink]="properties.searchLinkToProjects" [queryParams]="{'funder': urlEncodeAndQuote(funder.id)}">
<span class="uk-flex uk-flex-middle"> <span>
<span>Projects ({{funder.projects | number}})</span> {{funder.projects | number}}
</span> </span>
</a> </a>
</div> </div>
</div>
<div> <div>
<a *ngIf="funder.researchProducts" <div *ngIf="funder.researchProducts" class="uk-flex uk-flex-column">
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text" <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)}"> [routerLink]="properties.searchLinkToResults" [queryParams]="{'relfunder': urlEncodeAndQuote(funder.id)}">
<span class="uk-flex uk-flex-middle"> <span>
<span>Research Products ({{funder.researchProducts | number}})</span> {{funder.researchProducts | number}}
</span> </span>
</a> </a>
</div> </div>
</div> </div>
</div> <div>
</div> <div *ngIf="funder.openAccessResearchProducts && funder.researchProducts" class="uk-flex uk-flex-column">
<div class="uk-width-auto uk-flex uk-flex-middle uk-flex-center"> <span class="uk-text-meta uk-text-xsmall">Open Access</span>
<div *ngIf="funder.openAccessResearchProducts && funder.researchProducts" class="uk-text-center"> <div class="uk-flex uk-flex-middle">
<div class="uk-flex uk-flex-middle uk-flex-center">
<span class="uk-margin-xsmall-right open-access"> <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> </span>
<h6 class="uk-margin-remove">{{funder.openAccessPercentage}}%</h6> <span class="uk-text-large uk-text-bold">{{funder.openAccessPercentage}}%</span>
</div>
<span class="uk-h6 uk-text-small">Open Access</span>
</div> </div>
</div> </div>
</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> </ng-template>
</div> </div>
</div> </div>
</div> </div>
<paging-no-load *ngIf="displayedFunders.length > pageSize" <paging-no-load *ngIf="displayedFunders.length > pageSize"
(pageChange)="updateCurrentPage($event)" (pageChange)="updateCurrentPage($event)"
[currentPage]="currentPage" [size]="pageSize" [currentPage]="currentPage" [size]="pageSize"

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

@ -38,11 +38,11 @@
} }
} }
.uk-card { // .uk-card {
&.funder-grid { // &.funder-grid {
border-bottom: 4px solid fade(@funder-color, 30%); // border-bottom: 4px solid fade(@funder-color, 30%);
} // }
&.funder-list { // &.funder-list {
border-left: 4px solid fade(@funder-color, 30%); // 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