From ed8b4014cee544512addfbd75627d2a1cfa0e764 Mon Sep 17 00:00:00 2001
From: mahdi <mahditurki123@yahoo.fr>
Date: Sat, 12 Dec 2020 22:19:01 +0100
Subject: Show count of instances and fix show/hide button

---
 .../app/+about/about-follows/about-follows.component.html  | 14 +++++++-------
 .../app/+about/about-follows/about-follows.component.scss  |  5 +++--
 .../app/+about/about-follows/about-follows.component.ts    |  4 ++--
 3 files changed, 12 insertions(+), 11 deletions(-)

(limited to 'client/src/app/+about/about-follows')

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 = {
-- 
cgit v1.2.3