Trimmed long names in header

Fixes #87

@@ -162,4 +162,19 @@ class User extends Model implements AuthenticatableContract, CanResetPasswordCon
     {
     {
         return '/settings/users/' . $this->id;
         return '/settings/users/' . $this->id;
     }
     }
+
+    /**
+     * Get a shortened version of the user's name.
+     * @param int $chars
+     * @return string
+     */
+    public function getShortName($chars = 8)
+    {
+        if (strlen($this->name) <= $chars) return $this->name;
+
+        $splitName = explode(' ', $this->name);
+        if (strlen($splitName[0]) <= $chars) return $splitName[0];
+
+        return '';
+    }
 }
 }

@@ -56,18 +56,14 @@ header {
       padding-top: $-xxs;
       padding-top: $-xxs;
     }
     }
     > i {
     > i {
-      padding-top: $-xs*1.2;
+      padding-top: 4px;
+      font-size: 18px;
     }
     }
     @include smaller-than($screen-md) {
     @include smaller-than($screen-md) {
       padding-left: $-xs;
       padding-left: $-xs;
       .name {
       .name {
         display: none;
         display: none;
       }
       }
-      i {
-        font-size: 2em;
-        padding-left: 0;
-        padding-top: 0;
-      }
     }
     }
   }
   }
   @include smaller-than($screen-md) {
   @include smaller-than($screen-md) {

@@ -56,7 +56,7 @@
                             <div class="dropdown-container" dropdown>
                             <div class="dropdown-container" dropdown>
                                 <span class="user-name" dropdown-toggle>
                                 <span class="user-name" dropdown-toggle>
                                     <img class="avatar" src="{{$currentUser->getAvatar(30)}}" alt="{{ $currentUser->name }}">
                                     <img class="avatar" src="{{$currentUser->getAvatar(30)}}" alt="{{ $currentUser->name }}">
-                                    <span class="name" ng-non-bindable>{{ $currentUser->name }}</span> <i class="zmdi zmdi-caret-down"></i>
+                                    <span class="name" ng-non-bindable>{{ $currentUser->getShortName(9) }}</span> <i class="zmdi zmdi-caret-down"></i>
                                 </span>
                                 </span>
                                 <ul>
                                 <ul>
                                     <li>
                                     <li>