mirror of https://github.com/Ombi-app/Ombi
parent
eedd67b205
commit
1e199b477e
@ -1,213 +1,3 @@
|
|||||||
.full-height {
|
.section {
|
||||||
height: 100%;
|
margin: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-middle-container {
|
|
||||||
margin: auto;
|
|
||||||
width: 85%;
|
|
||||||
padding-left:2%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-padding {
|
|
||||||
padding-left: 20px;
|
|
||||||
padding-right: 20px;
|
|
||||||
margin-bottom: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-spinner {
|
|
||||||
margin: 10%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#scroller {
|
|
||||||
height: 100vh;
|
|
||||||
overflow: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-space {
|
|
||||||
padding-top: 1%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.discover-layout {
|
|
||||||
position: absolute;
|
|
||||||
float: right;
|
|
||||||
margin-right: 36px;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
::ng-deep .mat-card-image {
|
|
||||||
height: 75%;
|
|
||||||
border-radius: 10px;
|
|
||||||
width: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-spacing {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-card-content h6 {
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 300px) {
|
|
||||||
|
|
||||||
.small-middle-container {
|
|
||||||
margin: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-xl-2 {
|
|
||||||
flex: 0 0 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-group {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
mat-button-base {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col {
|
|
||||||
padding-right: 10px !important;
|
|
||||||
padding-left: 10px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row {
|
|
||||||
margin-left: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-padding {
|
|
||||||
padding-left: 5px !important;
|
|
||||||
padding-right: 0px !important;
|
|
||||||
height: 40em;
|
|
||||||
}
|
|
||||||
|
|
||||||
::ng-deep .mat-card-image {
|
|
||||||
height: 85% !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 600px) {
|
|
||||||
.justify-content-md-center {
|
|
||||||
justify-content: center !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-middle-container {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-group {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
mat-button-base {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
::ng-deep .mat-card-image {
|
|
||||||
height: 75% !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 660px) {
|
|
||||||
.col-xl-2 {
|
|
||||||
flex: 0 0 50%;
|
|
||||||
max-width: 50%;
|
|
||||||
min-width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col {
|
|
||||||
padding-right: 15px !important;
|
|
||||||
padding-left: 15px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-padding {
|
|
||||||
padding-left: 20px !important;
|
|
||||||
padding-right: 20px !important;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row {
|
|
||||||
margin-left: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-middle-container {
|
|
||||||
width: auto;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-group {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
mat-button-base {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 870px) {
|
|
||||||
.col-xl-2 {
|
|
||||||
flex: 0 0 33.33333%;
|
|
||||||
max-width: 33.33333%;
|
|
||||||
min-width: 33.33333%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1100px) {
|
|
||||||
.col-xl-2 {
|
|
||||||
flex: 0 0 20%;
|
|
||||||
max-width: 25%;
|
|
||||||
min-width: 25%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1300px) {
|
|
||||||
.col-xl-2 {
|
|
||||||
flex: 0 0 18%;
|
|
||||||
max-width: 20%;
|
|
||||||
min-width: 20%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1600px) {
|
|
||||||
.col-xl-2 {
|
|
||||||
flex: 0 0 16.66666667%;
|
|
||||||
max-width: 16.66666667%;
|
|
||||||
min-width: 16.66666667%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1900px) {
|
|
||||||
.col-xl-2 {
|
|
||||||
flex: 0 0 14.285713%;
|
|
||||||
max-width: 14.285713%;
|
|
||||||
min-width: 14.285713%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 2200px) {
|
|
||||||
.col-xl-2 {
|
|
||||||
flex: 0 0 12.5%;
|
|
||||||
max-width: 12.5%;
|
|
||||||
min-width: 12.5%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 2500px) {
|
|
||||||
.col-xl-2 {
|
|
||||||
flex: 0 0 11.111111%;
|
|
||||||
max-width: 11.111111%;
|
|
||||||
min-width: 11.111111%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 420px) {
|
|
||||||
.discover-layout{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,23 +1,5 @@
|
|||||||
<p-carousel [numVisible]="7" [numScroll]="7" [page]="0" [value]="result">
|
<p-carousel *ngIf="result" [numVisible]="10" [numScroll]="10" [page]="0" [value]="result" [responsiveOptions]="responsiveOptions">
|
||||||
<ng-template let-result pTemplate="item">
|
<ng-template let-result pTemplate="item">
|
||||||
<div class="ombi-card dark-card c">
|
<discover-card [result]="result"></discover-card>
|
||||||
<div [routerLink]="result.type === 1 ? '/details/movie/' + result.id : '/details/tv/' + result.id">
|
|
||||||
<img id="cardImage" src="{{result.posterPath}}" class="image"
|
|
||||||
alt="{{result.title}}">
|
|
||||||
<div class="top-left">{{RequestType[result.type] | humanize}}</div>
|
|
||||||
<div class="middle">
|
|
||||||
<div class="title">{{result.title}}</div>
|
|
||||||
<div class="small-text">{{result.overview | truncate: 80}}</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-6">
|
|
||||||
<button mat-raised-button class="btn-blue"><mat-icon>remove_red_eye</mat-icon></button>
|
|
||||||
</div>
|
|
||||||
<div class="col-6">
|
|
||||||
<button mat-raised-button class="btn-green"><mat-icon>cloud_download</mat-icon></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</p-carousel>
|
</p-carousel>
|
Loading…
Reference in new issue