open-source-mirrors
/
Ombi
mirror of https://github.com/Ombi-app/Ombi
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4003 from Ombi-app/develop-test

Browse Source 
More UI fixes
pull/4016/head v4.0.1032
Jamie 4 years ago committed by GitHub
parent 216c59dfc1 f0853e9647
commit 85ffac91ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 510 additions and 375 deletions
Show Stats Download Patch File Download Diff File

2
.azuredevops/pipelines/templates/variables.yml
Unescape View File

@ -27,4 +27,4 @@ variables:
value: "4.0.$(Build.BuildId)"
- name: isMain
value: $[or(contains(variables['Build.SourceBranch'], 'develop'), contains(variables['Build.SourceBranch'], 'main'))]
value: $[or(eq(variables['Build.SourceBranch'], 'refs/heads/develop'), eq(variables['Build.SourceBranch'], 'refs/heads/main'))]

23
src/Ombi.Core/Engine/TvSearchEngine.cs
Unescape View File

@ -59,7 +59,12 @@ namespace Ombi.Core.Engine
{
continue;
}
retVal.Add(await ProcessResult(tvMazeSearch, false));
var mappedResult = await ProcessResult(tvMazeSearch, false);
if (mappedResult == null)
{
continue;
}
retVal.Add(mappedResult);
}
return retVal;
}
@ -194,7 +199,7 @@ namespace Ombi.Core.Engine
foreach (var tvMazeSearch in items)
{
var result = await ProcessResult(tvMazeSearch, includeImages);
if(settings.HideAvailableFromDiscover && result.Available)
if (result == null || settings.HideAvailableFromDiscover && result.Available)
{
continue;
}
@ -211,15 +216,17 @@ namespace Ombi.Core.Engine
private async Task<SearchTvShowViewModel> ProcessResult(SearchTvShowViewModel item, bool includeImages)
{
if (item.Id == 0)
{
return null;
}
item.TheTvDbId = item.Id.ToString();
if (includeImages)
{
if (item.TheTvDbId.HasValue())
{
item.BackdropPath = await _imageService.GetTvBackground(item.TheTvDbId);
}
if (item.TheTvDbId.HasValue())
{
item.BackdropPath = await _imageService.GetTvBackground(item.TheTvDbId);
}
}
await RunSearchRules(item);

6
src/Ombi.Mapping/Profiles/TvProfile.cs
Unescape View File

@ -47,7 +47,7 @@ namespace Ombi.Mapping.Profiles
CreateMap<TraktShow, SearchTvShowViewModel>()
.ForMember(dest => dest.Id, opts => opts.MapFrom(src => Convert.ToInt32(src.Ids.Tvdb.ToString())))
.ForMember(dest => dest.Id, opts => opts.MapFrom(src => src.Ids.Tvdb.HasValue ? Convert.ToInt32(src.Ids.Tvdb.ToString()) : 0))
.ForMember(dest => dest.FirstAired, opts => opts.MapFrom(src => src.FirstAired.HasValue ? src.FirstAired.Value.ToString("yyyy-MM-ddTHH:mm:ss") : string.Empty))
.ForMember(dest => dest.ImdbId, opts => opts.MapFrom(src => src.Ids.Imdb))
.ForMember(dest => dest.Network, opts => opts.MapFrom(src => src.Network))
@ -57,9 +57,9 @@ namespace Ombi.Mapping.Profiles
.ForMember(dest => dest.Title, opts => opts.MapFrom(src => src.Title))
.ForMember(dest => dest.Status, opts => opts.MapFrom(src => TraktEnumHelper.GetDescription(src.Status)))
.ForMember(dest => dest.Trailer,
opts => opts.MapFrom(src => src.Trailer.ToString().ToHttpsUrl()))
opts => opts.MapFrom(src => src.Trailer != null ? src.Trailer.ToString().ToHttpsUrl() : string.Empty))
.ForMember(dest => dest.Homepage,
opts => opts.MapFrom(src => src.Homepage.ToString().ToHttpsUrl()));
opts => opts.MapFrom(src => src.Homepage != null ? src.Homepage.ToString().ToHttpsUrl() : string.Empty));
}
}
}

14
src/Ombi.Store/Repository/Requests/TvRequestRepository.cs
Unescape View File

@ -22,21 +22,21 @@ namespace Ombi.Store.Repository.Requests
{
return await Db.TvRequests.Where(x => x.TvDbId == tvDbId)
.Include(x => x.ChildRequests)
.ThenInclude(x => x.RequestedUser)
.ThenInclude(x => x.RequestedUser)
.Include(x => x.ChildRequests)
.ThenInclude(x => x.SeasonRequests)
.ThenInclude(x => x.Episodes)
.ThenInclude(x => x.SeasonRequests)
.ThenInclude(x => x.Episodes)
.FirstOrDefaultAsync();
}
public TvRequests GetRequest(int tvDbId)
{
return Db.TvRequests.Where(x => x.TvDbId == tvDbId)
return Db.TvRequests.Where(x => x.TvDbId == tvDbId).AsSplitQuery()
.Include(x => x.ChildRequests)
.ThenInclude(x => x.RequestedUser)
.ThenInclude(x => x.RequestedUser)
.Include(x => x.ChildRequests)
.ThenInclude(x => x.SeasonRequests)
.ThenInclude(x => x.Episodes)
.ThenInclude(x => x.SeasonRequests)
.ThenInclude(x => x.Episodes)
.FirstOrDefault();
}

