From 2702747549ab3822fcdd8f8432853a2ff479e04c Mon Sep 17 00:00:00 2001 From: tidusjar Date: Sun, 27 Jan 2019 22:06:35 +0000 Subject: [PATCH] phew! !wip --- src/Ombi/ClientApp/angular.json | 2 +- .../card/discover-card.component.html | 33 ++-- .../card/discover-card.component.scss | 9 + .../discover/card/discover-card.component.ts | 1 + .../src/app/discover/discover.component.html | 8 +- .../src/app/discover/discover.component.scss | 3 + .../src/app/discover/discover.component.ts | 7 +- .../src/app/discover/discover.module.ts | 2 + .../ClientApp/src/app/discover/interfaces.ts | 1 + .../app/media-details/media-details.module.ts | 2 + .../movie-details.component.html | 104 +++++++++++- .../movie-details.component.scss | 155 +++++++++++++++++- .../media-details/movie-details.component.ts | 5 +- .../src/app/my-nav/my-nav.component.css | 11 -- .../src/app/my-nav/my-nav.component.html | 3 +- .../src/app/pipes/ThousandShortPipe.ts | 23 +++ .../ClientApp/src/app/pipes/pipe.module.ts | 5 +- src/Ombi/ClientApp/src/styles/_imports.scss | 3 +- src/Ombi/ClientApp/src/styles/shared.scss | 27 +++ src/Ombi/Controllers/V1/ImagesController.cs | 6 +- 20 files changed, 356 insertions(+), 54 deletions(-) create mode 100644 src/Ombi/ClientApp/src/app/discover/discover.component.scss create mode 100644 src/Ombi/ClientApp/src/app/pipes/ThousandShortPipe.ts create mode 100644 src/Ombi/ClientApp/src/styles/shared.scss diff --git a/src/Ombi/ClientApp/angular.json b/src/Ombi/ClientApp/angular.json index 867fd9a87..821a3ef78 100644 --- a/src/Ombi/ClientApp/angular.json +++ b/src/Ombi/ClientApp/angular.json @@ -24,7 +24,7 @@ "src/assets" ], "styles": [ - "src/styles/styles.scss", + "src/styles/_imports.scss", "node_modules/bootstrap/scss/bootstrap.scss", "node_modules/angular-bootstrap-md/scss/mdb-free.scss", "node_modules/pace/themes/orange/pace-theme-flash.css", 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 index 6ae7363f6..c607e8f2a 100644 --- a/src/Ombi/ClientApp/src/app/discover/card/discover-card.component.html +++ b/src/Ombi/ClientApp/src/app/discover/card/discover-card.component.html @@ -1,17 +1,20 @@ - +
+ - - {{result.title}} - - +
{{result.rating | number:'1.0-1'}}
+ + {{result.title}} + + -
{{result.title}}
-
{{result.title}}
-
{{result.title | truncate:13}}
- - - - - - - \ No newline at end of file +
{{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 index 52aba3bf1..8c92602b2 100644 --- a/src/Ombi/ClientApp/src/app/discover/card/discover-card.component.scss +++ b/src/Ombi/ClientApp/src/app/discover/card/discover-card.component.scss @@ -1,3 +1,12 @@ .card-poster { max-height: 225px; +} + +.card-spacing { + margin-top:10%; +} + +.rating { + position: absolute; + font-weight: bold; } \ 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 index a57a40467..99aca27ff 100644 --- a/src/Ombi/ClientApp/src/app/discover/card/discover-card.component.ts +++ b/src/Ombi/ClientApp/src/app/discover/card/discover-card.component.ts @@ -45,6 +45,7 @@ export class DiscoverCardComponent implements OnInit { this.result.available = updated.available; this.result.requested = updated.requested; this.result.requested = updated.requestProcessing; + this.result.rating = updated.voteAverage; } diff --git a/src/Ombi/ClientApp/src/app/discover/discover.component.html b/src/Ombi/ClientApp/src/app/discover/discover.component.html index a1220b7ef..c2dece7be 100644 --- a/src/Ombi/ClientApp/src/app/discover/discover.component.html +++ b/src/Ombi/ClientApp/src/app/discover/discover.component.html @@ -1,5 +1,7 @@ -
-
- +
+
+
+ +
\ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/discover/discover.component.scss b/src/Ombi/ClientApp/src/app/discover/discover.component.scss new file mode 100644 index 000000000..a4ac90926 --- /dev/null +++ b/src/Ombi/ClientApp/src/app/discover/discover.component.scss @@ -0,0 +1,3 @@ +.full-height { + height:100%; +} \ 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 index 554a71c4e..31fcd0dbe 100644 --- a/src/Ombi/ClientApp/src/app/discover/discover.component.ts +++ b/src/Ombi/ClientApp/src/app/discover/discover.component.ts @@ -6,6 +6,7 @@ import { trigger, transition, style, animate } from "@angular/animations"; @Component({ templateUrl: "./discover.component.html", + styleUrls: ["./discover.component.scss"], animations: [ trigger('slideIn', [ transition(':enter', [ @@ -38,7 +39,8 @@ export class DiscoverComponent implements OnInit { title: m.title, type: RequestType.movie, id: m.id, - url: `http://www.imdb.com/title/${m.imdbId}/` + url: `http://www.imdb.com/title/${m.imdbId}/`, + rating: m.voteAverage }); }); this.tvShows.forEach(m => { @@ -49,7 +51,8 @@ export class DiscoverComponent implements OnInit { title: m.title, type: RequestType.tvShow, id: m.id, - url: undefined + url: undefined, + rating: +m.rating, }); }); diff --git a/src/Ombi/ClientApp/src/app/discover/discover.module.ts b/src/Ombi/ClientApp/src/app/discover/discover.module.ts index 19ac82b11..7e9cb9494 100644 --- a/src/Ombi/ClientApp/src/app/discover/discover.module.ts +++ b/src/Ombi/ClientApp/src/app/discover/discover.module.ts @@ -7,6 +7,7 @@ import { SharedModule } from "../shared/shared.module"; import { DiscoverComponent } from "./discover.component"; import { DiscoverCardComponent } from "./card/discover-card.component"; import { AuthGuard } from "../auth/auth.guard"; +import { PipeModule } from "../pipes/pipe.module"; const routes: Routes = [ { path: "", component: DiscoverComponent, canActivate: [AuthGuard] }, @@ -15,6 +16,7 @@ const routes: Routes = [ imports: [ RouterModule.forChild(routes), SharedModule, + PipeModule, ], declarations: [ DiscoverComponent, diff --git a/src/Ombi/ClientApp/src/app/discover/interfaces.ts b/src/Ombi/ClientApp/src/app/discover/interfaces.ts index 5e62d781a..7aca7ee3d 100644 --- a/src/Ombi/ClientApp/src/app/discover/interfaces.ts +++ b/src/Ombi/ClientApp/src/app/discover/interfaces.ts @@ -8,4 +8,5 @@ export interface IDiscoverCardResult { type: RequestType; available: boolean; requested: boolean; + rating: number; } \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/media-details/media-details.module.ts b/src/Ombi/ClientApp/src/app/media-details/media-details.module.ts index 6453a2277..193532263 100644 --- a/src/Ombi/ClientApp/src/app/media-details/media-details.module.ts +++ b/src/Ombi/ClientApp/src/app/media-details/media-details.module.ts @@ -5,6 +5,7 @@ import { SearchService } from "../services"; import { SharedModule } from "../shared/shared.module"; import { MovieDetailsComponent } from "./movie-details.component"; +import { PipeModule } from "../pipes/pipe.module"; const routes: Routes = [ { path: "movie/:movieDbId", component: MovieDetailsComponent }, @@ -13,6 +14,7 @@ const routes: Routes = [ imports: [ RouterModule.forChild(routes), SharedModule, + PipeModule, ], declarations: [ MovieDetailsComponent, diff --git a/src/Ombi/ClientApp/src/app/media-details/movie-details.component.html b/src/Ombi/ClientApp/src/app/media-details/movie-details.component.html index d11504ee6..73b80937d 100644 --- a/src/Ombi/ClientApp/src/app/media-details/movie-details.component.html +++ b/src/Ombi/ClientApp/src/app/media-details/movie-details.component.html @@ -1,12 +1,102 @@
-
- -
- -
-
- {{movie.title}} + +
+
+
+ +
+
+
+
+

{{movie.title}} ({{movie.releaseDate + | date:'yyyy'}}) +

+
+
+
+
+ +
+
+
+ + + + + +
+ +
+
+ + + +
+ Theatrical Release: {{movie.releaseDate | date: 'mediumDate'}}
+
+ Digital Release: + {{movie.digitalReleaseDate | date: + 'mediumDate'}} +
+
+ User Score: {{movie.voteAverage | + number:'1.0-1'}}/10 +
+
+ Votes: {{movie.voteCount | + thousandShort: 1}} +
+ + + + + +
+
+ + + {{movie.overview}} + + +
+
+
+
+
+
+ +
+
+
+ + +
+
+
+ + + + + + + + + +
\ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/media-details/movie-details.component.scss b/src/Ombi/ClientApp/src/app/media-details/movie-details.component.scss index da924d82d..67e4a6741 100644 --- a/src/Ombi/ClientApp/src/app/media-details/movie-details.component.scss +++ b/src/Ombi/ClientApp/src/app/media-details/movie-details.component.scss @@ -1,7 +1,150 @@ -.banner { -position: absolute; -top: 0px; -left: 0px; -right: 0px; -width: 100%; +//MINE +@media (max-width: 570px) { + h1 { + font-size: 1.5rem; + } +} + +// Change + + +#summary-wrapper .full-screenshot, +.summary-wrapper .full-screenshot, +#watching-wrapper .full-screenshot, +.hero-wrapper .full-screenshot, +#statics-top-wrapper .full-screenshot { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-size: cover; + background-position: center; + background-position: 50% 10%; + opacity: 0; + transition: all 1s; +} + +#summary-wrapper, +.summary-wrapper { + background-color: #000; + background-size: cover; + background-position: 50% 10%; + transition: all .5s; + height: 550px; + color: #fff; + position: relative; +} + + +#summary-wrapper .full-screenshot.enabled, +.summary-wrapper .full-screenshot.enabled, +#watching-wrapper .full-screenshot.enabled, +.hero-wrapper .full-screenshot.enabled, +#statics-top-wrapper .full-screenshot.enabled { + opacity: 1; +} + +#summary-wrapper .shadow-base, +.summary-wrapper .shadow-base { + height: 120px; + bottom: 0; + background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.8) 100%); + background-image: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.8) 100%); + background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 100%); + background-repeat: repeat-x; +} + +.shadow-base { + height: 75px; + width: 100%; + position: absolute; + bottom: 0; + left: 0; + background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%); + background-image: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%); + background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#4D000000', GradientType=0); +} + +#summary-wrapper .summary .container, +.summary-wrapper .summary .container { + position: absolute; + bottom: 0; + left: 0; + 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; +} + +#summary-wrapper .summary .container h1 .year, +.summary-wrapper .summary .container h1 .year { + color: #999; +} + +#summary-wrapper .summary .container h1, +.summary-wrapper .summary .container h1 { + margin: 0; + text-shadow: 0 0 20px #000; + line-height: 1.2; +} + +#info-wrapper { + min-height: 600px; +} + +section { + background-color: #fff; +} + +#info-wrapper .sidebar.affixable.affix-top { + position: relative !important; +} + +#info-wrapper .sidebar { + margin-top: -180px; +} + +#info-wrapper .sidebar .poster { + border: solid 3px #fff !important; + position: relative; + -webkit-box-shadow: 0 0 20px 0 #666; + box-shadow: 0 0 20px 0 #666; +} + +#info-wrapper .sidebar .poster img { + width: 100%; +} + +#info-wrapper .sidebar .poster .real { + height: 100%; + top: 0; + left: 0; +} + +.card-spacer { + padding-top:1%; +} + +.card-full { + height: 100%; +} + +.imdb-color { + color:black; + background-color: #f5de50; +} + +.btn-spacing { + margin-top:10px; } \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/media-details/movie-details.component.ts b/src/Ombi/ClientApp/src/app/media-details/movie-details.component.ts index ef8566311..341a0639c 100644 --- a/src/Ombi/ClientApp/src/app/media-details/movie-details.component.ts +++ b/src/Ombi/ClientApp/src/app/media-details/movie-details.component.ts @@ -24,7 +24,10 @@ export class MovieDetailsComponent { this.searchService.getMovieInformation(this.theMovidDbId).subscribe(x => { this.movie = x; - this.imageService.getMovieBanner(this.theMovidDbId.toString()).subscribe(x => this.movie.background = x); + this.imageService.getMovieBanner(this.theMovidDbId.toString()).subscribe(x => { + this.movie.background = this.sanitizer.bypassSecurityTrustStyle + ("url(" + x + ")"); + }); }); } diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.css b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.css index 64e92b80a..22d91d683 100644 --- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.css +++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.css @@ -19,17 +19,6 @@ flex: 1 1 auto; } -@media (max-width: 978px) { - .top-spacing { - padding-top: 10% - } -} -@media (min-width: 979px) { - .top-spacing { - padding-top: 4% - } -} - .example-form { min-width: 150px; max-width: 500px; diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html index d98dc3e49..0e2f16d10 100644 --- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html +++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html @@ -40,9 +40,8 @@ -
-
+ diff --git a/src/Ombi/ClientApp/src/app/pipes/ThousandShortPipe.ts b/src/Ombi/ClientApp/src/app/pipes/ThousandShortPipe.ts new file mode 100644 index 000000000..14e3ab336 --- /dev/null +++ b/src/Ombi/ClientApp/src/app/pipes/ThousandShortPipe.ts @@ -0,0 +1,23 @@ +import { Pipe, PipeTransform } from "@angular/core"; + +@Pipe({ + name: "thousandShort", +}) +export class ThousandShortPipe implements PipeTransform { + transform(input: any, args?: any): any { + var exp, rounded, + suffixes = ['k', 'M', 'G', 'T', 'P', 'E']; + + if (Number.isNaN(input)) { + return null; + } + + if (input < 1000) { + return input; + } + + exp = Math.floor(Math.log(input) / Math.log(1000)); + + return (input / Math.pow(1000, exp)).toFixed(args) + suffixes[exp - 1]; + } +} diff --git a/src/Ombi/ClientApp/src/app/pipes/pipe.module.ts b/src/Ombi/ClientApp/src/app/pipes/pipe.module.ts index 08134909a..0825d2429 100644 --- a/src/Ombi/ClientApp/src/app/pipes/pipe.module.ts +++ b/src/Ombi/ClientApp/src/app/pipes/pipe.module.ts @@ -1,10 +1,11 @@ import { ModuleWithProviders, NgModule } from "@angular/core"; import { HumanizePipe } from "./HumanizePipe"; +import { ThousandShortPipe } from "./ThousandShortPipe"; @NgModule({ imports: [], - declarations: [HumanizePipe], - exports: [HumanizePipe], + declarations: [HumanizePipe, ThousandShortPipe], + exports: [HumanizePipe, ThousandShortPipe], }) export class PipeModule { diff --git a/src/Ombi/ClientApp/src/styles/_imports.scss b/src/Ombi/ClientApp/src/styles/_imports.scss index f59cadf3b..6563b6f85 100644 --- a/src/Ombi/ClientApp/src/styles/_imports.scss +++ b/src/Ombi/ClientApp/src/styles/_imports.scss @@ -1 +1,2 @@ -@import "./styles.scss" \ No newline at end of file +@import "./styles.scss"; +@import "./shared.scss"; \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/styles/shared.scss b/src/Ombi/ClientApp/src/styles/shared.scss new file mode 100644 index 000000000..1d1c29ad9 --- /dev/null +++ b/src/Ombi/ClientApp/src/styles/shared.scss @@ -0,0 +1,27 @@ + +@media (max-width: 978px) { + .top-spacing { + padding-top: 10%; + } + } + @media (min-width: 979px) { + .top-spacing { + padding-top: 4%; + } + } + + + .btn-blue { + background-color: #1976D2; + } + + .btn-pink { + background-color: #C2185B; + } + .btn-green { + background-color: #1DE9B6; + } + + .btn-orange { + background-color: #F57C00; + } \ No newline at end of file diff --git a/src/Ombi/Controllers/V1/ImagesController.cs b/src/Ombi/Controllers/V1/ImagesController.cs index 32599533f..44594b6d8 100644 --- a/src/Ombi/Controllers/V1/ImagesController.cs +++ b/src/Ombi/Controllers/V1/ImagesController.cs @@ -159,12 +159,12 @@ namespace Ombi.Controllers.V1 return string.Empty; } - if (images.moviebanner?.Any() ?? false) + if (images.moviebackground?.Any() ?? false) { - var enImage = images.moviebanner.Where(x => x.lang == "en").OrderByDescending(x => x.likes).Select(x => x.url).FirstOrDefault(); + var enImage = images.moviebackground.Where(x => x.lang == "en").OrderByDescending(x => x.likes).Select(x => x.url).FirstOrDefault(); if (enImage == null) { - return images.moviebanner.OrderByDescending(x => x.likes).Select(x => x.url).FirstOrDefault(); + return images.moviebackground.OrderByDescending(x => x.likes).Select(x => x.url).FirstOrDefault(); } return enImage; }