github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-19 12:59:39 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

css credits to iCare

Browse source
This commit is contained in:
Jamie Rees 2020-05-19 21:52:26 +01:00
commit 45c091238d
2 changed files with 87 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -1,7 +1,64 @@
@import "~@angular/material/theming"; @import "~@angular/material/theming";
@import "~styles/variables.scss"; @import "~styles/variables.scss";
.actor-background { ::ng-deep body .ui-carousel .ui-carousel-content .ui-carousel-prev,
.dark & { body .ui-carousel .ui-carousel-content .ui-carousel-next {
background: $backgroundTint-dark; 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;
}