MaDgIK
/
monitor
13
0
Fork 0
Code Issues Pull Requests Projects Releases 15 Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/app/home/home.component.html
View File

@ -74,7 +74,7 @@
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-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>
</div>
@ -200,39 +200,95 @@
</a>
<div class="uk-margin-large-top uk-margin-large-bottom">
<!-- Tabs -->
<div class="uk-width-3-5">
<my-tabs>
<my-tab [tabTitle]="'All'" [tabId]="'all'" class="uk-active">
<ng-container *ngTemplateOutlet="all"></ng-container>
<ng-container *ngTemplateOutlet="allContainer"></ng-container>
</my-tab>
<my-tab [tabTitle]="'Funders'" [tabId]="'funders'">
<ng-container *ngTemplateOutlet="funders"></ng-container>
<ng-container *ngTemplateOutlet="fundersContainer"></ng-container>
</my-tab>
<my-tab [tabTitle]="'Research Initiatives'" [tabId]="'researchInitiatives'">
<ng-container *ngTemplateOutlet="researchInitiatives"></ng-container>
<ng-container *ngTemplateOutlet="researchInitiativesContainer"></ng-container>
</my-tab>
<my-tab [tabTitle]="'Research Institutions'" [tabId]="'researchInstitutions'">
<ng-container *ngTemplateOutlet="researchInstitutions"></ng-container>
<ng-container *ngTemplateOutlet="researchInstitutionsContainer"></ng-container>
</my-tab>
</my-tabs>
</div>
<!-- Tab content -->
<div>
<ng-template #all>
all
</ng-template>
<ng-template #funders>
funders
</ng-template>
<ng-template #researchInitiatives>
researchInitiatives
</ng-template>
<ng-template #researchInstitutions>
researchInstitutions
</ng-template>
<ng-template #allContainer>
<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(stakeholders)" 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 #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 class="uk-section uk-container uk-container-large uk-margin-large-bottom uk-text-center">
<h2 class="uk-h1">
Need more information? <br> Get in touch and let us help you<span class="uk-text-primary">.</span>

29
src/app/home/home.component.ts
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[] {
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) {

2
src/app/openaireLibrary

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