26
src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html
Unescape View File

@ -1,24 +1,32 @@
<p-skeleton *ngIf="!fullyLoaded" width="100%" height="315px"></p-skeleton>
<div *ngIf="fullyLoaded" class="ombi-card dark-card c" [style.display]="hide ? 'none' : 'block'">
<div class="ribbon {{getStatusClass()}} ribbon-top-right"><span>
{{getAvailbilityStatus()}}
</span></div>
<a>
<div class="card-top-info">
<div class="top-left">
{{RequestType[result.type] | humanize}}
</div>
<div class="{{getStatusClass()}} top-right">
<span>{{getAvailbilityStatus()}}</span>
</div>
</div>
<img [routerLink]="generateDetailsLink()" id="cardImage" src="{{result.posterPath}}" class="image"
alt="{{result.title}}">
<div class="top-left">{{RequestType[result.type] | humanize}}</div>
<div class="middle">
<div class="title">{{result.title}}</div>
<div class="small-text ellipsis">{{result.overview}}</div>
<a class="poster-overlay" [routerLink]="generateDetailsLink()">
<div class="summary">
<div class="title">{{result.title}}</div>
<div class="small-text ellipsis">{{result.overview}}</div>
</div>
</a>
<div class="row" *ngIf="!result.available && !result.approved">
<div class="col-12">
<button mat-raised-button class="btn-green full-width" (click)="request($event)">
<button mat-raised-button class="btn-green full-width poster-request-btn" (click)="request($event)">
<mat-icon *ngIf="!loading">cloud_download</mat-icon>
<i *ngIf="loading" class="fa fa-spinner fa-pulse fa-2x fa-fw" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</a>
</div>

186
src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss
Unescape View File

