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

Some changes on the Movie Details page (including optimisation for Mobile)

Browse source
This commit is contained in:
twanariens 2021-02-05 17:31:15 +01:00
parent 6b38d6e339
commit 162a1fda1a
4 changed files with 114 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
View file

@ -103,7 +103,7 @@
<div class="row">
<div class="col-12 col-md-2">
<mat-card class="mat-elevation-z8">
<mat-card-content class="medium-font">
<mat-card-content>
<movie-information-panel [movie]="movie" [request]="movieRequest" [advancedOptions]="showAdvanced"></movie-information-panel>
</mat-card-content>
</mat-card>

42
src/Ombi/ClientApp/src/app/media-details/components/movie/panels/movie-information-panel.component.html
View file

@ -1,4 +1,5 @@
<div *ngIf="movie">
<div *ngIf="movie" class="left-panel-details">
<div class="rating medium-font">
<span *ngIf="movie.voteAverage"
matTooltip="{{'MediaDetails.Votes' | translate }} {{movie.voteCount | thousandShort: 1}}">
<img class="rating-small" src="{{baseUrl}}/images/tmdb-logo.svg"> {{movie.voteAverage | number:'1.0-1'}}/10
@ -13,9 +14,10 @@
src="{{baseUrl}}/images/{{ratings.audience_rating === 'Upright' ? 'rotten-audience-fresh.svg' : 'rotten-audience-rotten.svg'}}">
{{ratings.audience_score}}%
</span>
<div *ngIf="streams?.length > 0">
</div>
<div *ngIf="streams?.length > 0" class="streaming-on">
<hr>
<strong>{{'MediaDetails.StreamingOn' | translate }}:</strong>
<span class="label">{{'MediaDetails.StreamingOn' | translate }}:</span>
<div>
<span *ngFor="let stream of streams">
<img class="stream-small" [matTooltip]="stream.streamingProvider" src="https://image.tmdb.org/t/p/original{{stream.logo}}">
@ -24,18 +26,16 @@
</div>
<hr>
<div>
<strong>{{'MediaDetails.Status' | translate }}:</strong>
<span class="label">{{'MediaDetails.Status' | translate }}:</span>
{{movie.status}}
</div>
<div>
<strong>{{'MediaDetails.Availability' | translate }}:</strong>
<span class="label">{{'MediaDetails.Availability' | translate }}:</span>
<span *ngIf="movie.available"> {{'Common.Available' | translate}}</span>
<span *ngIf="!movie.available"> {{'Common.NotAvailable' | translate}}</span>
</div>
<div *ngIf="!movie.available">
<strong>{{'MediaDetails.RequestStatus' | translate }}</strong>
<span class="label">{{'MediaDetails.RequestStatus' | translate }}</span>
<div *ngIf="movie.approved && !movie.available">{{'Common.ProcessingRequest' | translate}}</div>
<div *ngIf="movie.requested && !movie.approved && !movie.available">{{'Common.PendingApproval' | translate}}
</div>
@ -44,27 +44,27 @@
</div>
<div *ngIf="request">
<strong>{{'Requests.RequestedBy' | translate }}:</strong>
<span class="label">{{'Requests.RequestedBy' | translate }}:</span>
{{request.requestedUser.userAlias}}
</div>
<div *ngIf="request">
<strong>{{'Requests.RequestDate' | translate }}:</strong>
<span class="label">{{'Requests.RequestDate' | translate }}:</span>
{{request.requestedDate | date}}
</div>
<div *ngIf="movie.quality">
<strong>{{'MediaDetails.Quality' | translate }}:</strong>
<span class="label">{{'MediaDetails.Quality' | translate }}:</span>
<div>{{movie.quality | quality}}</div>
</div>
<div *ngIf="advancedOptions && request && request.rootPathOverrideTitle">
<strong>{{'MediaDetails.RootFolderOverride' | translate }}</strong>
<span class="label">{{'MediaDetails.RootFolderOverride' | translate }}</span>
<div>{{request.rootPathOverrideTitle}}</div>
</div>
<div *ngIf="advancedOptions && request && request.qualityOverrideTitle">
<strong>{{'MediaDetails.QualityOverride' | translate }}</strong>
<span class="label">{{'MediaDetails.QualityOverride' | translate }}</span>
<div>{{request.qualityOverrideTitle}}</div>
</div>
@ -72,34 +72,34 @@
<hr>
<strong>{{'MediaDetails.TheatricalRelease' | translate }}:</strong>
<span class="label">{{'MediaDetails.TheatricalRelease' | translate }}:</span>
{{movie.releaseDate | date: 'mediumDate'}}
<div *ngIf="movie.digitalReleaseDate">
<strong>{{'MediaDetails.DigitalRelease' | translate }}:</strong>
<span class="label">{{'MediaDetails.DigitalRelease' | translate }}:</span>
{{movie.digitalReleaseDate | date: 'mediumDate'}}
</div>
<div *ngIf="movie.voteCount">
<strong>{{'MediaDetails.Votes' | translate }}:</strong>
<span class="label">{{'MediaDetails.Votes' | translate }}:</span>
{{movie.voteCount | thousandShort: 1}}
</div>
<div>
<strong>{{'MediaDetails.Runtime' | translate }}:</strong>
<span class="label">{{'MediaDetails.Runtime' | translate }}:</span>
{{'MediaDetails.Minutes' | translate:{runtime: movie.runtime} }}
</div>
<div *ngIf="movie.revenue">
<strong>{{'MediaDetails.Revenue' | translate }}:</strong>
<span class="label">{{'MediaDetails.Revenue' | translate }}:</span>
{{movie.revenue | currency: 'USD'}}
</div>
<div *ngIf="movie.budget">
<strong>{{'MediaDetails.Budget' | translate }}:</strong>
<span class="label">{{'MediaDetails.Budget' | translate }}:</span>
{{movie.budget | currency: 'USD'}}
</div>
<hr />
<div class="genre-button-container" *ngIf="movie.genres">
<strong>{{'MediaDetails.Genres' | translate }}:</strong>
<span class="label">{{'MediaDetails.Genres' | translate }}:</span>
<div>
<mat-chip-list>
<mat-chip selected *ngFor="let genre of movie.genres">
@ -111,7 +111,7 @@
<hr />
<div class="keyword-button-container" *ngIf="movie?.keywords?.keywordsValue?.length > 0">
<strong>{{'MediaDetails.Keywords' | translate }}:</strong>
<span class="label">{{'MediaDetails.Keywords' | translate }}:</span>
<mat-chip-list>
<mat-chip selected *ngFor="let keyword of movie.keywords.keywordsValue">
{{keyword.name}}

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

