From c0a4b2015201e3108e1b511a12e6ab5056142389 Mon Sep 17 00:00:00 2001 From: tidusjar Date: Fri, 25 Jan 2019 21:20:34 +0000 Subject: [PATCH] more !wip --- src/Ombi/ClientApp/src/app/app.module.ts | 2 +- .../card/discover-card.component.html | 19 + .../card/discover-card.component.scss | 3 + .../discover/card/discover-card.component.ts | 67 ++ .../src/app/discover/discover.component.html | 5 + .../src/app/discover/discover.component.ts | 58 + .../discover.module.ts} | 14 +- .../ClientApp/src/app/discover/interfaces.ts | 11 + .../src/app/home/home.component.html | 6 - .../ClientApp/src/app/home/home.component.ts | 23 - .../home/movies/popular-movies.component.html | 16 - .../home/movies/popular-movies.component.ts | 19 - .../src/app/home/tv/popular-tv.component.html | 15 - .../src/app/home/tv/popular-tv.component.ts | 66 -- .../ClientApp/src/app/nav/nav.component.html | 2 +- .../ClientApp/src/app/shared/shared.module.ts | 3 +- src/Ombi/ClientApp/src/styles/Styles.scss | 25 +- src/Ombi/ClientApp/src/styles/base.scss | 1020 ----------------- src/Ombi/ClientApp/src/styles/scrollbar.scss | 23 - 19 files changed, 197 insertions(+), 1200 deletions(-) create mode 100644 src/Ombi/ClientApp/src/app/discover/card/discover-card.component.html create mode 100644 src/Ombi/ClientApp/src/app/discover/card/discover-card.component.scss create mode 100644 src/Ombi/ClientApp/src/app/discover/card/discover-card.component.ts create mode 100644 src/Ombi/ClientApp/src/app/discover/discover.component.html create mode 100644 src/Ombi/ClientApp/src/app/discover/discover.component.ts rename src/Ombi/ClientApp/src/app/{home/home.module.ts => discover/discover.module.ts} (57%) create mode 100644 src/Ombi/ClientApp/src/app/discover/interfaces.ts delete mode 100644 src/Ombi/ClientApp/src/app/home/home.component.html delete mode 100644 src/Ombi/ClientApp/src/app/home/home.component.ts delete mode 100644 src/Ombi/ClientApp/src/app/home/movies/popular-movies.component.html delete mode 100644 src/Ombi/ClientApp/src/app/home/movies/popular-movies.component.ts delete mode 100644 src/Ombi/ClientApp/src/app/home/tv/popular-tv.component.html delete mode 100644 src/Ombi/ClientApp/src/app/home/tv/popular-tv.component.ts delete mode 100644 src/Ombi/ClientApp/src/styles/base.scss delete mode 100644 src/Ombi/ClientApp/src/styles/scrollbar.scss diff --git a/src/Ombi/ClientApp/src/app/app.module.ts b/src/Ombi/ClientApp/src/app/app.module.ts index 4620a8017..7fd710138 100644 --- a/src/Ombi/ClientApp/src/app/app.module.ts +++ b/src/Ombi/ClientApp/src/app/app.module.ts @@ -57,7 +57,7 @@ const routes: Routes = [ { path: "token", component: TokenResetPasswordComponent }, { path: "landingpage", component: LandingPageComponent }, { path: "auth/cookie", component: CookieComponent }, - { loadChildren: "./home/home.module#HomeModule", path: "home" }, + { loadChildren: "./discover/discover.module#DiscoverModule", path: "home" }, { loadChildren: "./issues/issues.module#IssuesModule", path: "issues" }, { loadChildren: "./settings/settings.module#SettingsModule", path: "Settings" }, { loadChildren: "./wizard/wizard.module#WizardModule", path: "Wizard" }, diff --git a/src/Ombi/ClientApp/src/app/discover/card/discover-card.component.html b/src/Ombi/ClientApp/src/app/discover/card/discover-card.component.html new file mode 100644 index 000000000..064d2b501 --- /dev/null +++ b/src/Ombi/ClientApp/src/app/discover/card/discover-card.component.html @@ -0,0 +1,19 @@ + + + + {{result.title}} + + {{result.title}} + + + +
{{result.title}}
+
{{result.title}}
+
{{result.title | truncate:13}}
+ + + + + + + \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/discover/card/discover-card.component.scss b/src/Ombi/ClientApp/src/app/discover/card/discover-card.component.scss new file mode 100644 index 000000000..52aba3bf1 --- /dev/null +++ b/src/Ombi/ClientApp/src/app/discover/card/discover-card.component.scss @@ -0,0 +1,3 @@ +.card-poster { + max-height: 225px; +} \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/discover/card/discover-card.component.ts b/src/Ombi/ClientApp/src/app/discover/card/discover-card.component.ts new file mode 100644 index 000000000..41088c4ff --- /dev/null +++ b/src/Ombi/ClientApp/src/app/discover/card/discover-card.component.ts @@ -0,0 +1,67 @@ +import { Component, OnInit, Input } from "@angular/core"; +import { IDiscoverCardResult } from "../interfaces"; +import { RequestType, ISearchTvResult, ISearchMovieResult } from "../../interfaces"; +import { SearchService } from "../../services"; + +@Component({ + selector: "discover-card", + templateUrl: "./discover-card.component.html", + styleUrls: ["./discover-card.component.scss"], +}) +export class DiscoverCardComponent implements OnInit { + + @Input() public result: IDiscoverCardResult; + + constructor(private searchService: SearchService) { } + + public ngOnInit() { + if (this.result.type == RequestType.tvShow) { + this.getExtraTvInfo(); + } + if (this.result.type == RequestType.movie) { + this.getExtraMovieInfo(); + } + } + + public getExtraTvInfo() { + this.searchService.getShowInformation(this.result.id) + .subscribe(x => { + if (x) { + this.setTvDefaults(x); + this.updateTvItem(x); + } + }); + } + private getExtraMovieInfo() { + this.searchService.getMovieInformation(this.result.id) + .subscribe(m => { + this.updateMovieItem(m); + }); + } + + private updateMovieItem(updated: ISearchMovieResult) { + this.result.url = "http://www.imdb.com/title/" + updated.imdbId + "/"; + this.result.available = updated.available; + this.result.requested = updated.requested; + this.result.requested = updated.requestProcessing; + } + + + private setTvDefaults(x: ISearchTvResult) { + if (!x.imdbId) { + x.imdbId = "https://www.tvmaze.com/shows/" + x.seriesId; + } else { + x.imdbId = "http://www.imdb.com/title/" + x.imdbId + "/"; + } + } + + private updateTvItem(updated: ISearchTvResult) { + this.result.title = updated.title; + this.result.id = updated.id; + this.result.available = updated.fullyAvailable; + this.result.posterPath = updated.banner; + this.result.requested = updated.requested; + this.result.url = updated.imdbId; + } + +} diff --git a/src/Ombi/ClientApp/src/app/discover/discover.component.html b/src/Ombi/ClientApp/src/app/discover/discover.component.html new file mode 100644 index 000000000..927dc1a98 --- /dev/null +++ b/src/Ombi/ClientApp/src/app/discover/discover.component.html @@ -0,0 +1,5 @@ +
+
+ +
+
\ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/discover/discover.component.ts b/src/Ombi/ClientApp/src/app/discover/discover.component.ts new file mode 100644 index 000000000..57e7f90f7 --- /dev/null +++ b/src/Ombi/ClientApp/src/app/discover/discover.component.ts @@ -0,0 +1,58 @@ +import { Component, OnInit } from "@angular/core"; +import { SearchService } from "../services"; +import { ISearchMovieResult, ISearchTvResult, RequestType } from "../interfaces"; +import { IDiscoverCardResult } from "./interfaces"; + +@Component({ + templateUrl: "./discover.component.html", +}) +export class DiscoverComponent implements OnInit { + + public discoverResults: IDiscoverCardResult[] = []; + private movies: ISearchMovieResult[]; + private tvShows: ISearchTvResult[]; + + public defaultTvPoster: string; + + constructor(private searchService: SearchService) { + + } + public async ngOnInit() { + this.movies = await this.searchService.popularMovies().toPromise(); + this.tvShows = await this.searchService.popularTv().toPromise(); + + this.movies.forEach(m => { + debugger; + this.discoverResults.push({ + available: m.available, + posterPath: `https://image.tmdb.org/t/p/w300/${m.posterPath}`, + requested: m.requested, + title: m.title, + type: RequestType.movie, + id: m.id, + url: `http://www.imdb.com/title/${m.imdbId}/` + }); + }); + this.tvShows.forEach(m => { + this.discoverResults.push({ + available: m.available, + posterPath: "../../../images/default_tv_poster.png", + requested: m.requested, + title: m.title, + type: RequestType.tvShow, + id: m.id, + url: undefined + }); + }); + + this.shuffle(this.discoverResults); + } + + private shuffle(discover: IDiscoverCardResult[]) : IDiscoverCardResult[] { + for (let i = discover.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [discover[i], discover[j]] = [discover[j], discover[i]]; + } + return discover; + } +} diff --git a/src/Ombi/ClientApp/src/app/home/home.module.ts b/src/Ombi/ClientApp/src/app/discover/discover.module.ts similarity index 57% rename from src/Ombi/ClientApp/src/app/home/home.module.ts rename to src/Ombi/ClientApp/src/app/discover/discover.module.ts index cd66988cb..de3b45491 100644 --- a/src/Ombi/ClientApp/src/app/home/home.module.ts +++ b/src/Ombi/ClientApp/src/app/discover/discover.module.ts @@ -6,12 +6,11 @@ import { SearchService } from "../services"; import { AuthGuard } from "../auth/auth.guard"; import { SharedModule } from "../shared/shared.module"; -import { HomeComponent } from "./home.component"; -import { PopularMoviesComponent } from "./movies/popular-movies.component"; -import { PopularTvComponent } from "./tv/popular-tv.component"; +import { DiscoverComponent } from "./discover.component"; +import { DiscoverCardComponent } from "./card/discover-card.component"; const routes: Routes = [ - { path: "", component: HomeComponent, canActivate: [AuthGuard] }, + { path: "", component: DiscoverComponent, canActivate: [AuthGuard] }, ]; @NgModule({ imports: [ @@ -19,9 +18,8 @@ const routes: Routes = [ SharedModule, ], declarations: [ - HomeComponent, - PopularMoviesComponent, - PopularTvComponent, + DiscoverComponent, + DiscoverCardComponent ], exports: [ RouterModule, @@ -31,4 +29,4 @@ const routes: Routes = [ ], }) -export class HomeModule { } +export class DiscoverModule { } diff --git a/src/Ombi/ClientApp/src/app/discover/interfaces.ts b/src/Ombi/ClientApp/src/app/discover/interfaces.ts new file mode 100644 index 000000000..5e62d781a --- /dev/null +++ b/src/Ombi/ClientApp/src/app/discover/interfaces.ts @@ -0,0 +1,11 @@ +import { RequestType } from "../interfaces"; + +export interface IDiscoverCardResult { + id: number; + posterPath: string; + url: string | undefined; + title: string; + type: RequestType; + available: boolean; + requested: boolean; +} \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/home/home.component.html b/src/Ombi/ClientApp/src/app/home/home.component.html deleted file mode 100644 index c055c8cb5..000000000 --- a/src/Ombi/ClientApp/src/app/home/home.component.html +++ /dev/null @@ -1,6 +0,0 @@ -

Movies

- - -

TV Shows

- - \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/home/home.component.ts b/src/Ombi/ClientApp/src/app/home/home.component.ts deleted file mode 100644 index 0e9dee3f7..000000000 --- a/src/Ombi/ClientApp/src/app/home/home.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { Component, OnInit } from "@angular/core"; -import { SearchService } from "../services"; -import { ISearchMovieResult, ISearchTvResult } from "../interfaces"; - -@Component({ - templateUrl: "./home.component.html", -}) -export class HomeComponent implements OnInit { - - public movies: ISearchMovieResult[]; - public tvShows: ISearchTvResult[]; - - public defaultTvPoster: string; - - constructor(private searchService: SearchService) { - - } - public ngOnInit() { - this.defaultTvPoster = "../../../images/default_tv_poster.png"; - this.searchService.popularMovies().subscribe(x => this.movies = x); - this.searchService.popularTv().subscribe(x => this.tvShows = x); - } -} diff --git a/src/Ombi/ClientApp/src/app/home/movies/popular-movies.component.html b/src/Ombi/ClientApp/src/app/home/movies/popular-movies.component.html deleted file mode 100644 index 2e98006cd..000000000 --- a/src/Ombi/ClientApp/src/app/home/movies/popular-movies.component.html +++ /dev/null @@ -1,16 +0,0 @@ - -
-
- - - {{movie.title}} - - -
{{movie.title}}
- - - - - -
-
\ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/home/movies/popular-movies.component.ts b/src/Ombi/ClientApp/src/app/home/movies/popular-movies.component.ts deleted file mode 100644 index 0c31a4acc..000000000 --- a/src/Ombi/ClientApp/src/app/home/movies/popular-movies.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Component, OnInit } from "@angular/core"; -import { SearchService } from "../../services"; -import { ISearchMovieResult, ISearchTvResult } from "../../interfaces"; - -@Component({ - selector:"popular-movies", - templateUrl: "./popular-movies.component.html", -}) -export class PopularMoviesComponent implements OnInit { - - public movies: ISearchMovieResult[]; - - constructor(private searchService: SearchService) { - - } - public ngOnInit() { - this.searchService.popularMovies().subscribe(x => this.movies = x); - } -} diff --git a/src/Ombi/ClientApp/src/app/home/tv/popular-tv.component.html b/src/Ombi/ClientApp/src/app/home/tv/popular-tv.component.html deleted file mode 100644 index 99eadbd90..000000000 --- a/src/Ombi/ClientApp/src/app/home/tv/popular-tv.component.html +++ /dev/null @@ -1,15 +0,0 @@ -
-
- - - {{tv.title}} - - -
{{tv.title}}
- - - - - -
-
\ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/home/tv/popular-tv.component.ts b/src/Ombi/ClientApp/src/app/home/tv/popular-tv.component.ts deleted file mode 100644 index dadda24a9..000000000 --- a/src/Ombi/ClientApp/src/app/home/tv/popular-tv.component.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { Component, OnInit } from "@angular/core"; -import { SearchService } from "../../services"; -import { ISearchTvResult } from "../../interfaces"; - -@Component({ - selector: "popular-tv", - templateUrl: "./popular-tv.component.html", -}) -export class PopularTvComponent implements OnInit { - - public tvShows: ISearchTvResult[]; - - public defaultPoster: string; - - constructor(private searchService: SearchService) { - - } - - public ngOnInit() { - this.defaultPoster = "../../../images/default_tv_poster.png"; - this.searchService.popularTv().subscribe(x => {this.tvShows = x; this.getExtraInfo();}); - } - - public getExtraInfo() { - this.tvShows.forEach((val, index) => { - this.searchService.getShowInformation(val.id) - .subscribe(x => { - if (x) { - this.setDefaults(x); - this.updateItem(val, x); - } else { - const index = this.tvShows.indexOf(val, 0); - if (index > -1) { - this.tvShows.splice(index, 1); - } - } - }); - }); - } - - private setDefaults(x: ISearchTvResult) { - if (x.banner === null) { - x.banner = this.defaultPoster; - } - - if (x.imdbId === null) { - x.imdbId = "https://www.tvmaze.com/shows/" + x.seriesId; - } else { - x.imdbId = "http://www.imdb.com/title/" + x.imdbId + "/"; - } - } - - private updateItem(key: ISearchTvResult, updated: ISearchTvResult) { - const index = this.tvShows.indexOf(key, 0); - if (index > -1) { - // Update certain properties, otherwise we will loose some data - this.tvShows[index].title = updated.title; - this.tvShows[index].banner = updated.banner; - this.tvShows[index].imdbId = updated.imdbId; - this.tvShows[index].seasonRequests = updated.seasonRequests; - this.tvShows[index].seriesId = updated.seriesId; - this.tvShows[index].fullyAvailable = updated.fullyAvailable; - this.tvShows[index].background = updated.banner; - } - } -} diff --git a/src/Ombi/ClientApp/src/app/nav/nav.component.html b/src/Ombi/ClientApp/src/app/nav/nav.component.html index b39a3e2bc..82a5b97dd 100644 --- a/src/Ombi/ClientApp/src/app/nav/nav.component.html +++ b/src/Ombi/ClientApp/src/app/nav/nav.component.html @@ -3,7 +3,7 @@ [mode]="(isHandset | async)!.matches ? 'over' : 'side'" [opened]="!(isHandset | async)!.matches"> Ombi - Home + Discover Search Settings diff --git a/src/Ombi/ClientApp/src/app/shared/shared.module.ts b/src/Ombi/ClientApp/src/app/shared/shared.module.ts index e6009475d..db9ad512b 100644 --- a/src/Ombi/ClientApp/src/app/shared/shared.module.ts +++ b/src/Ombi/ClientApp/src/app/shared/shared.module.ts @@ -10,7 +10,7 @@ import { IssuesReportComponent } from "./issues-report.component"; import { InputSwitchModule, SidebarModule } from "primeng/primeng"; import { - MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule} from '@angular/material'; + MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatTooltipModule} from '@angular/material'; import { MatCardModule, MatInputModule, MatTabsModule } from "@angular/material"; @NgModule({ @@ -51,6 +51,7 @@ import { MatSidenavModule, MatListModule, MatToolbarModule, + MatTooltipModule, ], }) export class SharedModule {} diff --git a/src/Ombi/ClientApp/src/styles/Styles.scss b/src/Ombi/ClientApp/src/styles/Styles.scss index cfb71f7d0..407d812fc 100644 --- a/src/Ombi/ClientApp/src/styles/Styles.scss +++ b/src/Ombi/ClientApp/src/styles/Styles.scss @@ -1 +1,24 @@ -@import '@angular/material/prebuilt-themes/deeppurple-amber.css'; \ No newline at end of file +@import '~@angular/material/theming'; +// Plus imports for other components in your app. + +// Include the common styles for Angular Material. We include this here so that you only +// have to load a single css file for Angular Material in your app. +// Be sure that you only ever include this mixin once! +@include mat-core(); + +// Define the palettes for your theme using the Material Design palettes available in palette.scss +// (imported above). For each palette, you can optionally specify a default, lighter, and darker +// hue. Available color palettes: https://material.io/design/color/ +$ombi-app-primary: mat-palette($mat-blue-grey, 900); +$ombi-app-accent: mat-palette($mat-pink, A200, A100, A400); + +// The warn palette is optional (defaults to red). +$ombi-app-warn: mat-palette($mat-deep-orange); + +// Create the theme object (a Sass map containing all of the palettes). +$ombi-app-theme: mat-light-theme($ombi-app-primary, $ombi-app-accent, $ombi-app-warn); + +// Include theme styles for core and each component used in your app. +// Alternatively, you can import and @include the theme mixins for each component +// that you are using. +@include angular-material-theme($ombi-app-theme); \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/styles/base.scss b/src/Ombi/ClientApp/src/styles/base.scss deleted file mode 100644 index 9c7756d8f..000000000 --- a/src/Ombi/ClientApp/src/styles/base.scss +++ /dev/null @@ -1,1020 +0,0 @@ -@import './_imports.scss'; - -$form-color: #4e5d6c; -$form-color-lighter: #637689; -$primary-colour: #df691a; -$primary-colour-outline: #ff761b; -$info-colour: #5bc0de; -$warning-colour: #f0ad4e; -$danger-colour: #d9534f; -$success-colour: #5cb85c; -$i: !important; - - - -@media (min-width: 768px ) { - .bottom-align-text { - position: absolute; - bottom: 0; - right: 0; - } - - .landing-block .media { - max-width: 450px; - } -} - -@media only screen and (max-width: 768px) { - - .table-usermanagement { - /* Force table to not be like tables anymore */ - display: block; - - thead, tbody, th, td, tr { - display: block; - } - - /* Hide table headers (but not display: none;, for accessibility) */ - thead tr { - position: absolute; - top: -9999px; - left: -9999px; - } - - td { - /* Behave like a "row" */ - border: none; - border-bottom: 1px solid #eee; - position: relative; - padding-left: 50% $i; - min-height: 25px; - } - - td:before { - /* Now like a table header */ - position: absolute; - /* Top/left values mimic padding */ - top: 6px; - left: 6px; - width: 45%; - padding-right: 10px; - white-space: nowrap; - } - /* Label the data */ - .td-labelled:before { - content: attr(data-label) - } - } -} - -@media (max-width: 48em) { - .home { - padding-top: 1rem; - } -} - -@media (min-width: 48em) { - .home { - padding-top: 4rem; - } -} - -.row { - position: relative; -} - -.navbar-default .navbar-nav > .active > a, -.navbar-default .navbar-nav > .active > a:hover, -.navbar-default .navbar-nav > .active > a:focus { - color: #fff; -} - -hr { - border: 1px dashed #777; -} - -.btn { - border-radius: .25rem $i; - margin-bottom: 10px; -} - -.btn-group-separated .btn, -.btn-group-separated .btn + .btn { - margin-left: 3px; -} - -.multiSelect { - background-color: $form-color; -} - -.form-control-custom { - /*background-color: $form-color $i; - color: white $i; - border-radius: 0; - box-shadow: 0 0 0 !important;*/ -} - -.form-small { - width: 25%; -} - - -.form-half { - width: 50%; -} - - -h1 { - font-size: 3.5rem $i; - font-weight: 600 $i; -} - -.request-title { - margin-top: 0 $i; - font-size: 1.9rem $i; -} - -a.active { - background-color: $primary-colour; -} - -p { - font-size: 1.1rem $i; -} - -.tags { - display: block; -} - -label { - display: inline-block $i; - margin-bottom: .5rem $i; - font-size: 16px $i; -} - -.small-label { - display: inline-block $i; - margin-bottom: .5rem $i; - font-size: 11px $i; -} - -.small-checkbox { - min-height: 0 $i; -} - - -.round-checkbox { - border-radius: 8px; -} - -.nav-tabs > li { - font-size: 13px; - line-height: 21px; -} - -.nav-tabs > li.active > a, -.nav-tabs > li.active > a:hover, -.nav-tabs > li.active > a:focus { - background: #4e5d6c; -} - -.nav-tabs > li > a > .fa { - padding: 3px 5px 3px 3px; -} - -.nav-tabs > li.nav-tab-right { - float: right; -} - -.nav-tabs > li.nav-tab-right a { - margin-right: 0; - margin-left: 2px; -} - -.nav-tabs > li.nav-tab-icononly .fa { - padding: 3px; -} - -.navbar .nav a .fa, -.dropdown-menu a .fa { - font-size: 130%; - top: 1px; - position: relative; - display: inline-block; - margin-right: 5px; -} - -.dropdown-menu a .fa { - top: 2px; -} - -.btn-danger-outline { - -o-transition: all 0.218s; - -moz-transition: all 0.218s; - -webkit-transition: all 0.218s; - transition: all 0.218s; - color: $danger-colour $i; - background-color: transparent; - background-image: none; - border-color: $danger-colour $i; -} - -.btn-danger-outline:focus, -.btn-danger-outline.focus, -.btn-danger-outline:active, -.btn-danger-outline.active, -.btn-danger-outline:hover, -.open > .btn-danger-outline.dropdown-toggle { - color: #fff $i; - background-color: $danger-colour $i; - border-color: $danger-colour $i; -} - - -.btn-primary-outline { - -o-transition: all 0.218s; - -moz-transition: all 0.218s; - -webkit-transition: all 0.218s; - transition: all 0.218s; - color: $primary-colour-outline $i; - background-color: transparent; - background-image: none; - border-color: $primary-colour-outline $i; -} - -.btn-primary-outline:focus, -.btn-primary-outline.focus, -.btn-primary-outline:active, -.btn-primary-outline.active, -.btn-primary-outline:hover, -.open > .btn-primary-outline.dropdown-toggle { - color: #fff $i; - background-color: $primary-colour $i; - border-color: $primary-colour $i; -} - -.btn-info-outline { - -o-transition: all 0.218s; - -moz-transition: all 0.218s; - -webkit-transition: all 0.218s; - transition: all 0.218s; - color: $info-colour $i; - background-color: transparent; - background-image: none; - border-color: $info-colour $i; -} - -.btn-info-outline:focus, -.btn-info-outline.focus, -.btn-info-outline:active, -.btn-info-outline.active, -.btn-info-outline:hover, -.open > .btn-info-outline.dropdown-toggle { - color: #fff $i; - background-color: $info-colour $i; - border-color: $info-colour $i; -} - -.btn-warning-outline { - -o-transition: all 0.218s; - -moz-transition: all 0.218s; - -webkit-transition: all 0.218s; - transition: all 0.218s; - color: $warning-colour $i; - background-color: transparent; - background-image: none; - border-color: $warning-colour $i; -} - -.btn-warning-outline:focus, -.btn-warning-outline.focus, -.btn-warning-outline:active, -.btn-warning-outline.active, -.btn-warning-outline:hover, -.open > .btn-warning-outline.dropdown-toggle { - color: #fff $i; - background-color: $warning-colour $i; - border-color: $warning-colour $i; -} - -.btn-success-outline { - -o-transition: all 0.218s; - -moz-transition: all 0.218s; - -webkit-transition: all 0.218s; - transition: all 0.218s; - color: $success-colour $i; - background-color: transparent; - background-image: none; - border-color: $success-colour $i; -} - -.btn-success-outline:focus, -.btn-success-outline.focus, -.btn-success-outline:active, -.btn-success-outline.active, -.btn-success-outline:hover, -.open > .btn-success-outline.dropdown-toggle { - color: #fff $i; - background-color: $success-colour $i; - border-color: $success-colour $i; -} - -$border-radius: 10px; - -.scroll-top-wrapper { - position: fixed; - opacity: 0; - visibility: hidden; - overflow: hidden; - text-align: center; - z-index: 99999999; - background-color: $form-color; - color: #eeeeee; - width: 50px; - height: 48px; - line-height: 48px; - right: 30px; - bottom: 30px; - padding-top: 2px; - border-top-left-radius: $border-radius; - border-top-right-radius: $border-radius; - border-bottom-right-radius: $border-radius; - border-bottom-left-radius: $border-radius; - -webkit-transition: all 0.5s ease-in-out; - -moz-transition: all 0.5s ease-in-out; - -ms-transition: all 0.5s ease-in-out; - -o-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; -} - -.scroll-top-wrapper:hover { - background-color: $form-color-lighter; -} - -.scroll-top-wrapper.show { - visibility: visible; - cursor: pointer; - opacity: 1.0; -} - -.scroll-top-wrapper i.fa { - line-height: inherit; -} - - -.no-search-results { - text-align: center; -} - -.text-center { - text-align: center; -} - -.no-search-results .no-search-results-icon { - font-size: 10em; - color: $form-color; -} - -.no-search-results .no-search-results-text { - margin: 20px 0; - color: #ccc; -} - -.form-control-search { - padding: 13px 105px 13px 16px; - height: 100%; -} - -.form-control-withbuttons { - padding-right: 105px; -} - -.input-group-addon .btn-group { - position: absolute; - right: 45px; - z-index: 3; - top: 10px; - box-shadow: 0 0 0; -} - -.input-group-addon .btn-group .btn { - border: 1px solid rgba(255,255,255,.7) !important; - padding: 3px 12px; - color: rgba(255,255,255,.7) !important; -} - -.btn-split .btn { - border-radius: 0 !important; -} - -.btn-split .btn:not(.dropdown-toggle) { - border-radius: .25rem 0 0 .25rem $i; -} - -.btn-split .btn.dropdown-toggle { - border-radius: 0 .25rem .25rem 0 $i; - padding: 12px 8px; -} - -#updateAvailable { - background-color: #df691a; - text-align: center; - font-size: 15px; - padding: 3px 0; -} - -#cacherRunning { - background-color: $form-color; - text-align: center; - font-size: 15px; - padding: 3px 0; -} - -.checkbox label { - display: inline-block; - cursor: pointer; - position: relative; - padding-left: 25px; - margin-right: 15px; - font-size: 13px; - margin-bottom: 10px; -} - -.checkbox label:before { - content: ""; - display: inline-block; - width: 18px; - height: 18px; - margin-right: 10px; - position: absolute; - left: 0; - top: 3px; - bottom: 1px; - border: 2px solid #eee; - border-radius: 3px; -} - -.checkbox input[type=checkbox] { - opacity: 0; -} - -.checkbox input[type=checkbox]:checked + label:before { - content: "\2713"; - font-size: 13px; - color: #fafafa; - text-align: center; - line-height: 13px; -} - - -.radio label { - display: inline-block; - cursor: pointer; - position: relative; - padding-left: 25px; - margin-right: 15px; - font-size: 13px; - margin-bottom: 10px; -} - -.radio label:before { - content: ""; - display: inline-block; - width: 18px; - height: 18px; - margin-right: 10px; - position: absolute; - left: 0; - bottom: 1px; - border: 2px solid #eee; - border-radius: 3px; -} - -.radio input[type=radio] { - display: none; -} - -.radio input[type=radio]:checked + label:before { - content: "\2713"; - font-size: 13px; - color: #fafafa; - text-align: center; - line-height: 13px; -} - -.small-checkbox label { - display: inline-block; - cursor: pointer; - position: relative; - padding-left: 25px; - margin-right: 15px; - font-size: 13px; - margin-bottom: 10px; -} - - -.small-checkbox label:before { - content: ""; - display: inline-block; - width: 18px; - height: 18px; - margin-right: 10px; - position: absolute; - left: 0; - bottom: 1px; - border: 2px solid #eee; - border-radius: 8px; - min-height: 0px $i; -} - -.small-checkbox input[type=checkbox] { - display: none; -} - -.small-checkbox input[type=checkbox]:checked + label:before { - content: "\2713"; - font-size: 13px; - color: #fafafa; - text-align: center; - line-height: 13px; -} - -.small-checkbox label { - min-height: 0 $i; - padding-left: 20px; - margin-bottom: 0; - font-weight: normal; - cursor: pointer; -} - -.table-usermanagement { - margin-top: 20px; -} - -.input-group-sm { - padding-top: 2px; - padding-bottom: 2px; -} - -.tab-pane .form-horizontal .form-group { - margin-right: 15px; - margin-left: 15px; -} - -.bootstrap-datetimepicker-widget.dropdown-menu { - background-color: $form-color; -} - -.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after { - border-bottom: 6px solid $form-color $i; -} - -.bootstrap-datetimepicker-widget table td.active, -.bootstrap-datetimepicker-widget table td.active:hover { - color: #fff $i; -} - -.landing-header { - display: block; - margin: 60px auto; -} - -.landing-block { - background: #2f2f2f $i; - padding: 5px; -} - -.landing-block .media { - margin: 30px auto; - max-width: 450px; -} - -.landing-block .media .media-left { - display: inline-block; - float: left; - width: 70px; -} - -.landing-block .media .media-left i.fa { - font-size: 3em; -} - -.landing-title { - font-weight: bold; -} - -.checkbox-custom { - margin-top: 0 $i; - margin-bottom: 0 $i; -} - -.tooltip_templates { - display: none; -} - -.shadow { - -moz-box-shadow: 3px 3px 5px 6px #191919; - -webkit-box-shadow: 3px 3px 5px 6px #191919; - box-shadow: 3px 3px 5px 6px #191919; -} - -.img-circle { - border-radius: 50%; -} - -#wrapper { - padding-left: 0; - -webkit-transition: all 0.5s ease; - -moz-transition: all 0.5s ease; - -o-transition: all 0.5s ease; - transition: all 0.5s ease; -} - -#wrapper.toggled { - padding-right: 250px; -} - -#sidebar-wrapper { - z-index: 1000; - position: fixed; - right: 250px; - width: 0; - height: 100%; - margin-right: -250px; - overflow-y: auto; - background: #4e5d6c; - padding-left: 0; - -webkit-transition: all 0.5s ease; - -moz-transition: all 0.5s ease; - -o-transition: all 0.5s ease; - transition: all 0.5s ease; -} - -#wrapper.toggled #sidebar-wrapper { - width: 500px; -} - -#page-content-wrapper { - width: 100%; - position: absolute; - padding: 15px; -} - -#wrapper.toggled #page-content-wrapper { - position: absolute; - margin-left: -250px; -} - -/* Sidebar Styles */ - -.sidebar-nav { - position: absolute; - top: 0; - width: 500px; - margin: 0; - padding-left: 0; - list-style: none; -} - -.sidebar-nav li { - text-indent: 20px; - line-height: 40px; -} - -.sidebar-nav li a { - display: block; - text-decoration: none; - color: #999999; -} - -.sidebar-nav li a:hover { - text-decoration: none; - color: #fff; - background: rgba(255,255,255,0.2); -} - -.sidebar-nav li a:active, -.sidebar-nav li a:focus { - text-decoration: none; -} - -.sidebar-nav > .sidebar-brand { - height: 65px; - font-size: 18px; - line-height: 60px; -} - -.sidebar-nav > .sidebar-brand a { - color: #999999; -} - -.sidebar-nav > .sidebar-brand a:hover { - color: #fff; - background: none; -} - -@media(min-width:768px) { - #wrapper { - padding-right: 250px; - } - - #wrapper.toggled { - padding-right: 0; - } - - #sidebar-wrapper { - width: 500px; - } - - #wrapper.toggled #sidebar-wrapper { - width: 0; - } - - #page-content-wrapper { - padding: 20px; - position: relative; - } - - #wrapper.toggled #page-content-wrapper { - position: relative; - margin-right: 0; - } -} - -#lightbox { - background-color: grey; - filter: alpha(opacity=50); /* IE */ - opacity: 0.5; /* Safari, Opera */ - -moz-opacity: 0.50; /* FireFox */ - top: 0px; - left: 0px; - z-index: 20; - height: 100%; - width: 100%; - background-repeat: no-repeat; - background-position: center; - position: absolute; -} - - -.list-group-item-dropdown { - position: relative; - display: block; - padding: 10px 15px; - margin-bottom: -1px; - background-color: #3e3e3e; - border: 1px solid transparent; -} - -.wizard-heading { - text-align: center; -} - -.wizard-img { - width: 300px; - display: block $i; - margin: 0 auto $i; -} - -.pace { - -webkit-pointer-events: none; - pointer-events: none; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - -.pace-inactive { - display: none; -} - -.pace .pace-progress { - background: $primary-colour; - position: fixed; - z-index: 2000; - top: 0; - right: 100%; - width: 100%; - height: 5px; -} - -.navbar-brand { - float: left; - font-size: 19px; - line-height: 21px; - height: 40px; -} - -.gravatar { - border-radius: 1em; -} - - -// Bootstrap overrides - -html { - font-size: 16px; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -body { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 14px; - line-height: 1.42857143; - color: #333; - background-color: #fff; -} - -.ui-datatable-odd { - background-color: $form-color $i; -} - -.ui-datatable-even { - background-color: $form-color-lighter $i; -} - -.ui-widget-content { - border: 1px solid $form-color-lighter $i; - background: $form-color $i; -} - -.card-header { - color: #ebebeb; - padding: 10px 15px; - border-bottom: 1px solid transparent; - background: $form-color; - height: 40px; -} - -.card-header > a { - color: white; -} - - -// PrimeNg Overide -.ui-growl-item { - margin-top: 35px $i; -} - -textarea { - resize: vertical; -} - -.poster { - // box-shadow: 3px 3px 15px #000000; - border-radius: 5px; -} - - -.form-control:focus { - border-color: rgb(104, 145, 162); - outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162); -} - -.form-control:focus#search { - border-color: transparent; - outline: 0; - -webkit-box-shadow: none; - box-shadow: none; -} - -.ui-state-default.ui-unselectable-text { - display: none; -} - -.ui-state-highlight { - background: $primary-colour; -} - -.ui-inputtext { - background: $form-color; -} - -.ui-state-default { - border: 1px solid $form-color-lighter; -} - -table a:not(.btn) { - text-decoration: none; -} - -a > h4 { - color: #df691a; - text-decoration: none; -} - -a > h4:hover { - text-decoration: underline; -} - -.form-error { - border: 1px solid #d9534f; -} - -.error-text { - color: #d9534f; -} - -.btn-split .btn.dropdown-toggle { - border-radius: 0 0.25rem 0.25rem 0 !important; - padding: 3.5px 10px; - } - -.ui-treetable tbody td { - padding: 0.25em 3.5em; -} - -.small-padding { - padding-top: 5px; - padding-bottom: 5px; -} - -.backdrop{ - box-shadow: 3px 3px 10px #000000; - background-position: 50% 33%; - background-size: cover; -} - -.tv-overview{ - -webkit-text-fill-color: white; - -webkit-text-stroke-width: 0.3px; - -webkit-text-stroke-color: black; - font-size: 0.9rem !important -} - -.card { - padding-top:15px; -} - -.searchWidth { - width: 94%; -} - -.ui-state-active { - background-color: $primary-colour-outline $i; - color: black $i; -} - -#themeContent { - font-family: monospace; -} - -.reported-by, -.reported-user, -.subject-category, -.subject { - display: inline-block; -} - -.custom-modal-backdrop { - opacity: 0.5 !important; - filter: alpha(opacity=0.5); -} - -.window { - opacity: 1 !important; - top: 7%; -} - -.modal.fade .modal-dialog { - -webkit-transform: translate(0, 0%); - -ms-transform: translate(0, 0%); - -o-transform: translate(0, 0%); - transform: translate(0, 0%); - -webkit-transition: -webkit-transform .3s ease-out; - -o-transition: -o-transform .3s ease-out; - transition: transform .3s ease-out; -} - -.modal-footer .btn+.btn { - margin-left: 5px; - margin-bottom: 10px; -} - -.label { - display: inline; - padding: .2em .6em .3em; - font-size: 75%; - font-weight: bold; - line-height: 1; - color: #ffffff; - text-align: center; - white-space: normal; - vertical-align: baseline; - border-radius: .25em; -} - -.album-cover { - width:300px; -} - - -::ng-deep ngb-accordion > div.card > div.card-header { - padding:0px; -} -::ng-deep ngb-accordion > div.card { - color:white; - padding-top: 0px; -} diff --git a/src/Ombi/ClientApp/src/styles/scrollbar.scss b/src/Ombi/ClientApp/src/styles/scrollbar.scss deleted file mode 100644 index a384ff9c1..000000000 --- a/src/Ombi/ClientApp/src/styles/scrollbar.scss +++ /dev/null @@ -1,23 +0,0 @@ -::-webkit-scrollbar { - width: 15px; -} - -::-webkit-scrollbar-track { - background-color: rgba(0,0,0,.2); -} - -::-webkit-scrollbar-thumb { - min-height: 50px; - background-color: rgba(255,255,255,.15); - border: 3px solid transparent; - border-radius: 8px; - background-clip: padding-box; -} - -pre::-webkit-scrollbar-track { - background-color: rgba(255,255,255,.2); -} - -pre::-webkit-scrollbar-thumb { - background-color: rgba(0,0,0,.15); -}