github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-20 21:33:15 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Reworked top search. included username. styling fixes for menu

Browse source
This commit is contained in:
twanariens 2021-03-31 22:08:42 +02:00
commit 1c8ab3cee2
3 changed files with 68 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
View file

@ -53,36 +53,33 @@
<i class="fa-lg fas fa-bars"></i>
</button>
<div class="col-8 col-lg-10 top-search-bar">
<span class="justify-content-center align-items-center">
<div class="top-search-block">
<!-- Search Bar -->
<div>
<div class="top-search-bar">
<app-nav-search></app-nav-search>
</div>
</span>
<button id="search-filter" mat-icon-button [matMenuTriggerFor]="filterMenu">
<i class="fa-lg fas fa-filter"></i>
</button>
<mat-menu #filterMenu="matMenu" yPosition="below" class="smaller-panel">
<mat-slide-toggle id="filterMovies" class="mat-menu-item slide-menu" [checked]="searchFilter.movies"
(click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.Movie)">
{{ 'NavigationBar.Filter.Movies' | translate}}</mat-slide-toggle>
<mat-slide-toggle id="filterTv" 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 id="filterMusic" 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 class="col-1 top-filter">
<button id="search-filter" mat-icon-button [matMenuTriggerFor]="filterMenu">
<i class="fa-lg fas fa-filter"></i>
</button>
<mat-menu #filterMenu="matMenu" yPosition="below" class="smaller-panel">
<mat-slide-toggle id="filterMovies" class="mat-menu-item slide-menu" [checked]="searchFilter.movies"
(click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.Movie)">
{{ 'NavigationBar.Filter.Movies' | translate}}</mat-slide-toggle>
<mat-slide-toggle id="filterTv" 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 id="filterMusic" 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 class="col-1">
<div class="profile-block">
<a routerLink="/user-preferences">
<img [matTooltip]="username" id="profile-image" class="profile-img" [src]="getUserImage()" />
<div class="profile-username">{{username}}</div>
<div class="profile-img"><img [matTooltip]="username" [src]="getUserImage()" /></div>
</a>
</div>

85
src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss
View file

@ -24,7 +24,8 @@
}
.icon-spacing {
margin-right: 5%;
width:40px;
text-align: center;
}
.example-form {
@ -48,12 +49,6 @@
padding: 0px 5px;
}
::ng-deep .dark .active-list-item {
background: $accent-dark !important;
color:black !important;
font-weight:500;
}
.slide-menu {
width: 100%;
}
@ -62,6 +57,27 @@
max-width: 170px !important;
}
.top-bar-container{
width: 95%;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
}
.top-search-block{
height:84px;
display:flex;
justify-content: center;
align-items: center;
flex:1;
margin-right:5%;
}
.top-search-bar{
width:100%;
}
.mat-drawer-content {
position: relative;
overflow: hidden;
@ -71,36 +87,34 @@
/* overflow: auto; */
}
.profile-img-container {
margin: 20px auto 10px;
overflow: hidden;
text-align: center;
width: 80%;
.profile-block a{
color: #FFF;
font-size: 0.8em;
font-weight: 100;
display:flex;
justify-content: end;
align-items: flex-end;
text-transform: capitalize;
flex:0 0 250px;
}
.profile-img {
float: left;
width: 45px;
border-radius: 100%;
.profile-username{
justify-content: center;
display:flex;
height:50px;
align-items: center;
margin-right:5px;
}
.profile-info {
overflow: hidden;
text-align: left;
}
.profile-info > h3 {
font-size: 15px;
text-transform: capitalize;
// color: #333;
margin-bottom: 2px;
}
.profile-info > p {
// color: #333;
font-size: 11px;
margin-top: 5px;
@media (max-width: 600px) {
.profile-username{
display:none;
}
}
.profile-img img {
width: 45px;
width: 50px;
}
@ -173,18 +187,11 @@
.top-bar-container{
background: $ombi-background-primary;
color:$ombi-background-primary-accent;
padding-top:1em;
}
}
.top-search-bar{
margin-left: 30px;
}
::ng-deep .mat-toolbar-row, .mat-toolbar-single-row{
height:auto;
}
.top-search-bar{
height:84px;
}

1
src/Ombi/ClientApp/src/app/my-nav/nav-search.component.scss
View file

@ -39,7 +39,6 @@ $ombi-accent: #258a6d;
::ng-deep .top-search-bar .mat-form-field-flex{
border: 1px solid #35465c;
border-radius:30px;
margin-top:20px;
height:50px;
}