mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-07-07 13:41:13 -07:00
Fixes for the details page
This commit is contained in:
twanariens
parent
541f50ffe1
commit
c33a80fda4
6 changed files with 106 additions and 73 deletions
|
|
@ -32,68 +32,71 @@
|
|||
<section id="info-wrapper">
|
||||
<div class="small-middle-container">
|
||||
|
||||
<div class="row justify-content-center justify-content-sm-start">
|
||||
|
||||
<media-poster [posterPath]="'https://image.tmdb.org/t/p/w300/' + movie.posterPath"></media-poster>
|
||||
<div class="row justify-content-center justify-content-sm-start header-container">
|
||||
<div class="details-poster-container">
|
||||
<media-poster [posterPath]="'https://image.tmdb.org/t/p/w300/' + movie.posterPath"></media-poster>
|
||||
</div>
|
||||
|
||||
<!--Next to poster-->
|
||||
<div class="col-12 col-lg-9 col-xl-9 media-row">
|
||||
<span *ngIf="movie.available">
|
||||
<a *ngIf="movie.plexUrl" href="{{movie.plexUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn plex">
|
||||
{{'Search.ViewOnPlex' | translate}}
|
||||
<i class="far fa-play-circle fa-2x"></i>
|
||||
</a>
|
||||
<a *ngIf="movie.embyUrl" href="{{movie.embyUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn emby">
|
||||
{{'Search.ViewOnEmby' | translate}}
|
||||
<i class="far fa-play-circle fa-2x"></i>
|
||||
</a>
|
||||
<a *ngIf="movie.jellyfinUrl" href="{{movie.jellyfinUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn jellyfinUrl">
|
||||
{{'Search.ViewOnJellyfin' | translate}}
|
||||
<i class="far fa-play-circle fa-2x"></i>
|
||||
</a>
|
||||
</span>
|
||||
<button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available && !movie.plexUrl && !movie.embyUrl && !movie.jellyfinUrl"> {{
|
||||
'Common.Available' | translate }}</button>
|
||||
<span *ngIf="!movie.available">
|
||||
<span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
|
||||
<ng-template #requestedBtn>
|
||||
<button mat-raised-button *ngIf="!hasRequest || hasRequest && movieRequest && !movieRequest.denied" class="btn-spacing" color="warn" [disabled]>
|
||||
<i class="fas fa-check"></i>
|
||||
{{ 'Common.Requested' | translate }}
|
||||
</button>
|
||||
</ng-template>
|
||||
<ng-template #notRequestedBtn>
|
||||
<button mat-raised-button class="btn-spacing" color="primary" (click)="request()">
|
||||
<i *ngIf="movie.requestProcessing" class="fas fa-circle-notch fa-spin fa-fw"></i>
|
||||
<i *ngIf="!movie.requestProcessing && !movie.processed" class="fas fa-plus"></i>
|
||||
<i *ngIf="movie.processed && !movie.requestProcessing" class="fas fa-check"></i>
|
||||
{{'Common.Request' | translate }}
|
||||
</button>
|
||||
</ng-template>
|
||||
<div class="details-button-container">
|
||||
<div class="col-12 media-row">
|
||||
<span *ngIf="movie.available">
|
||||
<a *ngIf="movie.plexUrl" href="{{movie.plexUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn plex">
|
||||
{{'Search.ViewOnPlex' | translate}}
|
||||
<i class="far fa-play-circle fa-2x"></i>
|
||||
</a>
|
||||
<a *ngIf="movie.embyUrl" href="{{movie.embyUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn emby">
|
||||
{{'Search.ViewOnEmby' | translate}}
|
||||
<i class="far fa-play-circle fa-2x"></i>
|
||||
</a>
|
||||
<a *ngIf="movie.jellyfinUrl" href="{{movie.jellyfinUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn jellyfinUrl">
|
||||
{{'Search.ViewOnJellyfin' | translate}}
|
||||
<i class="far fa-play-circle fa-2x"></i>
|
||||
</a>
|
||||
</span>
|
||||
<span *ngIf="isAdmin && hasRequest">
|
||||
<button *ngIf="!movie.approved" (click)="approve()" mat-raised-button class="btn-spacing" color="accent">
|
||||
<i class="fas fa-plus"></i> {{ 'Common.Approve' | translate }}
|
||||
</button>
|
||||
<button *ngIf="!movie.available" (click)="markAvailable()" mat-raised-button class="btn-spacing"
|
||||
color="accent">
|
||||
<i class="fas fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available && !movie.plexUrl && !movie.embyUrl && !movie.jellyfinUrl"> {{
|
||||
'Common.Available' | translate }}</button>
|
||||
<span *ngIf="!movie.available">
|
||||
<span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
|
||||
<ng-template #requestedBtn>
|
||||
<button mat-raised-button *ngIf="!hasRequest || hasRequest && movieRequest && !movieRequest.denied" class="btn-spacing" color="warn" [disabled]>
|
||||
<i class="fas fa-check"></i>
|
||||
{{ 'Common.Requested' | translate }}
|
||||
</button>
|
||||
</ng-template>
|
||||
<ng-template #notRequestedBtn>
|
||||
<button mat-raised-button class="btn-spacing" color="primary" (click)="request()">
|
||||
<i *ngIf="movie.requestProcessing" class="fas fa-circle-notch fa-spin fa-fw"></i>
|
||||
<i *ngIf="!movie.requestProcessing && !movie.processed" class="fas fa-plus"></i>
|
||||
<i *ngIf="movie.processed && !movie.requestProcessing" class="fas fa-check"></i>
|
||||
{{'Common.Request' | translate }}
|
||||
</button>
|
||||
</ng-template>
|
||||
</span>
|
||||
<span *ngIf="isAdmin && hasRequest">
|
||||
<button *ngIf="!movie.approved" (click)="approve()" mat-raised-button class="btn-spacing" color="accent">
|
||||
<i class="fas fa-plus"></i> {{ 'Common.Approve' | translate }}
|
||||
</button>
|
||||
<button *ngIf="!movie.available" (click)="markAvailable()" mat-raised-button class="btn-spacing"
|
||||
color="accent">
|
||||
<i class="fas fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
|
||||
</button>
|
||||
|
||||
<button *ngIf="movieRequest && !movieRequest.denied && !movie.available" mat-raised-button class="btn-spacing" color="warn" (click)="deny()">
|
||||
<i class="fas fa-times"></i> {{'Requests.Deny' | translate }}
|
||||
</button>
|
||||
<button *ngIf="movieRequest && movieRequest.denied" [matTooltip]="movieRequest.deniedReason" mat-raised-button class="btn-spacing" color="warn">
|
||||
<i class="fas fa-times"></i> {{'MediaDetails.Denied' | translate }}
|
||||
</button>
|
||||
</span>
|
||||
<button *ngIf="movieRequest && !movieRequest.denied && !movie.available" mat-raised-button class="btn-spacing" color="warn" (click)="deny()">
|
||||
<i class="fas fa-times"></i> {{'Requests.Deny' | translate }}
|
||||
</button>
|
||||
<button *ngIf="movieRequest && movieRequest.denied" [matTooltip]="movieRequest.deniedReason" mat-raised-button class="btn-spacing" color="warn">
|
||||
<i class="fas fa-times"></i> {{'MediaDetails.Denied' | translate }}
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<button mat-raised-button class="btn-spacing" color="danger" (click)="issue()">
|
||||
<i class="fas fa-exclamation"></i> {{'Requests.ReportIssue' | translate }}
|
||||
</button>
|
||||
<button *ngIf="movie.belongsToCollection" [routerLink]="'/discover/collection/' + movie.belongsToCollection.id" mat-raised-button class="btn-spacing">
|
||||
<i class="fas fa-list"></i> {{'MediaDetails.ViewCollection' | translate}}
|
||||
</button>
|
||||
<button mat-raised-button class="btn-spacing" color="danger" (click)="issue()">
|
||||
<i class="fas fa-exclamation"></i> {{'Requests.ReportIssue' | translate }}
|
||||
</button>
|
||||
<button *ngIf="movie.belongsToCollection" [routerLink]="'/discover/collection/' + movie.belongsToCollection.id" mat-raised-button class="btn-spacing">
|
||||
<i class="fas fa-list"></i> {{'MediaDetails.ViewCollection' | translate}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -134,11 +137,16 @@
|
|||
|
||||
<div class="row" *ngIf="movie.videos?.results?.length > 0">
|
||||
<div class="col-12">
|
||||
<p-carousel class="no-indicator" [numVisible]="10" [numScroll]="10" [page]="0" [value]="movie.videos?.results">
|
||||
<ng-template let-result pTemplate="item">
|
||||
<iframe width="98%" height="100%" [src]="'https://www.youtube.com/embed/' + result.key | safe" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
</ng-template>
|
||||
</p-carousel>
|
||||
<mat-card class="mat-elevation-z8">
|
||||
<mat-card-header>Trailers</mat-card-header>
|
||||
<mat-card-content>
|
||||
<p-carousel class="no-indicator" [numVisible]="2" [numScroll]="10" [page]="0" [value]="movie.videos?.results">
|
||||
<ng-template let-result pTemplate="item">
|
||||
<iframe width="98%" height="315px" [src]="'https://www.youtube.com/embed/' + result.key | safe" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
</ng-template>
|
||||
</p-carousel>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<i matTooltip="Instagram" class="fab fa-instagram fa-2x grow-social"></i>
|
||||
</a>
|
||||
<!-- Setting/Configuration admin area -->
|
||||
<button *ngIf="isAdmin" mat-icon-button [matMenuTriggerFor]="menu">
|
||||
<button *ngIf="isAdmin" mat-icon-button [matMenuTriggerFor]="menu" class="admin-cog">
|
||||
<i class="fas fa-cog fa-2x "></i>
|
||||
</button>
|
||||
<mat-menu #menu="matMenu">
|
||||
|
|
|
|||
|
|
@ -4,3 +4,7 @@ a.media-icons:hover{
|
|||
color:$ombi-active;
|
||||
}
|
||||
|
||||
button.admin-cog{
|
||||
margin-left:40px;
|
||||
color:$ombi-active;
|
||||
}
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
|
||||
<section id="summary-wrapper">
|
||||
<div class="full-screenshot enabled" [style.background-image]="background"></div>
|
||||
<div class="shadow-base" [ngClass]="available ? 'available-bottom-border' : ''"></div>
|
||||
<div class="full-screenshot enabled overlay"></div>
|
||||
<!--<div class="shadow-base" [ngClass]="available ? 'available-bottom-border' : ''"></div>-->
|
||||
|
||||
<div class="container summary">
|
||||
<div class="container title-top-banner">
|
||||
|
|
|
|||
|
|
@ -14,12 +14,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
#summary-wrapper {
|
||||
height: 350px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#summary-wrapper .full-screenshot,
|
||||
.summary-wrapper .full-screenshot,
|
||||
#watching-wrapper .full-screenshot,
|
||||
|
|
@ -43,7 +37,7 @@
|
|||
background-size: cover;
|
||||
background-position: 50% 10%;
|
||||
transition: all .5s;
|
||||
height: 300px;
|
||||
height: 600px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -85,7 +79,7 @@
|
|||
#summary-wrapper .summary .container,
|
||||
.summary-wrapper .summary .container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
bottom: 300px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
|
@ -176,7 +170,8 @@
|
|||
}
|
||||
|
||||
.media-row {
|
||||
padding-top: 2%;
|
||||
padding-top: 56px;
|
||||
padding-left: 26px;
|
||||
}
|
||||
|
||||
.cast-profile-img {
|
||||
|
|
@ -259,3 +254,23 @@
|
|||
::ng-deep .p-carousel-indicators {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
#info-wrapper{
|
||||
margin-top:-200px;
|
||||
}
|
||||
.full-screenshot.enabled.overlay{
|
||||
background-image: linear-gradient(to bottom, transparent, 50%, $ombi-background-primary);
|
||||
}
|
||||
|
||||
.row.justify-content-center.justify-content-sm-start.header-container{
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.details-button-container{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.info-wrapper .row{
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
|
@ -37,6 +37,7 @@
|
|||
|
||||
.mat-flat-button.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent{
|
||||
color: $ombi-active-text;
|
||||
background-color: $ombi-active;
|
||||
}
|
||||
|
||||
.mat-menu-panel{
|
||||
|
|
@ -136,3 +137,7 @@
|
|||
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
|
||||
background-color: $ombi-active;
|
||||
}
|
||||
|
||||
.mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab{
|
||||
background-color: $ombi-active;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue