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

View File

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

View File

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