MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

small fix navbar height responsiveness

This commit is contained in:
mchouliara 2024-09-30 17:07:45 +03:00
parent de5e70a808
commit 31089fdeba
2 changed files with 22 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/app/ui/navbar/navbar.component.html
View File

@ -6,7 +6,7 @@
<div class="icon-bar2"></div>
<div class="icon-bar3"></div>
</button>
<h1 class="logo mr-auto" >
<h1 class="logo" >
<a [routerLink]="routerUtils.generateUrl(['home'])">
<img class="logo-image" alt="{{('ALT-TEXT.GO-TO-MAIN' | translate) ?? 'go to main page'}}" [src]="'../../../assets/images/nav-logo' + configurationService.navLogoExtension">
</a>
@ -17,7 +17,7 @@
</a>
}
<ul class="horizontal-list justify-content-end" id="navigation">
<ul class="ml-auto horizontal-list justify-content-end" id="navigation">
<li class="navbar-item-sm ml-auto">
<button mat-icon-button [matMenuTriggerFor]="toggleMenu" [attr.aria-label]="'ALT-TEXT.USER-OPTIONS' | translate">
<mat-icon aria-hidden>more_horiz</mat-icon>
@ -67,24 +67,28 @@
</li>
<!-- Login -->
<li class="pl-2">
@if(this.isAuthenticated()) {
<button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent;">
<img alt="{{('ALT-TEXT.USER-OPTIONS' | translate) ?? 'user options'}}" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)">
</button>
}@else {
<ng-container *ngTemplateOutlet="loginOptionTemplate"/>
}
<li class="navbar-item-lg pl-2">
<ng-container *ngTemplateOutlet="userSettingsTemplate"/>
</li>
</ul>
<ng-template #loginOptionTemplate>
<button mat-button [routerLink]=" ['/login'] ">
<span class="login-label">{{ 'GENERAL.ACTIONS.LOG-IN' | translate }}</span>
</button>
<ng-template #userSettingsTemplate>
@if(this.isAuthenticated()) {
<button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent;">
<img alt="{{('ALT-TEXT.USER-OPTIONS' | translate) ?? 'user options'}}" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)">
</button>
}@else {
<button mat-button [routerLink]=" ['/login'] ">
<span class="login-label">{{ 'GENERAL.ACTIONS.LOG-IN' | translate }}</span>
</button>
}
</ng-template>
<mat-menu #toggleMenu="matMenu">
<ul class="list m-2">
<li class="d-flex justify-content-center">
<ng-container *ngTemplateOutlet="userSettingsTemplate" tabindex="0"/>
</li>
<li class="ml-3 d-flex justify-content-around align-items-center" (click)="$event.stopPropagation()" tabindex="0">
<button mat-button class="faq-title" (click)="openFaqDialog()" [attr.aria-label]="'FAQ.TITLE' | translate">{{ 'FAQ.TITLE' | translate }}</button>
<button mat-button [matMenuTriggerFor]="languageMenu" class="lang" [attr.aria-label]="'ALT-TEXT.LANGUAGE-SELECT' | translate" (click)="$event.stopPropagation();">

13
frontend/src/app/ui/navbar/navbar.component.scss
View File

@ -37,7 +37,6 @@ $mat-card-header-size: 40px !default;
position: fixed;
z-index: 1000;
height: 80px;
min-height: fit-content; //for mobile
display: flex;
background: #ffffff 0% 0% no-repeat padding-box;
@ -51,12 +50,12 @@ $mat-card-header-size: 40px !default;
left: 0;
right: 0;
padding: 0.625rem 0;
// padding: 0.625rem 0;
}
.logo {
margin-left: 5px;
height: 100%;
height: min(100%, 60px);
}
.extra-logo {
@ -64,10 +63,10 @@ $mat-card-header-size: 40px !default;
height: 100%;
}
.logo-image {
height: 100%;
height: min(100%, 60px);
}
.extra-logo-image {
height: 100%;
height: min(100%, 60px);
}
.faq-title {
@ -189,7 +188,3 @@ $mat-card-header-size: 40px !default;
padding: 0 !important;
}
}
.container-fluid {
min-height: fit-content;
}