Merge pull request #717 from matthewcarleton/notification-drawer-mobile

updates notification drawer to support mobile
patternfly · Aug 31, 2017 · e09fc17 · e09fc17
2 parents ac19518 + 52d27a4
commit e09fc17
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 11 deletions.
diff --git a/src/js/patternfly-functions-vertical-nav.js b/src/js/patternfly-functions-vertical-nav.js
@@ -3,7 +3,7 @@
 (function ($) {
   'use strict';
 
-  $.fn.setupVerticalNavigation = function (handleItemSelections) {
+  $.fn.setupVerticalNavigation = function (handleItemSelections, ignoreDrawer) {
 
     var navElement = $('.nav-pf-vertical'),
       bodyContentElement = $('.container-pf-nav-pf-vertical'),
@@ -249,6 +249,8 @@
 
       bindMenuBehavior = function () {
         toggleNavBarButton.on('click', function (e) {
+          var $drawer;
+
           enableTransitions();
 
           if (inMobileState()) {
@@ -259,6 +261,15 @@
               // Always start at the primary menu
               updateMobileMenu();
               navElement.addClass('show-mobile-nav');
+
+              // If the notification drawer is shown, hide it
+              if (!ignoreDrawer) {
+                $drawer = $('.drawer-pf');
+                if ($drawer.length) {
+                  $('.drawer-pf-trigger').removeClass('open');
+                  $drawer.addClass('hide');
+                }
+              }
             }
           } else if (navElement.hasClass('collapsed')) {
             window.localStorage.setItem('patternfly-navigation-primary', 'expanded');

diff --git a/src/less/navbar-vertical.less b/src/less/navbar-vertical.less
@@ -46,7 +46,7 @@
           color: @navbar-pf-vertical-active-color;
         }
       }
-      
+
       .badge {
         background-color: @notification-badge-color;
         border-radius: 20px;

diff --git a/src/less/notifications-drawer.less b/src/less/notifications-drawer.less
@@ -42,7 +42,13 @@
     display: block;
   }
   &.drawer-pf-expanded {
-    left: 270px;
+    @media (max-width: @screen-xs-max) {
+      left:0;
+      width: 100%;
+    }
+    @media (min-width: @screen-xs-max) {
+      left: 270px;
+    } // if the drawer is expanded and the screen is reduced this ensures it switches to full width on smaller screens.
     width: inherit;
     .drawer-pf-toggle-expand:before {
       content: "\f101";
@@ -190,6 +196,9 @@
 .drawer-pf-notification.expanded-notification {
   .drawer-pf-notification-content {
     display: flex;
+    @media (max-width: @screen-sm-max) {
+      flex-direction: column;
+    }
     .drawer-pf-notification-message {
       flex: 1 1;
     }
@@ -201,6 +210,12 @@
   .drawer-pf {
     height: calc(~"100vh - 80px");//to create a 20px offset bottom
     top: 58px; //menu height;
+
+      @media (max-width: @screen-xs-max) {
+        width:100%;
+        height: calc(~"100vh - 58px");
+      }
+
   }
   .nav .drawer-pf-trigger {
     .drawer-pf-trigger-icon {
@@ -220,6 +235,11 @@
   .drawer-pf {
     height: calc(~"100vh - 46px");
     top: 26px;
+    @media (max-width: @screen-xs-max) {
+      width:100%;
+      height: calc(~"100vh - 58px");
+      top:34px;
+    }
   }
   .drawer-pf-trigger-icon { cursor: pointer; }
 }
diff --git a/tests/pages/_includes/widgets/layouts/nav-vertical-notification-drawer.html b/tests/pages/_includes/widgets/layouts/nav-vertical-notification-drawer.html
@@ -9,6 +9,14 @@
     <a href="/" class="navbar-brand">
       {% if site.navbar-pf-navbar-brand-icon %}<img class="navbar-brand-icon" src="{{site.baseurl}}/{{site.navbar-logo-alt-icon}}" alt=""/>{% endif %}<img class="navbar-brand-name" src="{{site.baseurl}}/{{site.navbar-brand-alt-icon}}" alt="{{site.title-product}}" />
     </a>
+    <ul class="nav pull-right visible-xs-block navbar-iconic">
+      <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>
+    </ul>
   </div>
   <nav class="collapse navbar-collapse">
     <ul class="nav navbar-nav">
@@ -42,6 +50,6 @@
         </ul>
       </li>
     </ul>
-    {% include widgets/notification-drawer.html %}
   </nav>
+  {% include widgets/notification-drawer.html %}
 </nav> <!--/.navbar-->
diff --git a/tests/pages/_includes/widgets/layouts/navbar-vertical.html b/tests/pages/_includes/widgets/layouts/navbar-vertical.html
@@ -36,8 +36,8 @@
         </ul>
       </li>
     </ul>
-    {% if include.notification-drawer %}
-    {% include widgets/notification-drawer.html %}
-    {% endif %}
   </nav>
+  {% if include.notification-drawer %}
+  {% include widgets/notification-drawer.html %}
+  {% endif %}
 </nav> <!--/.navbar-->
diff --git a/tests/pages/_includes/widgets/notification-drawer-notifications.html b/tests/pages/_includes/widgets/notification-drawer-notifications.html
@@ -27,7 +27,7 @@
   {% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId=menu_id dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
   <span class="pficon pficon-warning-triangle-o pull-left"></span>
   <div class="drawer-pf-notification-content">
-    <span class="drawer-pf-notification-message">Another Event Notification</span>
+    <span class="drawer-pf-notification-message">Another Event Notification that is really long to see how it reacts on smaller screens sizes.</span>
     <div class="drawer-pf-notification-info">
       <span class="date">3/31/16</span>
       <span class="time">12:12:44 PM</span>
@@ -37,8 +37,8 @@
 <div class="drawer-pf-notification">
   {% assign menu_id = 'dropdownKebabRight4' | append: include.id %}
   {% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId=menu_id dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
+  <span class="pficon pficon-error-circle-o pull-left"></span>
   <div class="drawer-pf-notification-content">
-    <span class="pficon pficon-error-circle-o pull-left"></span>
     <span class="drawer-pf-notification-message">Another Event Notification</span>
     <div class="drawer-pf-notification-info">
       <span class="date">3/31/16</span>

diff --git a/tests/pages/_includes/widgets/notification-drawer.html b/tests/pages/_includes/widgets/notification-drawer.html
@@ -1,6 +1,6 @@
 <div class="drawer-pf hide drawer-pf-notifications-non-clickable">
   <div class="drawer-pf-title">
-    <a class="drawer-pf-toggle-expand fa fa-angle-double-left"></a>
+    <a class="drawer-pf-toggle-expand fa fa-angle-double-left hidden-xs"></a>
     <a  class="drawer-pf-close pficon pficon-close"></a>
     <h3 class="text-center">Notifications Drawer</h3>
   </div>
@@ -134,6 +134,10 @@ <h1>There are no notifications to display.</h1>
       } else {
         $drawer.addClass('hide');
       }
+      // Special case, close navigation menu in mobile mode
+     if ($('.container-pf-nav-pf-vertical').hasClass('hidden-nav')) {
+       $('.nav-pf-vertical').removeClass('show-mobile-nav');
+     }
     });
     $('.drawer-pf-close').click(function() {
       var $drawer = $('.drawer-pf');

diff --git a/tests/pages/wizard.html b/tests/pages/wizard.html
@@ -159,4 +159,4 @@ <h3 class="blank-slate-pf-main-action">Deployment in progress</h3>
 
     </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
-</div><!-- /.modal -->
+</div><!-- /.modal -->