Bugfix/593 nav bar spacing incorrect

CHANGELOG.md

@@ -17,7 +17,7 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Fixed
 - Fixed pagination project overview - [#564](https://github.com/DigitalExcellence/dex-frontend/issues/564)
-
+- Fixed the navbar for longer names, adjusted the loading animation to be smooth. - [#593](https://github.com/DigitalExcellence/dex-frontend/issues/593)
 ### Security
 
 ##  Release v.1.7.0-beta - 8-10-2021

src/app/components/app-layout/app-layout.component.html

@@ -21,7 +21,7 @@
   <header *ngIf="!displayContentWithoutLayout" class="header header-6 navbar navbar-expand-md navbar-light">
     <div class="branding">
       <span class="title"
-        ><a aria-label="Back to the Homepage" routerLink=""><img alt="" loading="lazy" src="assets/images/dex-logo-dark-orange.png" /></a
+      ><a aria-label="Back to the Homepage" routerLink=""><img alt="" loading="lazy" src="assets/images/dex-logo-dark-orange.png"/></a
       ></span>
       <p (click)="onClickHeaderBetaText()" class="beta-text">Beta</p>
     </div>
@@ -48,11 +48,12 @@
         <div *ngIf="isAuthenticated" class="profile">
           <div class="btn-group profile-dropdown w-100" dropdown>
             <button aria-controls="dropdown-basic" class="btn dropdown-toggle profile-dropdown" dropdownToggle id="button-basic" type="button">
-              {{ name }} <img alt="" class="profile-picture" loading="lazy" src="assets/images/profile-placeholder.png" />
+              <span class="profile-name">{{ name }}</span>
+              <img alt="" class="profile-picture" loading="lazy" src="assets/images/profile-placeholder.png"/>
               <span class="caret"></span>
             </button>
             <ul *dropdownMenu aria-labelledby="button-basic" class="dropdown-menu" id="dropdown-basic" role="menu">
-              <li role="menuitem"> <a class="dropdown-item" routerLink="user/projects">My Projects</a></li>
+              <li role="menuitem"><a class="dropdown-item" routerLink="user/projects">My Projects</a></li>
               <li role="menuitem"><a (click)="onClickSignout()" class="dropdown-item">Sign Out</a></li>
 
             </ul>
@@ -93,10 +94,10 @@
   </div>
 
   <svg class="background" viewBox="0 0 355.4 374.9" xmlns="http://www.w3.org/2000/svg">
-    <polygon fill="#e85b3f" points="240.9 166 347.7 0 245.2 0 188.7 92.5 240.9 166" />
+    <polygon fill="#e85b3f" points="240.9 166 347.7 0 245.2 0 188.7 92.5 240.9 166"/>
     <polygon
-      fill="#1d1d1b"
-      points="230.9 181 215.8 159.8 112.1 0 5.3 0 122.1 185.3 0 374.9 108.3 374.9 176.7 258.7 246.2 374.9 355.4 374.9 230.9 181"
+        fill="#1d1d1b"
+        points="230.9 181 215.8 159.8 112.1 0 5.3 0 122.1 185.3 0 374.9 108.3 374.9 176.7 258.7 246.2 374.9 355.4 374.9 230.9 181"
     />
   </svg>
 

src/app/components/app-layout/app-layout.component.scss

@@ -35,6 +35,7 @@
   .right {
     display: flex;
   }
+
   .header-nav {
     display: flex;
 
@@ -52,18 +53,16 @@
   }
 
   .content {
+    grid-template-columns: auto 1fr auto;
     @include media-breakpoint-down(sm) {
       .search-bar {
         display: none;
       }
     }
-    @include media-breakpoint-down(md) {
-      grid-template-columns: auto 1fr auto !important;
-    }
     @include media-breakpoint-up(md) {
       display: grid !important;
       gap: 10px;
-      grid-template-columns: auto 1fr 200px;
+
       .search-bar-mobile {
         display: none;
       }
@@ -109,6 +108,7 @@
       width: 90px;
     }
   }
+
   .navbar-toggler {
     border: none;
   }
@@ -160,8 +160,9 @@
     -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
     -ms-user-select: none; /* Internet Explorer/Edge */
-    user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome, Edge, Opera and Firefox */
+    user-select: none;
+    /* Non-prefixed version, currently
+                                     supported by Chrome, Edge, Opera and Firefox */
   }
 
   .account {
@@ -177,7 +178,7 @@
     display: flex;
     align-items: center;
     margin-left: auto;
-    margin-right: 24px;
+
     @include media-breakpoint-down(sm) {
       margin-left: 0;
     }
@@ -190,6 +191,15 @@
       width: 30px;
       border-radius: 50%;
     }
+
+    .profile-name {
+      display: inline-block;
+      vertical-align: middle;
+      white-space: nowrap;
+      max-width: 280px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 
   /*
@@ -339,6 +349,10 @@
 
   a {
     cursor: pointer;
+
+    &:active {
+      background-color: $light-mode-grey-secondary;
+    }
   }
 
   @include media-breakpoint-down(sm) {

src/styles.scss

@@ -68,7 +68,8 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-
+  animation-timing-function: ease-in-out;
+  -webkit-animation-timing-function: ease-in-out;
   h2 {
     font-size: 3em;
     color: $accent-color-red-primary !important;