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
requestProcessing: boolean;
processed: boolean;
background: any;
}
export interface ISearchMovieResultContainer {

@ -14,7 +14,7 @@
<div *ngFor="let request of movieRequests">
<div class="row">
<div class="row" >
<div class="col-sm-2">
<img class="img-responsive poster" src="https://image.tmdb.org/t/p/w150/{{request.posterPath}}" alt="poster">

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

@ -27,12 +27,13 @@
</div>
<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">
</div>
<div class="col-sm-8">
<div class="col-sm-8 small-padding">
<div>
<a href="https://www.themoviedb.org/movie/{{result.id}}/" target="_blank">
<h4>{{result.title}} ({{result.releaseDate | date: 'yyyy'}})</h4>
@ -53,14 +54,13 @@
<br/>
<br/>
</div>
<p style="font-size: 0.9rem !important">{{result.overview}}</p>
</div>
<div class="col-sm-2">
<div class="col-sm-2 small-padding">
<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>
@ -85,7 +85,8 @@
</div>
</div>
<hr/>
<br/>
<br/>
</div>
</div>

@ -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
@ -54,7 +55,6 @@ export class MovieSearchComponent implements OnInit {
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() {

@ -27,9 +27,9 @@
<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>
<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>

@ -760,8 +760,8 @@ textarea {
}
.poster {
box-shadow: 5px 5px 30px #000000;
border-radius: 30px;
// box-shadow: 3px 3px 15px #000000;
border-radius: 5px;
}
@ -833,3 +833,13 @@ a > h4:hover {
.ui-treetable tbody td {
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