mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-07-10 15:32:37 -07:00
Merge branch 'develop' of https://github.com/tidusjar/Ombi into develop
This commit is contained in:
commit
94b40c0327
30 changed files with 509 additions and 374 deletions
|
@ -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'))]
|
|
@ -58,7 +58,7 @@ Here are some of the features Ombi has:
|
|||
|
||||
# Preview
|
||||
|
||||

|
||||

|
||||
|
||||
# Installation
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
|
@ -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;
|
||||
}
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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)">
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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 + ")");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 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>
|
||||
<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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}}
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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{
|
||||
|
|
|
@ -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">
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -86,7 +86,6 @@ body {
|
|||
|
||||
.grow:hover {
|
||||
transform: scale(1.1);
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
Loading…
Add table
Add a link
Reference in a new issue