optimized notificatins

js/apps/system/aardvark/frontend/js/views/notificationView.js

@@ -24,11 +24,15 @@
     template: templateEngine.createTemplate("notificationView.ejs"),
 
     toggleNotification: function (e) {
-      $('#notification_menu').toggle();
+      var counter = this.collection.length;
+      if (counter !== 0) {
+        $('#notification_menu').toggle();
+      }
     },
 
     removeAllNotifications: function () {
       this.collection.reset();
+      $('#notification_menu').hide();
     },
 
     removeNotification: function(e) {
@@ -40,6 +44,7 @@
       $('#stat_hd_counter').text(this.collection.length);
       if (this.collection.length === 0) {
         $('#stat_hd').removeClass('fullNotification');
+        $('#notification_menu').hide();
       }
       else {
         $('#stat_hd').addClass('fullNotification');

js/apps/system/aardvark/frontend/scss/_notification.scss

@@ -22,9 +22,12 @@
 }
 
 .fixedDropdown .notificationItemContent {
-  width: 160px;
+  width: 155px;
   float: left;
   margin-left: 15px;
+  max-width: 155px;
+  white-space: normal;
+  word-wrap: break-word;
 }
 
 .fixedDropdown button {
@@ -62,7 +65,7 @@
   float: left;
   font-size: 20px;
   position: relative;
-  right: 8px;
+  right: 4px;
   top: -9px;
 }
 
@@ -84,7 +87,7 @@
   font-weight: 300;
 }
 
-#stat_hd:hover {
+.fullNotification:hover {
   cursor:pointer;
 }
 

js/apps/system/aardvark/frontend/scss/generated.css

@@ -321,7 +321,7 @@ li.tile {
   right: 0px; }
 
 .fixedDropdown {
-  margin: 34px 0 0 0 !important;
+  margin: 37px 0 0 0 !important;
   border-radius: 0 !important;
   width: 210px; }
 
@@ -339,9 +339,12 @@ li.tile {
   padding-left: 5px !important; }
 
 .fixedDropdown .notificationItemContent {
-  width: 160px;
+  width: 155px;
   float: left;
-  margin-left: 15px; }
+  margin-left: 15px;
+  max-width: 155px;
+  white-space: normal;
+  word-wrap: break-word; }
 
 .fixedDropdown button {
   float: right;
@@ -370,7 +373,7 @@ li.tile {
   float: left;
   font-size: 20px;
   position: relative;
-  right: 8px;
+  right: 4px;
   top: -9px; }
 
 .notificationItem i:hover {
@@ -388,7 +391,7 @@ li.tile {
 .notificationItemContent {
   font-weight: 300; }
 
-#stat_hd:hover {
+.fullNotification:hover {
   cursor: pointer; }
 
 .fullNotification {