From c32835dc1b6ba7006954a8d6e181c0ea3c480d6c Mon Sep 17 00:00:00 2001 From: TidusJar Date: Mon, 28 Jan 2019 10:19:07 +0000 Subject: [PATCH] UI !wip --- .../card/discover-card.component.html | 15 ++--- .../card/discover-card.component.scss | 35 +++++++++- .../src/app/discover/discover.component.html | 4 +- .../src/app/discover/discover.component.scss | 8 ++- .../src/app/discover/discover.component.ts | 4 +- .../ClientApp/src/app/discover/interfaces.ts | 1 + .../src/app/my-nav/my-nav.component.html | 8 +-- .../ClientApp/src/app/shared/shared.module.ts | 4 +- src/Ombi/ClientApp/src/styles/Styles.scss | 5 +- .../ClientApp/src/styles/mat-palette.scss | 66 +++++++++++++++++++ 10 files changed, 128 insertions(+), 22 deletions(-) create mode 100644 src/Ombi/ClientApp/src/styles/mat-palette.scss 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 c607e8f2a..4d33acb77 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,20 +1,19 @@
- - -
{{result.rating | number:'1.0-1'}}
+ - {{result.title}} + {{result.title}}
{{result.title}}
{{result.title}}
{{result.title | truncate:13}}
+ {{result.overview | truncate: 25}} - - - - + +
\ 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 8c92602b2..5c46170ee 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,12 +1,41 @@ -.card-poster { - max-height: 225px; +$ombi-primary:#3f3f3f; +#cardImage { + max-height: 153px; + border-radius: 5px 5px 0px 0px; +} + +.dark-card { + background-color: $ombi-primary; + border-radius: 8px; + color: white; } .card-spacing { - margin-top:10%; + margin-top: 10%; } .rating { position: absolute; font-weight: bold; +} + +$border-width: 2px; +.movie-image { + border-bottom: $border-width orange solid; +} + +.tv-image { + border-bottom: $border-width teal solid; +} + +.expand { + text-align: center; +} + +.grow { + transition: all .2s ease-in-out; +} + +.grow:hover { + transform: scale(1.1); } \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/discover/discover.component.html b/src/Ombi/ClientApp/src/app/discover/discover.component.html index c2dece7be..d026d3991 100644 --- a/src/Ombi/ClientApp/src/app/discover/discover.component.html +++ b/src/Ombi/ClientApp/src/app/discover/discover.component.html @@ -1,6 +1,6 @@ -
+
-
+
diff --git a/src/Ombi/ClientApp/src/app/discover/discover.component.scss b/src/Ombi/ClientApp/src/app/discover/discover.component.scss index a4ac90926..a1ae23db7 100644 --- a/src/Ombi/ClientApp/src/app/discover/discover.component.scss +++ b/src/Ombi/ClientApp/src/app/discover/discover.component.scss @@ -1,3 +1,9 @@ .full-height { - height:100%; + height: 100%; +} + + +.small-middle-container{ + margin: auto; + width: 95%; } \ 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 31fcd0dbe..aa5c3273b 100644 --- a/src/Ombi/ClientApp/src/app/discover/discover.component.ts +++ b/src/Ombi/ClientApp/src/app/discover/discover.component.ts @@ -40,7 +40,8 @@ export class DiscoverComponent implements OnInit { type: RequestType.movie, id: m.id, url: `http://www.imdb.com/title/${m.imdbId}/`, - rating: m.voteAverage + rating: m.voteAverage, + overview: m.overview }); }); this.tvShows.forEach(m => { @@ -53,6 +54,7 @@ export class DiscoverComponent implements OnInit { id: m.id, url: undefined, rating: +m.rating, + overview: m.overview }); }); diff --git a/src/Ombi/ClientApp/src/app/discover/interfaces.ts b/src/Ombi/ClientApp/src/app/discover/interfaces.ts index 7aca7ee3d..e2e5e7e67 100644 --- a/src/Ombi/ClientApp/src/app/discover/interfaces.ts +++ b/src/Ombi/ClientApp/src/app/discover/interfaces.ts @@ -9,4 +9,5 @@ export interface IDiscoverCardResult { available: boolean; requested: boolean; rating: number; + overview: string; } \ No newline at end of file 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 0e2f16d10..c1068f690 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 @@ -7,17 +7,17 @@ find_replace Discover - + search Search - + list Requests - + settings Settings - + exit_to_app {{ 'NavigationBar.Logout' | translate }} diff --git a/src/Ombi/ClientApp/src/app/shared/shared.module.ts b/src/Ombi/ClientApp/src/app/shared/shared.module.ts index b76f2eeb6..32abf33ae 100644 --- a/src/Ombi/ClientApp/src/app/shared/shared.module.ts +++ b/src/Ombi/ClientApp/src/app/shared/shared.module.ts @@ -11,7 +11,7 @@ import { InputSwitchModule, SidebarModule } from "primeng/primeng"; import { MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatTooltipModule} from '@angular/material'; - import { MatCardModule, MatInputModule, MatTabsModule, MatAutocompleteModule, MatCheckboxModule } from "@angular/material"; + import { MatCardModule, MatInputModule, MatTabsModule, MatAutocompleteModule, MatCheckboxModule, MatExpansionModule } from "@angular/material"; @NgModule({ declarations: [ @@ -35,6 +35,7 @@ import { MatListModule, MatToolbarModule, MatCheckboxModule, + MatExpansionModule, ], exports: [ TranslateModule, @@ -56,6 +57,7 @@ import { MatTooltipModule, MatAutocompleteModule, MatCheckboxModule, + MatExpansionModule, ], }) export class SharedModule {} diff --git a/src/Ombi/ClientApp/src/styles/Styles.scss b/src/Ombi/ClientApp/src/styles/Styles.scss index 407d812fc..ab931ccbd 100644 --- a/src/Ombi/ClientApp/src/styles/Styles.scss +++ b/src/Ombi/ClientApp/src/styles/Styles.scss @@ -1,4 +1,5 @@ @import '~@angular/material/theming'; +@import "./mat-palette.scss"; // Plus imports for other components in your app. // Include the common styles for Angular Material. We include this here so that you only @@ -9,8 +10,8 @@ // 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); +$ombi-app-primary: mat-palette($ombi-primary, 500); +$ombi-app-accent: mat-palette($ombi-accent, A200, A100, A400); // The warn palette is optional (defaults to red). $ombi-app-warn: mat-palette($mat-deep-orange); diff --git a/src/Ombi/ClientApp/src/styles/mat-palette.scss b/src/Ombi/ClientApp/src/styles/mat-palette.scss new file mode 100644 index 000000000..5bc868d13 --- /dev/null +++ b/src/Ombi/ClientApp/src/styles/mat-palette.scss @@ -0,0 +1,66 @@ +$ombi-accent: ( + 50 : #e5f1ed, + 100 : #bedcd3, + 200 : #92c5b6, + 300 : #66ad99, + 400 : #469c83, + 500 : #258a6d, + 600 : #218265, + 700 : #1b775a, + 800 : #166d50, + 900 : #0d5a3e, + A100 : #90ffd2, + A200 : #5dffbd, + A400 : #2affa8, + A700 : #10ff9e, + contrast: ( + 50 : #000000, + 100 : #000000, + 200 : #000000, + 300 : #000000, + 400 : #ffffff, + 500 : #ffffff, + 600 : #ffffff, + 700 : #ffffff, + 800 : #ffffff, + 900 : #ffffff, + A100 : #000000, + A200 : #000000, + A400 : #000000, + A700 : #000000, + ) +); + +$ombi-primary: ( + 50 : #e8e8e8, + 100 : #c5c5c5, + 200 : #9f9f9f, + 300 : #797979, + 400 : #5c5c5c, + 500 : #3f3f3f, + 600 : #393939, + 700 : #313131, + 800 : #292929, + 900 : #1b1b1b, + A100 : #f07575, + A200 : #eb4747, + A400 : #ff0000, + A700 : #e60000, + contrast: ( + 50 : #000000, + 100 : #000000, + 200 : #000000, + 300 : #ffffff, + 400 : #ffffff, + 500 : #ffffff, + 600 : #ffffff, + 700 : #ffffff, + 800 : #ffffff, + 900 : #ffffff, + A100 : #000000, + A200 : #ffffff, + A400 : #ffffff, + A700 : #ffffff, + ) +); +