From a5e72fdcde27178eb4d9471bb4d1af55c2175bc8 Mon Sep 17 00:00:00 2001
From: tidusjar <tidusjar@gmail.com>
Date: Mon, 14 Jun 2021 08:56:19 +0100
Subject: [PATCH] Fixed #4189 where when there is no poster for the searched
 content, we now automatically show the titles for easier discoverability

---
 .../card/discover-card.component.html         |  4 +--
 .../card/discover-card.component.scss         | 26 +++++++++++++++++++
 .../src/app/search/search.component.html      |  1 -
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html
index 651634a0c..5a6993e44 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html
+++ b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html
@@ -11,7 +11,7 @@
     </div>
         <img [routerLink]="generateDetailsLink()" id="cardImage" src="{{result.posterPath}}" class="image"
             alt="{{result.title}}">
-        <div class="middle">
+        <div [ngClass]="result.posterPath.includes('images/') ? 'middle-show' : 'middle'">
             <a class="poster-overlay" [routerLink]="generateDetailsLink()">
                 <div class="summary">
                     <div class="title" id="title{{result.id}}">{{result.title}}</div>
@@ -19,7 +19,7 @@
                 </div>
             </a>
         </div>
-        <div class="row button-request-container" *ngIf="!result.available && !result.approved && !result.requested">
+        <div [ngClass]="result.posterPath.includes('images/') ? 'button-request-container-show' : 'button-request-container'" class="row" *ngIf="!result.available && !result.approved && !result.requested">
             <div class="button-request poster-overlay">
                 <button id="requestButton{{result.id}}{{result.type}}{{discoverType}}" *ngIf="requestable" mat-raised-button class="btn-ombi full-width poster-request-btn" (click)="request($event)">
                     <i *ngIf="!loading" class="fa-lg fas fa-cloud-download-alt"></i>
diff --git a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss
index e5312092a..e7b0ad3a3 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss
+++ b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss
@@ -105,6 +105,17 @@ small {
   -ms-transform: translate(-50%, -50%);
 }
 
+.middle-show {
+  transition: .5s ease;
+  opacity: 1;
+  position: absolute;
+  top: 67%;
+  width: 90%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+}
+
 
 .c {
   position: relative;
@@ -253,12 +264,27 @@ a.poster-overlay:hover{
   opacity:0;
   transition: .5s ease;
 }
+.ombi-card .button-request-container-show{
+  position: relative;
+  width: 100%;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: -36px;
+  margin-bottom: 0px;
+  opacity:1;
+  transition: .5s ease;
+}
 
 ::ng-deep .ombi-card .button-request-container .button-request{
   padding-right:0px;
   padding-left:0px;
   width:100%;
 }
+::ng-deep .ombi-card .button-request-container-show .button-request{
+  padding-right:0px;
+  padding-left:0px;
+  width:100%;
+}
 
 .c:hover .button-request-container {
   opacity:1;
diff --git a/src/Ombi/ClientApp/src/app/search/search.component.html b/src/Ombi/ClientApp/src/app/search/search.component.html
index 2558ed903..03cf70d11 100644
--- a/src/Ombi/ClientApp/src/app/search/search.component.html
+++ b/src/Ombi/ClientApp/src/app/search/search.component.html
@@ -9,7 +9,6 @@
     <li role="presentation" class="active">
         <a id="movieTabButton" href="#MoviesTab" aria-controls="home" role="tab" data-toggle="tab" (click)="selectMovieTab()"><i class="fas fa-film"></i>  {{ 'Search.MoviesTab' | translate }}</a>
     </li>
-    
     <li role="presentation">
         <a id="tvTabButton" href="#TvShowTab" aria-controls="profile" role="tab" data-toggle="tab" (click)="selectTvTab()"><i class="fas fa-tv"></i> {{ 'Search.TvTab' | translate }}</a>
     </li>