Merge pull request #194 from ZmagoD/zd_SCI_531_533

Notification style fixes

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();
 })();

app/assets/stylesheets/extend/bootstrap.scss

@@ -57,3 +57,56 @@
 .result-comment .col-xs-12 {
   float: none;
 }
+
+@media (max-width: 1000px) {
+  .navbar-header {
+    float: none;
+  }
+
+  .navbar-left,
+  .navbar-right {
+    float: none !important;
+  }
+
+  .navbar-toggle {
+    background-color: transparent;
+    background-image: none;
+    border: 1px solid transparent;
+    display: block;
+  }
+
+  .navbar-collapse {
+    border-top: 1px solid transparent;
+  }
+
+  .navbar-fixed-top {
+    border-width: 0 0 1px;
+    top: 0;
+  }
+
+  .navbar-collapse.collapse {
+    display: none !important;
+  }
+
+  .navbar-nav {
+    float: none !important;
+    margin-top: 7.5px;
+  }
+
+  .navbar-nav>li {
+    float: none;
+  }
+
+  .navbar-nav>li>a {
+    padding-bottom: 10px;
+    padding-top: 10px;
+  }
+
+  .collapse.in {
+    display: block !important;
+  }
+
+  .container {
+    width: 100%;
+  }
+}

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;
-  }
+    font-size: 11px;
-}
+    font-weight: bold;
-
+    margin-left: 12px;
-@media(max-width:768px) {
+    padding: 1px 6px;
-  #count-notifications {
+    position: relative;
-    position: absolute !important;
+    z-index: 999999;
-    margin-left: -4px !important;
-    margin-top: 10px !important;
   }
 }
 
@@ -131,24 +122,36 @@ table {
   }
 
   .text-center {
-    margin-left: 10px;
+    margin-left: 12px;
-    padding-top: 10px;
+  }
+
+  .avatar {
+    top: 0px;
+    margin-top: 5px;
+    height: 45px;
+    width: 45px;
   }
 
   .assignment {
     background-color: $color-theme-primary;
     border-radius: 50%;
     color: $color-wild-sand;
-    font-size: 15px;
+    display: block;
-    padding: 7px;
+    font-size: 23px;
+    height: 45px;
+    padding-top: 5px;
+    width: 45px;
   }
 
   .system_message {
     background-color: $color-theme-secondary;
     border-radius: 50%;
     color: $color-wild-sand;
-    font-size: 13px;
+    display: block;
-    padding: 7px 10px;
+    font-size: 23px;
+    height: 45px;
+    padding-top: 8px;
+    width: 45px;
   }
 
   .notifications-dropdown-header {

app/views/shared/_navigation.html.erb

@@ -28,32 +28,31 @@
         <li>
           <a href="<%= projects_path %>">
             <span class="glyphicon glyphicon-home"></span>
-            <span class="visible-xs-inline"><%= t('nav.label.projects') %></span>
+            <span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.projects') %></span>
           </a>
         </li>
         <li>
           <a href="<%= protocols_path %>">
             <span class="glyphicon glyphicon-list-alt"></span>
-            <span class="visible-xs-inline"><%= t('nav.label.protocols') %></span>
+            <span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.protocols') %></span>
           </a>
         </li>
 <% if false  %>
         <li>
           <a href="#">
             <span class="glyphicon glyphicon-calendar"></span>
-            <span class="visible-xs-inline"><%= t('nav.label.calendar') %></span>
+            <span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.calendar') %></span>
           </a>
         </li>
 <% end %>
         <li>
           <a class="btn-activity" href="<%= activities_path(format: :json) %>" role="button" data-remote="true">
             <span class="glyphicon glyphicon-equalizer"></span>
-            <span class="visible-xs-inline"><%= t('nav.label.activities') %></span>
+            <span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.activities') %></span>
           </a>
         </li>
       </ul>
 
-      <div>
       <!-- profile info -->
       <ul class="nav navbar-nav navbar-right">
         <li class="dropdown">
@@ -117,7 +116,6 @@
         </div>
       <% end %>
     </div>
-    </div>
     <% end %>
 
   </div>