mirror of https://github.com/Ombi-app/Ombi
Merge pull request #3996 from Ombi-app/feautre/poc-discover
Feautre/poc discoverpull/4016/head v4.0.1009
Jamie
4 years ago
committed by
GitHub
commit
216c59dfc1
@ -1,18 +1,24 @@
|
|||||||
<div class="card-spacing box" *ngIf="result" [style.display]="hide ? 'none' : 'block'">
|
<p-skeleton *ngIf="!fullyLoaded" width="100%" height="315px"></p-skeleton>
|
||||||
<mat-card class="mat-elevation-z8 dark-card" [routerLink]="generateDetailsLink()">
|
|
||||||
<div class="ribbon {{getStatusClass()}} ribbon-top-right"><span>
|
|
||||||
{{getAvailbilityStatus()}}
|
|
||||||
</span></div>
|
|
||||||
<a>
|
|
||||||
<img id="cardImage" mat-card-image src="{{result.posterPath}}" class="card-poster" alt="{{result.title}}">
|
|
||||||
</a>
|
|
||||||
<mat-card-content (click)="openDetails(result);">
|
|
||||||
|
|
||||||
<h6 *ngIf="result.title.length <= 20">{{result.title}}</h6>
|
<div *ngIf="fullyLoaded" class="ombi-card dark-card c" [style.display]="hide ? 'none' : 'block'">
|
||||||
<h6 *ngIf="result.title.length > 20" matTooltip="{{result.title}}">{{result.title | truncate:20}}</h6>
|
<div class="ribbon {{getStatusClass()}} ribbon-top-right"><span>
|
||||||
<div class="fade-text">
|
{{getAvailbilityStatus()}}
|
||||||
<small class="overview-text">{{result.overview | truncate: 75}}</small>
|
</span></div>
|
||||||
|
<a>
|
||||||
|
<img [routerLink]="generateDetailsLink()" 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 ellipsis">{{result.overview}}</div>
|
||||||
|
<div class="row" *ngIf="!result.available && !result.approved">
|
||||||
|
<div class="col-12">
|
||||||
|
<button mat-raised-button class="btn-green full-width" (click)="request($event)">
|
||||||
|
<mat-icon *ngIf="!loading">cloud_download</mat-icon>
|
||||||
|
<i *ngIf="loading" class="fa fa-spinner fa-pulse fa-2x fa-fw" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</mat-card-content>
|
</a>
|
||||||
</mat-card>
|
|
||||||
</div>
|
</div>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<div class="right">
|
||||||
|
<mat-button-toggle-group name="discoverMode" (change)="toggleChanged($event)" value="{{discoverOptions}}" class="discover-filter-buttons-group">
|
||||||
|
<mat-button-toggle [ngClass]="{'button-active': discoverOptions === DiscoverOption.Combined}" value="{{DiscoverOption.Combined}}" class="discover-filter-button">{{'Discovery.Combined' | translate}}</mat-button-toggle>
|
||||||
|
<mat-button-toggle [ngClass]="{'button-active': discoverOptions === DiscoverOption.Movie}" value="{{DiscoverOption.Movie}}" class="discover-filter-button">{{'Discovery.Movies' | translate}}</mat-button-toggle>
|
||||||
|
<mat-button-toggle [ngClass]="{'button-active': discoverOptions === DiscoverOption.Tv}" value="{{DiscoverOption.Tv}}" class="discover-filter-button">{{'Discovery.Tv' | translate}}</mat-button-toggle>
|
||||||
|
</mat-button-toggle-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p-carousel #carousel [numVisible]="10" [numScroll]="10" [page]="0" [value]="discoverResults" [responsiveOptions]="responsiveOptions" (onPage)="newPage()">
|
||||||
|
<ng-template let-result pTemplate="item">
|
||||||
|
<discover-card [result]="result"></discover-card>
|
||||||
|
</ng-template>
|
||||||
|
</p-carousel>
|
||||||
@ -0,0 +1,98 @@
|
|||||||
|
@import "~styles/variables.scss";
|
||||||
|
|
||||||
|
.ombi-card {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
::ng-deep .p-carousel-indicators {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.image {
|
||||||
|
border-radius: 10px;
|
||||||
|
opacity: 1;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
transition: .5s ease;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.middle {
|
||||||
|
transition: .5s ease;
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 75%;
|
||||||
|
width: 90%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
-ms-transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.c {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c:hover .image {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c:hover .middle {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-text {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.top-left {
|
||||||
|
font-size: 14px;
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.right {
|
||||||
|
text-align: right;
|
||||||
|
margin-top:-61px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.discover-filter-buttons-group {
|
||||||
|
background: $ombi-background-primary;
|
||||||
|
border: 1px solid $ombi-background-primary-accent;
|
||||||
|
border-radius: 30px;
|
||||||
|
color:#fff;
|
||||||
|
margin-bottom:10px;
|
||||||
|
margin-right: 30px;
|
||||||
|
|
||||||
|
.discover-filter-button{
|
||||||
|
background:inherit;
|
||||||
|
color:inherit;
|
||||||
|
padding:0 0px;
|
||||||
|
border-radius: 30px;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{
|
||||||
|
line-height:40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-active{
|
||||||
|
background:$ombi-active;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
::ng-deep .discover-filter-button .mat-button-toggle-button:focus{
|
||||||
|
outline:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-skeleton {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
@ -0,0 +1,258 @@
|
|||||||
|
import { Component, OnInit, Input, ViewChild } from "@angular/core";
|
||||||
|
import { DiscoverOption, IDiscoverCardResult } from "../../interfaces";
|
||||||
|
import { ISearchMovieResult, ISearchTvResult, RequestType } from "../../../interfaces";
|
||||||
|
import { SearchV2Service } from "../../../services";
|
||||||
|
import { StorageService } from "../../../shared/storage/storage-service";
|
||||||
|
import { MatButtonToggleChange } from '@angular/material/button-toggle';
|
||||||
|
import { Carousel } from 'primeng/carousel';
|
||||||
|
|
||||||
|
export enum DiscoverType {
|
||||||
|
Upcoming,
|
||||||
|
Trending,
|
||||||
|
Popular,
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "carousel-list",
|
||||||
|
templateUrl: "./carousel-list.component.html",
|
||||||
|
styleUrls: ["./carousel-list.component.scss"],
|
||||||
|
})
|
||||||
|
export class CarouselListComponent implements OnInit {
|
||||||
|
|
||||||
|
@Input() public discoverType: DiscoverType;
|
||||||
|
@ViewChild('carousel', {static: false}) carousel: Carousel;
|
||||||
|
|
||||||
|
public DiscoverOption = DiscoverOption;
|
||||||
|
public discoverOptions: DiscoverOption = DiscoverOption.Combined;
|
||||||
|
public discoverResults: IDiscoverCardResult[] = [];
|
||||||
|
public movies: ISearchMovieResult[] = [];
|
||||||
|
public tvShows: ISearchTvResult[] = [];
|
||||||
|
public responsiveOptions: any;
|
||||||
|
public RequestType = RequestType;
|
||||||
|
public loadingFlag: boolean;
|
||||||
|
|
||||||
|
get mediaTypeStorageKey() {
|
||||||
|
return "DiscoverOptions" + this.discoverType.toString();
|
||||||
|
};
|
||||||
|
private amountToLoad = 14;
|
||||||
|
private currentlyLoaded = 0;
|
||||||
|
|
||||||
|
constructor(private searchService: SearchV2Service,
|
||||||
|
private storageService: StorageService) {
|
||||||
|
this.responsiveOptions = [
|
||||||
|
{
|
||||||
|
breakpoint: '2559px',
|
||||||
|
numVisible: 7,
|
||||||
|
numScroll: 7
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: '1024px',
|
||||||
|
numVisible: 4,
|
||||||
|
numScroll: 4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: '768px',
|
||||||
|
numVisible: 2,
|
||||||
|
numScroll: 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: '560px',
|
||||||
|
numVisible: 1,
|
||||||
|
numScroll: 1
|
||||||
|
}
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
public async ngOnInit() {
|
||||||
|
this.currentlyLoaded = 0;
|
||||||
|
const localDiscoverOptions = +this.storageService.get(this.mediaTypeStorageKey);
|
||||||
|
if (localDiscoverOptions) {
|
||||||
|
this.discoverOptions = DiscoverOption[DiscoverOption[localDiscoverOptions]];
|
||||||
|
}
|
||||||
|
|
||||||
|
var moviePromise: Promise<void>;
|
||||||
|
var tvPromise: Promise<void>;
|
||||||
|
switch (this.discoverOptions) {
|
||||||
|
case DiscoverOption.Combined:
|
||||||
|
moviePromise = this.loadMovies();
|
||||||
|
tvPromise = this.loadTv();
|
||||||
|
break;
|
||||||
|
case DiscoverOption.Movie:
|
||||||
|
moviePromise = this.loadMovies();
|
||||||
|
break;
|
||||||
|
case DiscoverOption.Tv:
|
||||||
|
tvPromise = this.loadTv();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
await moviePromise;
|
||||||
|
await tvPromise;
|
||||||
|
|
||||||
|
this.createInitialModel();
|
||||||
|
}
|
||||||
|
|
||||||
|
public async toggleChanged(event: MatButtonToggleChange) {
|
||||||
|
await this.switchDiscoverMode(event.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
public async newPage() {
|
||||||
|
// Note this is using the internal carousel APIs
|
||||||
|
// https://github.com/primefaces/primeng/blob/master/src/app/components/carousel/carousel.ts
|
||||||
|
var end = this.carousel._page >= (this.carousel.totalDots() - 1);
|
||||||
|
if (end) {
|
||||||
|
var moviePromise: Promise<void>;
|
||||||
|
var tvPromise: Promise<void>;
|
||||||
|
switch (this.discoverOptions) {
|
||||||
|
case DiscoverOption.Combined:
|
||||||
|
moviePromise = this.loadMovies();
|
||||||
|
tvPromise = this.loadTv();
|
||||||
|
break;
|
||||||
|
case DiscoverOption.Movie:
|
||||||
|
moviePromise = this.loadMovies();
|
||||||
|
break;
|
||||||
|
case DiscoverOption.Tv:
|
||||||
|
tvPromise = this.loadTv();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
await moviePromise;
|
||||||
|
await tvPromise;
|
||||||
|
|
||||||
|
this.createModel();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async switchDiscoverMode(newMode: DiscoverOption) {
|
||||||
|
if (this.discoverOptions === newMode) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.loading();
|
||||||
|
this.discoverOptions = newMode;
|
||||||
|
this.storageService.save(this.mediaTypeStorageKey, newMode.toString());
|
||||||
|
await this.ngOnInit();
|
||||||
|
this.finishLoading();
|
||||||
|
}
|
||||||
|
|
||||||
|
private async loadMovies() {
|
||||||
|
switch (this.discoverType) {
|
||||||
|
case DiscoverType.Popular:
|
||||||
|
this.movies = await this.searchService.popularMoviesByPage(this.currentlyLoaded, this.amountToLoad);
|
||||||
|
break;
|
||||||
|
case DiscoverType.Trending:
|
||||||
|
this.movies = await this.searchService.nowPlayingMoviesByPage(this.currentlyLoaded, this.amountToLoad);
|
||||||
|
break;
|
||||||
|
case DiscoverType.Upcoming:
|
||||||
|
this.movies = await this.searchService.upcomingMoviesByPage(this.currentlyLoaded, this.amountToLoad);
|
||||||
|
break
|
||||||
|
}
|
||||||
|
this.currentlyLoaded += this.amountToLoad;
|
||||||
|
}
|
||||||
|
|
||||||
|
private async loadTv() {
|
||||||
|
switch (this.discoverType) {
|
||||||
|
case DiscoverType.Popular:
|
||||||
|
this.tvShows = await this.searchService.popularTvByPage(this.currentlyLoaded, this.amountToLoad);
|
||||||
|
break;
|
||||||
|
case DiscoverType.Trending:
|
||||||
|
this.tvShows = await this.searchService.trendingTvByPage(this.currentlyLoaded, this.amountToLoad);
|
||||||
|
break;
|
||||||
|
case DiscoverType.Upcoming:
|
||||||
|
this.tvShows = await this.searchService.anticipatedTvByPage(this.currentlyLoaded, this.amountToLoad);
|
||||||
|
break
|
||||||
|
}
|
||||||
|
this.currentlyLoaded += this.amountToLoad;
|
||||||
|
}
|
||||||
|
|
||||||
|
private createInitialModel() {
|
||||||
|
this.clear();
|
||||||
|
this.createModel();
|
||||||
|
}
|
||||||
|
|
||||||
|
private createModel() {
|
||||||
|
const tempResults = <IDiscoverCardResult[]>[];
|
||||||
|
|
||||||
|
switch (this.discoverOptions) {
|
||||||
|
case DiscoverOption.Combined:
|
||||||
|
tempResults.push(...this.mapMovieModel());
|
||||||
|
tempResults.push(...this.mapTvModel());
|
||||||
|
this.shuffle(tempResults);
|
||||||
|
break;
|
||||||
|
case DiscoverOption.Movie:
|
||||||
|
tempResults.push(...this.mapMovieModel());
|
||||||
|
break;
|
||||||
|
case DiscoverOption.Tv:
|
||||||
|
tempResults.push(...this.mapTvModel());
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.discoverResults.push(...tempResults);
|
||||||
|
this.carousel.ngAfterContentInit();
|
||||||
|
|
||||||
|
this.finishLoading();
|
||||||
|
}
|
||||||
|
|
||||||
|
private mapMovieModel(): IDiscoverCardResult[] {
|
||||||
|
const tempResults = <IDiscoverCardResult[]>[];
|
||||||
|
this.movies.forEach(m => {
|
||||||
|
tempResults.push({
|
||||||
|
available: m.available,
|
||||||
|
posterPath: m.posterPath ? `https://image.tmdb.org/t/p/w500/${m.posterPath}` : "../../../images/default_movie_poster.png",
|
||||||
|
requested: m.requested,
|
||||||
|
title: m.title,
|
||||||
|
type: RequestType.movie,
|
||||||
|
id: m.id,
|
||||||
|
url: `http://www.imdb.com/title/${m.imdbId}/`,
|
||||||
|
rating: m.voteAverage,
|
||||||
|
overview: m.overview,
|
||||||
|
approved: m.approved,
|
||||||
|
imdbid: m.imdbId,
|
||||||
|
denied: false,
|
||||||
|
background: m.backdropPath
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return tempResults;
|
||||||
|
}
|
||||||
|
|
||||||
|
private mapTvModel(): IDiscoverCardResult[] {
|
||||||
|
const tempResults = <IDiscoverCardResult[]>[];
|
||||||
|
this.tvShows.forEach(m => {
|
||||||
|
tempResults.push({
|
||||||
|
available: m.available,
|
||||||
|
posterPath: "../../../images/default_tv_poster.png",
|
||||||
|
requested: m.requested,
|
||||||
|
title: m.title,
|
||||||
|
type: RequestType.tvShow,
|
||||||
|
id: m.id,
|
||||||
|
url: undefined,
|
||||||
|
rating: +m.rating,
|
||||||
|
overview: m.overview,
|
||||||
|
approved: m.approved || m.partlyAvailable,
|
||||||
|
imdbid: m.imdbId,
|
||||||
|
denied: false,
|
||||||
|
background: m.background
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return tempResults;
|
||||||
|
}
|
||||||
|
|
||||||
|
private clear() {
|
||||||
|
this.discoverResults = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
private shuffle(discover: IDiscoverCardResult[]): IDiscoverCardResult[] {
|
||||||
|
for (let i = discover.length - 1; i > 0; i--) {
|
||||||
|
const j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[discover[i], discover[j]] = [discover[j], discover[i]];
|
||||||
|
}
|
||||||
|
return discover;
|
||||||
|
}
|
||||||
|
|
||||||
|
private loading() {
|
||||||
|
this.loadingFlag = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
private finishLoading() {
|
||||||
|
this.loadingFlag = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
@ -1,42 +1,27 @@
|
|||||||
<div class="small-middle-container">
|
<div class="small-middle-container">
|
||||||
<div class="row justify-content-end">
|
<div *ngIf="loadingFlag" class="row justify-content-md-center top-spacing loading-spinner">
|
||||||
<div class="btn-group col-12 col-md-3 small-space discover-layout"role="group">
|
|
||||||
<mat-button-toggle-group *ngIf="displayOption">
|
|
||||||
<mat-button-toggle [ngClass]="displayOption === DisplayOption.Card ? 'mat-button-toggle-checked' : ''" (click)="changeView(DisplayOption.Card)"><mat-icon>dashboard</mat-icon></mat-button-toggle>
|
|
||||||
<mat-button-toggle [ngClass]="displayOption === DisplayOption.List ? 'mat-button-toggle-checked' : ''" (click)="changeView(DisplayOption.List)"><mat-icon>calendar_view_day</mat-icon></mat-button-toggle>
|
|
||||||
</mat-button-toggle-group>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row justify-content-md-center small-space">
|
<div class="section">
|
||||||
<div class="btn-group" role="group">
|
<h2>Popular</h2>
|
||||||
<button type="button" (click)="switchDiscoverMode(DiscoverOption.Movie)" [attr.color]="popularActive ? 'accent' : 'primary'" [ngClass]="discoverOptions === DiscoverOption.Movie ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Discovery.Movies' | translate}}</button>
|
<div>
|
||||||
<button type="button" (click)="switchDiscoverMode(DiscoverOption.Combined)" [attr.color]="trendingActive ? 'accent' : 'primary'" [ngClass]="discoverOptions === DiscoverOption.Combined ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow"
|
<carousel-list [discoverType]="DiscoverType.Popular"></carousel-list>
|
||||||
color="primary">{{'Discovery.Combined' | translate}}</button>
|
|
||||||
<button type="button" (click)="switchDiscoverMode(DiscoverOption.Tv)" [attr.color]="upcomingActive ? 'accent' : 'primary'" [ngClass]="discoverOptions === DiscoverOption.Tv ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow" color="primary">{{'Discovery.Tv' | translate}}</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
<div class="row justify-content-md-center small-space">
|
<h2>Trending</h2>
|
||||||
<div class="btn-group" role="group" aria-label="Basic example">
|
<div >
|
||||||
<button type="button" (click)="popular()" [attr.color]="popularActive ? 'accent' : 'primary'" [ngClass]="popularActive ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Discovery.PopularTab' | translate}}</button>
|
<carousel-list [discoverType]="DiscoverType.Trending"></carousel-list>
|
||||||
<button type="button" (click)="trending()" [attr.color]="trendingActive ? 'accent' : 'primary'" [ngClass]="trendingActive ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow" color="primary">{{'Discovery.TrendingTab' | translate}}</button>
|
|
||||||
<button type="button" (click)="upcoming()" [attr.color]="upcomingActive ? 'accent' : 'primary'" [ngClass]="upcomingActive ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow" color="primary">{{'Discovery.UpcomingTab' | translate}}</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div *ngIf="discoverResults && displayOption === DisplayOption.Card" class="row full-height discoverResults col" infiniteScroll [fromRoot]="false" [infiniteScrollDistance]="0.5" [infiniteScrollDisabled]="scrollDisabled" (scrolled)="onScroll()">
|
|
||||||
<div class="col-xl-2 col-lg-3 col-md-4 col-12 col-sm-6 small-padding" *ngFor="let result of discoverResults">
|
|
||||||
<discover-card [result]="result"></discover-card>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="discoverResults && displayOption == DisplayOption.List" class="row full-height discoverResults col" infiniteScroll [fromRoot]="true" [infiniteScrollDistance]="1" [infiniteScrollDisabled]="scrollDisabled" (scrolled)="onScroll()">
|
|
||||||
<div class="col-12 small-padding" *ngFor="let result of discoverResults">
|
<div class="section">
|
||||||
<discover-grid [result]="result"></discover-grid>
|
<h2>Upcoming</h2>
|
||||||
|
<div>
|
||||||
|
<carousel-list [discoverType]="DiscoverType.Upcoming"></carousel-list>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="loadingFlag" class="row justify-content-md-center top-spacing loading-spinner">
|
</div>
|
||||||
<mat-spinner [color]="'accent'"></mat-spinner>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@ -1,210 +1,12 @@
|
|||||||
.full-height {
|
.section {
|
||||||
height: 100%;
|
margin: 20px;
|
||||||
}
|
}
|
||||||
|
::ng-deep .p-carousel-indicators {
|
||||||
.small-middle-container {
|
display: none !important;
|
||||||
margin: auto;
|
|
||||||
width: 85%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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%;
|
|
||||||
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 {
|
h2{
|
||||||
width: auto;
|
margin-top:40px;
|
||||||
}
|
margin-left:40px;
|
||||||
|
font-size: 24px;
|
||||||
::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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in new issue