mirror of https://github.com/Ombi-app/Ombi
feat: add crew on movie page (#4722)
* add crew on movie page * order by director, add default image and fix click Co-authored-by: tidusjar <tidusjar@gmail.com>fix-stats-controller
Hadrien
2 years ago
committed by
GitHub
parent
2f5d54c5bf
commit
1d53261382
@ -0,0 +1,32 @@
|
||||
<mat-card class="mat-elevation-z8 spacing-below">
|
||||
<mat-card-header>{{'MediaDetails.Crews.CrewTitle' | translate}}</mat-card-header>
|
||||
<mat-card-content>
|
||||
<p-carousel [value]="crew" easing="easeOutStrong" [responsiveOptions]="responsiveOptions" [numVisible]="5" >
|
||||
<ng-template let-item pTemplate="item">
|
||||
<div class="row justify-content-md-center mat-card mat-card-flat carousel-item">
|
||||
<div [routerLink]="'/discover/actor/' + item.id" class="bottom-space link">
|
||||
<a *ngIf="item.image">
|
||||
<img class="crew-profile-img" src="https://image.tmdb.org/t/p/w300{{item.image}}">
|
||||
</a>
|
||||
<a *ngIf="item.profile_path">
|
||||
<img class="crew-profile-img" src="https://image.tmdb.org/t/p/w300{{item.profile_path}}">
|
||||
</a>
|
||||
<i *ngIf="!item.image && !item.profile_path" class="fa-solid fa-user-large fa-2xl crew-profile-img" aria-hidden="true"></i>
|
||||
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<span *ngIf="item.name"><strong>{{item.name}}</strong></span>
|
||||
<span *ngIf="item.person"><strong>{{item.person}}</strong></span>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<span *ngIf="item.job"><small>{{item.job}}</small></span>
|
||||
<span *ngIf="item.department"><small>{{item.position}}</small></span>
|
||||
<span *ngIf="item.title"><small>{{item.title}}</small></span>
|
||||
<span *ngIf="item.overview"><small>{{item.overview}}</small></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-carousel>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@ -0,0 +1,87 @@
|
||||
@import "~@angular/material/theming";
|
||||
@import "~styles/variables.scss";
|
||||
::ng-deep body .ui-carousel .ui-carousel-content .ui-carousel-prev,
|
||||
body .ui-carousel .ui-carousel-content .ui-carousel-next {
|
||||
background-color: #ffffff;
|
||||
border: solid 1px rgba(178, 193, 205, 0.64);
|
||||
-moz-border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
margin: 0.2em;
|
||||
color: #333333;
|
||||
-moz-transition: color 0.2s;
|
||||
-o-transition: color 0.2s;
|
||||
-webkit-transition: color 0.2s;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
::ng-deep body .ui-carousel .ui-carousel-content .ui-carousel-prev:not(.ui-state-disabled):hover,
|
||||
body .ui-carousel .ui-carousel-content .ui-carousel-next:not(.ui-state-disabled):hover {
|
||||
background-color: #ffffff;
|
||||
color: #000;
|
||||
border-color: solid 1px rgba(178, 193, 205, 0.64);
|
||||
}
|
||||
|
||||
::ng-deep body .ui-carousel .ui-carousel-dots-container .ui-carousel-dot-item>.ui-button {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::ng-deep body .ui-carousel .ui-carousel-dots-container .ui-carousel-dot-item .ui-carousel-dot-icon {
|
||||
width: 20px;
|
||||
height: 6px;
|
||||
background-color: rgba(255, 255, 255, 0.44);
|
||||
margin: 0 0.2em;
|
||||
}
|
||||
|
||||
::ng-deep body .ui-carousel .ui-carousel-dots-container .ui-carousel-dot-item .ui-carousel-dot-icon::before {
|
||||
content: " ";
|
||||
}
|
||||
|
||||
::ng-deep body .ui-carousel .ui-carousel-dots-container .ui-carousel-dot-item.ui-state-highlight .ui-carousel-dot-icon {
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
::ng-deep .ui-carousel-next {
|
||||
background-color: #ffffff;
|
||||
border: solid 1px rgba(178, 193, 205, 0.64);
|
||||
border-radius: 50%;
|
||||
margin: 0.2em;
|
||||
color: #333333;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
::ng-deep .ui-carousel-content button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.bottom-space {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 979px) {
|
||||
|
||||
.crew-profile-img {
|
||||
border-radius: 100%;
|
||||
width: 200px;
|
||||
max-height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
@media (max-width: 978px) {
|
||||
|
||||
.crew-profile-img {
|
||||
border-radius: 100%;
|
||||
width: 100px;
|
||||
max-height: 100px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
import { Component, Input } from "@angular/core";
|
||||
|
||||
@Component({
|
||||
selector: "crew-carousel",
|
||||
templateUrl: "./crew-carousel.component.html",
|
||||
styleUrls: ["./crew-carousel.component.scss"]
|
||||
})
|
||||
export class CrewCarouselComponent {
|
||||
|
||||
constructor() {
|
||||
this.responsiveOptions = [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 5,
|
||||
numScroll: 5
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 3,
|
||||
numScroll: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
@Input() crew: any[];
|
||||
public responsiveOptions: any[];
|
||||
}
|
||||
Loading…
Reference in new issue