Add button to display full list in About page

This commit is contained in:
MahdiTurki 2020-04-27 11:18:24 +01:00 committed by Chocobozzz
parent 5721fd8374
commit 49c4dd7ec3
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
3 changed files with 23 additions and 16 deletions

View File

@ -1,4 +1,4 @@
<div class="row" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()"> <div class="row">
<h1 class="sr-only" i18n>Follows</h1> <h1 class="sr-only" i18n>Follows</h1>
<div class="col-xl-6 col-md-12"> <div class="col-xl-6 col-md-12">
<h2 i18n class="subtitle">Followers instances</h2> <h2 i18n class="subtitle">Followers instances</h2>
@ -8,6 +8,8 @@
<a *ngFor="let follower of followers" [href]="buildLink(follower)" target="_blank" rel="noopener noreferrer"> <a *ngFor="let follower of followers" [href]="buildLink(follower)" target="_blank" rel="noopener noreferrer">
{{ follower }} {{ follower }}
</a> </a>
<a id="showMore" href="javascript:;" *ngIf="!showMoreFollowers" (click)="loadAllFollowers()" (click)= "showMoreFollowers=true">Show full list</a>
</div> </div>
<div class="col-xl-6 col-md-12"> <div class="col-xl-6 col-md-12">
@ -18,6 +20,8 @@
<a *ngFor="let following of followings" [href]="buildLink(following)" target="_blank" rel="noopener noreferrer"> <a *ngFor="let following of followings" [href]="buildLink(following)" target="_blank" rel="noopener noreferrer">
{{ following }} {{ following }}
</a> </a>
<a id="showMore" href="javascript:;" *ngIf="!showMoreFollowings" (click)="loadAllFollowings()" (click)= "showMoreFollowings=true">Show full list</a>
</div> </div>
</div> </div>

View File

@ -16,3 +16,7 @@ a {
.no-results { .no-results {
justify-content: flex-start; justify-content: flex-start;
} }
#showMore {
color: black;
}

View File

@ -14,6 +14,9 @@ export class AboutFollowsComponent implements OnInit {
followers: string[] = [] followers: string[] = []
followings: string[] = [] followings: string[] = []
showMoreFollowers = false;
showMoreFollowings = false;
followersPagination: ComponentPagination = { followersPagination: ComponentPagination = {
currentPage: 1, currentPage: 1,
itemsPerPage: 20, itemsPerPage: 20,
@ -45,24 +48,20 @@ export class AboutFollowsComponent implements OnInit {
this.loadMoreFollowings() this.loadMoreFollowings()
} }
onNearOfBottom () { loadAllFollowings () {
this.onNearOfFollowersBottom() while(hasMoreItems(this.followingsPagination)) {
this.followingsPagination.currentPage += 1
this.onNearOfFollowingsBottom() this.loadMoreFollowings()
}
} }
onNearOfFollowersBottom () { loadAllFollowers () {
if (!hasMoreItems(this.followersPagination)) return while(hasMoreItems(this.followersPagination)) {
this.followersPagination.currentPage += 1
this.followersPagination.currentPage += 1 this.loadMoreFollowers();
this.loadMoreFollowers() }
}
onNearOfFollowingsBottom () {
if (!hasMoreItems(this.followingsPagination)) return
this.followingsPagination.currentPage += 1
this.loadMoreFollowings()
} }
buildLink (host: string) { buildLink (host: string) {