Improved the user profile section

pull/3856/head
Jamie Rees 4 years ago
parent a991b2fff2
commit 86220bb237

@ -3,14 +3,17 @@
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)"> [opened]="!(isHandset$ | async)">
<mat-toolbar>{{applicationName}}</mat-toolbar> <mat-toolbar>{{applicationName}}</mat-toolbar>
<div class="profile-img-container"> <div class="outer-profile">
<div class="profile-img"> <div class="profile-img-container">
<img src="https://www.gravatar.com/avatar/{{emailHash}}?d=https://raw.githubusercontent.com/tidusjar/Ombi/gh-pages/img/android-chrome-512x512.png" /> <div class="profile-img">
</div> <img
<div class="profile-info"> src="https://www.gravatar.com/avatar/{{emailHash}}?d=https://raw.githubusercontent.com/tidusjar/Ombi/gh-pages/img/android-chrome-512x512.png" />
<h3>{{username}}</h3> </div>
<p>{{welcomeText | translate}}</p> <div class="profile-info">
</div> <h3>{{username}}</h3>
<p>{{welcomeText | translate}}</p>
</div>
</div>
</div> </div>
<mat-nav-list> <mat-nav-list>
<span *ngFor="let nav of navItems"> <span *ngFor="let nav of navItems">
@ -67,13 +70,23 @@
</span> </span>
</div> </div>
<div class="col-2"> <div class="col-2">
<button mat-icon-button [matMenuTriggerFor]="filterMenu"><mat-icon>filter_alt</mat-icon></button> <button mat-icon-button [matMenuTriggerFor]="filterMenu">
<mat-menu #filterMenu="matMenu" yPosition="below" class="smaller-panel"> <mat-icon>filter_alt</mat-icon>
<mat-slide-toggle class="mat-menu-item slide-menu" [checked]="searchFilter.movies" (click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.Movie)">{{ 'NavigationBar.Filter.Movies' | translate}}</mat-slide-toggle> </button>
<mat-slide-toggle class="mat-menu-item slide-menu" [checked]="searchFilter.tvShows" (click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.TvShow)">{{ 'NavigationBar.Filter.TvShows' | translate}}</mat-slide-toggle> <mat-menu #filterMenu="matMenu" yPosition="below" class="smaller-panel">
<mat-slide-toggle class="mat-menu-item slide-menu" [checked]="searchFilter.music" (click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.Music)">{{ 'NavigationBar.Filter.Music' | translate}}</mat-slide-toggle> <mat-slide-toggle class="mat-menu-item slide-menu" [checked]="searchFilter.movies"
<mat-slide-toggle class="mat-menu-item slide-menu" [checked]="searchFilter.people" (click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.People)">{{ 'NavigationBar.Filter.People' | translate}}</mat-slide-toggle> (click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.Movie)">
</mat-menu> {{ 'NavigationBar.Filter.Movies' | translate}}</mat-slide-toggle>
<mat-slide-toggle class="mat-menu-item slide-menu" [checked]="searchFilter.tvShows"
(click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.TvShow)">
{{ 'NavigationBar.Filter.TvShows' | translate}}</mat-slide-toggle>
<mat-slide-toggle class="mat-menu-item slide-menu" [checked]="searchFilter.music"
(click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.Music)">
{{ 'NavigationBar.Filter.Music' | translate}}</mat-slide-toggle>
<mat-slide-toggle class="mat-menu-item slide-menu" [checked]="searchFilter.people"
(click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.People)">
{{ 'NavigationBar.Filter.People' | translate}}</mat-slide-toggle>
</mat-menu>
</div> </div>
</mat-toolbar> </mat-toolbar>

@ -121,3 +121,9 @@
box-shadow: 4px 3px 6px 0 rgba(0,0,0,.2); box-shadow: 4px 3px 6px 0 rgba(0,0,0,.2);
width: 45px; width: 45px;
} }
.outer-profile {
background-color: #303030;
box-shadow: inset 0 0 3px #000000;
padding: 1px;
}
Loading…
Cancel
Save