diff --git a/app/assets/javascripts/navigation.js b/app/assets/javascripts/navigation.js index 64d81fcc8..6b8a77129 100644 --- a/app/assets/javascripts/navigation.js +++ b/app/assets/javascripts/navigation.js @@ -32,6 +32,7 @@ } }); $('#count-notifications').hide(); + toggleNotificationBellPosition(); }); } @@ -46,6 +47,7 @@ if ( data.notificationNmber > 0 ) { notificationCount.html(data.notificationNmber); notificationCount.show(); + toggleNotificationBellPosition(); } else { notificationCount.hide(); } @@ -54,7 +56,24 @@ }); } + function toggleNotificationBellPosition() { + var notificationCount = $('#count-notifications'); + var button = $('#notifications-dropdown'); + + if ( notificationCount.is(":hidden") ) { + button + .find('.fa-bell') + .css('position', 'relative'); + } else { + button + .find('.fa-bell') + .css('position', 'absolute'); + } + + } + // init loadDropdownNotifications(); loadUnseenNotificationsNumber(); + toggleNotificationBellPosition(); })(); diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index 3c9d0d462..e9fbd8f9a 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -75,29 +75,20 @@ table { #notifications-dropdown { .fa-bell { font-size: 15px; + position: absolute; } #count-notifications { background-color: $color-theme-primary; border-radius: 5px; color: $color-wild-sand; - font-size: 12px; - font-weight: bold; - margin-left: 10px; - margin-top: -10px; - padding-left: 4px; - padding-right: 4px; - position: fixed; - z-index: 999999; display: none; - } -} - -@media(max-width:768px) { - #count-notifications { - position: absolute !important; - margin-left: -4px !important; - margin-top: 10px !important; + font-size: 11px; + font-weight: bold; + margin-left: 12px; + padding: 1px 6px; + position: relative; + z-index: 999999; } } @@ -124,14 +115,13 @@ table { } .text-center { - margin-left: 10px; - padding-top: 10px; + margin-left: 12px; } .avatar { + top: 0px; + margin-top: 5px; height: 45px; - margin: 0 auto; - margin-left: 5px; width: 45px; } @@ -142,8 +132,6 @@ table { display: block; font-size: 23px; height: 45px; - margin: 0 auto; - margin-left: 5px; padding-top: 5px; width: 45px; } @@ -155,8 +143,6 @@ table { display: block; font-size: 23px; height: 45px; - margin: 0 auto; - margin-left: 5px; padding-top: 8px; width: 45px; }