From 07a8024daa74aea42745853a7331fac406f88da6 Mon Sep 17 00:00:00 2001
From: Alan Orth <alan.orth@gmail.com>
Date: Mon, 19 Jun 2023 20:59:05 +0300
Subject: [PATCH] src/app: adjust item count style

Minor adjustment to community and collection item counts. Instead of
using the Bootstrap `lead` class, which reduces weight but increases
size, we should use the same badge / pill style used in other counts
like on on the browse by pages.
---
 .../community-list.component.html               | 15 +++++++++------
 .../collection-list-element.component.html      | 17 ++++++++++-------
 .../community-list-element.component.html       | 17 ++++++++++-------
 3 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/app/community-list-page/community-list/community-list.component.html b/src/app/community-list-page/community-list/community-list.component.html
index 5043d45c93..d6fd77e79b 100644
--- a/src/app/community-list-page/community-list/community-list.component.html
+++ b/src/app/community-list-page/community-list/community-list.component.html
@@ -33,12 +33,15 @@
         <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
               aria-hidden="true"></span>
       </button>
-      <h5 class="align-middle pt-2">
-        <a [routerLink]="node.route" class="lead">
-          {{ dsoNameService.getName(node.payload) }}
-        </a>
-        <span *ngIf="node.payload.archivedItemsCount >= 0" class="archived-items-lead">[{{node.payload.archivedItemsCount}}]</span>
-      </h5>
+      <div class="d-flex flex-row">
+        <h5 class="align-middle pt-2">
+          <a [routerLink]="node.route" class="lead">
+            {{ dsoNameService.getName(node.payload) }}
+          </a>
+          <span class="pr-2">&nbsp;</span>
+          <span *ngIf="node.payload.archivedItemsCount >= 0" class="badge badge-pill badge-secondary align-top archived-items-lead">{{node.payload.archivedItemsCount}}</span>
+        </h5>
+      </div>
     </div>
     <ds-truncatable [id]="node.id">
       <div class="text-muted" cdkTreeNodePadding>
diff --git a/src/app/shared/object-list/collection-list-element/collection-list-element.component.html b/src/app/shared/object-list/collection-list-element/collection-list-element.component.html
index 707adabde2..c50b382495 100644
--- a/src/app/shared/object-list/collection-list-element/collection-list-element.component.html
+++ b/src/app/shared/object-list/collection-list-element/collection-list-element.component.html
@@ -1,10 +1,13 @@
-<a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="['/collections/' + object.id]" class="lead">
-  {{ dsoNameService.getName(object) }}
-</a>
-<span *ngIf="linkType == linkTypes.None" class="lead">
-  {{ dsoNameService.getName(object) }}
-</span>
-<span *ngIf="object.archivedItemsCount >= 0" class="lead archived-items-lead">[{{object.archivedItemsCount}}]</span>
+<div class="d-flex flex-row">
+  <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="['/collections/' + object.id]" class="lead">
+    {{ dsoNameService.getName(object) }}
+  </a>
+  <span *ngIf="linkType == linkTypes.None" class="lead">
+    {{ dsoNameService.getName(object) }}
+  </span>
+  <span class="pr-2">&nbsp;</span>
+  <span *ngIf="object.archivedItemsCount >= 0" class="badge badge-pill badge-secondary align-self-center archived-items-lead">{{object.archivedItemsCount}}</span>
+</div>
 <div *ngIf="object.shortDescription" class="text-muted abstract-text">
     {{object.shortDescription}}
 </div>
diff --git a/src/app/shared/object-list/community-list-element/community-list-element.component.html b/src/app/shared/object-list/community-list-element/community-list-element.component.html
index ea6782b949..2101261bdc 100644
--- a/src/app/shared/object-list/community-list-element/community-list-element.component.html
+++ b/src/app/shared/object-list/community-list-element/community-list-element.component.html
@@ -1,10 +1,13 @@
-<a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="['/communities/' + object.id]" class="lead">
-  {{ dsoNameService.getName(object) }}
-</a>
-<span *ngIf="linkType == linkTypes.None" class="lead">
-  {{ dsoNameService.getName(object) }}
-</span>
-<span *ngIf="object.archivedItemsCount >= 0" class="lead archived-items-lead">[{{object.archivedItemsCount}}]</span>
+<div class="d-flex flex-row">
+  <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="['/communities/' + object.id]" class="lead">
+    {{ dsoNameService.getName(object) }}
+  </a>
+  <span *ngIf="linkType == linkTypes.None" class="lead">
+    {{ dsoNameService.getName(object) }}
+  </span>
+  <span class="pr-2">&nbsp;</span>
+  <span *ngIf="object.archivedItemsCount >= 0" class="badge badge-pill badge-secondary align-self-center archived-items-lead">{{object.archivedItemsCount}}</span>
+</div>
 <div *ngIf="object.shortDescription" class="text-muted abstract-text">
     {{object.shortDescription}}
 </div>