Added in the popup !wip

src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.html

@@ -0,0 +1,56 @@
+<div mat-dialog-content class="background">
+    <div class="row">
+        <div class="col-4">
+            <img id="cardImage" src="{{data.posterPath}}" class="poster" alt="{{data.title}}">
+        </div>
+        <div class="col-8">
+
+            <div class="row">
+                <div class="col-12">
+                    <h3><strong>{{data.title}}</strong></h3>
+                </div>
+
+            </div>
+            <div class="row top-spacing details">
+                <div class="col-6">
+                    <strong>Availability:</strong> Unavailable
+                </div>
+                <div class="col-6">
+                    <strong>Studio: </strong> Studio1
+                </div>
+                <div class="col-6">
+                    <strong>Request Status: </strong> Studio1
+                </div>
+                <div class="col-6">
+                    <strong>Director: </strong> Studio1
+                </div>
+                <div class="col-6">
+                    <strong>In Cinemas: </strong> Studio1
+                </div>
+                <div class="col-6">
+                    <strong>Writer: </strong> Studio1
+                </div>
+            </div>
+
+            <div class="row top-spacing">
+                <div class="col-12">
+                    {{data.overview}}
+                </div>
+            </div>
+
+
+        </div>
+
+    </div>
+</div>
+<div mat-dialog-actions>
+    <div class="action-buttons-right">
+            <div class="col-md-12">
+        <button mat-raised-button (click)="onNoClick()" class="request-btn">
+            <mat-icon>add</mat-icon>
+            Request
+        </button>
+    </div>
+</div>
+
+</div>

src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.scss

@@ -0,0 +1,31 @@
+$ombi-primary:#3f3f3f;
+$ombi-primary-700:#313131;
+$ombi-accent-700:#166d50;
+.poster {
+    max-width: 100%;
+    border-radius: 2%;
+}
+
+.details {
+    background: $ombi-primary-700;
+    padding: 2%;
+    border-radius: 10px;
+}
+
+.details strong {
+    font-weight: bold;
+}
+
+h3 strong {
+    font-weight: bold;
+}
+
+.request-btn {
+    background-color: $ombi-accent-700;
+    color: white;
+}
+
+.action-buttons-right {
+    width: 100%;
+    text-align: right;
+}

src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.ts

@@ -0,0 +1,18 @@
+import { Component, Inject } from "@angular/core";
+import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
+import { IDiscoverCardResult } from "../interfaces";
+
+@Component({
+    selector: "discover-card-details",
+    templateUrl: "./discover-card-details.component.html",
+    styleUrls: ["./discover-card-details.component.scss"],
+})
+export class DiscoverCardDetailsComponent {
+    constructor(
+        public dialogRef: MatDialogRef<DiscoverCardDetailsComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: IDiscoverCardResult) { }
+    
+      onNoClick(): void {
+        this.dialogRef.close();
+      }
+}

src/Ombi/ClientApp/src/app/discover/card/discover-card.component.html

@@ -5,13 +5,12 @@
         </a>
         <mat-card-content>
 
-            <h5 *ngIf="result.title.length <= 10">{{result.title}}</h5>
-            <h6 *ngIf="result.title.length > 10 && result.title.length <= 13">{{result.title}}</h6>
+            <h6 *ngIf="result.title.length <= 13">{{result.title}}</h6>
             <h6 *ngIf="result.title.length > 13" matTooltip="{{result.title}}">{{result.title | truncate:13}}</h6>
-            <small>{{result.overview | truncate: 25}}</small>
+            <small>{{result.overview | truncate: 50}}</small>
         </mat-card-content>
         <mat-card-actions class="expand">
-            <button mat-icon-button>
+            <button mat-icon-button (click)="openDetails(result);">
                 <mat-icon>expand_more</mat-icon>
             </button>
         </mat-card-actions>

src/Ombi/ClientApp/src/app/discover/card/discover-card.component.scss

@@ -1,6 +1,6 @@
 $ombi-primary:#3f3f3f;
 #cardImage {
-    max-height: 153px;
+    max-height: 163px;
     border-radius: 5px 5px 0px 0px;
 }
 
@@ -8,12 +8,14 @@ $ombi-primary:#3f3f3f;
     background-color: $ombi-primary;
     border-radius: 8px;
     color: white;
+    height: 360px;
 }
 
 .card-spacing {
     margin-top: 10%;
 }
 
