Update notification UI see BT#16386

app/Resources/public/css/base.css

@@ -8577,6 +8577,17 @@ main[dir="rtl"] .radio-inline input[type=radio]{
 .key-login{
     display: none;
 }
+
+#user-dropdown {
+    padding:3px;
+}
+
+.menu-dropdown {
+    border: none;
+}
+
+
+
 /* CSS Responsive */
 @media (min-width: 1025px) and (max-width: 1200px) {
     .sidebar-scorm {
@@ -8589,6 +8600,25 @@ main[dir="rtl"] .radio-inline input[type=radio]{
 }
 
 @media (min-width: 1024px) {
+    .navbar-header {
+        float: right !important;
+        margin-right: 50px;
+    }
+
+    #notification-menu {
+        float: right !important;
+    }
+
+    #notifications-dropdown {
+        display: block;
+        float:right !important;
+    }
+
+    #user-dropdown{
+        display: block;
+        float:right !important;
+    }
+
     .sidebar-scorm {
         width: 25.66666667%;
     }
@@ -8635,7 +8665,14 @@ main[dir="rtl"] .radio-inline input[type=radio]{
 
 /* Landscape phones and down */
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
+    #notification-menu{
+        width: 250px !important;
+        min-width : 250px !important;
+    }
 
+    #notification-dropdown-menu{
+        width: 200px !important;
+    }
     #learning_path_breadcrumb_zone {
     }
 
@@ -8717,10 +8754,16 @@ main[dir="rtl"] .radio-inline input[type=radio]{
     #show_graph {
         text-align: center;
     }
-
 }
 
 @media (min-width: 480px) and (max-width: 767px) {
+    #user-dropdown {
+        display: none;
+    }
+    #notification-menu{
+        width: 300px !important;
+        min-width : 300px !important;
+    }
     #touch-button {
         top: 5px;
     }