@ -3,7 +3,6 @@ $card-background: #2b2b2b;
#cardImage {
border-radius: 5px;
height: 315px;
object-fit:cover;
}
@ -61,17 +60,14 @@ small {
font-size: 0.8rem;
}
@media (min-width: 2000px) {
.ombi-card{
height:100%;
}
#cardImage {
height: 100%;
object-fit: cover;
display: block;
}
.ombi-card{
height:100%;
}
#cardImage {
height: 100%;
object-fit: cover;
display: block;
}
@ -80,79 +76,6 @@ small {
max-width: 600px;
}
/* common */
.ribbon {
width: 100px;
height: 96px;
overflow: hidden;
position: absolute;
text-align:right;
}
.ribbon span {
position: absolute;
display: none;
background-color: transparent;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
text-transform: uppercase;
text-align: right;
font-size: 14px;
}
.ribbon.available span{
display:block;
}
.ribbon.available span:before{
content: '';
display: inline-block;
width: 10px;
height: 10px;
-moz-border-radius: 7.5px;
-webkit-border-radius: 7.5px;
border-radius: 7.5px;
background-color: #1DE9B6;
}
.ribbon.approved span {
display: block;
}
.ribbon.approved span:before{
content: '';
display: inline-block;
width: 10px;
height: 10px;
-moz-border-radius: 7.5px;
-webkit-border-radius: 7.5px;
border-radius: 7.5px;
background-color: #ff5722;
}
.ribbon.requested span {
display: block;
}
.ribbon.requested span:before{
content: '';
display: inline-block;
width: 10px;
height: 10px;
-moz-border-radius: 7.5px;
-webkit-border-radius: 7.5px;
border-radius: 7.5px;
background-color: #ffd740;
}
/* top right*/
.ribbon-top-right {
top: 13px;
right: 0px;
z-index: 999999;
}
.ombi-card {
padding: 5px;
}
@ -202,28 +125,91 @@ small {
.title {
font-size: 18px;
}
.top-left {
font-size: 14px;
position: absolute;
text-transform: uppercase;
top: 0px;
width: 100%;
background-color: rgba(15,23,31,0.6);
padding-left: 1em;
padding-top: 1em;
padding-bottom: 0.5em;font-size: 14px;
position: absolute;
text-transform: uppercase;
}
.full-width {
.full-width {
width: 100%;
}
.ellipsis {
.ellipsis {
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.card-top-info{
position: absolute;
text-transform: uppercase;
top: 0px;
width: 100%;
background-color: rgba(15,23,31,0.6);
display:flex;
justify-content: space-between;
padding-top:0.6em;
padding-bottom:0.3em;
z-index:2;
}
.top-left {
font-size: 14px;
padding-left: 0.5em;
font-size: 14px;
}
/* common */
.top-right span {
display: none;
background-color: transparent;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
text-align: right;
font-size: 14px;
padding-right: 1em;
}
.top-right span:before{
content: '';
width: 10px;
height: 10px;
-moz-border-radius: 7.5px;
-webkit-border-radius: 7.5px;
border-radius: 7.5px;
margin-right:5px;
}
.top-right.available span{
display:block;
}
.top-right.available span:before{
display: inline-block;
background-color: #1DE9B6;
}
.top-right.approved span {
display: block;
}
.top-right.approved span:before{
display: inline-block;
background-color: #ff5722;
}
.top-right.requested span {
display: block;
}
.top-right.requested span:before{
display: inline-block;
background-color: #ffd740;
}
::ng-deep a.poster-overlay{
color:#fff;
}
a.poster-overlay:hover{
text-decoration: none;
}

73
src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.ts
Unescape View File

@ -34,29 +34,94 @@ export class CarouselListComponent implements OnInit {
get mediaTypeStorageKey() {
return "DiscoverOptions" + this.discoverType.toString();
};
private amountToLoad = 14;
private amountToLoad = 17;
private currentlyLoaded = 0;
constructor(private searchService: SearchV2Service,
private storageService: StorageService) {
this.responsiveOptions = [
{
breakpoint: '2559px',
breakpoint: '4000px',
numVisible: 17,
numScroll: 17
},
{
breakpoint: '3800px',
numVisible: 16,
numScroll: 16
},
{
breakpoint: '3600px',
numVisible: 15,
numScroll: 15
},
{
breakpoint: '3400px',
numVisible: 14,
numScroll: 14
},
{
breakpoint: '3200px',
numVisible: 13,
numScroll: 13
},
{
breakpoint: '3000px',
numVisible: 12,
numScroll: 12
},
{
breakpoint: '2800px',
numVisible: 11,
numScroll: 11
},
{
breakpoint: '2600px',
numVisible: 10,
numScroll: 10
},
{
breakpoint: '2400px',
numVisible: 9,
numScroll: 9
},
{
breakpoint: '2200px',
numVisible: 8,
numScroll: 8
},
{
breakpoint: '2000px',
numVisible: 7,
numScroll: 7
},
{
breakpoint: '1024px',
breakpoint: '1800px',
numVisible: 6,
numScroll: 6
},
{
breakpoint: '1650px',
numVisible: 5,
numScroll: 5
},
{
breakpoint: '1500px',
numVisible: 4,
numScroll: 4
},
{
breakpoint: '1250px',
numVisible: 3,
numScroll: 3
},
{
breakpoint: '768px',
numVisible: 2,
numScroll: 2
},
{
breakpoint: '560px',
breakpoint: '480px',
numVisible: 1,
numScroll: 1
}

4
src/Ombi/ClientApp/src/app/login/login.component.html
Unescape View File

@ -1,10 +1,12 @@
<div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background">
<div class="login-gradient-bar">
</div>
</div>
<div class="small-middle-container">
<div *ngIf="form && customizationSettings && authenticationSettings">
<mat-card class="mat-elevation-z8 top-margin login-card">
<img mat-card-image *ngIf="!customizationSettings.logo" src="{{baseUrl}}/images/logo.png">
<H1 *ngIf="!customizationSettings.logo" class="login_logo">OMBI</H1>
<img mat-card-image *ngIf="customizationSettings.logo" [src]="customizationSettings.logo">
<mat-card-content id="login-box" *ngIf="!authenticationSettings.enableOAuth || loginWithOmbi">
<form *ngIf="authenticationSettings" class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">

130
src/Ombi/ClientApp/src/app/login/login.component.scss
Unescape View File

@ -1,19 +1,8 @@
$primary-colour: #df691a;
$primary-colour-outline: #ff761b;
$bg-colour: #333333;
$bg-colour-disabled: #252424;
$form-color: #4e5d6c;
$form-color-lighter: #637689;
$info-colour: #5bc0de;
$warning-colour: #f0ad4e;
$danger-colour: #d9534f;
$success-colour: #5cb85c;
$placeholder-colour: #3b3b3b;
@import "~styles/variables.scss";
body, html {
height: 100% !important;
background-repeat: no-repeat !important;
background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)) !important;
}
img.center {
@ -22,6 +11,13 @@ img.center {
max-width: 100%;
}
.login-gradient-bar{
background: linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.6) 20.0%, rgba(0,0,0,0.6) 80.0%, transparent 60%),transparent;
height:100%;
width:100%;
position: absolute;
}
div.bg {
background-position: center center;
background-repeat: no-repeat;
@ -57,24 +53,6 @@ div.bg {
user-select: none;
cursor: default;
}
/*
* Card component
*/
.card {
/*background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)) !important;*/
background-color: $bg-colour;
/* just in case there no content*/
padding: 20px 25px 30px;
margin: 0 auto 25px;
margin-top: 50px;
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
/*-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);*/
}
.profile-img-custom {
width: 100%;
@ -93,18 +71,6 @@ div.bg {
/*
* Form styles
*/
.profile-name-card {
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 10px 0 0;
min-height: 1em;
}
.form-control {
color: black;
background-color: white !important;
}
.reauth-email {
display: block;
@ -178,32 +144,6 @@ div.bg {
color: rgb(12, 97, 33);
}
// Placeholders
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: $placeholder-colour;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: $placeholder-colour;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: $placeholder-colour;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: $placeholder-colour;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: $placeholder-colour;
}
.full-width {
width: 100%;
}
@ -212,23 +152,63 @@ div.bg {
.small-middle-container{
margin: auto;
overflow: auto;
width:auto;
}
}
@media (min-width: 571px) {
.small-middle-container{
margin: auto;
width: 25%;
overflow: auto;
}
}
.top-margin {
margin-top:10%;
}
.login-buttons {
text-align: center;
}
.login-card {
background: #424242;
::ng-deep button#sign-in{
color: $ombi-active-text;
}
::ng-deep .login-card .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{
color: $ombi-active;
}
::ng-deep .login-card .mat-form-field.mat-focused .mat-form-field-label{
color: $ombi-active;
}
::ng-deep .login-card .mat-input-element{
caret-color: $ombi-active;
}
.small-middle-container{
display:flex;
align-items: center;
justify-content: center;
height:100vh;
}
.login-card.mat-card{
background-color: rgba(0,0,0,0.6);
padding:60px 40px;
}
.login-card H1.login_logo{
display:flex;
font-family: Montserrat,sans-serif;
text-transform: uppercase;
color:$ombi-active;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 10em;
width:100%;
margin-bottom:70px;
}
@media (max-width: 600px){
.login-card H1.login_logo{
font-size:20vw;
}
}

4
src/Ombi/ClientApp/src/app/login/login.component.ts
Unescape View File

@ -94,7 +94,7 @@ export class LoginComponent implements OnDestroy, OnInit {
this.settingsService.getClientId().subscribe(x => this.clientId = x);
this.settingsService.getCustomization().subscribe(x => this.customizationSettings = x);
this.images.getRandomBackground().subscribe(x => {
this.background = this.sanitizer.bypassSecurityTrustStyle("linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.7) 20.0%, rgba(0,0,0,0.7) 80.0%, transparent 80%),url(" + x.url + ")");
this.background = this.sanitizer.bypassSecurityTrustStyle("url(" + x.url + ")");
});
this.timer = setInterval(() => {
this.cycleBackground();
@ -206,7 +206,7 @@ export class LoginComponent implements OnDestroy, OnInit {
});
this.images.getRandomBackground().subscribe(x => {
this.background = this.sanitizer
.bypassSecurityTrustStyle("linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.7) 20.0%, rgba(0,0,0,0.7) 80.0%, transparent 80%), url(" + x.url + ")");
.bypassSecurityTrustStyle("url(" + x.url + ")");
});
}
}

131
src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
Unescape View File

@ -5,7 +5,12 @@
<div *ngIf="movie" class="dark-theme">
<top-banner [background]="movie.background" [available]="movie.available" [title]="movie.title" [releaseDate]="movie.releaseDate" [tagline]="movie.tagline"></top-banner>
<div class="social-icons-container">
<social-icons [homepage]="movie.homepage" [theMoviedbId]="movie.id" [hasTrailer]="movie.videos?.results?.length > 0" (openTrailer)="openDialog()" [imdbId]="movie.imdbId" [twitter]="movie.externalIds.twitterId" [facebook]="movie.externalIds.facebookId"
[instagram]="movie.externalIds.instagramId" [available]="movie.available" [plexUrl]="movie.plexUrl" [embyUrl]="movie.embyUrl" [jellyfinUrl]="movie.jellyfinUrl"></social-icons>
</div>
<section id="info-wrapper">
<div class="small-middle-container">
@ -14,56 +19,63 @@
<media-poster [posterPath]="'https://image.tmdb.org/t/p/w300/' + movie.posterPath"></media-poster>
<!--Next to poster-->
<div class="col-12 col-lg-2 col-xl-3 media-row">
<social-icons [homepage]="movie.homepage" [theMoviedbId]="movie.id" [hasTrailer]="movie.videos?.results?.length > 0" (openTrailer)="openDialog()" [imdbId]="movie.imdbId" [twitter]="movie.externalIds.twitterId" [facebook]="movie.externalIds.facebookId"
[instagram]="movie.externalIds.instagramId" [available]="movie.available" [plexUrl]="movie.plexUrl" [embyUrl]="movie.embyUrl" [jellyfinUrl]="movie.jellyfinUrl"></social-icons>
</div>
<div class="col-12 col-lg-5 col-xl-5 media-row">
<button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available"> {{
'Common.Available' | translate }}</button>
<span *ngIf="!movie.available">
<span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
<ng-template #requestedBtn>
<button mat-raised-button *ngIf="!hasRequest || hasRequest && movieRequest && !movieRequest.denied" class="btn-spacing" color="warn" [disabled]><i class="fa fa-check"></i>
{{ 'Common.Requested' | translate }}</button>
</ng-template>
<ng-template #notRequestedBtn>
<button mat-raised-button class="btn-spacing" color="primary" (click)="request()">
<i *ngIf="movie.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i> <i
*ngIf="!movie.requestProcessing && !movie.processed" class="fa fa-plus"></i>
<i *ngIf="movie.processed && !movie.requestProcessing" class="fa fa-check"></i> {{
'Common.Request' | translate }}</button>
</ng-template>
<div class="col-12 col-lg-8 col-xl-8 media-row">
<span *ngIf="movie.available">
<a *ngIf="movie.plexUrl" href="{{movie.plexUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn plex">
{{'Search.ViewOnPlex' | translate}}
<i class="fa fa-play-circle fa-2x"></i>
</a>
<a *ngIf="movie.embyUrl" href="{{movie.embyUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn emby">
{{'Search.ViewOnEmby' | translate}}
<i class="fa fa-play-circle fa-2x"></i>
</a>
<a *ngIf="movie.jellyfinUrl" href="{{movie.jellyfinUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn jellyfinUrl">
{{'Search.ViewOnJellyfin' | translate}}
<i class="fa fa-play-circle fa-2x"></i>
</a>
</span>
<span *ngIf="isAdmin && hasRequest">
<button *ngIf="!movie.approved" (click)="approve()" mat-raised-button class="btn-spacing" color="accent">
<i class="fa fa-plus"></i> {{ 'Common.Approve' | translate }}
</button>
<button *ngIf="!movie.available" (click)="markAvailable()" mat-raised-button class="btn-spacing"
color="accent">
<i class="fa fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
</button>
<button *ngIf="movieRequest && !movieRequest.denied && !movie.available" mat-raised-button class="btn-spacing" color="warn"
(click)="deny()">
<i class="fa fa-times"></i> {{
'Requests.Deny' | translate }}</button>
<button *ngIf="movieRequest && movieRequest.denied" [matTooltip]="movieRequest.deniedReason"
mat-raised-button class="btn-spacing" color="warn">
<i class="fa fa-times"></i> {{
'MediaDetails.Denied' | translate }}</button>
</span>
<button mat-raised-button class="btn-spacing" color="danger" (click)="issue()">
<i class="fa fa-exclamation"></i> {{
'Requests.ReportIssue' | translate }}</button>
<button *ngIf="movie.belongsToCollection" [routerLink]="'/discover/collection/' + movie.belongsToCollection.id" mat-raised-button class="btn-spacing"><i class="fa fa-list"></i> {{'MediaDetails.ViewCollection' | translate}}</button>
<button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available && !movie.plexUrl && !movie.embyUrl && !movie.jellyfinUrl"> {{
'Common.Available' | translate }}</button>
<span *ngIf="!movie.available">
<span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
<ng-template #requestedBtn>
<button mat-raised-button *ngIf="!hasRequest || hasRequest && movieRequest && !movieRequest.denied" class="btn-spacing" color="warn" [disabled]>
<i class="fa fa-check"></i>
{{ 'Common.Requested' | translate }}
</button>
</ng-template>
<ng-template #notRequestedBtn>
<button mat-raised-button class="btn-spacing" color="primary" (click)="request()">
<i *ngIf="movie.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i>
<i *ngIf="!movie.requestProcessing && !movie.processed" class="fa fa-plus"></i>
<i *ngIf="movie.processed && !movie.requestProcessing" class="fa fa-check"></i>
{{'Common.Request' | translate }}
</button>
</ng-template>
</span>
<span *ngIf="isAdmin && hasRequest">
<button *ngIf="!movie.approved" (click)="approve()" mat-raised-button class="btn-spacing" color="accent">
<i class="fa fa-plus"></i> {{ 'Common.Approve' | translate }}
</button>
<button *ngIf="!movie.available" (click)="markAvailable()" mat-raised-button class="btn-spacing"
color="accent">
<i class="fa fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
</button>
<button *ngIf="movieRequest && !movieRequest.denied && !movie.available" mat-raised-button class="btn-spacing" color="warn" (click)="deny()">
<i class="fa fa-times"></i> {{'Requests.Deny' | translate }}
</button>
<button *ngIf="movieRequest && movieRequest.denied" [matTooltip]="movieRequest.deniedReason" mat-raised-button class="btn-spacing" color="warn">
<i class="fa fa-times"></i> {{'MediaDetails.Denied' | translate }}
</button>
</span>
<button mat-raised-button class="btn-spacing" color="danger" (click)="issue()">
<i class="fa fa-exclamation"></i> {{'Requests.ReportIssue' | translate }}
</button>
<button *ngIf="movie.belongsToCollection" [routerLink]="'/discover/collection/' + movie.belongsToCollection.id" mat-raised-button class="btn-spacing">
<i class="fa fa-list"></i> {{'MediaDetails.ViewCollection' | translate}}
</button>
</div>
<!-- Setting/Configuration admin area -->
@ -136,7 +148,6 @@
</a>
</div>
</div>
</div>
</div>
</mat-expansion-panel>
@ -157,7 +168,6 @@
</a>
</div>
</div>
</div>
</div>
</mat-expansion-panel>
@ -178,29 +188,10 @@
</mat-accordion>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-page-gap">
</div>
</section>
</div>

8
src/Ombi/ClientApp/src/app/media-details/components/movie/panels/movie-information-panel.component.html
Unescape View File

@ -98,11 +98,11 @@
</div>
<hr />
<div *ngIf="movie.genres">
<div class="genre-button-container" *ngIf="movie.genres">
<strong>{{'MediaDetails.Genres' | translate }}:</strong>
<div>
<mat-chip-list>
<mat-chip color="accent" selected *ngFor="let genre of movie.genres">
<mat-chip selected *ngFor="let genre of movie.genres">
{{genre.name}}
</mat-chip>
</mat-chip-list>
@ -110,10 +110,10 @@
</div>
<hr />
<div *ngIf="movie?.keywords?.keywordsValue?.length > 0">
<div class="keyword-button-container" *ngIf="movie?.keywords?.keywordsValue?.length > 0">
<strong>{{'MediaDetails.Keywords' | translate }}:</strong>
<mat-chip-list>
<mat-chip color="accent" selected *ngFor="let keyword of movie.keywords.keywordsValue">
<mat-chip selected *ngFor="let keyword of movie.keywords.keywordsValue">
{{keyword.name}}
</mat-chip>
</mat-chip-list>

44
src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.html
Unescape View File

@ -1,7 +1,7 @@
<a *ngIf="homepage" class="media-icons" href="{{homepage}}" target="_blank">
<div class="social-icons-container-inner">
<a *ngIf="homepage" class="media-icons" href="{{homepage}}" target="_blank">
<i matTooltip="Homepage" class="fa fa-home fa-2x grow-social"></i>
</a>
<a *ngIf="theMoviedbId" href="https://www.themoviedb.org/movie/{{theMoviedbId}}" class="media-icons"
target="_blank">
<i matTooltip="The Movie DB" class="fa fa-film fa-2x grow-social"></i>
@ -10,42 +10,18 @@
<i matTooltip="The TV DB" class="fa fa-tv fa-2x grow-social"></i>
</a>
<a *ngIf="hasTrailer" class="media-icons youtube" (click)="openDialog()"><i
matTooltip="Trailer" class="fa fa-youtube-play fa-2x grow-social"></i></a>
<a *ngIf="imdbId" class="media-icons imdb" [href]="doNotAppend ? imdbid : 'https://imdb.com/title/' + imdbId"
target="_blank">
<a *ngIf="hasTrailer" class="media-icons youtube" (click)="openDialog()">
<i matTooltip="Trailer" class="fa fa-youtube-play fa-2x grow-social"></i>
</a>
<a *ngIf="imdbId" class="media-icons imdb" [href]="doNotAppend ? imdbid : 'https://imdb.com/title/' + imdbId" target="_blank">
<i matTooltip="Imdb" class="fa fa-imdb fa-2x grow-social"></i>
</a>
<a *ngIf="twitter" class="media-icons"
[href]="doNotAppend ? twitter : 'https://twitter.com/' + twitter" target="_blank">
<a *ngIf="twitter" class="media-icons" [href]="doNotAppend ? twitter : 'https://twitter.com/' + twitter" target="_blank">
<i matTooltip="Twitter" class="fa fa-twitter fa-2x grow-social"></i>
</a>
<a *ngIf="facebook" class="media-icons"
[href]="doNotAppend ? facebook : 'https://facebook.com/' + facebook" target="_blank">
<a *ngIf="facebook" class="media-icons" [href]="doNotAppend ? facebook : 'https://facebook.com/' + facebook" target="_blank">
<i matTooltip="Facebook" class="fa fa-facebook fa-2x grow-social"></i>
</a> <a *ngIf="instagram" class="media-icons"
[href]="doNotAppend ? instagram : 'https://instagram.com/' + instagram" target="_blank">
</a> <a *ngIf="instagram" class="media-icons" [href]="doNotAppend ? instagram : 'https://instagram.com/' + instagram" target="_blank">
<i matTooltip="Instagram" class="fa fa-instagram fa-2x grow-social"></i>
</a>
<span class="left-seperator" *ngIf="available">
<a *ngIf="plexUrl" href="{{plexUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn plex">
{{'Search.ViewOnPlex' | translate}}
<i
class="fa fa-play-circle fa-2x"></i>
</a>
<a *ngIf="embyUrl" href="{{embyUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn emby">
{{'Search.ViewOnEmby' | translate}}
<i
class="fa fa-play-circle fa-2x"></i>
</a>
<a *ngIf="jellyfinUrl" href="{{jellyfinUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn jellyfinUrl">
{{'Search.ViewOnJellyfin' | translate}}
<i
class="fa fa-play-circle fa-2x"></i>
</a>
</span>
</div>

19
src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.scss
Unescape View File

@ -1,19 +1,6 @@
@import "~styles/variables.scss";
.viewon-btn {
background-color: transparent;
margin-top: 7px;
text-decoration: none;
a.media-icons:hover{
color:$ombi-active;
}
.viewon-btn.plex {
border: 1px solid #ffd740;
color: #ffd740;
}
.viewon-btn.emby {
border: 1px solid #52b54a;
color: #52b54a;
}
.viewon-btn.jellyfin {
border: 1px solid #00a4dc;
color: #00a4dc;
}

8
src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.html
Unescape View File

@ -4,15 +4,15 @@
<div class="shadow-base" [ngClass]="available ? 'available-bottom-border' : ''"></div>
<div class="container summary">
<div class="container">
<div class="container title-top-banner">
<div class="row">
<div
class="col-xl-11 col-lg-8 offset-xl-1 offset-lg-4 col-md-8 col-sm-7 col-12 offset-md-4 offset-sm-5 mobile-top-text">
<h1 class="large-text">{{title}} <span *ngIf="releaseDate" class="grey-text align-middle">
class="mobile-top-text">
<h1 class="large-text">{{title}} <span *ngIf="releaseDate" class="grey-text">
({{releaseDate | amLocal | amDateFormat: 'YYYY'}})</span>
</h1>
<h2 class="tagline grey-text">{{tagline}}</h2>
<h2 class="tagline">{{tagline}}</h2>
</div>
</div>
</div>

13
src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.scss
Unescape View File

@ -1,3 +1,14 @@
.large-text {
font: 500 40px/30px Roboto, "Helvetica Neue", sans-serif;
}
}
@media (min-width:571px){
.title-top-banner{
padding-left:330px;
margin-left:0px;
}}
@media (max-width:571px){
.title-top-banner{
text-align:center;
}}

52
src/Ombi/ClientApp/src/app/media-details/media-details.component.scss
Unescape View File

@ -43,7 +43,7 @@
background-size: cover;
background-position: 50% 10%;
transition: all .5s;
height: 450px;
height: 300px;
color: #fff;
position: relative;
}
@ -90,17 +90,6 @@
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;
}
.grey-text {
color: #999;
}
@ -182,8 +171,8 @@
}
.media-icons {
color: white !important;
padding: 1%;
color: #FFF;
padding: 5px;
}
.media-row {
@ -232,4 +221,37 @@
border-radius: 1em;
margin-right: 10px;
margin-top: 5px;
}
}
.social-icons-container{
position:absolute;
top:84px;
right:0px;
width:100%;
background-color:rgba(15,23,31,.6);
}
.social-icons-container-inner{
text-align:right;
display:flex;
justify-content: flex-end;
padding-right:2em;
}
.viewon-btn {
background-color: transparent;
text-decoration: none;
}
.viewon-btn.plex {
border: 1px solid #E5A00D;
color: #E5A00D;
}
.viewon-btn.emby {
border: 1px solid #52b54a;
color: #52b54a;
}
.viewon-btn.jellyfin {
border: 1px solid #00a4dc;
color: #00a4dc;
}

