[Trunk | Library]: availableOn.component.ts & fundedBy.component.ts & publishedIn.component.ts (not used): Small fixed in bottom margin and remove 3 dots when more than [threshold] results.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@57241 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2019-10-02 14:22:30 +00:00
parent 8ae241c208
commit e6589f60d2
3 changed files with 18 additions and 13 deletions

View File

@ -4,8 +4,8 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
@Component({
selector: 'availableOn',
template: `
<dl class="uk-description-list-line">
<dt class="sideInfoTitle ">Download from</dt>
<dl [class]="'uk-description-list-line' + ((availableOn && availableOn.length > threshold) ? ' uk-margin-remove-bottom' : '')">
<dt class="sideInfoTitle ">Download from</dt>
<dd class="line" *ngFor="let available of availableOn.slice(0, showNum) let i=index" >
<div>
<!--div class="{{available['bestAccessMode']}}"-->
@ -42,13 +42,13 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
</dd>
</dl>
<div *ngIf="showNum > threshold" class="uk-text-right">
<div *ngIf="showNum > threshold" class="uk-text-right uk-margin-bottom">
<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">
<!-- <div *ngIf="showNum == threshold && availableOn && availableOn.length > 5">...</div>-->
<div *ngIf="showNum == threshold && availableOn && availableOn.length > 5" class="uk-text-right uk-margin-bottom">
<a (click)="showNum = availableOn.length;">
View more
</a>

View File

@ -4,7 +4,7 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
@Component({
selector: 'fundedBy',
template: `
<dl class="uk-description-list-line">
<dl [class]="'uk-description-list-line' + ((fundedByProjects && fundedByProjects.length > threshold) ? ' uk-margin-remove-bottom' : '')">
<dt class="sideInfoTitle ">Funded by</dt>
<dd class="line"
*ngFor="let item of fundedByProjects.slice(0, showNum) let i=index">
@ -49,13 +49,13 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
</div>
</dd>
</dl>
<div *ngIf="showNum > threshold" class="uk-text-right">
<div *ngIf="showNum > threshold" class="uk-text-right uk-margin-bottom">
<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">
<!-- <div *ngIf="showNum == threshold && fundedByProjects && fundedByProjects.length > 5">...</div>-->
<div *ngIf="showNum == threshold && fundedByProjects && fundedByProjects.length > threshold" class="uk-text-right uk-margin-bottom">
<a (click)="showNum = fundedByProjects.length;">
View more
</a>

View File

@ -1,10 +1,11 @@
import {Component, Input} from '@angular/core';
import {HelperFunctions} from "../../utils/HelperFunctions.class";
// NOT USED
@Component({
selector: 'publishedIn',
template: `
<dl class="uk-description-list-line">
<dl [class]="'uk-description-list-line' + ((publishedIn && publishedIn.size > threshold) ? ' uk-margin-remove-bottom' : '')">
<dt class="title">Published in</dt>
<dd class="line" *ngFor="let key of getKeys(publishedIn) let i=index">
<div *ngIf="i<5 || showAll" class="{{publishedIn.get(key)['bestAccessMode']}}">
@ -34,13 +35,13 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
</span>
</div>
</dd>
<dd *ngIf="showAll" class="uk-text-right">
<dd *ngIf="showAll" class="uk-text-right uk-margin-bottom">
<a class="uk-text-muted" (click)="showAll = !showAll; scroll()">
View less
</a>
</dd>
<dd *ngIf="!showAll && publishedIn.size > 5">...</dd>
<dd *ngIf="!showAll && publishedIn.size > 5" class="uk-text-right">
<!-- <dd *ngIf="!showAll && publishedIn.size > 5">...</dd>-->
<dd *ngIf="!showAll && publishedIn.size > 5" class="uk-text-right uk-margin-bottom">
<a class="uk-text-muted" (click)="showAll = !showAll;">
View more
</a>
@ -49,7 +50,11 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
`
})
// NOT USED
export class PublishedInComponent {
public threshold: number = 5;
public showNum: number = 5;
//key is name
@Input() publishedIn: Map<string, {"url": string[], "accessMode": string[], "bestAccessMode": string}>;