add slider for stakeholders list - 6 per slide

src/app/home/home.component.html

@@ -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 #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>
-				<ng-template #researchInstitutions>
-					researchInstitutions
-				</ng-template>
 										</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>

src/app/home/home.component.ts

@@ -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) {

src/app/openaireLibrary

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