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

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

@ -53,15 +53,11 @@
<i class="fa-lg fas fa-bars"></i> <i class="fa-lg fas fa-bars"></i>
</button> </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 --> <!-- Search Bar -->
<div> <div class="top-search-bar">
<app-nav-search></app-nav-search> <app-nav-search></app-nav-search>
</div> </div>
</span>
</div>
<div class="col-1 top-filter">
<button id="search-filter" mat-icon-button [matMenuTriggerFor]="filterMenu"> <button id="search-filter" mat-icon-button [matMenuTriggerFor]="filterMenu">
<i class="fa-lg fas fa-filter"></i> <i class="fa-lg fas fa-filter"></i>
</button> </button>
@ -80,9 +76,10 @@
{{ 'NavigationBar.Filter.People' | translate}}</mat-slide-toggle> --> {{ 'NavigationBar.Filter.People' | translate}}</mat-slide-toggle> -->
</mat-menu> </mat-menu>
</div> </div>
<div class="col-1"> <div class="profile-block">
<a routerLink="/user-preferences"> <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> </a>
</div> </div>

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

@ -24,7 +24,8 @@
} }
.icon-spacing { .icon-spacing {
margin-right: 5%; width:40px;
text-align: center;
} }
.example-form { .example-form {
@ -48,12 +49,6 @@
padding: 0px 5px; padding: 0px 5px;
} }
::ng-deep .dark .active-list-item {
background: $accent-dark !important;
color:black !important;
font-weight:500;
}
.slide-menu { .slide-menu {
width: 100%; width: 100%;
} }
@ -62,6 +57,27 @@
max-width: 170px !important; 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 { .mat-drawer-content {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -71,36 +87,34 @@
/* overflow: auto; */ /* 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;
align-items: center;
margin-right:5px;
} }
.profile-info {
overflow: hidden; @media (max-width: 600px) {
text-align: left; .profile-username{
display:none;
} }
.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;
} }
.profile-img img { .profile-img img {
width: 45px; width: 50px;
} }
@ -173,18 +187,11 @@
.top-bar-container{ .top-bar-container{
background: $ombi-background-primary; background: $ombi-background-primary;
color:$ombi-background-primary-accent; color:$ombi-background-primary-accent;
padding-top:1em;
} }
} }
.top-search-bar{
margin-left: 30px;
}
::ng-deep .mat-toolbar-row, .mat-toolbar-single-row{ ::ng-deep .mat-toolbar-row, .mat-toolbar-single-row{
height:auto; 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{ ::ng-deep .top-search-bar .mat-form-field-flex{
border: 1px solid #35465c; border: 1px solid #35465c;
border-radius:30px; border-radius:30px;
margin-top:20px;
height:50px; height:50px;
} }