From df9f5cb3392613f3b43098e27e2e1844f37b2618 Mon Sep 17 00:00:00 2001
From: TidusJar <tidusjar@gmail.com>
Date: Thu, 28 Feb 2019 12:55:05 +0000
Subject: [PATCH] Put some icons in the discover panel

---
 .../card/discover-card-details.component.html | 74 ++++++++++++-------
 .../card/discover-card-details.component.scss | 19 ++++-
 .../card/discover-card-details.component.ts   |  2 +-
 .../src/app/discover/discover.component.html  |  6 +-
 .../media-details.component.scss              |  2 +-
 src/Ombi/ClientApp/src/styles/shared.scss     | 10 ++-
 6 files changed, 79 insertions(+), 34 deletions(-)

diff --git a/src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.html b/src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.html
index 2d326e890..38a33e201 100644
--- a/src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.html
+++ b/src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.html
@@ -2,14 +2,45 @@
     <mat-spinner *ngIf="loading" [color]="'accent'"></mat-spinner>
 </div>
 <div *ngIf="!loading" mat-dialog-content class="background">
+
     <div class="row">
         <div class="col-4">
             <a (click)="openDetails()">
-            <img id="cardImage" src="{{data.posterPath}}" class="poster" alt="{{data.title}}">
-        </a>
+                <img id="cardImage" src="{{data.posterPath}}" class="poster" alt="{{data.title}}">
+            </a>
         </div>
         <div class="col-8">
+            <div class="row">
 
+                <div class="col-4 offset-8 text-right" id="icons">
+                    <span *ngIf="movie">
+                        <a *ngIf="movie.plexUrl" class="media-icons" href="{{movie.plexUrl}}" target="_blank">
+                            <i matTooltip=" {{'Search.ViewOnPlex' | translate}}"
+                                class="fa fa-play-circle fa-2x grow"></i>
+                        </a>
+                        <a *ngIf="movie.embyUrl" class="media-icons" href="{{movie.embyUrl}}" target="_blank">
+                            <i matTooltip=" {{'Search.ViewOnEmby' | translate}}"
+                                class="fa fa-play-circle fa-2x grow"></i>
+                        </a>
+                    </span>
+
+                    <span *ngIf="tv">
+                        <a *ngIf="tv.plexUrl" class="media-icons" href="{{tv.plexUrl}}" target="_blank">
+                            <i matTooltip=" {{'Search.ViewOnPlex' | translate}}"
+                                class="fa fa-play-circle fa-2x grow"></i>
+                        </a>
+                        <a *ngIf="tv.embyUrl" class="media-icons" href="{{tv.embyUrl}}" target="_blank">
+                            <i matTooltip=" {{'Search.ViewOnEmby' | translate}}"
+                                class="fa fa-play-circle fa-2x grow"></i>
+                        </a>
+                    </span>
+
+                    <a class="media-icons" (click)="close()">
+                        <i class="fa fa-window-close fa-2x grow"></i>
+                    </a>
+                </div>
+
+            </div>
             <div class="row">
                 <div class="col-12">
                     <h3><strong>{{data.title}}</strong></h3>
@@ -95,41 +126,32 @@
                 'Common.Request' | translate }}</button>
                 </ng-template>
             </span>
-
-            <span *ngIf="movie.available">
-                <a *ngIf="movie.plexUrl" mat-raised-button style="text-align: right" class="btn-spacing btn-greem"
-                    href="{{movie.plexUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
-            translate}}</a>
-                <a *ngIf="movie.embyUrl" mat-raised-button class="btn-green btn-spacing" href="{{movie.embyUrl}}"
-                    target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
-            translate}}</a>
-            </span>
         </div>
 
         <div class="col-md-12" *ngIf="tv">
 
-                <div *ngIf="!tv.fullyAvailable" class="dropdown">
-                        <button mat-raised-button  class="btn-orange btn-spacing" type="button" (click)="request()">
-                                <i class="fa fa-plus"></i>
-                                {{ 'Common.Request' | translate }}
-                            <span class="caret"></span>
-                        </button>
-                    </div>
+            <div *ngIf="!tv.fullyAvailable" class="dropdown">
+                <button mat-raised-button class="btn-orange btn-spacing" type="button" (click)="request()">
+                    <i class="fa fa-plus"></i>
+                    {{ 'Common.Request' | translate }}
+                    <span class="caret"></span>
+                </button>
+            </div>
 
             <button mat-raised-button class="btn-green btn-spacing" *ngIf="tv.available"> {{
                 'Common.Available' | translate }}</button>
