mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-20 21:33:15 -07:00
Some styling changes to the discover page
This commit is contained in:
parent
1c8ab3cee2
commit
94862aee37
4 changed files with 17 additions and 11 deletions
|
@ -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;
|
||||||
|
@ -262,3 +263,7 @@ 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…
Add table
Add a link
Reference in a new issue