6
src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss
Unescape View File

@ -118,7 +118,7 @@
align-items:center;
justify-content: center;
font-weight: 700;
font-size:24px;
font-size:36px;
padding:40px 20px;
height:auto;
}
@ -131,12 +131,12 @@
.mat-list-item{
color:#FFF;
font-family:Roboto, sans-serif;
font-size: 14px;
font-size: 16px;
font-weight: 400;
padding:10px 20px;
height:auto;
width:20rem;
margin-bottom:1rem;
margin-bottom:0.5rem;
}
.active-list-item{

2
src/Ombi/ClientApp/src/app/requests-list/components/albums-grid/albums-grid.component.html
Unescape View File

@ -28,7 +28,7 @@
</div>
</div>
<!-- </div> -->
<table mat-table [dataSource]="dataSource" class="table" matSort [matSortActive]="defaultSort" matSortDisableClear [matSortDirection]="defaultOrder">
<table mat-table [dataSource]="dataSource" class="requests table" matSort [matSortActive]="defaultSort" matSortDisableClear [matSortDirection]="defaultOrder">

2
src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.html
Unescape View File

@ -28,7 +28,7 @@
</div>
</div>
<!-- </div> -->
<table mat-table [dataSource]="dataSource" class="table" matSort [matSortActive]="defaultSort" matSortDisableClear [matSortDirection]="defaultOrder">
<table mat-table [dataSource]="dataSource" class="requests table" matSort [matSortActive]="defaultSort" matSortDisableClear [matSortDirection]="defaultOrder">
<ng-container matColumnDef="title">

8
src/Ombi/ClientApp/src/app/requests-list/components/requests-list.component.scss
Unescape View File

@ -21,10 +21,6 @@
float:right;
}
::ng-deep .mat-form-field-label{
font-size: 1.2em;
}
::ng-deep .mat-form-field-infix {
width: 10em;
margin-top:1em;
@ -62,4 +58,8 @@
.justify-content-md-center {
justify-content: center !important;
}
}
::ng-deep table.requests button{
margin:5px;
}