@@ -8775,7 +8818,6 @@ main[dir="rtl"] .radio-inline input[type=radio]{
 
 @media (min-width: 320px) and (max-width: 479px) {
     footer {
-
         padding-top: 15px;
     }
 
@@ -10269,4 +10311,3 @@ ul.dropdown-menu.inner > li > a {
     }
 }
 
-/*-------------------------------------------------------------------------------------*/

main/template/default/layout/menu.tpl

@@ -17,14 +17,88 @@
 <nav class="navbar navbar-default">
     <div class="container">
         <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+            <button type="button" class="pull-right  navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
-            <a class="navbar-brand" href="{{ _p.web }}">{{ _s.site_name }}</a>
+
+            {% if notification_event == 1%}
+                <button id="user-dropdown"  type="button" class="menu-dropdown pull-right  navbar-toggle collapsed" data-toggle="collapse" data-target="#user-dropdown-menu" aria-expanded="false" aria-controls="navbar">
+                    <img class="img-circle" src="{{ _u.avatar_small }}" alt="{{ _u.complete_name }}"/>
+                    <span class="caret"></span>
+
+                    <ul id="user-dropdown-menu" class="dropdown-menu" role="menu" aria-labelledby="user-dropdown">
+                        <li class="user-header">
+                            <div class="text-center">
+                                <a href="{{ profile_url }}">
+                                    <img class="img-circle" src="{{ _u.avatar_medium }}" alt="{{ _u.complete_name }}"/>
+                                    <p class="name">{{ _u.complete_name }}</p>
+                                </a>
+                                <p><i class="fa fa-envelope-o" aria-hidden="true"></i> {{ _u.email }}</p>
+                            </div>
+                        </li>
+                        <li role="separator" class="divider"></li>
+                        {% if message_url %}
+                            <li class="user-body">
+                                <a title="{{ "Inbox"|get_lang }}" href="{{ message_url }}">
+                                    <em class="fa fa-envelope" aria-hidden="true"></em> {{ "Inbox"|get_lang }}
+                                </a>
+                            </li>
+                        {% endif %}
+
+                        {% if pending_survey_url %}
+                            <li class="user-body">
+                                <a href="{{ pending_survey_url }}">
+                                    <em class="fa fa-pie-chart"></em> {{ 'PendingSurveys'|get_lang }}
+                                </a>
+                            </li>
+                        {% endif %}
+
+                        {% if certificate_url %}
+                            <li class="user-body">
+                                <a title="{{ "MyCertificates"|get_lang }}" href="{{ certificate_url }}">
+                                    <em class="fa fa-graduation-cap"
+                                        aria-hidden="true"></em> {{ "MyCertificates"|get_lang }}
+                                </a>
+                            </li>
+                        {% endif %}
+
+                        <li class="user-body">
+                            <a id="logout_button" title="{{ "Logout"|get_lang }}" href="{{ logout_link }}">
+                                <em class="fa fa-sign-out"></em> {{ "Logout"|get_lang }}
+                            </a>
+                        </li>
+                    </ul>
+                </button>
+
+                <button id="notifications-dropdown"  type="button" class="pull-right  menu-dropdown navbar-toggle collapsed" data-toggle="collapse" data-target="#notification-menu" aria-expanded="false" aria-controls="navbar">
+                    <i id="notificationsIcon" class="fa fa-bell-o " aria-hidden="true"></i>
+                    {# hide red button loading #}
+                    <span id="notificationsBadge" class="label label-danger">
+                    <i class="fa fa-spinner fa-pulse fa-fw" aria-hidden="true"></i>
+                    </span>
+                    <div id="notification-menu" class="dropdown-menu notification-dropdown-menu" aria-labelledby="notifications-dropdown">
+                        <h6 class="dropdown-header">Notifications</h6>
+                        <a id="notificationsLoader" class="dropdown-item dropdown-notification" href="#">
+                            <p class="notification-solo text-center">
+                                <i id="notificationsIcon" class="fa fa-spinner fa-pulse fa-fw" aria-hidden="true"></i>
+                                {{ 'Loading' | get_lang }}
+                            </p>
+                        </a>
+                        <ul id="notificationsContainer" class="notifications-container"></ul>
+                        <a id="notificationEmpty" class="dropdown-item dropdown-notification" href="#">
+                            <p class="notification-solo text-center"> {{ 'NoNewNotification' | get_lang }}</p>
+                        </a>
+                    </div>
+                </button>
+            {% endif %}
+
+{#            <a class="navbar-brand" href="{{ _p.web }}">{{ _s.site_name }}</a>#}
+            <a class="navbar-brand" href="{{ _p.web }}"> <i class="fa fa-home"></i> </a>
         </div>
+
         <div id="navbar" class="collapse navbar-collapse">
             <ul class="nav navbar-nav">
                 {% for item in menu %}
@@ -56,10 +130,7 @@
                         </li>
                     {% endif %}
 
-                    {% if notification_event == 1%}
+                    {% if notification_event == 0 %}
-                        {% include 'default/layout/notification.tpl' %}
-                    {% endif %}
-
                         {% if _u.status != 6 %}
                             <li class="dropdown avatar-user">
                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
@@ -112,6 +183,11 @@
                                 </ul>
                             </li>
                         {% endif %}
+                    {% endif %}
+
+                    {% if notification_event == 1%}
+                        {% include 'default/layout/notification.tpl' %}
+                    {% endif %}
                 </ul>
             {% endif %}
         </div><!--/.nav-collapse -->

main/template/default/layout/notification.tpl

@@ -270,32 +270,6 @@
         //appNotifications.init();
     });
 </script>
-<li class="dropdown notification_event">
-    <a class="btn btn-secondary dropdown-toggle" href="#"
-       id="notifications-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-        <i id="notificationsIcon" class="fa fa-bell-o" aria-hidden="true"></i>
-        {# hide red button loading #}
-        <span id="notificationsBadge" class="label label-danger">
-            <i class="fa fa-spinner fa-pulse fa-fw" aria-hidden="true"></i>
-        </span>
-    </a>
-    <div class="dropdown-menu notification-dropdown-menu" aria-labelledby="notifications-dropdown">
-        <h6 class="dropdown-header">Notifications</h6>
-        <a id="notificationsLoader" class="dropdown-item dropdown-notification" href="#">
-            <p class="notification-solo text-center">
-                <i id="notificationsIcon" class="fa fa-spinner fa-pulse fa-fw" aria-hidden="true"></i>
-                {{ 'Loading' | get_lang }}
-            </p>
-        </a>
-        <ul id="notificationsContainer" class="notifications-container"></ul>
-        <a id="notificationEmpty" class="dropdown-item dropdown-notification" href="#">
-            <p class="notification-solo text-center"> {{ 'NoNewNotification' | get_lang }}</p>
-        </a>
-{#        <a class="dropdown-item dropdown-notification-all" href="#">#}
-{#           {{ 'SeeAllNotifications' | get_lang }}#}
-{#        </a>#}
-    </div>
-</li>
 
 <!-- template -->
 <script id="notificationTemplate" type="text/html">