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

resultLanding: add view more/less button for more than 3 communities

This commit is contained in:
Alex Martzios 2021-11-25 11:57:49 +02:00
parent 130691b60a
commit 2f65202142
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
landingPages/landing-utils/relatedTo.component.ts
View File

@ -16,7 +16,7 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
</div> </div>
<!-- If there are any communities with dashboard --> <!-- If there are any communities with dashboard -->
<ng-container *ngIf="gateways && gateways.length > 0"> <ng-container *ngIf="gateways && gateways.length > 0">
<div class="uk-padding-small uk-margin-small-top uk-flex"> <div class="uk-padding-small uk-flex">
<div class="uk-width-2-3"> <div class="uk-width-2-3">
<div class="uk-text-muted">Communities with gateway</div> <div class="uk-text-muted">Communities with gateway</div>
<ul class="custom-list"> <ul class="custom-list">
@ -39,7 +39,7 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
<div> <div>
<div *ngIf="gateways && gateways.length > 0" class="uk-text-muted">Other Communities</div> <div *ngIf="gateways && gateways.length > 0" class="uk-text-muted">Other Communities</div>
<ul class="custom-list" [ngClass]="{'uk-padding-remove uk-margin-remove': !gateways || gateways.length == 0}"> <ul class="custom-list" [ngClass]="{'uk-padding-remove uk-margin-remove': !gateways || gateways.length == 0}">
<li *ngFor="let community of otherCommunities; let i = index"> <li *ngFor="let community of otherCommunities.slice(0, showNum); let i = index">
{{community.labelContext}} {{community.labelContext}}
<span *ngIf="community.labelCategory && (currentCommunity == community.idContext)"> <span *ngIf="community.labelCategory && (currentCommunity == community.idContext)">
<span uk-icon="icon: arrow-right"></span> {{community.labelCategory}} <span uk-icon="icon: arrow-right"></span> {{community.labelCategory}}
@ -48,6 +48,12 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
: {{community.labelConcept}} : {{community.labelConcept}}
</span> </span>
</li> </li>
<div *ngIf="showNum > threshold" class="uk-text-right">
<a (click)="showNum = threshold;">View less</a>
</div>
<div *ngIf="otherCommunities.length > threshold && showNum == threshold" class="uk-text-right">
<a (click)="showNum = otherCommunities.length;">View more</a>
</div>
</ul> </ul>
</div> </div>
</div> </div>
@ -156,8 +162,8 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
export class RelatedToComponent implements OnInit { export class RelatedToComponent implements OnInit {
@Input() contexts: { "idContext": string, "labelContext": string, "labelCategory": string, "labelConcept": string, "link": string, "logo": string }[]; @Input() contexts: { "idContext": string, "labelContext": string, "labelCategory": string, "labelConcept": string, "link": string, "logo": string }[];
public threshold: number = 5; public threshold: number = 3;
public showNum: number = 5; public showNum: number = 3;
public gateways = []; public gateways = [];
public otherCommunities = []; public otherCommunities = [];
public currentCommunity = ConnectHelper.getCommunityFromDomain(properties.domain); public currentCommunity = ConnectHelper.getCommunityFromDomain(properties.domain);