mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-20 13:23:20 -07:00
Re did some of the styling on the movie search page, let me know your thoughts
This commit is contained in:
Jamie
parent
4760e416ef
commit
ddf926791f
7 changed files with 38 additions and 17 deletions
|
|
@ -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
|
||||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -832,4 +832,14 @@ 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…
Add table
Add a link
Reference in a new issue