Show count of instances and fix show/hide button

3 files changed, 12 insertions, 11 deletions

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 = {