Added the stuff needed for omBlur

This commit is contained in:
tidusjar 2018-01-09 21:46:43 +00:00
parent 3d71e67f9c
commit 12b5e19680
9 changed files with 31 additions and 9 deletions

View file

@ -14,8 +14,10 @@
<div *ngFor="let request of movieRequests"> <div *ngFor="let request of movieRequests">
<div class="row backdrop" [style.background-image]="request.backgroundPath"> <div class="row">
<div class="col-sm-2 small-padding"> <div class="myBg backdrop" [style.background-image]="request.backgroundPath"></div>
<div class="tint" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%);"></div>
<div class="col-sm-2 small-padding">
<img class="img-responsive poster" src="https://image.tmdb.org/t/p/w150/{{request.posterPath}}" alt="poster"> <img class="img-responsive poster" src="https://image.tmdb.org/t/p/w150/{{request.posterPath}}" alt="poster">

View file

@ -239,6 +239,6 @@ export class MovieRequestsComponent implements OnInit {
private setBackground(req: IMovieRequests): void { private setBackground(req: IMovieRequests): void {
req.backgroundPath = this.sanitizer.bypassSecurityTrustStyle req.backgroundPath = 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" + req.background + ")"); ("url(" + "https://image.tmdb.org/t/p/w1280" + req.background + ")");
} }
} }

View file

@ -27,7 +27,10 @@
<ng-template let-col let-node="rowData" pTemplate="body"> <ng-template let-col let-node="rowData" pTemplate="body">
<!--This is the section that holds the parent level results set--> <!--This is the section that holds the parent level results set-->
<div *ngIf="!node.leaf"> <div *ngIf="!node.leaf">
<div class="row backdrop" [style.background-image]="node?.data?.background"> <div class="row">
<div class="myBg backdrop" [style.background-image]="node?.data?.background"></div>
<div class="tint" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%);"></div>
<div class="col-sm-2 small-padding" > <div class="col-sm-2 small-padding" >
<img class="img-responsive poster" src="{{node.data.posterPath || null}}" alt="poster"> <img class="img-responsive poster" src="{{node.data.posterPath || null}}" alt="poster">

View file

@ -134,7 +134,7 @@ export class TvRequestsComponent implements OnInit {
private loadBackdrop(val: TreeNode): void { private loadBackdrop(val: TreeNode): void {
this.imageService.getTvBanner(val.data.id).subscribe(x => { this.imageService.getTvBanner(val.data.id).subscribe(x => {
val.data.background = this.sanitizer.bypassSecurityTrustStyle val.data.background = this.sanitizer.bypassSecurityTrustStyle
("linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%),url(" + x + ")"); ("url(" + x + ")");
}); });
} }
} }

View file

@ -28,7 +28,10 @@
<div *ngFor="let result of movieResults"> <div *ngFor="let result of movieResults">
<div class="row backdrop" [style.background-image]="result.background"> <div class="row" >
<div class="myBg backdrop" [style.background-image]="result.background"></div>
<div class="tint" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%);"></div>
<div class="col-sm-2 small-padding"> <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">

View file

@ -152,7 +152,7 @@ export class MovieSearchComponent implements OnInit {
val.background = this.sanitizer. val.background = this.sanitizer.
bypassSecurityTrustStyle 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 + ")"); ("url(" + "https://image.tmdb.org/t/p/w1280" + val.backdropPath + ")");
this.searchService.getMovieInformation(val.id) this.searchService.getMovieInformation(val.id)
.subscribe(m => { .subscribe(m => {
this.updateItem(val, m); this.updateItem(val, m);

View file

@ -50,7 +50,10 @@
<ng-template let-col let-node="rowData" pTemplate="body"> <ng-template let-col let-node="rowData" pTemplate="body">
<!--This is the section that holds the parent level search results set--> <!--This is the section that holds the parent level search results set-->
<div *ngIf="!node.leaf"> <div *ngIf="!node.leaf">
<div class="row backdrop" [style.background-image]="node?.data?.background"> <div class="row" >
<div class="myBg backdrop" [style.background-image]="node?.data?.background"></div>
<div class="tint" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%);"></div>
<div class="col-sm-2 small-padding"> <div class="col-sm-2 small-padding">
<img *ngIf="node?.data?.banner" class="img-responsive poster" width="150" [src]="node.data.banner" alt="poster"> <img *ngIf="node?.data?.banner" class="img-responsive poster" width="150" [src]="node.data.banner" alt="poster">

View file

@ -134,7 +134,7 @@ export class TvSearchComponent implements OnInit {
val.data.background = this.sanitizer. val.data.background = this.sanitizer.
bypassSecurityTrustStyle bypassSecurityTrustStyle
("linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%),url(" + x + ")"); ("url(" + x + ")");
}); });
this.searchService.getShowInformationTreeNode(val.data.id) this.searchService.getShowInformationTreeNode(val.data.id)
.subscribe(x => { .subscribe(x => {

View file

@ -335,3 +335,14 @@ button.list-group-item:focus {
.ui-widget-overlay .ui-sidebar-mask { .ui-widget-overlay .ui-sidebar-mask {
background: black; background: black;
} }
.myBg {
width: 100%;
height: 100%;
position: absolute;
}
.tint {
width: 100%;
height: 100%;
position: absolute;
}