github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-07-15 09:42:56 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Made some changes to the cast list from reddit feedback

Browse source
This commit is contained in:
Jamie Rees 2020-06-20 22:23:10 +01:00
parent b1b48c106a
commit ba0962e018
5 changed files with 54 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html
View file

@ -1,10 +1,10 @@
<mat-card class="mat-elevation-z8 spacing-below">
<mat-card-header>{{'MediaDetails.Casts.CastTitle' | translate}}</mat-card-header>
<mat-card-content>
<p-carousel [value]="cast" [numVisible]="5" easing="easeOutStrong">
<p-carousel [value]="cast" easing="easeOutStrong" [responsiveOptions]="responsiveOptions" [circular]="true" [numVisible]="5" >
<ng-template let-item pTemplate="item">
<div class="row justify-content-md-center mat-card mat-card-flat col-12 carousel-item">
<div class="col-12 bottom-space">
<div class="row justify-content-md-center mat-card mat-card-flat carousel-item">
<div class="bottom-space">
<a *ngIf="item.profile_path" [routerLink]="'/discover/actor/' + item.id">
<img class="cast-profile-img" src="https://image.tmdb.org/t/p/w300/{{item.profile_path}}">
</a>
@ -15,13 +15,14 @@
</div>
<div class="col-12">
<span *ngIf="!item.character?.name"><strong>{{'MediaDetails.Casts.Character' | translate}}:</strong> {{item.character}}</span>
<span *ngIf="item.character.name"><strong>{{'MediaDetails.Casts.Character' | translate}}:</strong> {{item.character.name}}</span>
<span *ngIf="item.name"><strong>{{item.name}}</strong></span>
<span *ngIf="item.person?.name"><strong>{{item.person.name}}</strong></span>
</div>
<div class="col-12">
<span *ngIf="item.name"><strong>{{'MediaDetails.Casts.Actor' | translate}}:</strong> {{item.name}}</span>
<span *ngIf="item.person?.name"><strong>{{'MediaDetails.Casts.Actor' | translate}}:</strong> {{item.person.name}}</span>
<span *ngIf="!item.character?.name"><small>{{item.character}}</small></span>
<span *ngIf="item.character.name"><small>{{item.character.name}}</small></span>
</div>
</div>
</ng-template>
</p-carousel>

19
src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.scss
View file

@ -62,3 +62,22 @@ body .ui-carousel .ui-carousel-content .ui-carousel-next:not(.ui-state-disabled)
.bottom-space {
padding-bottom: 10px;
}
@media (min-width: 979px) {
.cast-profile-img {
border-radius: 100%;
width: 200px;
max-height: 200px;
object-fit: cover;
}
}
@media (max-width: 978px) {
.cast-profile-img {
border-radius: 100%;
width: 100px;
max-height: 100px;
object-fit: cover;
}
}

23
src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.ts
View file

@ -7,5 +7,26 @@ import { Component, Input } from "@angular/core";
})
export class CastCarouselComponent {
@Input() cast: any[];
constructor() {
this.responsiveOptions = [
{
breakpoint: '1024px',
numVisible: 5,
numScroll: 5
},
{
breakpoint: '768px',
numVisible: 3,
numScroll: 3
},
{
breakpoint: '560px',
numVisible: 1,
numScroll: 1
}
];
}
@Input() cast: any[];
public responsiveOptions: any[];
}

5
src/Ombi/ClientApp/src/app/media-details/media-details.component.scss
View file

@ -194,10 +194,13 @@
}
.cast-profile-img {
border-radius: 10%;
border-radius: 100%;
width: 170px;
}
.small-middle-container {
margin: auto;
width: 95%;

4
src/Ombi/wwwroot/translations/en.json
View file

@ -249,9 +249,7 @@
"Budget":"Budget",
"Keywords":"Keywords/Tags",
"Casts": {
"CastTitle": "Cast",
"Character": "Character",
"Actor": "Actor"
"CastTitle": "Cast"
},
"EpisodeSelector": {
"AllSeasonsTooltip": "This will request every season for this show",