resultLanding: add view more/less button for more than 3 communities
This commit is contained in:
parent
130691b60a
commit
2f65202142
|
@ -16,7 +16,7 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
|
|||
</div>
|
||||
<!-- If there are any communities with dashboard -->
|
||||
<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-text-muted">Communities with gateway</div>
|
||||
<ul class="custom-list">
|
||||
|
@ -39,7 +39,7 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
|
|||
<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}">
|
||||
<li *ngFor="let community of otherCommunities; let i = index">
|
||||
<li *ngFor="let community of otherCommunities.slice(0, showNum); let i = index">
|
||||
{{community.labelContext}}
|
||||
<span *ngIf="community.labelCategory && (currentCommunity == community.idContext)">
|
||||
<span uk-icon="icon: arrow-right"></span> {{community.labelCategory}}
|
||||
|
@ -48,6 +48,12 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
|
|||
: {{community.labelConcept}}
|
||||
</span>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -156,8 +162,8 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
|
|||
export class RelatedToComponent implements OnInit {
|
||||
@Input() contexts: { "idContext": string, "labelContext": string, "labelCategory": string, "labelConcept": string, "link": string, "logo": string }[];
|
||||
|
||||
public threshold: number = 5;
|
||||
public showNum: number = 5;
|
||||
public threshold: number = 3;
|
||||
public showNum: number = 3;
|
||||
public gateways = [];
|
||||
public otherCommunities = [];
|
||||
public currentCommunity = ConnectHelper.getCommunityFromDomain(properties.domain);
|
||||
|
|
Loading…
Reference in New Issue