+
 .rating {
     position: absolute;
     font-weight: bold;
@@ -38,4 +40,10 @@ $border-width: 2px;
 
 .grow:hover {
     transform: scale(1.1);
+}
+
+::ng-deep mat-dialog-container.mat-dialog-container {
+    background-color: $ombi-primary;
+    color: white;
+    border-radius: 2%
 }

src/Ombi/ClientApp/src/app/discover/card/discover-card.component.ts

@@ -2,6 +2,8 @@ import { Component, OnInit, Input } from "@angular/core";
 import { IDiscoverCardResult } from "../interfaces";
 import { RequestType, ISearchTvResult, ISearchMovieResult } from "../../interfaces";
 import { SearchService } from "../../services";
+import { MatDialog } from "@angular/material";
+import { DiscoverCardDetailsComponent } from "./discover-card-details.component";
 
 @Component({
     selector: "discover-card",
@@ -13,7 +15,7 @@ export class DiscoverCardComponent implements OnInit {
     @Input() public result: IDiscoverCardResult;
     public RequestType = RequestType;
 
-    constructor(private searchService: SearchService) { }
+    constructor(private searchService: SearchService, private dialog: MatDialog) { }
 
     public ngOnInit() {
         if (this.result.type == RequestType.tvShow) {
@@ -23,6 +25,14 @@ export class DiscoverCardComponent implements OnInit {
             this.getExtraMovieInfo();
         }
     }
+    
+    public openDetails(details: IDiscoverCardResult) {
+        const ref = this.dialog.open(DiscoverCardDetailsComponent, { width:"700px", data: details })
+
+        ref.afterClosed().subscribe(result => {
+            console.log('The dialog was closed');
+          });
+    }
 
     public getExtraTvInfo() {
         this.searchService.getShowInformation(this.result.id)

src/Ombi/ClientApp/src/app/discover/discover.component.html

@@ -1,6 +1,6 @@
 <div class="small-middle-container">
     <div *ngIf="discoverResults" class="row top-spacing full-height">
-            <div class="col-lg-1 col-md-4 col-6" *ngFor="let result of discoverResults" [@slideIn]>
+            <div class="col-lg-1 col-md-2 col-4 small-padding" *ngFor="let result of discoverResults" [@slideIn]>
                 <discover-card [result]="result"></discover-card>
             </div>
     </div>

src/Ombi/ClientApp/src/app/discover/discover.component.scss

@@ -6,4 +6,9 @@
 .small-middle-container{
 	margin: auto;
 	width: 95%;
+}
+
+.small-padding {
+    padding-left: 5px;
+    padding-right: 5px;
 }

src/Ombi/ClientApp/src/app/discover/discover.module.ts

@@ -8,6 +8,8 @@ import { DiscoverComponent } from "./discover.component";
 import { DiscoverCardComponent } from "./card/discover-card.component";
 import { AuthGuard } from "../auth/auth.guard";
 import { PipeModule } from "../pipes/pipe.module";
+import { DiscoverCardDetailsComponent } from "./card/discover-card-details.component";
+import { MatDialog } from "@angular/material";
 
 const routes: Routes = [
     { path: "", component: DiscoverComponent, canActivate: [AuthGuard] },
@@ -20,13 +22,18 @@ const routes: Routes = [
     ],
     declarations: [
         DiscoverComponent,
-        DiscoverCardComponent
+        DiscoverCardComponent,
+        DiscoverCardDetailsComponent,
+    ],
+    entryComponents: [
+        DiscoverCardDetailsComponent
     ],
     exports: [
         RouterModule,
     ],
     providers: [
-        SearchService
+        SearchService,
+        MatDialog,
         ],
 
 })

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, MatExpansionModule } from "@angular/material";
+  import {  MatCardModule, MatInputModule, MatTabsModule, MatAutocompleteModule, MatCheckboxModule, MatExpansionModule, MatDialogModule } from "@angular/material";
 
 @NgModule({
   declarations: [
@@ -36,6 +36,7 @@ import {
     MatToolbarModule,
     MatCheckboxModule,
     MatExpansionModule,
+    MatDialogModule,
   ],
   exports: [
       TranslateModule,
@@ -58,6 +59,7 @@ import {
       MatAutocompleteModule,
       MatCheckboxModule,
       MatExpansionModule,
+      MatDialogModule,
     ],
 })
 export class SharedModule {}