diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html index 438e836e0..60cf3a28e 100644 --- a/client/src/app/+about/about-follows/about-follows.component.html +++ b/client/src/app/+about/about-follows/about-follows.component.html @@ -1,7 +1,7 @@ <div class="row"> <h1 class="sr-only" i18n>Follows</h1> <div class="col-xl-6 col-md-12"> - <h2 i18n class="subtitle">Followers instances</h2> + <h2 i18n class="subtitle">Followers instances ({{ followersPagination.totalItems }})</h2> <div i18n class="no-results" *ngIf="followersPagination.totalItems === 0">This instance does not have instances followers.</div> @@ -13,13 +13,13 @@ {{ follower }} </a> </ng-container> - - <a i18n class="showMore" *ngIf="!showMoreFollowers" (click)="loadAllFollowers()" (click)="showMoreFollowers=true">Show full list</a> - <a i18n class="showMore" *ngIf="showMoreFollowers" (click)= "showMoreFollowers=false">Show less</a> + + <button i18n class="showMore" *ngIf="!showMoreFollowers && followersPagination.totalItems > 0" (click)="loadAllFollowers()" (click)="showMoreFollowers=true">Show full list</button> + <button i18n class="showMore" *ngIf="showMoreFollowers" (click)= "showMoreFollowers=false">Show less</button> </div> <div class="col-xl-6 col-md-12"> - <h2 i18n class="subtitle">Followings instances</h2> + <h2 i18n class="subtitle">Followings instances ({{ followingsPagination.totalItems }})</h2> <div i18n class="no-results" *ngIf="followingsPagination.totalItems === 0">This instance is not following any other.</div> @@ -32,8 +32,8 @@ </a> </ng-container> - <a i18n class="showMore" *ngIf="!showMoreFollowings" (click)="loadAllFollowings()" (click)="showMoreFollowings=true">Show full list</a> - <a i18n class="showMore" *ngIf="showMoreFollowings" (click)="showMoreFollowings=false">Show less</a> + <button i18n class="showMore" *ngIf="!showMoreFollowings && followingsPagination.totalItems > 0" (click)="loadAllFollowings()" (click)="showMoreFollowings=true">Show full list</button> + <button i18n class="showMore" *ngIf="showMoreFollowings" (click)="showMoreFollowings=false">Show less</button> </div> </div> diff --git a/client/src/app/+about/about-follows/about-follows.component.scss b/client/src/app/+about/about-follows/about-follows.component.scss index f01484702..a393c9d92 100644 --- a/client/src/app/+about/about-follows/about-follows.component.scss +++ b/client/src/app/+about/about-follows/about-follows.component.scss @@ -19,6 +19,7 @@ a { .showMore { @include peertube-button-link; - padding: 0; - text-align: left; + @include grey-button; + + margin-top: 1%; } diff --git a/client/src/app/+about/about-follows/about-follows.component.ts b/client/src/app/+about/about-follows/about-follows.component.ts index bdee5cf78..b808c1ac9 100644 --- a/client/src/app/+about/about-follows/about-follows.component.ts +++ b/client/src/app/+about/about-follows/about-follows.component.ts @@ -22,13 +22,13 @@ export class AboutFollowsComponent implements OnInit { followersPagination: ComponentPagination = { currentPage: 1, itemsPerPage: 20, - totalItems: null + totalItems: 0 } followingsPagination: ComponentPagination = { currentPage: 1, itemsPerPage: 20, - totalItems: null + totalItems: 0 } sort: SortMeta = {