From 78968b5e19f5738e76f1e76af8b386002e5a85ae Mon Sep 17 00:00:00 2001
From: twanariens <twanariens@gmail.com>
Date: Sun, 31 Jan 2021 21:52:23 +0100
Subject: [PATCH] Fix for availability on the discover page (mobile display).

---
 .../card/discover-card.component.html         |  2 +-
 .../card/discover-card.component.scss         | 40 +++++++++++++++----
 .../discover/discover.component.scss          |  5 +++
 3 files changed, 38 insertions(+), 9 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 a782729a0..97d3d9f60 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
@@ -6,7 +6,7 @@
             {{RequestType[result.type] | humanize}}
         </div>
         <div class="{{getStatusClass()}} top-right">
-            <span>{{getAvailbilityStatus()}}</span>
+            <span class="indicator"></span><span class="indicator-text">{{getAvailbilityStatus()}}</span>
         </div>
     </div>
         <img [routerLink]="generateDetailsLink()" id="cardImage" src="{{result.posterPath}}" class="image"
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 2c787eb37..21318e02b 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
@@ -159,17 +159,27 @@ small {
 } 
 
 /* common */
-.top-right span {
+.top-right{
+  display:flex;
+}
+
+.top-right span.indicator, span.indicator-text {
   display: none;
   background-color: transparent;
   color: #fff;
   text-shadow: 0 1px 1px rgba(0,0,0,.2);
   text-align: right;
   font-size: 14px;
+}
+
+.top-right span.indicator{
+  padding-right: 0px;
+}
+.top-right span.indicator-text{
   padding-right: 1em;
 }
 
-.top-right span:before{
+.top-right span.indicator:before{
   content: '';
   width: 10px;
   height: 10px;
@@ -179,29 +189,29 @@ small {
   margin-right:5px;
 }
 
-.top-right.available span{
+.top-right.available span.indicator, span.indicator-text{
   display:block;
 }
 
-.top-right.available span:before{
+.top-right.available span.indicator:before{
   display: inline-block;
   background-color: #1DE9B6;
 }
 
-.top-right.approved span {
+.top-right.approved span.indicator, span.indicator-text {
   display: block;
 }
 
-.top-right.approved span:before{
+.top-right.approved span.indicator:before{
   display: inline-block;
   background-color: #ff5722;
 }
 
-.top-right.requested span {
+.top-right.requested span.indicator, span.indicator-text {
   display: block;
 }
 
-.top-right.requested span:before{
+.top-right.requested span.indicator:before{
   display: inline-block;
   background-color: #ffd740;
 }
@@ -212,4 +222,18 @@ small {
 
 a.poster-overlay:hover{
   text-decoration: none;
+}
+
+@media screen and (max-width: 400px){
+  .ellipsis{
+    display:none;
+  }
+
+  .top-right span.indicator-text{
+    display:none;
+  }
+
+  .top-right span.indicator{
+    padding-right:1em;
+  }
 }
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.scss b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.scss
index d95586507..0951061a1 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.scss
+++ b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.scss
@@ -9,4 +9,9 @@ h2{
     margin-top:40px;
     margin-left:40px;
     font-size: 24px;
+}
+
+::ng-deep .p-carousel-item{
+    min-height:290px;
+    max-height:290px;
 }
\ No newline at end of file