Added images to the search

src/Ombi.Core/Engine/V2/MultiSearchEngine.cs

@@ -63,6 +63,7 @@ namespace Ombi.Core.Engine.V2
                 var result = new MultiSearchResult
                 {
                     MediaType = multiSearch.media_type,
+                    Poster = multiSearch.poster_path
                 };
 
                 if (multiSearch.media_type.Equals("movie", StringComparison.InvariantCultureIgnoreCase))

src/Ombi.Core/Models/Search/V2/MultiSearchResult.cs

@@ -5,5 +5,6 @@
         public string Id { get; set; }
         public string MediaType { get; set; }
         public string Title { get; set; }
+        public string Poster { get; set; }
     }
 }

src/Ombi/ClientApp/src/app/interfaces/ISearchMovieResult.ts

@@ -38,6 +38,7 @@ export interface IMultiSearchResult {
     id: string;
    mediaType: string;
    title: string;
+   poster: string;
 }
 
 export interface ILanguageRefine {

src/Ombi/ClientApp/src/app/login/login.component.html

@@ -10,14 +10,16 @@
                 <form *ngIf="authenticationSettings" class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
 
 
-                    <mat-form-field class="full-width">
+                    <mat-form-field class="dark full-width" appearance="outline">
-                        <input type="text" matInput placeholder="{{'Login.UsernamePlaceholder' | translate}}" formControlName="username" />
+                        <mat-label>{{'Login.UsernamePlaceholder' | translate}}</mat-label>
+                        <input type="text" matInput formControlName="username" />
                         <mat-error *ngIf="form.get('username').hasError('required')">
                             {{'Login.UsernamePlaceholder' | translate}} is <strong>required</strong></mat-error>
                     </mat-form-field>
 
-                    <mat-form-field class="full-width">
+                    <mat-form-field class="full-width" appearance="outline">
-                        <input color="black" type="password" matInput placeholder="{{'Login.PasswordPlaceholder' | translate}}" formControlName="password" />
+                        <mat-label>{{'Login.PasswordPlaceholder' | translate}}</mat-label>
+                        <input color="black" type="password" matInput formControlName="password" />
                     </mat-form-field>
 
                     <mat-checkbox formControlName="rememberMe">{{'Login.RememberMe' | translate}}</mat-checkbox>

src/Ombi/ClientApp/src/app/my-nav/nav-search.component.html

@@ -15,27 +15,28 @@ aria-label="Search" [ngbTypeahead]="searchModel" [resultFormatter]="formatter" [
             <mat-spinner diameter="50"></mat-spinner>
         </mat-option>
         <ng-container *ngIf="!searching">
-            <mat-option *ngFor="let result of results" [value]="result">
+            <mat-option class="option" *ngFor="let result of results" [value]="result">
-                <div *ngIf="result.mediaType === 'movie'">
+                <img *ngIf="result.poster" class="option-img" aria-hidden [src]="'https://image.tmdb.org/t/p/w300/'+result.poster" height="75">
-                    <i class="fa fa-film"></i> &nbsp;
+                <span *ngIf="result.mediaType === 'movie'">
+                    <i *ngIf="!result.poster" class="fa fa-film"></i> &nbsp;
                     <span>{{result.title}}</span>
-                </div>
+                </span>
-                <div *ngIf="result.mediaType === 'tv'">
+                <span *ngIf="result.mediaType === 'tv'">
-                    <i class="fa fa-tv"></i> &nbsp;
+                    <i *ngIf="!result.poster" class="fa fa-tv"></i> &nbsp;
 
                     <span>{{result.title}}</span>
-                </div>
+                </span>
 
-                <div *ngIf="result.mediaType === 'Artist'">
+                <span *ngIf="result.mediaType === 'Artist'">
-                    <i class="fa fa-music"></i> &nbsp;
+                    <i *ngIf="!result.poster" class="fa fa-music"></i> &nbsp;
 
                     <span>{{result.title}}</span>
-                </div>
+                </span>
 
-                <div *ngIf="result.mediaType === 'person'">
+                <span *ngIf="result.mediaType === 'person'">
-                    <i class="fa fa-user"></i> &nbsp;
+                    <i *ngIf="!result.poster" class="fa fa-user"></i> &nbsp;
                     <span>{{result.title}}</span>
-                </div>
+                </span>
             </mat-option>
         </ng-container>
     </mat-autocomplete>

src/Ombi/ClientApp/src/app/my-nav/nav-search.component.scss

@@ -17,9 +17,9 @@ $ombi-accent: #258a6d;
 }
 
 .mat-option {
-    height: 50px;
+    height: 75px;
     line-height: 50px;
-    padding: 0px 5px;
+    padding: 0px 0px;
 }
 
 .search-bar {
@@ -34,3 +34,13 @@ $ombi-accent: #258a6d;
 ::ng-deep .mat-form-field-underline{
     bottom:0.5em;
 }
+
+
+.option-img {
+    vertical-align: middle;
+    margin-right: 8px;
+  }
+
+  .options {
+      margin-bottom: 5px;
+  }