Reworked top search. included username. styling fixes for menu

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html

@@ -53,36 +53,33 @@
                 <i class="fa-lg fas fa-bars"></i>
             </button>
 
-            <div class="col-8 col-lg-10 top-search-bar">
+            <div class="top-search-block">
-                <span class="justify-content-center align-items-center">
                     <!-- 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">
+            <div class="profile-block">
-                <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">
                 <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>
 

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss

@@ -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 {
+.profile-block a{
-    margin: 20px auto 10px;
+    color: #FFF;
-    overflow: hidden;
+    font-size: 0.8em;
-    text-align: center;
+    font-weight: 100;
-    width: 80%;
+    display:flex;
+    justify-content: end;
+    align-items: flex-end;
+    text-transform: capitalize;
+    flex:0 0 250px;
 }
 
-.profile-img {
+
-    float: left;
+.profile-username{
-    width: 45px;
+    justify-content: center;
-    border-radius: 100%;
+    display:flex;
-}
+    height:50px;
-.profile-info {
+    align-items: center;
-    overflow: hidden;
+    margin-right:5px;
-    text-align: left;
-}
-.profile-info > h3 {
-    font-size: 15px;
-    text-transform: capitalize;
-    // color: #333;
-    margin-bottom: 2px;
 }
-.profile-info > p {
+
-    // color: #333;
+@media (max-width: 600px) {
-    font-size: 11px;
+    .profile-username{
-    margin-top: 5px;
+        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;
 }

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

@@ -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;
 }