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

Fix a bug with stakeholders slider in home page

This commit is contained in:
Konstantinos Triantafyllou 2022-02-21 17:31:15 +02:00
parent f46f7d5278
commit cbddeddb93
3 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -197,17 +197,16 @@
<!-- Tabs -->
<my-tabs *ngIf="!loading">
<my-tab [tabTitle]="'All'" [tabId]="'all'" class="uk-active">
<ng-container *ngTemplateOutlet="sliderTemplate; context: {slides: slider(stakeholders)}"></ng-container>
<ng-container *ngTemplateOutlet="sliderTemplate; context: {slides: stakeholdersSlider.stakeholders}"></ng-container>
</my-tab>
<my-tab [tabTitle]="'Funders'" [tabId]="'funders'">
<ng-container *ngTemplateOutlet="sliderTemplate; context: {slides: slider(funders)}"></ng-container>
<ng-container *ngTemplateOutlet="sliderTemplate; context: {slides: stakeholdersSlider.funders}"></ng-container>
</my-tab>
<my-tab [tabTitle]="'Research Initiatives'" [tabId]="'researchInitiatives'">
<ng-container
*ngTemplateOutlet="sliderTemplate; context: {slides: slider(researchInitiatives)}"></ng-container>
<my-tab [tabTitle]="'Research Initiatives'" [tabId]="'ris'">
<ng-container *ngTemplateOutlet="sliderTemplate; context: {slides:stakeholdersSlider.ris}"></ng-container>
</my-tab>
<my-tab [tabTitle]="'Research Institutions'" [tabId]="'researchInstitutions'">
<ng-container *ngTemplateOutlet="sliderTemplate; context: {slides: slider(organizations)}"></ng-container>
<my-tab [tabTitle]="'Research Institutions'" [tabId]="'organizations'">
<ng-container *ngTemplateOutlet="sliderTemplate; context: {slides: stakeholdersSlider.organizations}"></ng-container>
</my-tab>
</my-tabs>
<!-- Slider Template for Tab Content -->

18
src/app/home/home.component.ts
View File

@ -28,6 +28,12 @@ export class HomeComponent {
public pageTitle = "OpenAIRE | Monitor";
public description = "OpenAIRE - Monitor, A new era of monitoring research. Open data. Open methodologies. Work together with us to view, understand and visualize research statistics and indicators.";
public stakeholders: StakeholderInfo[] = [];
public stakeholdersSlider: {
stakeholders: StakeholderInfo[][];
funders: StakeholderInfo[][];
ris: StakeholderInfo[][];
organizations: StakeholderInfo[][];
};
public selected: Stakeholder = null;
public pageContents = null;
public divContents = null;
@ -180,6 +186,12 @@ export class HomeComponent {
this.stakeholders = StakeholderInfo.toStakeholderInfo(stakeholders, this.user);
this.sort(this.stakeholders);
this.stakeholders = this.publicStakeholders.concat(this.privateStakeholders);
this.stakeholdersSlider = {
stakeholders: this.slider(this.stakeholders),
funders: this.slider(this.funders),
ris: this.slider(this.ris),
organizations: this.slider(this.organizations)
};
}
this.loading = false;
},
@ -202,8 +214,8 @@ export class HomeComponent {
})
}
public slider(stakeholders: StakeholderInfo[], size: number = 6): Stakeholder[][] {
let slider: Stakeholder[][] = [];
public slider(stakeholders: StakeholderInfo[], size: number = 6): StakeholderInfo[][] {
let slider: StakeholderInfo[][] = [];
for(let i = 0; i < (stakeholders.length/size); i++) {
slider.push(stakeholders.slice(i*size, ((i+1)*size)));
}
@ -226,7 +238,7 @@ export class HomeComponent {
}
}
get researchInitiatives(): StakeholderInfo[] {
get ris(): StakeholderInfo[] {
if(this.stakeholders) {
return this.stakeholders.filter(stakeholder => stakeholder.type === "ri");
} else {

4
src/assets/monitor-custom.css
View File

@ -50,7 +50,7 @@
/*}*/
main {
min-height: calc(100vh - 100px);
min-height: calc(100vh - 90px);
}
.monitorApp .searchForm {
@ -94,4 +94,4 @@ main {
.floating-number {
font-size: 200px;
transform: translateY(-50%);
}
}