refactor notification on mobile version

This commit is contained in:
Mike Ng
2018-06-07 16:49:31 +04:00
parent 484ccaed46
commit 30004d996b
4 changed files with 42 additions and 25 deletions

View File

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

View File

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

View File

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

View File

@@ -126,12 +126,18 @@
<ol class="nav_menu"></ol> <ol class="nav_menu"></ol>
</div> </div>
</div> </div>
<div id="nav_notification_container"> </ol>
</div>
<div class="PNB right desktopmenu" style="left:auto;overflow:hidden;">
<ol>
{% if app.getAuthenticator().isAuthenticated() and module == "prod" %} {% if app.getAuthenticator().isAuthenticated() and module == "prod" %}
<li id="notification_trigger"> <li class="notification_trigger">
<a href="#" style="font-weight:bold;text-decoration:none;"> <a href="#" style="font-weight:bold;text-decoration:none;">
<span> <span>
<button class="counter btn btn-danger" style="visibility:{% if app['events-manager'].get_unread_notifications_number > 0 %}visible{% else %}hidden{% endif %};"> <button class="counter btn btn-danger"
style="visibility:{% if app['events-manager'].get_unread_notifications_number > 0 %}visible{% else %}hidden{% endif %};">
{% if app['events-manager'].get_unread_notifications_number > 0 %} {% if app['events-manager'].get_unread_notifications_number > 0 %}
{{ app['events-manager'].get_unread_notifications_number }} {{ app['events-manager'].get_unread_notifications_number }}
{% endif %} {% endif %}
@@ -141,13 +147,6 @@
</a> </a>
</li> </li>
{% endif %} {% endif %}
</div>
</ol>
</div>
<div class="PNB right desktopmenu" style="left:auto;overflow:hidden;">
<ol>
<li class="user"> <li class="user">
{% if app.getAuthenticator().isAuthenticated() %} {% if app.getAuthenticator().isAuthenticated() %}
{% if app.getAuthenticatedUser().isGuest %} {% if app.getAuthenticatedUser().isGuest %}
@@ -205,6 +204,24 @@
</ol> </ol>
</div> </div>
<div class="mobilemenu" style="float: right;margin-right: 50px;">
{% if app.getAuthenticator().isAuthenticated() and module == "prod" %}
<li class="notification_trigger">
<a href="#" style="font-weight:bold;text-decoration:none;">
<span>
<button class="counter btn btn-danger"
style="visibility:{% if app['events-manager'].get_unread_notifications_number > 0 %}visible{% else %}hidden{% endif %};">
{% if app['events-manager'].get_unread_notifications_number > 0 %}
{{ app['events-manager'].get_unread_notifications_number }}
{% endif %}
</button>
{{ 'Notifications' | trans }}
</span>
</a>
</li>
{% endif %}
</div>
<div class="PNB right mobilemenu" id="nav_account_container"> <div class="PNB right mobilemenu" id="nav_account_container">
<div class="arrow-up"></div> <div class="arrow-up"></div>
<div class="nav-wrapper-box"> <div class="nav-wrapper-box">