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

Fix for availability on the discover page (mobile display).

Browse source
This commit is contained in:
twanariens 2021-01-31 21:52:23 +01:00
commit 78968b5e19
3 changed files with 38 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,7 @@
{{RequestType[result.type] | humanize}} {{RequestType[result.type] | humanize}}
</div> </div>
<div class="{{getStatusClass()}} top-right"> <div class="{{getStatusClass()}} top-right">
<span>{{getAvailbilityStatus()}}</span> <span class="indicator"></span><span class="indicator-text">{{getAvailbilityStatus()}}</span>
</div> </div>
</div> </div>
<img [routerLink]="generateDetailsLink()" id="cardImage" src="{{result.posterPath}}" class="image" <img [routerLink]="generateDetailsLink()" id="cardImage" src="{{result.posterPath}}" class="image"

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

@ -159,17 +159,27 @@ small {
} }
/* common */ /* common */
.top-right span { .top-right{
display:flex;
}
.top-right span.indicator, span.indicator-text {
display: none; display: none;
background-color: transparent; background-color: transparent;
color: #fff; color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.2); text-shadow: 0 1px 1px rgba(0,0,0,.2);
text-align: right; text-align: right;
font-size: 14px; font-size: 14px;
}
.top-right span.indicator{
padding-right: 0px;
}
.top-right span.indicator-text{
padding-right: 1em; padding-right: 1em;
} }
.top-right span:before{ .top-right span.indicator:before{
content: ''; content: '';
width: 10px; width: 10px;
height: 10px; height: 10px;
@ -179,29 +189,29 @@ small {
margin-right:5px; margin-right:5px;
} }
.top-right.available span{ .top-right.available span.indicator, span.indicator-text{
display:block; display:block;
} }
.top-right.available span:before{ .top-right.available span.indicator:before{
display: inline-block; display: inline-block;
background-color: #1DE9B6; background-color: #1DE9B6;
} }
.top-right.approved span { .top-right.approved span.indicator, span.indicator-text {
display: block; display: block;
} }
.top-right.approved span:before{ .top-right.approved span.indicator:before{
display: inline-block; display: inline-block;
background-color: #ff5722; background-color: #ff5722;
} }
.top-right.requested span { .top-right.requested span.indicator, span.indicator-text {
display: block; display: block;
} }
.top-right.requested span:before{ .top-right.requested span.indicator:before{
display: inline-block; display: inline-block;
background-color: #ffd740; background-color: #ffd740;
} }
@ -213,3 +223,17 @@ small {
a.poster-overlay:hover{ a.poster-overlay:hover{
text-decoration: none; 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;
}
}

5
src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.scss
View file

@ -10,3 +10,8 @@ h2{
margin-left:40px; margin-left:40px;
font-size: 24px; font-size: 24px;
} }
::ng-deep .p-carousel-item{
min-height:290px;
max-height:290px;
}