add user name to header

ita-social-projects · Oct 11, 2023 · b9088a1 · b9088a1
1 parent af92085
commit b9088a1
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 35 deletions.
diff --git a/src/app/shared/header/header.component.html b/src/app/shared/header/header.component.html
@@ -167,6 +167,7 @@
                     *ngIf="index > 0"
                     role="menuitem"
                     tabindex="0"
+                    class="lang-option"
                     [attr.aria-label]="lang.lang"
                     (click)="changeCurrentLanguage(lang.lang, index)"
                     (keydown)="onKeydownLangOption($event, index)"
@@ -185,7 +186,6 @@
                 appCloseDropdown
                 [attr.aria-label]="ariaStatus"
                 [ngClass]="{
-                  'd-none': toggleBurgerMenu,
                   'item-list-margin': dropdownVisible && isUBS,
                   'ubs-user-cabinet': isUBS,
                   'ubs-admin-cabinet': isAdmin
@@ -194,12 +194,8 @@
                 (clickOutSide)="autoCloseUserDropDown($event)"
                 (keyup.enter)="toggleDropdown()"
               >
-                <li [ngClass]="isAdmin ? 'admin-list-item' : 'list-item'" role="listitem">
-                  <a class="list-item-main" [ngClass]="isUBS ? 'ubs-header_user-name' : 'header_user-name'" aria-hidden="true">
-                    <img src="../assets/img/events/user.svg" alt="log-in user" />
-                  </a>
-                </li>
-                <ul class="dropdown-list" [ngClass]="dropdownVisible ? 'drop-down-item' : 'text-hidde'">
+                <li class="body-2" [ngClass]="isUBS ? 'ubs-user-name' : 'user-name'">{{ name }}</li>
+                <ul *ngIf="toggleBurgerMenu" class="dropdown-list" [ngClass]="dropdownVisible ? 'drop-down-item' : 'text-hidde'">
                   <li [ngClass]="dropdownVisible ? 'drop-down-item' : 'text-hidde'" role="listitem" aria-label="notifications" tabindex="0">
                     <a (click)="openNotificationsDialog()">
                       {{ 'nav-bar.user-notifications' | translate }}

diff --git a/src/app/shared/header/header.component.scss b/src/app/shared/header/header.component.scss
@@ -226,11 +226,14 @@ header {
 
   li {
     height: 100%;
-    padding: 10px 12px;
     display: flex;
     align-items: center;
   }
 
+  .lang-option {
+    padding: 10px 12px;
+  }
+
   li.header_sign-up-link {
     padding-right: 0;
   }
@@ -382,6 +385,30 @@ header {
     margin: 0;
     color: var(--primary-dark-grey);
 
+    &.user-name,
+    &.ubs-user-name {
+      padding: 0;
+      font-family: var(--primary-font);
+      font-weight: 400;
+      text-transform: capitalize;
+      max-width: 160px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    &.user-name {
+      color: var(--primary-green);
+
+      @media screen and (max-width: 575px) {
+        display: none;
+      }
+    }
+
+    &.ubs-user-name {
+      color: var(--ubs-electric-violet);
+    }
+
     &.drop-down-item {
       display: flex;
       align-items: center;
@@ -400,7 +427,6 @@ header {
       display: flex;
       margin: 0;
       font-size: 14px;
-      font-weight: 600;
 
       .list-item-main {
         padding: 7px 17px;
@@ -418,27 +444,6 @@ header {
       display: none;
     }
   }
-
-  .header_user-name {
-    span {
-      color: var(--primary-green);
-      max-width: 120px;
-    }
-  }
-
-  .ubs-header_user-name,
-  .header_user-name {
-    display: flex;
-    text-decoration: none;
-
-    span {
-      font-weight: normal;
-      -webkit-line-clamp: 1;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      word-break: break-all;
-    }
-  }
 }
 
 .header_burger-btn {
@@ -967,13 +972,11 @@ header {
     }
   }
 
-  .header_navigation-menu-ubs .header_navigation-menu-right .header_navigation-menu-right-list #header_user-wrp.ubs-user-cabinet,
-  #header_user-wrp {
+  .header_navigation-menu-ubs .header_navigation-menu-right .header_navigation-menu-right-list #header_user-wrp.ubs-user-cabinet {
     display: none;
   }
 
-  .header_navigation-menu-left,
-  #header_user-wrp {
+  .header_navigation-menu-left {
     display: none;
   }
 
@@ -1098,7 +1101,6 @@ header {
   .header_lang-switcher-wrp,
   .header_navigation-menu-right-lang,
   .ubs-lang-switcher {
-    margin-right: 18px;
     padding: 0;
   }