add slider for stakeholders list - 6 per slide
This commit is contained in:
parent
02206c27c7
commit
98bbd3625c
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
Loading…
Reference in New Issue