mirror of https://github.com/Ombi-app/Ombi
tidusjar
6 years ago
parent
1757b1c88d
commit
2702747549
@ -1,17 +1,20 @@
|
||||
<mat-card>
|
||||
<div class="card-spacing" *ngIf="result">
|
||||
<mat-card class="mat-elevation-z8">
|
||||
|
||||
<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}}">
|
||||
</a>
|
||||
<mat-card-content>
|
||||
<div class="rating">{{result.rating | number:'1.0-1'}}</div>
|
||||
<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}}">
|
||||
</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>
|
||||
</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 color="accent">Available</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<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>
|
||||
</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>
|
||||
</mat-card>
|
||||
</div>
|
||||
@ -1,3 +1,12 @@
|
||||
.card-poster {
|
||||
max-height: 225px;
|
||||
}
|
||||
|
||||
.card-spacing {
|
||||
margin-top:10%;
|
||||
}
|
||||
|
||||
.rating {
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -1,5 +1,7 @@
|
||||
<div *ngIf="discoverResults" class="row" >
|
||||
<div class="col-lg-2 col-md-4 col-6" *ngFor="let result of discoverResults" [@slideIn]>
|
||||
<discover-card [result]="result"></discover-card>
|
||||
<div class="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]>
|
||||
<discover-card [result]="result"></discover-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,3 @@
|
||||
.full-height {
|
||||
height:100%;
|
||||
}
|
||||
@ -1,12 +1,102 @@
|
||||
<div *ngIf="movie">
|
||||
<div>
|
||||
<img src="{{movie.background}}" class="banner" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div>
|
||||
{{movie.title}}
|
||||
|
||||
|
||||
<section id="summary-wrapper">
|
||||
<div class="full-screenshot enabled" [style.background-image]="movie.background"></div>
|
||||
<div class="shadow-base"></div>
|
||||
|
||||
<div class="container summary">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 offset-lg-2 col-md-8 offset-md-4 col-sm-7 offset-sm-5 col-6 offset-6">
|
||||
<h1>{{movie.title}} <span *ngIf="movie.releaseDate" class="year align-middle">({{movie.releaseDate
|
||||
| date:'yyyy'}})</span>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="info-wrapper">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-2 col-sm-3 hidden-xs">
|
||||
<div class="sidebar affixable affix-top" style="width: 173px;">
|
||||
<div class="poster">
|
||||
<img class="real" src="https://image.tmdb.org/t/p/w300/{{movie.posterPath}}" alt="Poster"
|
||||
style="display: block;">
|
||||
</div>
|
||||
<!--Underneith poster-->
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Next to poster-->
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3 ">
|
||||
|
||||
<mat-card class="card-full mat-elevation-z8">
|
||||
<mat-card-content>
|
||||
<div>
|
||||
<small><strong>Theatrical Release:</strong> {{movie.releaseDate | date: 'mediumDate'}}</small></div>
|
||||
<div>
|
||||
<small *ngIf="movie.digitalReleaseDate"><strong>Digital Release:</strong>
|
||||
{{movie.digitalReleaseDate | date:
|
||||
'mediumDate'}}</small>
|
||||
</div>
|
||||
<div>
|
||||
<small *ngIf="movie.voteAverage"><strong>User Score:</strong> {{movie.voteAverage |
|
||||
number:'1.0-1'}}/10</small>
|
||||
</div>
|
||||
<div>
|
||||
<small *ngIf="movie.voteCount"><strong>Votes:</strong> {{movie.voteCount |
|
||||
thousandShort: 1}}</small>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<mat-card class="card-full mat-elevation-z8">
|
||||
<mat-card-content>
|
||||
{{movie.overview}}
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="col-md-2 card-full">
|
||||
<div><button mat-raised-button class="btn-spacing" color="accent">Request</button></div>
|
||||
<div><button mat-raised-button class="btn-green btn-spacing">Available</button></div>
|
||||
<div><button mat-raised-button class="btn-spacing" color="warn">Deny</button></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row card-spacer">
|
||||
<div class="col-md-2">
|
||||
<div>
|
||||
<a *ngIf="movie.homepage" class="btn-spacing" href="{{movie.homepage}}" target="_blank" mat-raised-button color="accent">Home Page</a>
|
||||
<a *ngIf="movie.theMovieDbId" href="https://www.themoviedb.org/movie/{{movie.theMovieDbId}}" target="_blank" mat-raised-button class="btn-blue btn-spacing">The Movie DB</a>
|
||||
<a *ngIf="movie.imdbId" href="https://www.imdb.com/title/tt1727824/{{movie.imdbId}}" target="_blank" mat-raised-button class="imdb-color btn-spacing">IMDb</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
@ -1,7 +1,150 @@
|
||||
.banner {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
width: 100%;
|
||||
//MINE
|
||||
@media (max-width: 570px) {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Change
|
||||
|
||||
|
||||
#summary-wrapper .full-screenshot,
|
||||
.summary-wrapper .full-screenshot,
|
||||
#watching-wrapper .full-screenshot,
|
||||
.hero-wrapper .full-screenshot,
|
||||
#statics-top-wrapper .full-screenshot {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-position: 50% 10%;
|
||||
opacity: 0;
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
#summary-wrapper,
|
||||
.summary-wrapper {
|
||||
background-color: #000;
|
||||
background-size: cover;
|
||||
background-position: 50% 10%;
|
||||
transition: all .5s;
|
||||
height: 550px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
#summary-wrapper .full-screenshot.enabled,
|
||||
.summary-wrapper .full-screenshot.enabled,
|
||||
#watching-wrapper .full-screenshot.enabled,
|
||||
.hero-wrapper .full-screenshot.enabled,
|
||||
#statics-top-wrapper .full-screenshot.enabled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#summary-wrapper .shadow-base,
|
||||
.summary-wrapper .shadow-base {
|
||||
height: 120px;
|
||||
bottom: 0;
|
||||
background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
|
||||
background-image: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
|
||||
background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.shadow-base {
|
||||
height: 75px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
|
||||
background-image: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
|
||||
background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#4D000000', GradientType=0);
|
||||
}
|
||||
|
||||
#summary-wrapper .summary .container,
|
||||
.summary-wrapper .summary .container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#summary-wrapper,
|
||||
.summary-wrapper {
|
||||
background-color: #000;
|
||||
background-size: cover;
|
||||
background-position: 50% 10%;
|
||||
transition: all .5s;
|
||||
height: 550px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#summary-wrapper .summary .container h1 .year,
|
||||
.summary-wrapper .summary .container h1 .year {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#summary-wrapper .summary .container h1,
|
||||
.summary-wrapper .summary .container h1 {
|
||||
margin: 0;
|
||||
text-shadow: 0 0 20px #000;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
#info-wrapper {
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
#info-wrapper .sidebar.affixable.affix-top {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
#info-wrapper .sidebar {
|
||||
margin-top: -180px;
|
||||
}
|
||||
|
||||
#info-wrapper .sidebar .poster {
|
||||
border: solid 3px #fff !important;
|
||||
position: relative;
|
||||
-webkit-box-shadow: 0 0 20px 0 #666;
|
||||
box-shadow: 0 0 20px 0 #666;
|
||||
}
|
||||
|
||||
#info-wrapper .sidebar .poster img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#info-wrapper .sidebar .poster .real {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.card-spacer {
|
||||
padding-top:1%;
|
||||
}
|
||||
|
||||
.card-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.imdb-color {
|
||||
color:black;
|
||||
background-color: #f5de50;
|
||||
}
|
||||
|
||||
.btn-spacing {
|
||||
margin-top:10px;
|
||||
}
|
||||
Loading…
Reference in new issue