2
src/Ombi/ClientApp/src/app/requests-list/components/tv-grid/tv-grid.component.html
Unescape View File

@ -28,7 +28,7 @@
</div>
</div>
<table mat-table [dataSource]="dataSource" class="table" matSort [matSortActive]="defaultSort" matSortDisableClear [matSortDirection]="defaultOrder">
<table mat-table [dataSource]="dataSource" class="requests table" matSort [matSortActive]="defaultSort" matSortDisableClear [matSortDirection]="defaultOrder">
<ng-container matColumnDef="series">

2
src/Ombi/ClientApp/src/app/settings/failedrequests/failedrequests.component.html
Unescape View File

@ -20,7 +20,7 @@
<td>{{RequestType[v.type] | humanize}}</td>
<td class="vcenter">{{v.retryCount}}</td>
<td class="vcenter"> <i [pTooltip]="v.error" class="fa fa-info-circle"></i></td>
<td class="vcenter"><button class="btn btn-sm btn-danger-outline" (click)="remove(v)">Remove</button></td>
<td class="vcenter"><button type="button" class="mat-focus-indicator mat-flat-button mat-button-base mat-warn" (click)="remove(v)">Remove</button></td>
</tr>
</tbody>
</table>

7
src/Ombi/ClientApp/src/app/settings/logs/logs.component.scss
Unescape View File

