Mobile search bar fixes (#1032)

* Mobile search bar fixes

# Fixed
- Fixed: Fixed an issue with longer usernames causing header to wrap to another line. (develop)
- Fixed: Fixed an issue where the close button for the search was not centered on mobile. Verified on iOS Safari and iOS Chrome. (develop)

* Adding artist to search, fixing cover artist in search

UI/Web/src/app/_models/series-filter.ts

@@ -12,6 +12,7 @@ export interface SeriesFilter {
     readStatus: ReadStatus;
     genres: Array<number>;
     writers: Array<number>;
+    artists: Array<number>;
     penciller: Array<number>;
     inker: Array<number>;
     colorist: Array<number>;

UI/Web/src/app/_services/series.service.ts

@@ -198,6 +198,7 @@ export class SeriesService {
       libraries: [],
       genres: [],
       writers: [],
+      artists: [],
       penciller: [],
       inker: [],
       colorist: [],

UI/Web/src/app/grouped-typeahead/grouped-typeahead.component.scss

@@ -41,6 +41,14 @@ input {
         right: 10px;
     }
 
+    @media only screen and (max-width:650px) {
+        .close {
+            top: 50%;
+            transform: translate(0, -60%);
+        }
+    }
+
+
     input {
         outline: 0 !important;
         border-radius: .28571429rem;

UI/Web/src/app/nav-header/nav-header.component.scss

@@ -14,7 +14,7 @@ $bg-color: rgb(22, 27, 34);
 /* small devices (phones, 650px and down) */
 @media only screen and (max-width:650px) { //370
     .navbar-nav {
-        width: 34%;
+        width: 0;
     }
 }
 

UI/Web/src/app/nav-header/nav-header.component.ts

@@ -112,8 +112,11 @@ export class NavHeaderComponent implements OnInit, OnDestroy {
     // TODO: Move this to utility service
     this.clearSearch();
     switch(role) {
+      case PersonRole.Writer:
+        this.goTo('writers', filter);
+        break;
       case PersonRole.Artist:
-        this.goTo('artist', filter);
+        this.goTo('artists', filter);
         break;
       case PersonRole.Character:
         this.goTo('character', filter);
@@ -128,7 +131,7 @@ export class NavHeaderComponent implements OnInit, OnDestroy {
         this.goTo('inker', filter);
         break;
       case PersonRole.CoverArtist:
-        this.goTo('coverArtist', filter);
+        this.goTo('coverArtists', filter);
         break;
       case PersonRole.Inker:
         this.goTo('inker', filter);

UI/Web/src/app/shared/_services/utility.service.ts

@@ -150,6 +150,12 @@ export class UtilityService {
       anyChanged = true;
     }
 
+    const artists = snapshot.queryParamMap.get('artists');
+    if (artists !== undefined && artists !== null) {
+      filter.artists = [...filter.artists, ...artists.split(',').map(item => parseInt(item, 10))];
+      anyChanged = true;
+    }
+
     const character = snapshot.queryParamMap.get('character');
     if (character !== undefined && character !== null) {
       filter.character = [...filter.character, ...character.split(',').map(item => parseInt(item, 10))];