refactor notification on mobile version

resources/www/_shared/styles/_main-menu.scss

@@ -288,7 +288,7 @@ $mainMenuBottomBorder: none !default;
     }
     #nav_notification_container {
       float: right;
-      margin-right: 50px;
+      margin-right: 120px;
     }
   }
 }

resources/www/_shared/styles/_notification.scss

@@ -1,10 +1,10 @@
 @import 'variables';
 
-#notification_trigger{
+.notification_trigger {
   cursor:pointer;
 }
 
-#notification_trigger .counter{
+.notification_trigger .counter {
   border:1px solid white;
   background:red;
   -moz-border-radius:8px;
@@ -17,16 +17,16 @@
   padding:2px 4px;
 }
 
-#notification_trigger.open a span{
+.notification_trigger.open a span {
   color:black;
 }
 
-#notification_trigger.open{
+.notification_trigger.open {
   background-color:white;
   border-bottom:1px solid white;
 }
 
-#notification_trigger.unread{
+.notification_trigger.unread {
 
 }
 
@@ -37,7 +37,7 @@
   border-top:none;
   position:absolute;
   height:150px;
-  top:30px;
+  top: 42px !important;
   overflow-y:auto;
   overflow-x:hidden;
   z-index:668;

resources/www/common/js/components/common.js

@@ -131,7 +131,7 @@ var commonModule = (function ($, p4) {
                 fix_notification_height();
 
             if ($('.notification.unread', box).length > 0) {
-                var trigger = $('#notification_trigger');
+                var trigger = $('.notification_trigger');
                 $('.counter', trigger)
                     .empty()
                     .append($('.notification.unread', box).length);
@@ -139,7 +139,7 @@ var commonModule = (function ($, p4) {
 
             }
             else
-                $('#notification_trigger .counter').css('visibility', 'hidden').empty();
+                $('.notification_trigger .counter').css('visibility', 'hidden').empty();
 
             if (data.changed.length > 0) {
                 var current_open = $('.SSTT.ui-state-active');