tweaks to the object lists

src/app/home/top-level-community-list/top-level-community-list.component.html

@@ -1,7 +1,8 @@
 <div *ngIf="topLevelCommunities.hasSucceeded | async">
   <h2>{{'home.top-level-communities.head' | translate}}</h2>
   <p class="lead">{{'home.top-level-communities.help' | translate}}</p>
-  <ds-object-list [config]="config" [sortConfig]="sortConfig" [objects]="topLevelCommunities"
+  <ds-object-list [config]="config" [sortConfig]="sortConfig"
+                  [objects]="topLevelCommunities" [hideGear]="false"
                   (pageChange)="onPageChange($event)"
                   (pageSizeChange)="onPageSizeChange($event)"
                   (sortDirectionChange)="onSortDirectionChange($event)"

src/app/object-list/object-list-element/object-list-element.component.scss

@@ -1 +1,7 @@
-@import '../../../styles/variables.scss';
+@import '../../../styles/variables.scss';
+@import '../../../../node_modules/bootstrap/scss/variables';
+
+:host {
+  display: block;
+  margin-bottom: $spacer-y;
+}

src/app/object-list/object-list.component.html

@@ -7,10 +7,10 @@
                (pageSizeChange)="onPageSizeChange($event)"
                (sortDirectionChange)="onSortDirectionChange($event)"
                (sortFieldChange)="onSortDirectionChange($event)">
-    <ul *ngIf="objects.hasSucceeded | async">
+    <ul *ngIf="objects.hasSucceeded | async" class="list-unstyled">
         <li *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
             <ds-object-list-element [object]="object"></ds-object-list-element>
         </li>
     </ul>
 
-</ds-pagination>
+</ds-pagination>

src/app/shared/pagination/pagination.component.html

@@ -1,4 +1,4 @@
-<div class="pagination-masked clearfix top {{hideGear ? 'invisible' : ''}}">
+<div *ngIf="!hideGear" class="pagination-masked clearfix top">
   <div class="row">
     <div class="col pagination-info">
       <span class="align-middle hidden-xs-down">{{ 'pagination.showing.label' | translate }}</span>
@@ -20,7 +20,7 @@
 
 <ng-content></ng-content>
 
-<div class="pagination justify-content-center clearfix bottom {{(hidePagerWhenSinglePage && pageSize >= collectionSize) ? 'invisible' : ''}}">
+<div *ngIf="shouldShowBottomPager" class="pagination justify-content-center clearfix bottom">
   <ngb-pagination [boundaryLinks]="paginationOptions.boundaryLinks"
                   [collectionSize]="collectionSize"
                   [disabled]="paginationOptions.disabled"

src/app/shared/pagination/pagination.component.ts

@@ -342,5 +342,13 @@ export class PaginationComponent implements OnDestroy, OnInit {
             throw new Error("Paginate: Argument is missing the following required properties: " + missing.join(', '));
         }
     }
+
+    get hasMultiplePages(): boolean {
+      return this.collectionSize > this.pageSize;
+    }
+
+    get shouldShowBottomPager(): boolean {
+      return this.hasMultiplePages || !this.hidePagerWhenSinglePage
+    }
 }