open-source-mirrors
/
Ombi
mirror of https://github.com/Ombi-app/Ombi
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improved Movie layout !wip

Browse Source
pull/3895/head
TidusJar 6 years ago
parent e13f2a28fa
commit b570d904bf
3 changed files with 138 additions and 131 deletions
Show Stats Download Patch File Download Diff File

4
src/Ombi/ClientApp/src/app/media-details/media-details.component.scss
Unescape View File

@ -156,8 +156,8 @@
margin-right:10px !important; margin-right:10px !important;
} }
.btn-spacing-below { .spacing-below {
margin-bottom: 10px; margin-bottom: 15px;
} }
.tagline { .tagline {

228
src/Ombi/ClientApp/src/app/media-details/movie/movie-details.component.html
Unescape View File

@ -105,139 +105,135 @@
<div class="row"> <div class="row">
<div class="col-12 col-md-3"> <div class="col-12 col-md-2">
<button *ngIf="movie.belongsToCollection" mat-raised-button class="btn-spacing-below full-width mat-elevation-z8">{{movie.belongsToCollection.name}}</button> <button *ngIf="movie.belongsToCollection" mat-raised-button
<mat-card class="card-full mat-elevation-z8"> class="spacing-below full-width mat-elevation-z8">{{movie.belongsToCollection.name}}</button>
<mat-card class="mat-elevation-z8">
<mat-card-content class="medium-font"> <mat-card-content class="medium-font">
<movie-information-panel [movie]="movie"></movie-information-panel> <movie-information-panel [movie]="movie"></movie-information-panel>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</div> </div>
<div class="col-12 col-md-9"> <div class="col-12 col-md-10">
<mat-card class="card-full mat-elevation-z8"> <div class="row">
<mat-card-content> <div class="col-12">
{{movie.overview}} <mat-card class=" mat-elevation-z8 spacing-below">
</mat-card-content> <mat-card-content>
</mat-card> {{movie.overview}}
</div> </mat-card-content>
</div> </mat-card>
<div class="row card-spacer media-row"> </div>
<div class="col-12 col-md-3"> </div>
<mat-card class="mat-elevation-z8 keywords-panel"> <div class="row">
<mat-card-content> <div class="col-12">
<div> <mat-card class="mat-elevation-z8 spacing-below">
<span> <mat-card-header>Cast</mat-card-header>
<strong>Keywords/Tags:</strong> <mat-card-content>
<mat-chip-list> <p-carousel [value]="movie.credits.cast" [numVisible]="5" easing="easeOutStrong">
<mat-chip *ngFor="let keyword of movie.keywords.keywordsValue"> <ng-template let-item pTemplate="item">
{{keyword.name}} <div class="row justify-content-md-center">
</mat-chip> <div class="col-12">
</mat-chip-list> <img class="cast-profile-img" *ngIf="item.profile_path"
</span> src="https://image.tmdb.org/t/p/w300/{{item.profile_path}}">
</div> <!-- TODO get profile image default -->
</mat-card-content> </div>
</mat-card> <div class="col-12">
</div> <span><strong>Character:</strong> {{item.character}}</span>
</div>
<div class="col-12">
<span><strong>Actor:</strong> {{item.name}}</span>
</div>
</div>
</ng-template>
</p-carousel>
</mat-card-content>
</mat-card>
</div>
</div>
<div class="row">
<div class="col-12">
<mat-accordion class="mat-elevation-z8 spacing-below">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Recommendations
</mat-panel-title>
</mat-expansion-panel-header>
<div class="row card-spacer" *ngIf="movie.recommendations.results.length > 0">
<div class="col-md-2" *ngFor="let r of movie.recommendations.results">
<div class="sidebar affixable affix-top preview-poster">
<div class="poster">
<a [routerLink]="'/details/movie/'+r.id">
<img class="real grow" matTooltip="{{r.title}}"
src="https://image.tmdb.org/t/p/w300/{{r.poster_path}}"
alt="Poster" style="display: block;">
</a>
</div>
</div>
<div class="col-12 col-md-9">
<mat-card class="card-full mat-elevation-z8">
<mat-card-header>Cast</mat-card-header>
<mat-card-content>
<p-carousel [value]="movie.credits.cast" [numVisible]="5" easing="easeOutStrong">
<ng-template let-item pTemplate="item">
<div class="row justify-content-md-center">
<div class="col-12">
<img class="cast-profile-img" *ngIf="item.profile_path"
src="https://image.tmdb.org/t/p/w300/{{item.profile_path}}">
<!-- TODO get profile image default -->
</div>
<div class="col-12">
<span><strong>Character:</strong> {{item.character}}</span>
</div>
<div class="col-12">
<span><strong>Actor:</strong> {{item.name}}</span>
</div> </div>
</div> </div>
</ng-template> </mat-expansion-panel>
</p-carousel> <mat-expansion-panel>
</mat-card-content> <mat-expansion-panel-header>
</mat-card> <mat-panel-title>
</div> Similar
</div> </mat-panel-title>
<div class="row card-spacer media-row"> </mat-expansion-panel-header>
<div class="col-12 col-md-3"></div>
<div class="row card-spacer" *ngIf="movie.similar.results.length > 0">
<div class="col-12 col-md-9">
<mat-accordion> <div class="col-md-2" *ngFor="let r of movie.similar.results">
<mat-expansion-panel> <div class="sidebar affixable affix-top preview-poster">
<mat-expansion-panel-header> <div class="poster ">
<mat-panel-title> <a [routerLink]="'/details/movie/'+r.id">
Recommendations <img class="real grow" matTooltip="{{r.title}}"
</mat-panel-title> src="https://image.tmdb.org/t/p/w300/{{r.poster_path}}"
</mat-expansion-panel-header> alt="Poster" style="display: block;">
</a>
<div class="row card-spacer" *ngIf="movie.recommendations.results.length > 0"> </div>
</div>
<div class="col-md-2" *ngFor="let r of movie.recommendations.results">
<div class="sidebar affixable affix-top preview-poster">
<div class="poster">
<a [routerLink]="'/details/movie/'+r.id">
<img class="real grow" matTooltip="{{r.title}}"
src="https://image.tmdb.org/t/p/w300/{{r.poster_path}}" alt="Poster"
style="display: block;">
</a>
</div> </div>
</div> </div>
</mat-expansion-panel>
</div> <mat-expansion-panel>
</div> <mat-expansion-panel-header>
</mat-expansion-panel> <mat-panel-title>
<mat-expansion-panel> Videos
<mat-expansion-panel-header> </mat-panel-title>
<mat-panel-title> </mat-expansion-panel-header>
Similar
</mat-panel-title> <div class="row card-spacer" *ngIf="movie.videos.results.length > 0">
</mat-expansion-panel-header>
<div class="col-md-6" *ngFor="let video of movie.videos.results">
<div class="row card-spacer" *ngIf="movie.similar.results.length > 0"> <iframe width="100%" height="315px"
[src]="'https://www.youtube.com/embed/' + video.key | safe"
<div class="col-md-2" *ngFor="let r of movie.similar.results"> frameborder="0"
<div class="sidebar affixable affix-top preview-poster"> allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
<div class="poster "> allowfullscreen></iframe>
<a [routerLink]="'/details/movie/'+r.id">
<img class="real grow" matTooltip="{{r.title}}"
src="https://image.tmdb.org/t/p/w300/{{r.poster_path}}" alt="Poster"
style="display: block;">
</a>
</div> </div>
</div> </div>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
</div>
</div>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Videos
</mat-panel-title>
</mat-expansion-panel-header>
<div class="row card-spacer" *ngIf="movie.videos.results.length > 0">
<div class="col-md-6" *ngFor="let video of movie.videos.results">
<iframe width="100%" height="315px"
[src]="'https://www.youtube.com/embed/' + video.key | safe" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
</div> </div>
</div> </div>
</div> </div>

37
src/Ombi/ClientApp/src/app/media-details/movie/panels/movie-information-panel.component.html
Unescape View File

@ -1,4 +1,19 @@
<div *ngIf="movie.genres">
<strong>Genres:</strong>
<div>
<mat-chip-list>
<mat-chip *ngFor="let genre of movie.genres">
{{genre.name}}
</mat-chip>
</mat-chip-list>
</div>
</div>
<br />
<div> <div>
<div>
<strong>Status:</strong>
<div>{{movie.status}}</div>
</div>
<strong>Theatrical Release:</strong> <strong>Theatrical Release:</strong>
<div> <div>
{{movie.releaseDate | date: 'mediumDate'}} {{movie.releaseDate | date: 'mediumDate'}}
@ -22,10 +37,6 @@
{{movie.voteCount | thousandShort: 1}} {{movie.voteCount | thousandShort: 1}}
</div> </div>
</div> </div>
<div>
<strong>Status:</strong>
<div>{{movie.status}}</div>
</div>
<div> <div>
<strong>Runtime:</strong> <strong>Runtime:</strong>
<div>{{movie.runtime}} Minutes</div> <div>{{movie.runtime}} Minutes</div>
@ -39,13 +50,13 @@
<div> {{movie.budget | currency: 'USD'}}</div> <div> {{movie.budget | currency: 'USD'}}</div>
</div> </div>
<div *ngIf="movie.genres">
<strong>Genres:</strong> <br />
<div> <div>
<mat-chip-list> <strong>Keywords/Tags:</strong>
<mat-chip *ngFor="let genre of movie.genres"> <mat-chip-list>
{{genre.name}} <mat-chip *ngFor="let keyword of movie.keywords.keywordsValue">
</mat-chip> {{keyword.name}}
</mat-chip-list> </mat-chip>
</div> </mat-chip-list>
</div> </div>
Write Preview
Loading…
Cancel
Save