Filtering Bugs (#447)

# Fixed
- Fixed: Fixed an issue with filtering, after applying a filter, the cards on screen did not update with the correct information
- Fixed: Pagination is now slighlty smaller (only 8 pages) as on mobile, it was cutting off screen.

# Changed
- Changed: During library scan and series updates, Series names for Epubs will now trim excess white space
===============================================

* Fixed issue where some formats could get returned with another format filter.

* Filtering was not properly flushing DOM on filter change, updated trackbyidentity to account for filter

* One more fix for the filtering bug

* Made pagination UI slightly smaller to better fit on mobile phones. Trim() series names for Epub files and Trim() on series update for appropriate fields.

* Removed a no longer needed animation.

UI/Web/src/app/shared/card-detail-layout/card-detail-layout.component.html

@@ -1,10 +1,12 @@
 <div class="container-fluid" style="padding-top: 10px">
-    <div class="row no-gutters">
+    <div class="row no-gutters pb-2">
         <div class="col mr-auto">
             <h2 style="display: inline-block">
                 <span *ngIf="actions.length > 0" class="">
                     <app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="header"></app-card-actionables>
-                </span>&nbsp;{{header}}&nbsp;<span class="badge badge-primary badge-pill" attr.aria-label="{{pagination.totalItems}} total items" *ngIf="pagination != undefined">{{pagination.totalItems}}</span>
+                </span>&nbsp;{{header}}&nbsp;
+                <!-- NOTE: On mobile the pill can eat up a lot of space, we can hide it and move to the filter section if user is interested -->
+                <span class="badge badge-primary badge-pill" attr.aria-label="{{pagination.totalItems}} total items" *ngIf="pagination != undefined">{{pagination.totalItems}}</span>
             </h2>
         </div>
         
@@ -24,6 +26,7 @@
                 </div>
             </form>
         </div>
+        
     </div>
     <ng-container [ngTemplateOutlet]="paginationTemplate" [ngTemplateOutletContext]="{ id: 'top' }"></ng-container>
 
@@ -45,13 +48,12 @@
     <div class="d-flex justify-content-center" *ngIf="pagination && items.length > 0">
         <ngb-pagination
             *ngIf="pagination.totalPages > 1"
-            [maxSize]="10"
+            [maxSize]="8"
             [rotate]="true"
             [ellipses]="false"
             [(page)]="pagination.currentPage"
             [pageSize]="pagination.itemsPerPage"
             (pageChange)="onPageChange($event)"
-            [boundaryLinks]="true"
             [collectionSize]="pagination.totalItems">
 
             <ng-template ngbPaginationPages let-page let-pages="pages" *ngIf="pagination.totalItems / pagination.itemsPerPage > 20">

UI/Web/src/app/shared/card-detail-layout/card-detail-layout.component.ts

@@ -66,7 +66,7 @@ export class CardDetailLayoutComponent implements OnInit {
   constructor() { }
 
   ngOnInit(): void {
-    this.trackByIdentity = (index: number, item: any) => `${this.header}_${this.pagination?.currentPage}_${index}`;
+    this.trackByIdentity = (index: number, item: any) => `${this.header}_${this.pagination?.currentPage}_${this.filterForm.get('filter')?.value}_${item.id}_${index}`;
   }
 
   onPageChange(page: number) {