what do you think?

pull/3818/head
goldenpipes 4 years ago
parent ec869f9e39
commit 7004038baa

@ -1,13 +1,13 @@
<div class="small-middle-container"> <div class="small-middle-container">
<div class="row justify-content-end"> <div class="row justify-content-end">
<div class="btn-group col-12 col-md-3 small-space" style="float:left;" role="group"> <div class="btn-group col-12 col-md-3 small-space discover-layout"role="group">
<mat-button-toggle-group *ngIf="displayOption"> <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.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 [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> </mat-button-toggle-group>
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-md-center small-space">
<div class="btn-group" role="group"> <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.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" <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"
@ -18,7 +18,7 @@
</div> </div>
<div class="row justify-content-md-center small-space"> <div class="row justify-content-md-center">
<div class="btn-group" role="group" aria-label="Basic example"> <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)="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)="trending()" [attr.color]="trendingActive ? 'accent' : 'primary'" [ngClass]="trendingActive ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow" color="primary">{{'Discovery.TrendingTab' | translate}}</button>

@ -26,6 +26,13 @@
padding-top: 1%; padding-top: 1%;
} }
.discover-layout {
position: absolute;
float: right;
margin-right: 36px;
z-index: 1;
}
::ng-deep .mat-card-image { ::ng-deep .mat-card-image {
height: 75%; height: 75%;
object-fit: cover; object-fit: cover;
@ -195,4 +202,9 @@
max-width: 11.111111%; max-width: 11.111111%;
min-width: 11.111111%; min-width: 11.111111%;
} }
}
@media (max-width: 420px) {
.discover-layout{
display: none;
}
} }
Loading…
Cancel
Save