github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-20 13:23:20 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Reworked top bar of poster for availability

Browse source
This commit is contained in:
twanariens 2021-01-24 01:48:36 +01:00
commit b62455aa68
2 changed files with 79 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html
View file

@ -1,13 +1,18 @@
<p-skeleton *ngIf="!fullyLoaded" width="100%" height="315px"></p-skeleton> <p-skeleton *ngIf="!fullyLoaded" width="100%" height="315px"></p-skeleton>
<div *ngIf="fullyLoaded" class="ombi-card dark-card c" [style.display]="hide ? 'none' : 'block'"> <div *ngIf="fullyLoaded" class="ombi-card dark-card c" [style.display]="hide ? 'none' : 'block'">
<div class="ribbon {{getStatusClass()}} ribbon-top-right"><span> <div class="card-top-info">
{{getAvailbilityStatus()}} <div class="top-left">
</span></div> {{RequestType[result.type] | humanize}}
</div>
<div class="{{getStatusClass()}} top-right">
<span>{{getAvailbilityStatus()}}</span>
</div>
</div>
<a> <a>
<img [routerLink]="generateDetailsLink()" id="cardImage" src="{{result.posterPath}}" class="image" <img [routerLink]="generateDetailsLink()" id="cardImage" src="{{result.posterPath}}" class="image"
alt="{{result.title}}"> alt="{{result.title}}">
<div class="top-left">{{RequestType[result.type] | humanize}}</div>
<div class="middle"> <div class="middle">
<div class="title">{{result.title}}</div> <div class="title">{{result.title}}</div>
<div class="small-text ellipsis">{{result.overview}}</div> <div class="small-text ellipsis">{{result.overview}}</div>

153
src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss
View file

@ -79,79 +79,6 @@ small {
max-width: 600px; max-width: 600px;
} }
/* common */
.ribbon {
width: 100px;
height: 96px;
overflow: hidden;
position: absolute;
text-align:right;
}
.ribbon span {
position: absolute;
display: none;
background-color: transparent;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
text-transform: uppercase;
text-align: right;
font-size: 14px;
}
.ribbon.available span{
display:block;
}
.ribbon.available span:before{
content: '';
display: inline-block;
width: 10px;
height: 10px;
-moz-border-radius: 7.5px;
-webkit-border-radius: 7.5px;
border-radius: 7.5px;
background-color: #1DE9B6;
}
.ribbon.approved span {
display: block;
}
.ribbon.approved span:before{
content: '';
display: inline-block;
width: 10px;
height: 10px;
-moz-border-radius: 7.5px;
-webkit-border-radius: 7.5px;
border-radius: 7.5px;
background-color: #ff5722;
}
.ribbon.requested span {
display: block;
}
.ribbon.requested span:before{
content: '';
display: inline-block;
width: 10px;
height: 10px;
-moz-border-radius: 7.5px;
-webkit-border-radius: 7.5px;
border-radius: 7.5px;
background-color: #ffd740;
}
/* top right*/
.ribbon-top-right {
top: 13px;
right: 0px;
z-index: 999999;
}
.ombi-card { .ombi-card {
padding: 5px; padding: 5px;
} }
@ -201,20 +128,8 @@ small {
.title { .title {
font-size: 18px; font-size: 18px;
} }
.top-left {
font-size: 14px;
position: absolute;
text-transform: uppercase;
top: 0px;
width: 100%;
background-color: rgba(15,23,31,0.6);
padding-left: 1em;
padding-top: 1em;
padding-bottom: 0.5em;font-size: 14px;
position: absolute;
text-transform: uppercase;
}
.full-width { .full-width {
width: 100%; width: 100%;
} }
@ -226,3 +141,69 @@ small {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.card-top-info{
position: absolute;
text-transform: uppercase;
top: 0px;
width: 100%;
background-color: rgba(15,23,31,0.6);
display:flex;
justify-content: space-between;
padding-top:0.6em;
padding-bottom:0.3em;
}
.top-left {
font-size: 14px;
padding-left: 0.5em;
font-size: 14px;
}
/* common */
.top-right span {
display: none;
background-color: transparent;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
text-align: right;
font-size: 14px;
padding-right: 1em;
}
.top-right span:before{
content: '';
width: 10px;
height: 10px;
-moz-border-radius: 7.5px;
-webkit-border-radius: 7.5px;
border-radius: 7.5px;
margin-right:5px;
}
.top-right.available span{
display:block;
}
.top-right.available span:before{
display: inline-block;
background-color: #1DE9B6;
}
.top-right.approved span {
display: block;
}
.top-right.approved span:before{
display: inline-block;
background-color: #ff5722;
}
.top-right.requested span {
display: block;
}
.top-right.requested span:before{
display: inline-block;
background-color: #ffd740;
}