@ -143,11 +143,11 @@
}
.btn-spacing {
margin-right: 10px !important;
margin-right: 10px;
}
.spacing-below {
margin-bottom: 15px !important;
margin-bottom: 15px;
}
.left-seperator {
@ -170,8 +170,9 @@
}
.media-row {
padding-top: 56px;
padding-left: 26px;
position:absolute;
bottom:0;
margin-bottom:20px;
}
.cast-profile-img {
@ -239,16 +240,16 @@
}
.viewon-btn.plex {
border: 1px solid #E5A00D;
color: #E5A00D;
box-shadow: inset 0px 0px 0px 1px #e5a00d;
}
.viewon-btn.emby {
border: 1px solid #52b54a;
color: #52b54a;
box-shadow: inset 0px 0px 0px 1px #52b54a;
}
.viewon-btn.jellyfin {
border: 1px solid #00a4dc;
color: #00a4dc;
box-shadow: inset 0px 0px 0px 1px #00a4dc;
}
::ng-deep .p-carousel-indicators {
@ -269,8 +270,73 @@
.details-button-container{
width:100%;
position:relative;
}
.info-wrapper .row{
flex-wrap:wrap;
}
.rating{
display:flex;
justify-content: space-evenly;
width:100%;
flex-wrap: wrap;
}
.left-panel-details .label{
font-weight:500;
}
.left-panel-details{
font-weight:100;
}
.genre-button-container .mat-chip-list .mat-chip-list-wrapper{
margin-top:3px;
margin:0;
margin-left: -6px;
}
.keyword-button-container .mat-chip-list .mat-chip-list-wrapper{
margin-top:3px;
margin:0;
margin-left: -6px;
}
.mat-card-header{
font-size: 20px;
padding-top: 10px;
padding-bottom:10px;
}
.media-row .mat-raised-button{
padding:2px 1.5em;;
width:170px;
margin-top:10px;
}
@media (max-width:500px){
.row.justify-content-center.justify-content-sm-start.header-container{
flex-wrap:wrap;
}
.media-row{
position:relative;
justify-content: center;
display: flex;
flex-wrap: wrap;
}
.media-row .mat-raised-button{
width:100%;
}
.media-row .btn-spacing{
margin-right:0;
}
.media-row span{
width:100%;
}
}

4
src/Ombi/ClientApp/src/styles/Styles.scss
View file

@ -141,3 +141,7 @@
.mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab{
background-color: $ombi-active;
}
hr{
border-top: 1px solid $ombi-background-primary;
}