MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

1. availableOn & fundedBy: Change the way 'View more/less' is displayed (previous changes in css caused problem, so we slice results according to a threshold). 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@52060 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2018-05-16 15:42:42 +00:00
parent 39a4780b40
commit 6507d1de07
2 changed files with 33 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
landingPages/landing-utils/availableOn.component.ts
View File

@ -5,8 +5,8 @@ import {Component, Input, ElementRef} from '@angular/core';
template: `
<dl class="uk-description-list-line">
<dt class="title">Available On</dt>
<dd class="line" *ngFor="let available of availableOn let i=index" >
<div *ngIf="i<5 || showAll">
<dd class="line" *ngFor="let available of availableOn.slice(0, showNum) let i=index" >
<div>
<div class="{{available['bestAccessMode']}}">
<span *ngIf="available.downloadUrl.length > 1"
class="custom-external custom-icon">
@ -36,18 +36,19 @@ import {Component, Input, ElementRef} from '@angular/core';
</div>
</div>
</dd>
<dd *ngIf="showAll" class="uk-text-right">
<a (click)="showAll = !showAll; scroll()">
View less
</a>
</dd>
<dd *ngIf="!showAll && availableOn.length > 5">...</dd>
<dd *ngIf="!showAll && availableOn.length > 5" class="uk-text-right">
<a (click)="showAll = !showAll;">
View more
</a>
</dd>
</dl>
<div *ngIf="showNum > threshold" class="uk-text-right">
<a (click)="showNum = threshold; scroll()">
View less
</a>
</div>
<div *ngIf="showNum == threshold && availableOn && availableOn.length > 5">...</div>
<div *ngIf="showNum == threshold && availableOn && availableOn.length > 5" class="uk-text-right">
<a (click)="showNum = availableOn.length;">
View more
</a>
</div>
`
})
@ -57,7 +58,8 @@ export class AvailableOnComponent {
"accessMode": string[], "bestAccessMode": string,
"type": string, "year":string }[];
public showAll: boolean = false;
public threshold: number = 5;
public showNum: number = 5;
constructor (private element: ElementRef) {}

32
landingPages/landing-utils/fundedBy.component.ts
View File

@ -1,13 +1,13 @@
import {Component, Input, ElementRef} from '@angular/core';
@Component({
selector: 'fundedBy',
template: `
<dl class="uk-description-list-line">
<dt class="title">Funded By</dt>
<dd class="line"
*ngFor="let item of fundedByProjects let i=index">
<div *ngIf="i<5 || showAll">
*ngFor="let item of fundedByProjects.slice(0, showNum) let i=index">
<div><!-- *ngIf="i<5 || showAll"-->
<span uk-tooltip="pos:right; delay:10"
title="{{buildFundingTooltip(item)}}">
@ -47,18 +47,18 @@ import {Component, Input, ElementRef} from '@angular/core';
</span>
</div>
</dd>
<dd *ngIf="showAll" class="uk-text-right">
<a (click)="showAll = !showAll; scroll()">
View less
</a>
</dd>
<dd *ngIf="!showAll && fundedByProjects && fundedByProjects.length > 5">...</dd>
<dd *ngIf="!showAll && fundedByProjects && fundedByProjects.length > 5" class="uk-text-right">
<a (click)="showAll = !showAll;">
View more
</a>
</dd>
</dl>
<div *ngIf="showNum > threshold" class="uk-text-right">
<a (click)="showNum = threshold; scroll()">
View less
</a>
</div>
<div *ngIf="showNum == threshold && fundedByProjects && fundedByProjects.length > 5">...</div>
<div *ngIf="showNum == threshold && fundedByProjects && fundedByProjects.length > 5" class="uk-text-right">
<a (click)="showNum = fundedByProjects.length;">
View more
</a>
</div>
`
})
@ -67,7 +67,9 @@ export class FundedByComponent {
"funderShortname": string, "funderName": string,
"funding": string, "code": string, "provenanceAction": string,
"inline": boolean }[];
public showAll: boolean = false;
public threshold: number = 5;
public showNum: number = 5;
constructor (private element: ElementRef) {}