Re did some of the styling on the movie search page, let me know your thoughts

pull/1676/head
Jamie 7 years ago
parent 4760e416ef
commit ddf926791f

@ -26,6 +26,7 @@
// for the UI // for the UI
requestProcessing: boolean; requestProcessing: boolean;
processed: boolean; processed: boolean;
background: any;
} }
export interface ISearchMovieResultContainer { export interface ISearchMovieResultContainer {

@ -42,6 +42,7 @@ export class MovieRequestsComponent implements OnInit {
} }
this.requestService.searchMovieRequests(this.searchText) this.requestService.searchMovieRequests(this.searchText)
.subscribe(m => { .subscribe(m => {
this.setOverrides(m);
this.movieRequests = m; this.movieRequests = m;
}); });
}); });

@ -27,12 +27,13 @@
</div> </div>
<div *ngFor="let result of movieResults"> <div *ngFor="let result of movieResults">
<div class="row">
<div class="col-sm-2"> <div class="row backdrop" [style.background-image]="result.background">
<div class="col-sm-2 small-padding">
<img *ngIf="result.posterPath" class="img-responsive poster" src="https://image.tmdb.org/t/p/w150/{{result.posterPath}}" alt="poster"> <img *ngIf="result.posterPath" class="img-responsive poster" src="https://image.tmdb.org/t/p/w150/{{result.posterPath}}" alt="poster">
</div> </div>
<div class="col-sm-8"> <div class="col-sm-8 small-padding">
<div> <div>
<a href="https://www.themoviedb.org/movie/{{result.id}}/" target="_blank"> <a href="https://www.themoviedb.org/movie/{{result.id}}/" target="_blank">
<h4>{{result.title}} ({{result.releaseDate | date: 'yyyy'}})</h4> <h4>{{result.title}} ({{result.releaseDate | date: 'yyyy'}})</h4>
@ -53,14 +54,13 @@
<br/>
<br/> <br/>
</div> </div>
<p style="font-size: 0.9rem !important">{{result.overview}}</p> <p style="font-size: 0.9rem !important">{{result.overview}}</p>
</div> </div>
<div class="col-sm-2"> <div class="col-sm-2 small-padding">
<div *ngIf="result.available"> <div *ngIf="result.available">
<button style="text-align: right" class="btn btn-success-outline disabled" disabled><i class="fa fa-check"></i> {{ 'Common.Available' | translate }}</button> <button style="text-align: right" class="btn btn-success-outline disabled" disabled><i class="fa fa-check"></i> {{ 'Common.Available' | translate }}</button>
@ -85,7 +85,8 @@
</div> </div>
</div> </div>
<hr/> <br/>
<br/>
</div> </div>
</div> </div>

@ -1,4 +1,5 @@
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import { TranslateService } from "@ngx-translate/core"; import { TranslateService } from "@ngx-translate/core";
import "rxjs/add/operator/debounceTime"; import "rxjs/add/operator/debounceTime";
import "rxjs/add/operator/distinctUntilChanged"; import "rxjs/add/operator/distinctUntilChanged";
@ -24,7 +25,7 @@ export class MovieSearchComponent implements OnInit {
constructor(private searchService: SearchService, private requestService: RequestService, constructor(private searchService: SearchService, private requestService: RequestService,
private notificationService: NotificationService, private authService: AuthService, private notificationService: NotificationService, private authService: AuthService,
private readonly translate: TranslateService) { private readonly translate: TranslateService, private sanitizer: DomSanitizer) {
this.searchChanged this.searchChanged
.debounceTime(600) // Wait Xms afterthe last event before emitting last event .debounceTime(600) // Wait Xms afterthe last event before emitting last event
@ -54,7 +55,6 @@ export class MovieSearchComponent implements OnInit {
result: false, result: false,
errorMessage: "", errorMessage: "",
}; };
} }
public search(text: any) { public search(text: any) {
@ -134,15 +134,23 @@ export class MovieSearchComponent implements OnInit {
private getExtaInfo() { private getExtaInfo() {
this.movieResults.forEach((val, index) => { 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) this.searchService.getMovieInformation(val.id)
.subscribe(m => this.updateItem(val, m)); .subscribe(m => {
this.updateItem(val, m);
});
}); });
} }
private updateItem(key: ISearchMovieResult, updated: ISearchMovieResult) { private updateItem(key: ISearchMovieResult, updated: ISearchMovieResult) {
const index = this.movieResults.indexOf(key, 0); const index = this.movieResults.indexOf(key, 0);
if (index > -1) { 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() { private clearResults() {

@ -27,9 +27,9 @@
<div class="form-group"> <div class="form-group">
<label for="logo" class="control-label">Custom CSS Link</label> <label for="customLink" class="control-label">Custom CSS Link</label>
<div> <div>
<input type="text" [(ngModel)]="settings.customCssLink" class="form-control form-control-custom " value="{{settings.customCssLink}}" tooltipPosition="top" pTooltip="A link to a CSS file, you can use this to use your own styles for Ombi"> <input type="text" [(ngModel)]="settings.customCssLink" class="form-control form-control-custom " name="customLink" value="{{settings.customCssLink}}" tooltipPosition="top" pTooltip="A link to a CSS file, you can use this to use your own styles for Ombi">
</div> </div>
</div> </div>

@ -760,8 +760,8 @@ textarea {
} }
.poster { .poster {
box-shadow: 5px 5px 30px #000000; // box-shadow: 3px 3px 15px #000000;
border-radius: 30px; border-radius: 5px;
} }
@ -833,3 +833,13 @@ a > h4:hover {
.ui-treetable tbody td { .ui-treetable tbody td {
padding: 0.25em 3.5em; padding: 0.25em 3.5em;
} }
.small-padding {
padding-top: 5px;
padding-bottom: 5px;
}
.backdrop{
box-shadow: 3px 3px 10px #000000;
background-position: center;
}

Loading…
Cancel
Save