Added images to the search

pull/3689/head
Jamie Rees 4 years ago
parent 6d339e7a1c
commit ab15439a27

@ -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))

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

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

@ -10,14 +10,16 @@
<form *ngIf="authenticationSettings" class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
<mat-form-field class="full-width">
<input type="text" matInput placeholder="{{'Login.UsernamePlaceholder' | translate}}" formControlName="username" />
<mat-form-field class="dark full-width" appearance="outline">
<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">
<input color="black" type="password" matInput placeholder="{{'Login.PasswordPlaceholder' | translate}}" formControlName="password" />
<mat-form-field class="full-width" appearance="outline">
<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>

@ -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">
<div *ngIf="result.mediaType === 'movie'">
<i class="fa fa-film"></i> &nbsp;
<mat-option class="option" *ngFor="let result of results" [value]="result">
<img *ngIf="result.poster" class="option-img" aria-hidden [src]="'https://image.tmdb.org/t/p/w300/'+result.poster" height="75">
<span *ngIf="result.mediaType === 'movie'">
<i *ngIf="!result.poster" class="fa fa-film"></i> &nbsp;
<span>{{result.title}}</span>
</div>
<div *ngIf="result.mediaType === 'tv'">
<i class="fa fa-tv"></i> &nbsp;
</span>
<span *ngIf="result.mediaType === 'tv'">
<i *ngIf="!result.poster" class="fa fa-tv"></i> &nbsp;
<span>{{result.title}}</span>
</div>
</span>
<div *ngIf="result.mediaType === 'Artist'">
<i class="fa fa-music"></i> &nbsp;
<span *ngIf="result.mediaType === 'Artist'">
<i *ngIf="!result.poster" class="fa fa-music"></i> &nbsp;
<span>{{result.title}}</span>
</div>
</span>
<div *ngIf="result.mediaType === 'person'">
<i class="fa fa-user"></i> &nbsp;
<span *ngIf="result.mediaType === 'person'">
<i *ngIf="!result.poster" class="fa fa-user"></i> &nbsp;
<span>{{result.title}}</span>
</div>
</span>
</mat-option>
</ng-container>
</mat-autocomplete>

@ -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;
}
Loading…
Cancel
Save