Some styling changes to the discover page

Ombi-app · Mar 31, 2021 · 94862ae · 94862ae
1 parent 1c8ab3c
commit 94862ae
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 11 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
@@ -3,7 +3,7 @@
 <div id="result{{result.id}}" *ngIf="fullyLoaded" class="ombi-card dark-card c" [style.display]="hide ? 'none' : 'block'">
     <div class="card-top-info">
         <div class="top-left" id="type{{result.id}}">
-            {{RequestType[result.type] | humanize}}
+            {{ 'Common.' + RequestType[result.type] | translate }}
         </div>
         <div class="{{getStatusClass()}} top-right" id="status{{result.id}}">
             <span class="indicator"></span><span class="indicator-text" id="availabilityStatus{{result.id}}">{{getAvailbilityStatus()}}</span>
@@ -21,9 +21,10 @@
         </div>
         <div class="row button-request-container" *ngIf="!result.available && !result.approved && !result.requested">
             <div class="button-request poster-overlay">
-                <button id="requestButton{{result.id}}{{result.type}}{{discoverType}}" mat-raised-button class="btn-green full-width poster-request-btn" (click)="request($event)">
+                <button id="requestButton{{result.id}}{{result.type}}{{discoverType}}" 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>
                     <i *ngIf="loading" class="fas fa-spinner fa-pulse fa-2x fa-fw" aria-hidden="true"></i>
+                    {{'Common.Request' | translate }}
                 </button>
             </div>
         </div>

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
@@ -1,5 +1,4 @@
-$ombi-primary:#3f3f3f;
-$card-background: #2b2b2b;
+@import "~styles/variables.scss";
 
 #cardImage {
     border-radius: 5px;
@@ -141,26 +140,28 @@ small {
 
 .card-top-info{
   position: absolute;
-  text-transform: uppercase;
   top: 0px;
   width: 100%;
-  background-color: rgba(15,23,31,0.6);
+  background-color: rgba(15,23,31,0.7);
   display:flex;
   justify-content: space-between;
   padding-top:0.6em;
   padding-bottom:0.3em;
   z-index:2;
+  letter-spacing: 0.2px;
 }
 
 .top-left {
   font-size: 14px;
+  font-weight:200;
   padding-left: 0.5em;
   font-size: 14px; 
 } 
 
 /* common */
 .top-right{
   display:flex;
+  font-weight:200;
 }
 
 .top-right span.indicator, span.indicator-text {
@@ -247,7 +248,7 @@ a.poster-overlay:hover{
   width: 100%;
   margin-left: 0;
   margin-right: 0;
-  margin-top: -37px;
+  margin-top: -36px;
   margin-bottom: 0px;
   opacity:0;
   transition: .5s ease;
@@ -261,4 +262,8 @@ a.poster-overlay:hover{
 
 .c:hover .button-request-container {
   opacity:1;
+}
+
+.btn-ombi{
+  background-color:$ombi-active-text;
 }
diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss
@@ -92,7 +92,7 @@
     font-size: 0.8em;
     font-weight: 100;
     display:flex;
-    justify-content: end;
+    justify-content: flex-end;
     align-items: flex-end;
     text-transform: capitalize;
     flex:0 0 250px;
@@ -139,15 +139,13 @@
         text-transform: uppercase;
         color: $ombi-active;
         align-items:center;
-        justify-content: center;
         font-weight: 700;
         font-size:36px;
         padding:40px 20px;
         height:auto;
         max-width: 350px;
         display: flex;
         white-space: normal;
-        text-align: center;
     }
 
     .outer-profile {

diff --git a/src/Ombi/wwwroot/translations/en.json b/src/Ombi/wwwroot/translations/en.json
@@ -31,7 +31,9 @@
             "Validation": "Please check your entered values"
         },
         "Cancel": "Cancel",
-        "Submit": "Submit"
+        "Submit": "Submit",
+		"tvShow": "TV Show",
+        "movie": "Movie"
     },
     "PasswordReset": {
         "EmailAddressPlaceholder": "Email Address",