@ -9,5 +9,10 @@
}
::ng-deep .dark .code-block {
color:#FFF !important;
color:#FFF;
}
::ng-deep .code-block {
color:#FFF;
font-family: Menlo, Monaco, "Courier New", Courier, monospace;
}

4
src/Ombi/ClientApp/src/app/usermanagement/usermanagement.component.scss
Unescape View File

@ -22,10 +22,6 @@
float:right;
}
::ng-deep .mat-form-field-label{
font-size: 1.2em;
}
::ng-deep .mat-form-field-infix {
width: 10em;
margin-top:1em;

79
src/Ombi/ClientApp/src/styles/Styles.scss
Unescape View File

@ -20,4 +20,83 @@
accent: $ombi-dark-app-accent,
)
), $ombi-dark-app-accent);
@include angular-material-theme($theme);
.mat-table {
background: $ombi-background-accent;
}
.mat-paginator {
background: $ombi-background-accent;
}
.mat-flat-button.mat-primary, .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary{
background-color: $ombi-background-accent;
}
.mat-flat-button.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent{
color: $ombi-active-text;
}
.mat-menu-panel{
background: $ombi-background-accent;
}
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{
color: $ombi-active;
}
.mat-form-field.mat-focused .mat-form-field-label{
color: $ombi-active;
}
.mat-input-element{
caret-color: $ombi-active;
}
.mat-card {
background: $ombi-background-accent;
}
.mat-expansion-panel{
background: $ombi-background-accent;
}
.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent{
color:$ombi-active-text;
}
.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary{
background-color: $ombi-background-primary;
}
.mat-bottom-sheet-container{
background: $ombi-background-accent;
}
.grow:hover{
color: $ombi-active;
}
.mat-accent.grow:hover{
color: $ombi-active-text;
}
.mat-dialog-container{
background: $ombi-background-accent;
}
.mat-autocomplete-panel{
background: $ombi-background-accent;
}
.mat-form-field.mat-focused .mat-form-field-ripple{
background-color: $ombi-active;
}
@media (hover: none){
.mat-expansion-panel:not(.mat-expanded):not([aria-disabled=true]) .mat-expansion-panel-header:hover{
background: $ombi-background-accent;
}
}

