From ddf926791fd1a3e0dbd8bde48906da1e988dfe1d Mon Sep 17 00:00:00 2001 From: Jamie Date: Wed, 1 Nov 2017 15:21:02 +0000 Subject: [PATCH] Re did some of the styling on the movie search page, let me know your thoughts --- .../app/interfaces/ISearchMovieResult.ts | 1 + .../app/requests/movierequests.component.html | 2 +- .../app/requests/movierequests.component.ts | 1 + .../app/search/moviesearch.component.html | 13 +++++++------ .../app/search/moviesearch.component.ts | 18 +++++++++++++----- .../customization/customization.component.html | 4 ++-- src/Ombi/ClientApp/styles/base.scss | 16 +++++++++++++--- 7 files changed, 38 insertions(+), 17 deletions(-) diff --git a/src/Ombi/ClientApp/app/interfaces/ISearchMovieResult.ts b/src/Ombi/ClientApp/app/interfaces/ISearchMovieResult.ts index 164ae5eb4..77ec87ed5 100644 --- a/src/Ombi/ClientApp/app/interfaces/ISearchMovieResult.ts +++ b/src/Ombi/ClientApp/app/interfaces/ISearchMovieResult.ts @@ -26,6 +26,7 @@ // for the UI requestProcessing: boolean; processed: boolean; + background: any; } export interface ISearchMovieResultContainer { diff --git a/src/Ombi/ClientApp/app/requests/movierequests.component.html b/src/Ombi/ClientApp/app/requests/movierequests.component.html index 6e5f7eef5..36422281d 100644 --- a/src/Ombi/ClientApp/app/requests/movierequests.component.html +++ b/src/Ombi/ClientApp/app/requests/movierequests.component.html @@ -14,7 +14,7 @@
-
+
poster diff --git a/src/Ombi/ClientApp/app/requests/movierequests.component.ts b/src/Ombi/ClientApp/app/requests/movierequests.component.ts index 784d01aee..5b2c5cb6f 100644 --- a/src/Ombi/ClientApp/app/requests/movierequests.component.ts +++ b/src/Ombi/ClientApp/app/requests/movierequests.component.ts @@ -42,6 +42,7 @@ export class MovieRequestsComponent implements OnInit { } this.requestService.searchMovieRequests(this.searchText) .subscribe(m => { + this.setOverrides(m); this.movieRequests = m; }); }); diff --git a/src/Ombi/ClientApp/app/search/moviesearch.component.html b/src/Ombi/ClientApp/app/search/moviesearch.component.html index be857a13b..c7add48cb 100644 --- a/src/Ombi/ClientApp/app/search/moviesearch.component.html +++ b/src/Ombi/ClientApp/app/search/moviesearch.component.html @@ -27,12 +27,13 @@
-
-
+ +
+
poster
-
+

{{result.overview}}

-
+
@@ -85,7 +85,8 @@
-
+
+
diff --git a/src/Ombi/ClientApp/app/search/moviesearch.component.ts b/src/Ombi/ClientApp/app/search/moviesearch.component.ts index 24eeee82b..51deafc97 100644 --- a/src/Ombi/ClientApp/app/search/moviesearch.component.ts +++ b/src/Ombi/ClientApp/app/search/moviesearch.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from "@angular/core"; +import { DomSanitizer } from "@angular/platform-browser"; import { TranslateService } from "@ngx-translate/core"; import "rxjs/add/operator/debounceTime"; import "rxjs/add/operator/distinctUntilChanged"; @@ -24,7 +25,7 @@ export class MovieSearchComponent implements OnInit { constructor(private searchService: SearchService, private requestService: RequestService, private notificationService: NotificationService, private authService: AuthService, - private readonly translate: TranslateService) { + private readonly translate: TranslateService, private sanitizer: DomSanitizer) { this.searchChanged .debounceTime(600) // Wait Xms afterthe last event before emitting last event @@ -53,8 +54,7 @@ export class MovieSearchComponent implements OnInit { message: "", result: false, errorMessage: "", - }; - + }; } public search(text: any) { @@ -134,15 +134,23 @@ export class MovieSearchComponent implements OnInit { private getExtaInfo() { this.movieResults.forEach((val, index) => { + + val.background = this.sanitizer. + bypassSecurityTrustStyle + ("linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%),url(" + "https://image.tmdb.org/t/p/w1280" + val.backdropPath + ")"); this.searchService.getMovieInformation(val.id) - .subscribe(m => this.updateItem(val, m)); + .subscribe(m => { + this.updateItem(val, m); + }); }); } private updateItem(key: ISearchMovieResult, updated: ISearchMovieResult) { const index = this.movieResults.indexOf(key, 0); if (index > -1) { - this.movieResults[index] = updated; + // const originalBackdrop = Object.create(this.movieResults[index]); + // this.movieResults[index] = updated; + // this.movieResults[index].backdropPath = originalBackdrop; } } private clearResults() { diff --git a/src/Ombi/ClientApp/app/settings/customization/customization.component.html b/src/Ombi/ClientApp/app/settings/customization/customization.component.html index 57140a38f..4b0889a97 100644 --- a/src/Ombi/ClientApp/app/settings/customization/customization.component.html +++ b/src/Ombi/ClientApp/app/settings/customization/customization.component.html @@ -27,9 +27,9 @@
- +
- +
diff --git a/src/Ombi/ClientApp/styles/base.scss b/src/Ombi/ClientApp/styles/base.scss index 1098b8319..6be03820e 100644 --- a/src/Ombi/ClientApp/styles/base.scss +++ b/src/Ombi/ClientApp/styles/base.scss @@ -760,8 +760,8 @@ textarea { } .poster { - box-shadow: 5px 5px 30px #000000; - border-radius: 30px; + // box-shadow: 3px 3px 15px #000000; + border-radius: 5px; } @@ -832,4 +832,14 @@ a > h4:hover { .ui-treetable tbody td { padding: 0.25em 3.5em; -} \ No newline at end of file +} + +.small-padding { + padding-top: 5px; + padding-bottom: 5px; +} + +.backdrop{ + box-shadow: 3px 3px 10px #000000; + background-position: center; +}