add slider for stakeholders list - 6 per slide

This commit is contained in:
Alex Martzios 2022-02-17 14:44:23 +02:00
parent 02206c27c7
commit 98bbd3625c
3 changed files with 118 additions and 33 deletions

View File

@ -74,7 +74,7 @@
href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target="_blank"> href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target="_blank">
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column"> <div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
<div class="uk-text-center"> <div class="uk-text-center">
<h3 class="uk-text-primary-gradient uk-margin-remove-bottom">{{(publicationsSize.number|number) + publicationsSize.size}}</h3> <h4 class="uk-text-primary-gradient uk-margin-remove-bottom">{{(publicationsSize.number|number) + publicationsSize.size}}</h4>
<div class="uk-margin-small uk-text-large">Publications</div> <div class="uk-margin-small uk-text-large">Publications</div>
</div> </div>
</div> </div>
@ -200,37 +200,93 @@
</a> </a>
<div class="uk-margin-large-top uk-margin-large-bottom"> <div class="uk-margin-large-top uk-margin-large-bottom">
<!-- Tabs --> <!-- Tabs -->
<div class="uk-width-3-5"> <my-tabs>
<my-tabs> <my-tab [tabTitle]="'All'" [tabId]="'all'" class="uk-active">
<my-tab [tabTitle]="'All'" [tabId]="'all'" class="uk-active"> <ng-container *ngTemplateOutlet="allContainer"></ng-container>
<ng-container *ngTemplateOutlet="all"></ng-container> </my-tab>
</my-tab> <my-tab [tabTitle]="'Funders'" [tabId]="'funders'">
<my-tab [tabTitle]="'Funders'" [tabId]="'funders'"> <ng-container *ngTemplateOutlet="fundersContainer"></ng-container>
<ng-container *ngTemplateOutlet="funders"></ng-container> </my-tab>
</my-tab> <my-tab [tabTitle]="'Research Initiatives'" [tabId]="'researchInitiatives'">
<my-tab [tabTitle]="'Research Initiatives'" [tabId]="'researchInitiatives'"> <ng-container *ngTemplateOutlet="researchInitiativesContainer"></ng-container>
<ng-container *ngTemplateOutlet="researchInitiatives"></ng-container> </my-tab>
</my-tab> <my-tab [tabTitle]="'Research Institutions'" [tabId]="'researchInstitutions'">
<my-tab [tabTitle]="'Research Institutions'" [tabId]="'researchInstitutions'"> <ng-container *ngTemplateOutlet="researchInstitutionsContainer"></ng-container>
<ng-container *ngTemplateOutlet="researchInstitutions"></ng-container> </my-tab>
</my-tab> </my-tabs>
</my-tabs>
</div>
<!-- Tab content --> <!-- Tab content -->
<div> <ng-template #allContainer>
<ng-template #all> <div uk-slider class="uk-margin-large-top">
all <ul class="uk-slider-items" uk-height-match="target: .uk-card; row: false">
</ng-template> <li *ngFor="let slide of sliderize(stakeholders)" class="uk-width-1-1">
<ng-template #funders> <div class="uk-padding">
funders <div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m">
</ng-template> <div *ngFor="let stakeholder of slide">
<ng-template #researchInitiatives> <div class="uk-card uk-card-default uk-card-body uk-card-hover">
researchInitiatives {{stakeholder.name}}
</ng-template> </div>
<ng-template #researchInstitutions> </div>
researchInstitutions </div>
</ng-template> </div>
</div> </li>
</ul>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</ng-template>
<ng-template #fundersContainer>
<div uk-slider class="uk-margin-large-top">
<ul class="uk-slider-items" uk-height-match="target: .uk-card; row: false">
<li *ngFor="let slide of sliderize(funders)" class="uk-width-1-1">
<div class="uk-padding">
<div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m">
<div *ngFor="let stakeholder of slide">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
{{stakeholder.name}}
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</ng-template>
<ng-template #researchInitiativesContainer>
<div uk-slider class="uk-margin-large-top">
<ul class="uk-slider-items" uk-height-match="target: .uk-card; row: false">
<li *ngFor="let slide of sliderize(researchInitiatives)" class="uk-width-1-1">
<div class="uk-padding">
<div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m">
<div *ngFor="let stakeholder of slide">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
{{stakeholder.name}}
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</ng-template>
<ng-template #researchInstitutionsContainer>
<div uk-slider class="uk-margin-large-top">
<ul class="uk-slider-items" uk-height-match="target: .uk-card; row: false">
<li *ngFor="let slide of sliderize(researchInstitutions)" class="uk-width-1-1">
<div class="uk-padding">
<div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m">
<div *ngFor="let stakeholder of slide">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
{{stakeholder.name}}
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</ng-template>
</div> </div>
</div> </div>
<div class="uk-section uk-container uk-container-large uk-margin-large-bottom uk-text-center"> <div class="uk-section uk-container uk-container-large uk-margin-large-bottom uk-text-center">

View File

@ -215,8 +215,37 @@ export class HomeComponent {
)); ));
} }
public sliderize(stakeholders: Stakeholder[]): Stakeholder[][] {
let slider: Stakeholder[][] = [];
let size = 6;
for(let i = 0; i < (stakeholders.length/size); i++) {
slider.push(stakeholders.slice(i*size, ((i+1)*size)));
}
return slider;
}
get funders(): Stakeholder[] { get funders(): Stakeholder[] {
return this.stakeholders.filter(stakeholder => stakeholder.type === "funder"); if(this.stakeholders) {
return this.stakeholders.filter(stakeholder => stakeholder.type === "funder");
} else {
return [];
}
}
get researchInitiatives(): Stakeholder[] {
if(this.stakeholders) {
return this.stakeholders.filter(stakeholder => stakeholder.type === "ri");
} else {
return [];
}
}
get researchInstitutions(): Stakeholder[] {
if(this.stakeholders) {
return this.stakeholders.filter(stakeholder => stakeholder.type === "organization");
} else {
return [];
}
} }
private isManager(stakeholder: Stakeholder) { private isManager(stakeholder: Stakeholder) {

@ -1 +1 @@
Subproject commit cf6ab4a03b4aea7a5c14f6c086e531642f5f1a27 Subproject commit f15b8ef8fcdae5053c1c385a5f3126a2a7b327f7