26
src/Ombi/ClientApp/src/styles/material-overrides.scss
Unescape View File

@ -22,16 +22,36 @@ td.mat-cell {
}
// lighter bg
.mat-expansion-panel,
::ng-deep .mat-expansion-panel,
.mat-card,
.mat-dialog-container,
.mat-menu-content,
.mat-table,
.mat-paginator {
background: $ombi-background-accent !important;
background: $ombi-background-accent;
}
// Dark bg
.mat-sidenav-container {
background: $ombi-background-primary;
}
}
//Login Screen CSS
.login-buttons button{
margin:1em;
&#sign-in{
background-color: $ombi-active;
color: $ombi-active-text;
}
&#sign-plex{
background-color: #282A2D;
color: #E5A00D;
}
}
::ng-deep #main-container .mat-table {
background: $ombi-background-accent;
}
// General Buttons CSS

1
src/Ombi/ClientApp/src/styles/shared.scss
Unescape View File

@ -86,7 +86,6 @@ body {
.grow:hover {
transform: scale(1.1);
color: black;
}
}

3
src/Ombi/ClientApp/src/styles/variables.scss
Unescape View File

@ -43,4 +43,5 @@ $warn-dark: mat-color($ombi-dark-app-warn);
$ombi-active: mat-color($ombi-dark-app-accent);
$ombi-background-accent: mat-color($ombi-dark-app-primary);
$ombi-background-primary: #0f171f;
$ombi-background-primary-accent: #35465c;
$ombi-background-primary-accent: #35465c;
$ombi-active-text:#1b242f;
Write Preview
Loading…
Cancel
Save