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="row">
<div class="col-12 col-md-2"> <div class="col-12 col-md-2">
<mat-card class="mat-elevation-z8"> <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> <movie-information-panel [movie]="movie" [request]="movieRequest" [advancedOptions]="showAdvanced"></movie-information-panel>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>

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

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

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

@ -143,11 +143,11 @@
} }
.btn-spacing { .btn-spacing {
margin-right: 10px !important; margin-right: 10px;
} }
.spacing-below { .spacing-below {
margin-bottom: 15px !important; margin-bottom: 15px;
} }
.left-seperator { .left-seperator {
@ -170,8 +170,9 @@
} }
.media-row { .media-row {
padding-top: 56px; position:absolute;
padding-left: 26px; bottom:0;
margin-bottom:20px;
} }
.cast-profile-img { .cast-profile-img {
@ -239,16 +240,16 @@
} }
.viewon-btn.plex { .viewon-btn.plex {
border: 1px solid #E5A00D;
color: #E5A00D; color: #E5A00D;
box-shadow: inset 0px 0px 0px 1px #e5a00d;
} }
.viewon-btn.emby { .viewon-btn.emby {
border: 1px solid #52b54a;
color: #52b54a; color: #52b54a;
box-shadow: inset 0px 0px 0px 1px #52b54a;
} }
.viewon-btn.jellyfin { .viewon-btn.jellyfin {
border: 1px solid #00a4dc;
color: #00a4dc; color: #00a4dc;
box-shadow: inset 0px 0px 0px 1px #00a4dc;
} }
::ng-deep .p-carousel-indicators { ::ng-deep .p-carousel-indicators {
@ -269,8 +270,73 @@
.details-button-container{ .details-button-container{
width:100%; width:100%;
position:relative;
} }
.info-wrapper .row{ .info-wrapper .row{
flex-wrap:wrap; 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{ .mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab{
background-color: $ombi-active; background-color: $ombi-active;
} }
hr{
border-top: 1px solid $ombi-background-primary;
}