-                <button mat-raised-button class="btn-orange btn-spacing" *ngIf="tv.partlyAvailable"> {{
+            <button mat-raised-button class="btn-orange btn-spacing" *ngIf="tv.partlyAvailable"> {{
                     'Common.PartlyAvailable' | translate }}</button>
 
-                    <span *ngIf="tv.available">
-                        <a *ngIf="tv.plexUrl" mat-raised-button style="text-align: right" class="btn-spacing btn-greem"
-                            href="{{tv.plexUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
+            <span *ngIf="tv.available">
+                <a *ngIf="tv.plexUrl" mat-raised-button style="text-align: right" class="btn-spacing btn-greem"
+                    href="{{tv.plexUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
                     translate}}</a>
-                        <a *ngIf="tv.embyUrl" mat-raised-button class="btn-green btn-spacing" href="{{tv.embyUrl}}"
-                            target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
+                <a *ngIf="tv.embyUrl" mat-raised-button class="btn-green btn-spacing" href="{{tv.embyUrl}}"
+                    target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
                     translate}}</a>
-                    </span>
-                    <button mat-raised-button class="btn-green btn-spacing" (click)="openDetails()"> {{
+            </span>
+            <button mat-raised-button class="btn-green btn-spacing" (click)="openDetails()"> {{
                         'Common.ViewDetails' | translate }}</button>
         </div>
     </div>
diff --git a/src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.scss b/src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.scss
index f7c62d6d6..bdec69c55 100644
--- a/src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.scss
+++ b/src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.scss
@@ -7,7 +7,7 @@
 .details {
     padding: 2%;
     border-radius: 10px;
-    background: $background;
+    background: $backgroundTint;
     div.dark & {
         background: $backgroundTint-dark;
     }
@@ -16,7 +16,13 @@
 .details strong {
     font-weight: bold;
 }
+.grow {
+    transition: all .2s ease-in-out;
+}
 
+.grow:hover {
+    transform: scale(1.1);
+}
 h3 strong {
     font-weight: bold;
 }
@@ -28,4 +34,13 @@ h3 strong {
 
 .btn-spacing {
     margin-right: 1%;
-}
\ No newline at end of file
+}
+
+.media-icons {
+    color: $primary;
+    padding: 2%;
+    div.dark & {
+        color: $warn-dark;
+    }
+}
+
diff --git a/src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.ts b/src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.ts
index b9f680e14..2c0776804 100644
--- a/src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.ts
+++ b/src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.ts
@@ -50,7 +50,7 @@ export class DiscoverCardDetailsComponent implements OnInit {
         this.loading = false;
     }
 
-    public onNoClick(): void {
+    public close(): void {
         this.dialogRef.close();
     }
 
diff --git a/src/Ombi/ClientApp/src/app/discover/discover.component.html b/src/Ombi/ClientApp/src/app/discover/discover.component.html
index d7b84e784..bd0f06be0 100644
--- a/src/Ombi/ClientApp/src/app/discover/discover.component.html
+++ b/src/Ombi/ClientApp/src/app/discover/discover.component.html
@@ -3,11 +3,11 @@
     <div class="row justify-content-md-center top-spacing">
         <div class="btn-group" role="group" aria-label="Basic example">
             <button type="button" (click)="popular()" [ngClass]="popularActive ? 'active-button' : ''" mat-raised-button
-                class="btn" color="primary">Popular</button>
+                class="btn grow" color="primary">Popular</button>
             <button type="button" (click)="trending()" [ngClass]="trendingActive ? 'active-button' : ''"
-                mat-raised-button class="btn" color="primary">Trending</button>
+                mat-raised-button class="btn grow" color="primary">Trending</button>
             <button type="button" (click)="upcoming()" [ngClass]="upcomingActive ? 'active-button' : ''"
-                mat-raised-button class="btn" color="primary">Upcoming</button>
+                mat-raised-button class="btn grow" color="primary">Upcoming</button>
         </div>
     </div>
     <div *ngIf="loadingFlag" class="row justify-content-md-center top-spacing loading-spinner">
diff --git a/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss b/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss
index a75222ff6..ba1c10494 100644
--- a/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss
+++ b/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss
@@ -1,5 +1,5 @@
 @import "~@angular/material/theming";
-@import "~styles/Styles.scss";
+@import "~styles/variables.scss";
 //MINE
 @media (max-width: 570px) {
     h1 {
diff --git a/src/Ombi/ClientApp/src/styles/shared.scss b/src/Ombi/ClientApp/src/styles/shared.scss
index aa53378f7..b9fc09046 100644
--- a/src/Ombi/ClientApp/src/styles/shared.scss
+++ b/src/Ombi/ClientApp/src/styles/shared.scss
@@ -34,4 +34,12 @@
   }
   .sidenav ::-webkit-scrollbar-track {
     display: none;
-  }
\ No newline at end of file
+  }
+
+  .grow {
+    transition: all .2s ease-in-out;
+}
+.grow:hover {
+    transform: scale(1.1);
+    color: black;
+}