chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update notification UI see BT#16386

Browse Source
pull/3075/head
Julio Montoya 6 years ago
parent ce18d0c493
commit b5d83332c0
3 changed files with 170 additions and 79 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 47
      app/Resources/public/css/base.css
  2. 176
      main/template/default/layout/menu.tpl
  3. 26
      main/template/default/layout/notification.tpl

47
app/Resources/public/css/base.css
Unescape View File

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

176
main/template/default/layout/menu.tpl
Unescape View File

@ -17,14 +17,88 @@
<nav class="navbar navbar-default"> <nav class="navbar navbar-default">
<div class="container"> <div class="container">
<div class="navbar-header"> <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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </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>
<div id="navbar" class="collapse navbar-collapse"> <div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
{% for item in menu %} {% for item in menu %}
@ -56,61 +130,63 @@
</li> </li>
{% endif %} {% endif %}
{% if notification_event == 1%} {% if notification_event == 0 %}
{% include 'default/layout/notification.tpl' %} {% if _u.status != 6 %}
{% endif %} <li class="dropdown avatar-user">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
{% if _u.status != 6 %} aria-expanded="false">
<li class="dropdown avatar-user"> <img class="img-circle" src="{{ _u.avatar_small }}" alt="{{ _u.complete_name }}"/>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" <span class="username-movil">{{ _u.complete_name }}</span>
aria-expanded="false"> <span class="caret"></span>
<img class="img-circle" src="{{ _u.avatar_small }}" alt="{{ _u.complete_name }}"/> </a>
<span class="username-movil">{{ _u.complete_name }}</span> <ul class="dropdown-menu" role="menu">
<span class="caret"></span> <li class="user-header">
</a> <div class="text-center">
<ul class="dropdown-menu" role="menu"> <a href="{{ profile_url }}">
<li class="user-header"> <img class="img-circle" src="{{ _u.avatar_medium }}" alt="{{ _u.complete_name }}"/>
<div class="text-center"> <p class="name">{{ _u.complete_name }}</p>
<a href="{{ profile_url }}"> </a>
<img class="img-circle" src="{{ _u.avatar_medium }}" alt="{{ _u.complete_name }}"/> <p><i class="fa fa-envelope-o" aria-hidden="true"></i> {{ _u.email }}</p>
<p class="name">{{ _u.complete_name }}</p> </div>
</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> </li>
{% endif %} <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 %} {% if pending_survey_url %}
<li class="user-body"> <li class="user-body">
<a href="{{ pending_survey_url }}"> <a href="{{ pending_survey_url }}">
<em class="fa fa-pie-chart"></em> {{ 'PendingSurveys'|get_lang }} <em class="fa fa-pie-chart"></em> {{ 'PendingSurveys'|get_lang }}
</a> </a>
</li> </li>
{% endif %} {% 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 %}
{% if certificate_url %}
<li class="user-body"> <li class="user-body">
<a title="{{ "MyCertificates"|get_lang }}" href="{{ certificate_url }}"> <a id="logout_button" title="{{ "Logout"|get_lang }}" href="{{ logout_link }}">
<em class="fa fa-graduation-cap" <em class="fa fa-sign-out"></em> {{ "Logout"|get_lang }}
aria-hidden="true"></em> {{ "MyCertificates"|get_lang }}
</a> </a>
</li> </li>
{% endif %} </ul>
</li>
{% endif %}
{% endif %}
<li class="user-body"> {% if notification_event == 1%}
<a id="logout_button" title="{{ "Logout"|get_lang }}" href="{{ logout_link }}"> {% include 'default/layout/notification.tpl' %}
<em class="fa fa-sign-out"></em> {{ "Logout"|get_lang }}
</a>
</li>
</ul>
</li>
{% endif %} {% endif %}
</ul> </ul>
{% endif %} {% endif %}

26
main/template/default/layout/notification.tpl
Unescape View File

@ -270,32 +270,6 @@
//appNotifications.init(); //appNotifications.init();
}); });
</script> </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 --> <!-- template -->
<script id="notificationTemplate" type="text/html"> <script id="notificationTemplate" type="text/html">

Write Preview
Loading…
Cancel
Save