mirror of https://github.com/Ombi-app/Ombi
tidusjar
3 years ago
parent
eedd67b205
commit
1e199b477e
@ -1,213 +1,3 @@
|
||||
.full-height {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.section {
|
||||
margin: 20px;
|
||||
}
|
||||
@ -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">
|
||||
<div class="ombi-card dark-card c">
|
||||
<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>
|
||||
<discover-card [result]="result"></discover-card>
|
||||
</ng-template>
|
||||
</p-carousel>
|
||||
Loading…
Reference in new issue