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

css credits to iCare

Browse Source
pull/3554/head
Jamie Rees 5 years ago
parent 341245067f
commit 45c091238d
2 changed files with 87 additions and 30 deletions
Show Stats Download Patch File Download Diff File

50
src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html
Unescape View File

@ -1,29 +1,29 @@
<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">
<ng-template let-item pTemplate="item">
<div class="row justify-content-md-center mat-card mat-card-flat">
<div class="col-12">
<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>
<a *ngIf="item.character?.image?.medium" [routerLink]="'/discover/actor/' + item.person.id">
<img class="cast-profile-img" [src]="item.character.image.medium">
</a>
<!-- TODO get profile image default -->
</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>
</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>
</div>
</div>
</ng-template>
</p-carousel>
<p-carousel [value]="cast" [numVisible]="5" easing="easeOutStrong">
<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">
<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>
<a *ngIf="item.character?.image?.medium" [routerLink]="'/discover/actor/' + item.person.id">
<img class="cast-profile-img" [src]="item.character.image.medium">
</a>
<!-- TODO get profile image default -->
</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>
</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>
</div>
</div>
</ng-template>
</p-carousel>
</mat-card-content>
</mat-card>
</mat-card>

67
src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.scss
Unescape View File

@ -1,7 +1,64 @@
@import "~@angular/material/theming";
@import "~styles/variables.scss";
.actor-background {
.dark & {
background: $backgroundTint-dark;
}
}
::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;
}
Write Preview
Loading…
Cancel
Save