Linked Series (#1230)

* Implemented the ability to link different series together through Edit Series. CSS pending.

* Fixed up the css for related cards to show the relation

* Working on making all tabs in edit seris modal save in one go. Taking a break.

* Some fixes for Robbie to help with styling on

* Linked series pill, center library

* Centering library detail and related pill spacing

- Library detail cards are now centered if total number of items is > 6 or if mobile.
- Added ability to determine if mobile (viewport width <= 480px
- Fixed related card spacing
- Fixed related card pill spacing

* Updating relation form spacing

* Fixed a bug in card detail layout when there is no pagination, we create one in a way that all items render at once.

* Only auto-close side nav on phones, not tablets

* Fixed a bug where we had flipped state on sideNavCollapsed$

* Cleaned up some misleading comments

* Implemented RBS back in and now  if you have a relationship besides prequel/sequel, the target series will show a link back to it's parent.

* Added Parentto pipe

* Missed a relationship type

Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>

UI/Web/src/app/cards/edit-series-relation/edit-series-relation.component.html

@@ -0,0 +1,36 @@
+<div class="container-fluid">
+
+    <p>
+        Not sure what relationship to add? See our <a href="https://wiki.kavitareader.com/en/guides/get-started-using-your-library/series-relationships" target="_blank" referrerpolicy="no-refer">wiki for hints</a>.
+    </p>
+
+    <div class="row g-0" *ngIf="relations.length > 0">
+        <label class="form-label col-md-7">Target Series</label>
+        <label class="form-label col-md-5">Relationship</label>
+    </div>
+    
+    <form>
+        <div class="row g-0 mb-3" *ngFor="let relation of relations; let idx = index; let isLast = last;">
+            <div class="col-sm-12 col-md-7">
+                <app-typeahead (selectedData)="updateSeries($event, relation)" [settings]="relation.typeaheadSettings">
+                    <ng-template #badgeItem let-item let-position="idx">
+                        {{item.name}} ({{libraryNames[item.libraryId]}})
+                    </ng-template>
+                    <ng-template #optionItem let-item let-position="idx">
+                        {{item.name}} ({{libraryNames[item.libraryId]}})
+                    </ng-template>
+                </app-typeahead>
+            </div>
+            <div class="col-sm-auto col-md-3">
+                <select class="form-select" [formControl]="relation.formControl">
+                    <option *ngFor="let opt of relationOptions" [value]="opt.value">{{opt.text}}</option>
+                </select>
+            </div>
+            <button class="col-sm-auto col-md-2 btn btn-outline-secondary" (click)="removeRelation(idx)">Remove</button>
+        </div>
+    </form>
+
+    <div class="row g-0 mt-3 mb-3">
+        <button class="btn btn-outline-secondary col-md-12" (click)="addNewRelation()">Add Relationship</button>
+    </div>
+</div>