Task 692. Usernames' and providers' styles in header have been fixed … (

#706) * Task 692. Usernames' and providers' styles in header have been fixed according by mockup. * Usernames' and providers' font styles in header have been fixed. * The method of obtaining the name of the parent and teacher has been optimized * The method of obtaining the name of the parent and teacher has been optimized one more time * Code that was commented out has been removed from header.component.ts file
ita-social-projects · Dec 10, 2021 · c7c9f72 · c7c9f72
1 parent d71dd8b
commit c7c9f72
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 44 deletions.
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
@@ -78,7 +78,7 @@ <h2 class="header_descr">
       </button>
 
       <div class="header_username" [matMenuTriggerFor]="log">
-        <ng-container>{{(user$ | async).firstName}} {{(user$ | async).lastName}}</ng-container>
+        <ng-container>{{ userShortName }}</ng-container>
       </div>
       <button mat-icon-button [matMenuTriggerFor]="log">
         <mat-icon>arrow_drop_down</mat-icon>
@@ -91,7 +91,7 @@ <h2 class="header_descr">
 
     <mat-menu #log="matMenu" class="header_menu">
       <button mat-menu-item class="header_menu_account-button">
-        <ng-container>{{(user$ | async).firstName}} {{(user$ | async).lastName}}</ng-container>
+        <ng-container>{{ userShortName }}</ng-container>
         <button mat-raised-button class="header_menu_account-button_account-circle" matBadge="2"
           matBadgePosition="before" matBadgeColor="accent">
           <i>
@@ -117,4 +117,4 @@ <h2 class="header_descr">
   class="progress-bar">
   <mat-progress-bar mode="indeterminate">
   </mat-progress-bar>
-</div>
+</div>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
@@ -1,28 +1,29 @@
 .authorization {
   display: flex;
   margin: 1%;
+  width: 100%;
 }
 
 .material-icon {
   line-height: none;
 }
 
-.pointer{
-  cursor:pointer;
+.pointer {
+  cursor: pointer;
 }
 
-.notification{
+.notification {
   height: 35px;
   line-height: 35px;
   font-weight: bold;
 }
 
-.circle-notification{
+.circle-notification {
   font-size: 10px;
-  color:#F5BC4A;
+  color: #F5BC4A;
 }
 
-.btn-notification{
+.btn-notification {
   font-weight: bold;
   color: #3849F9;
 }
@@ -59,7 +60,7 @@
     cursor: pointer;
   }
 
-  &_secondary{
+  &_secondary {
     background: #3849F9;
     max-height: 83px;
     box-shadow: 0px 7px 19px rgba(0, 0, 0, 0.11);
@@ -71,15 +72,17 @@
     align-items: center;
   }
 
-  &_top, &_btns {
+  &_top,
+  &_btns {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
 
   &_logo-wrapper {
     position: relative;
-    .logo{
+
+    .logo {
       position: absolute;
       transform: translate(0, -41%);
 
@@ -96,12 +99,14 @@
     border-radius: 20px;
     border-color: white;
     color: white;
+
     &.mat-stroked-button {
       font-size: 0.7rem;
     }
   }
 
-  &_lang, &_menu {
+  &_lang,
+  &_menu {
     background: none;
     color: white;
     font-size: 0.7rem !important;
@@ -120,11 +125,13 @@
   }
 
   &_username {
-    font-size: 0.7rem;
+    display: flex;
+    align-items: center;
+    font-family: Innerspace, sans-serif;
+    font-style: normal;
     font-weight: bold;
-    white-space: nowrap;
-    line-height: 40px;
-    text-transform: uppercase;
+    font-size: 0.8125rem;
+    line-height: 15px;
     cursor: pointer;
 
     &:hover {
@@ -153,7 +160,8 @@
       }
     }
 
-    &-button-mobile, &_account-button {
+    &-button-mobile,
+    &_account-button {
       display: none;
     }
   }
@@ -187,22 +195,22 @@
   }
 }
 
-::ng-deep .mat-menu-content{
+::ng-deep .mat-menu-content {
   font-weight: bold;
   font-size: x-small;
   margin: 0.5rem !important;
 }
 
-::ng-deep .mat-menu-panel{
+::ng-deep .mat-menu-panel {
   border-radius: 15px !important;
 }
 
 .icon-account {
-  color:white;
+  color: white;
 }
 
 ::ng-deep .lang-option .mat-select-value {
-  color:white !important;
+  color: white !important;
   padding-right: 25px;
   overflow: visible;
 }
@@ -211,11 +219,11 @@
   display: none;
 }
 
-::ng-deep .lang-option-text .mat-option-text{
+::ng-deep .lang-option-text .mat-option-text {
   width: 0;
 }
 
-.lang-option-text{
+.lang-option-text {
   padding: 0;
   font-size: 0.7rem;
   font-weight: bold;
@@ -228,28 +236,33 @@
   width: auto !important;
 }
 
-::ng-deep .mat-menu-item{
+::ng-deep .mat-menu-item {
   padding: 0px !important;
 }
-.progress-bar{
-  position:  absolute;
+
+.progress-bar {
+  position: absolute;
   width: 100vw;
   z-index: 999;
- }
+}
+
 @media (max-width: 1024px) {
   .header {
     &_search {
       width: 100%;
     }
-    &_title{
+
+    &_title {
       text-align: center;
     }
   }
 }
 
 @media (max-width: 375px) {
   .header {
-    &_top, &_btns {
+
+    &_top,
+    &_btns {
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -270,7 +283,7 @@
 }
 
 
-@media(max-width: 750px){
+@media(max-width: 750px) {
   .authorization {
     flex-direction: row-reverse;
 
@@ -325,12 +338,15 @@
     &_lang {
       display: none;
     }
-    &_about{
-      display: none;;
+
+    &_about {
+      display: none;
+      ;
     }
 
-    &_support{
-      display: none;;
+    &_support {
+      display: none;
+      ;
     }
 
     &_menu {
@@ -376,17 +392,22 @@
   .header {
     width: 100%;
     padding: 0;
+
     &_logo-wrapper {
       height: 20px;
-      .logo{
+
+      .logo {
         width: 130px;
         margin-top: 8px;
       }
     }
-    &_top, &_btns {
+
+    &_top,
+    &_btns {
       display: flex;
       justify-content: space-between;
     }
+
     &_top {
       display: flex;
       flex-direction: row;
@@ -397,12 +418,14 @@
       padding: 40px 0 15px 15px;
       background-color: #3849F9;
     }
+
     &_btns {
       flex-direction: column-reverse;
       align-items: flex-end;
       gap: 0;
     }
-    &_title{
+
+    &_title {
       margin-top: 120px;
       text-align: center;
     }
@@ -416,27 +439,30 @@
     }
   }
 }
+
 @media (max-width: 750px) {
   .header {
     padding: 0;
-    &_title{
+
+    &_title {
       font-size: 1.5rem;
       line-height: 2rem;
       text-align: center;
       margin-top: 2rem;
     }
-    &_descr{
+
+    &_descr {
       text-align: center;
       font-size: 1rem;
     }
 
-    .header-full-search-bar-wrap{
+    .header-full-search-bar-wrap {
       width: inherit;
       margin: 1rem;
     }
   }
 
-  .mat-button-wrapper{
-    padding:0.3rem;
+  .mat-button-wrapper {
+    padding: 0.3rem;
   }
 }
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
@@ -3,6 +3,7 @@ import { Component, OnInit, Input } from '@angular/core';
 import { Select, Store } from '@ngxs/store';
 import { RegistrationState } from '../shared/store/registration.state';
 import { Observable } from 'rxjs';
+import { filter } from 'rxjs/operators';
 import { Logout, CheckAuth, Login } from '../shared/store/registration.actions';
 import { User } from '../shared/models/user.model';
 import { Router } from '@angular/router';
@@ -30,6 +31,7 @@ export class HeaderComponent implements OnInit {
 
   selectedLanguage = 'uk';
   showModalReg = false;
+  userShortName: string = '';
 
   @Select(FilterState.isLoading)
   isLoadingResultPage$: Observable<boolean>;
@@ -56,6 +58,13 @@ export class HeaderComponent implements OnInit {
 
   ngOnInit(): void {
     this.store.dispatch(new CheckAuth());
+
+    this.user$.pipe(
+      filter((user) => !!user)
+    )
+    .subscribe(item => {
+      this.userShortName = item.lastName + ' ' + (item.firstName).slice(0,1) + '.' + (item.middleName).slice(0,1) + '.';
+    })
   }
 
   logout(): void {
@@ -73,5 +82,4 @@ export class HeaderComponent implements OnInit {
   setLanguage(): void {
     localStorage.setItem('ui-culture', this.selectedLanguage);
   }
-
 }