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/pipe/pipe.module.ts

@@ -5,6 +5,7 @@ import { PublicationStatusPipe } from './publication-status.pipe';
 import { SentenceCasePipe } from './sentence-case.pipe';
 import { PersonRolePipe } from './person-role.pipe';
 import { SafeHtmlPipe } from './safe-html.pipe';
+import { RelationshipPipe } from './relationship.pipe';
 
 
 
@@ -14,7 +15,8 @@ import { SafeHtmlPipe } from './safe-html.pipe';
     PersonRolePipe,
     PublicationStatusPipe,
     SentenceCasePipe,
-    SafeHtmlPipe
+    SafeHtmlPipe,
+    RelationshipPipe
   ],
   imports: [
     CommonModule,
@@ -24,7 +26,8 @@ import { SafeHtmlPipe } from './safe-html.pipe';
     PersonRolePipe,
     PublicationStatusPipe,
     SentenceCasePipe,
-    SafeHtmlPipe
+    SafeHtmlPipe,
+    RelationshipPipe
   ]
 })
 export class PipeModule { }

UI/Web/src/app/pipe/relationship.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { RelationshipPipe } from './relationship.pipe';
+
+describe('RelationshipPipe', () => {
+  it('create an instance', () => {
+    const pipe = new RelationshipPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

UI/Web/src/app/pipe/relationship.pipe.ts

@@ -0,0 +1,41 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { RelationKind } from '../_models/series-detail/relation-kind';
+
+@Pipe({
+  name: 'relationship'
+})
+export class RelationshipPipe implements PipeTransform {
+
+  transform(relationship: RelationKind | undefined): string {
+    if (relationship === undefined) return '';
+    switch (relationship) {
+      case RelationKind.Adaptation:
+        return 'Adaptaion';
+      case RelationKind.AlternativeSetting:
+        return 'Alternative Setting';
+      case RelationKind.AlternativeVersion:
+        return 'Alternative Version';
+      case RelationKind.Character:
+        return 'Character';
+      case RelationKind.Contains:
+        return 'Contains';
+      case RelationKind.Doujinshi:
+        return 'Doujinshi';
+      case RelationKind.Other:
+        return 'Other';
+      case RelationKind.Prequel:
+        return 'Prequel';
+      case RelationKind.Sequel:
+        return 'Sequel';
+      case RelationKind.SideStory:
+        return 'Side Story';
+      case RelationKind.SpinOff:
+        return 'Spin Off';
+      case RelationKind.Parent:
+        return 'Parent';
+      default:
+        return '';
+    }
+  }
+
+}