Basic notification bell fixes

openshift · Aug 28, 2017 · 42c5218 · 42c5218
1 parent 225fdbe
commit 42c5218
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 20 deletions.
diff --git a/app/styles/_navbar-vertical.less b/app/styles/_navbar-vertical.less
@@ -53,6 +53,13 @@
     @media(min-width: @screen-sm-min) {
       margin-right: @navbar-header-right-margin;
     }
+    .drawer-pf-trigger {
+      display: block;
+      float: left;
+      a {
+        display: block;
+      }
+    }
     .dropdown .nav-item-iconic {
       padding-right: 20px;
     }
@@ -62,10 +69,6 @@
       @media(min-width: @screen-sm-min) {
         display: block;
       }
-      // always show the notification drawer icon
-      &.drawer-pf-trigger {
-        display: block;
-      }
     }
     .nav-item-iconic {
       line-height: normal; // align text and icon

diff --git a/app/styles/_notifications.less b/app/styles/_notifications.less
@@ -9,10 +9,10 @@
 notification-drawer-wrapper {
   .drawer-pf {
     height: calc(~"100vh - 80px"); //to create a 20px offset bottom
-    top: @navbar-os-header-height-desktop - 10;
+    top: @navbar-os-header-desktop - 10;
     z-index: @zindex-navbar-fixed + 1; // was 1050
     .tech-preview & {
-      top: @navbar-os-header-height-desktop + @tech-preview-banner-height - 10;
+      top: @navbar-os-header-desktop + @tech-preview-banner-height - 10;
     }
   }
   // the whole block is clickable, need to set pointer on all of these

diff --git a/app/views/directives/header/_navbar-utility.html b/app/views/directives/header/_navbar-utility.html
@@ -1,18 +1,10 @@
 <ul class="nav navbar-nav navbar-right navbar-iconic">
-  <li>
-    <notification-counter></notification-counter>
-  </li>
   <li
     extension-point
     extension-name="nav-system-status"
     extension-types="dom"></li>
 
-  <li class="drawer-pf-trigger">
-    <a class="nav-item-iconic">
-      <span class="fa fa-bell" title="Notifications"></span>
-      <span class="badge"> </span><!-- in order to show the empty badge this requires a space, otherwise add a value -->
-    </a>
-  </li>
+  <notification-counter></notification-counter>
 
   <li ng-if="launcherApps.length > 0">
     <pf-application-launcher items="launcherApps" is-list="true"></pf-application-launcher>

diff --git a/app/views/directives/notifications/notification-counter.html b/app/views/directives/notifications/notification-counter.html
@@ -1,7 +1,4 @@
 <li class="drawer-pf-trigger" ng-if="!$ctrl.hide">
-  <a href="" class="nav-item-iconic" ng-click="$ctrl.onClick()">
-    <span class="fa fa-bell" title="Notifications" aria-hidden="true"></span>
-    <span ng-if="$ctrl.showUnreadNotificationsIndicator" class="badge"> </span>
-    <span class="sr-only">Notifications</span>
-  </a>
+  <!-- Cannot have whitespace inside the `a`, so keep everything on one line. -->
+  <a href="" class="nav-item-iconic" ng-click="$ctrl.onClick()"><span class="fa fa-bell" title="Notifications" aria-hidden="true"></span><span ng-if="$ctrl.showUnreadNotificationsIndicator" class="badge"> </span><span class="sr-only">Notifications</span></a>
 </li>