Some styling changes to the discover page

pull/4132/head
twanariens 4 years ago
parent 1c8ab3cee2
commit 94862aee37

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

@ -1,5 +1,4 @@
$ombi-primary:#3f3f3f; @import "~styles/variables.scss";
$card-background: #2b2b2b;
#cardImage { #cardImage {
border-radius: 5px; border-radius: 5px;
@ -141,19 +140,20 @@ small {
.card-top-info{ .card-top-info{
position: absolute; position: absolute;
text-transform: uppercase;
top: 0px; top: 0px;
width: 100%; width: 100%;
background-color: rgba(15,23,31,0.6); background-color: rgba(15,23,31,0.7);
display:flex; display:flex;
justify-content: space-between; justify-content: space-between;
padding-top:0.6em; padding-top:0.6em;
padding-bottom:0.3em; padding-bottom:0.3em;
z-index:2; z-index:2;
letter-spacing: 0.2px;
} }
.top-left { .top-left {
font-size: 14px; font-size: 14px;
font-weight:200;
padding-left: 0.5em; padding-left: 0.5em;
font-size: 14px; font-size: 14px;
} }
@ -161,6 +161,7 @@ small {
/* common */ /* common */
.top-right{ .top-right{
display:flex; display:flex;
font-weight:200;
} }
.top-right span.indicator, span.indicator-text { .top-right span.indicator, span.indicator-text {
@ -247,7 +248,7 @@ a.poster-overlay:hover{
width: 100%; width: 100%;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
margin-top: -37px; margin-top: -36px;
margin-bottom: 0px; margin-bottom: 0px;
opacity:0; opacity:0;
transition: .5s ease; transition: .5s ease;
@ -261,4 +262,8 @@ a.poster-overlay:hover{
.c:hover .button-request-container { .c:hover .button-request-container {
opacity:1; opacity:1;
}
.btn-ombi{
background-color:$ombi-active-text;
} }

@ -92,7 +92,7 @@
font-size: 0.8em; font-size: 0.8em;
font-weight: 100; font-weight: 100;
display:flex; display:flex;
justify-content: end; justify-content: flex-end;
align-items: flex-end; align-items: flex-end;
text-transform: capitalize; text-transform: capitalize;
flex:0 0 250px; flex:0 0 250px;
@ -139,7 +139,6 @@
text-transform: uppercase; text-transform: uppercase;
color: $ombi-active; color: $ombi-active;
align-items:center; align-items:center;
justify-content: center;
font-weight: 700; font-weight: 700;
font-size:36px; font-size:36px;
padding:40px 20px; padding:40px 20px;
@ -147,7 +146,6 @@
max-width: 350px; max-width: 350px;
display: flex; display: flex;
white-space: normal; white-space: normal;
text-align: center;
} }
.outer-profile { .outer-profile {

@ -31,7 +31,9 @@
"Validation": "Please check your entered values" "Validation": "Please check your entered values"
}, },
"Cancel": "Cancel", "Cancel": "Cancel",
"Submit": "Submit" "Submit": "Submit",
"tvShow": "TV Show",
"movie": "Movie"
}, },
"PasswordReset": { "PasswordReset": {
"EmailAddressPlaceholder": "Email Address", "EmailAddressPlaceholder": "Email Address",

Loading…
Cancel
Save