Center logo in menu bar

This commit is contained in:
Adina Țeudan 2020-10-21 21:37:36 +03:00
parent 17b33d81df
commit c901df26b7
2 changed files with 16 additions and 13 deletions

View File

@ -1,6 +1,6 @@
<div class="red-top-bar">
<div class="top-bar-row">
<div class="menu left visible-lt-lg">
<div class="menu visible-lt-lg">
<button [matMenuTriggerFor]="menuNav" mat-flat-button>
<mat-icon svgIcon="red:menu"></mat-icon>
</button>
@ -16,29 +16,29 @@
mat-menu-item>{{appStateService.activeFile.filename}}</button>
</mat-menu>
</div>
<div class="menu left visible-lg">
<div class="menu flex-2 visible-lg">
<a class="breadcrumb" routerLink="/ui/projects"
translate="top-bar.navigation-items.projects.label"></a>
<div *ngIf="appStateService.activeProject" class="breadcrumb">
<mat-icon svgIcon="red:double-chevron-right"></mat-icon>
<mat-icon>arrow_right</mat-icon>
</div>
<a *ngIf="appStateService.activeProject" class="breadcrumb"
[routerLink]="'/ui/projects/'+appStateService.activeProjectId">
{{appStateService.activeProject.project.projectName}}
</a>
<div *ngIf="appStateService.activeFile" class="breadcrumb">
<mat-icon svgIcon="red:double-chevron-right"></mat-icon>
<mat-icon>arrow_right</mat-icon>
</div>
<a *ngIf="appStateService.activeFile" class="breadcrumb"
[routerLink]="'/ui/projects/'+appStateService.activeProjectId+'/file/'+appStateService.activeFile.fileId">
{{appStateService.activeFile.filename}}
</a>
</div>
<div class="center">
<div class="center flex-1">
<redaction-logo></redaction-logo>
<div class="app-name" translate="app-name.label"></div>
</div>
<div class="menu right">
<div class="menu right flex-2">
<button [matMenuTriggerFor]="menu" mat-button>
<redaction-initials-avatar color="red-white" size="small" [username]="user?.name" [withName]="true"></redaction-initials-avatar>
<mat-icon>arrow_drop_down</mat-icon>

View File

@ -165,6 +165,11 @@ html, body {
.menu {
display: flex;
align-items: center;
overflow: hidden;
&.right {
justify-content: flex-end;
}
}
}
@ -173,17 +178,15 @@ html, body {
color: $accent;
font-weight: 600;
@include line-clamp(1);
max-width: 320px;
mat-icon {
height: 10px;
width: 10px;
padding: 0 8px;
}
min-width: 25px;
&:last-child {
color: $primary;
}
.mat-icon {
vertical-align: middle;
}
}
.divider {