mirror of https://github.com/Ombi-app/Ombi
TidusJar
6 years ago
parent
2702747549
commit
c32835dc1b
@ -1,20 +1,19 @@
|
||||
<div class="card-spacing" *ngIf="result">
|
||||
<mat-card class="mat-elevation-z8">
|
||||
|
||||
<div class="rating">{{result.rating | number:'1.0-1'}}</div>
|
||||
<mat-card class="mat-elevation-z8 dark-card grow">
|
||||
<a [routerLink]="result.type === RequestType.movie ? '/details/movie/' + result.id : '/details/tv/' + result.id">
|
||||
<img mat-card-image src="{{result.posterPath}}" class="card-poster" alt="{{result.title}}">
|
||||
<img id="cardImage" mat-card-image src="{{result.posterPath}}" class="card-poster" [ngClass]="(result.type === RequestType.movie)?'movie-image':'tv-image'" alt="{{result.title}}">
|
||||
</a>
|
||||
<mat-card-content>
|
||||
|
||||
<h5 *ngIf="result.title.length <= 10">{{result.title}}</h5>
|
||||
<h6 *ngIf="result.title.length > 10 && result.title.length <= 13">{{result.title}}</h6>
|
||||
<h6 *ngIf="result.title.length > 13" matTooltip="{{result.title}}">{{result.title | truncate:13}}</h6>
|
||||
<small>{{result.overview | truncate: 25}}</small>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button *ngIf="!result.requested && !result.available" mat-raised-button color="primary">Request</button>
|
||||
<button *ngIf="result.requested && !result.available" mat-raised-button color="warn">Requested</button>
|
||||
<button *ngIf="!result.requested && result.available" mat-raised-button class="btn-green">Available</button>
|
||||
<mat-card-actions class="expand">
|
||||
<button mat-icon-button>
|
||||
<mat-icon>expand_more</mat-icon>
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
@ -1,12 +1,41 @@
|
||||
.card-poster {
|
||||
max-height: 225px;
|
||||
$ombi-primary:#3f3f3f;
|
||||
#cardImage {
|
||||
max-height: 153px;
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
}
|
||||
|
||||
.dark-card {
|
||||
background-color: $ombi-primary;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card-spacing {
|
||||
margin-top:10%;
|
||||
margin-top: 10%;
|
||||
}
|
||||
|
||||
.rating {
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
$border-width: 2px;
|
||||
.movie-image {
|
||||
border-bottom: $border-width orange solid;
|
||||
}
|
||||
|
||||
.tv-image {
|
||||
border-bottom: $border-width teal solid;
|
||||
}
|
||||
|
||||
.expand {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.grow {
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
|
||||
.grow:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
<div class="container">
|
||||
<div class="small-middle-container">
|
||||
<div *ngIf="discoverResults" class="row top-spacing full-height">
|
||||
<div class="col-lg-2 col-md-4 col-6" *ngFor="let result of discoverResults" [@slideIn]>
|
||||
<div class="col-lg-1 col-md-4 col-6" *ngFor="let result of discoverResults" [@slideIn]>
|
||||
<discover-card [result]="result"></discover-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
.full-height {
|
||||
height:100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.small-middle-container{
|
||||
margin: auto;
|
||||
width: 95%;
|
||||
}
|
||||
Loading…
Reference in new issue