You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Ombi/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html

56 lines
4.2 KiB

<div class="small-middle-container">
<!-- <div class="row justify-content-end">
<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 class="row justify-content-md-center small-space">
<div class="btn-group" role="group">
<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>
<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"
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 class="row justify-content-md-center small-space">
<div class="btn-group" role="group" aria-label="Basic example">
<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>
<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 *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 *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">
<discover-grid [result]="result"></discover-grid>
</div>
</div>
<div *ngIf="loadingFlag" class="row justify-content-md-center top-spacing loading-spinner">
<mat-spinner [color]="'accent'"></mat-spinner>
</div> -->
<div class="section">
<h2>Popular <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></h2>
<div *ngIf="!loadingFlag">
<movie-list [result]="upcomingMovies"></movie-list>
</div>
</div>
<div class="section">
<h2>Trending <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></h2>
<div *ngIf="!loadingFlag">
<movie-list [result]="trendingMovies"></movie-list>
</div>
</div>
</div>