Merge pull request #71 from rhamilto/spadgett-pf-vertical-nav

Adjusting positioning and sizing of notification bar
openshift · Aug 30, 2017 · 73d5ae9 · 73d5ae9
2 parents a2fbcfa + 9f69389
commit 73d5ae9
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 53 deletions.
diff --git a/app/images/logo-origin-thin.svg b/app/images/logo-origin-thin.svg
diff --git a/app/styles/_application-launcher.less b/app/styles/_application-launcher.less
@@ -4,7 +4,7 @@
 
 .applauncher-pf {
   &.dropdown-kebab-pf .dropdown-menu {
-    margin-top: -1px;
+    margin-top: 0;
     right: 10px;
     &:before {
       display: none;

diff --git a/app/styles/_navbar-vertical.less b/app/styles/_navbar-vertical.less
@@ -4,13 +4,15 @@
 
 #header-logo {
   background-image: url('@{image-path}/logo-origin-thin.svg');
+  background-position: left center;
   background-repeat: no-repeat;
-  background-position: center left;
-  // Use initial logo dimensions; or set a width and/or height (eg - background-size: auto 36px)
-  // Max logo dimensions width 230px / height 36px
-  background-size: initial;
+  // Max logo dimensions width 196px / height 40px
   height: @navbar-os-header-height-mobile - 1; // 1px border-bottom on navbar-os-mobile
-  width: 230px;
+  width: 196px;
+  @media(min-width: @screen-sm-min) {
+    // Max logo dimensions width 230px / height 40px
+    width: 230px;
+  }
 }
 
 .navbar-pf-vertical {
@@ -48,14 +50,24 @@
     float: left;
   }
   .navbar-iconic {
+    display: flex;
     float: right;
     margin: 0;
     @media(min-width: @screen-sm-min) {
       margin-right: @navbar-header-right-margin;
     }
+    .badge {
+      margin: 0 !important;
+      position: absolute;
+      top: 9px;
+      right: 13px;
+      @media(min-width: @screen-sm-min) {
+        top: 20px;
+      }
+    }
+
     .drawer-pf-trigger {
-      display: block;
-      float: left;
+      display: inline-block; // workaround for Safari bug
       a {
         display: block;
       }
@@ -65,9 +77,8 @@
     }
     > li {
       display: none;
-      float: left;
       @media(min-width: @screen-sm-min) {
-        display: block;
+        display: inline-block; // workaround for Safari bug
       }
     }
     .nav-item-iconic {
@@ -86,7 +97,7 @@
     }
   }
   .navbar-toggle {
-    margin: 3px 5px;
+    margin: 4px 5px;
     .icon-bar {
       width: 20px;
     }

diff --git a/app/styles/_notifications.less b/app/styles/_notifications.less
@@ -1,18 +1,33 @@
-// fixes positioning that doesn't quite work w/core patternfly styles
-.navbar-pf-alt .nav .nav-item-iconic .badge {
-  font-size: 9px;
-  margin: -15px 0 0 -12px;
-  min-width: 10px;
-  min-height: 10px;
-}
+//
+// Notification drawer
+// -----------------------------------------------
 
 notification-drawer-wrapper {
   .drawer-pf {
-    height: calc(~"100vh - 80px"); //to create a 20px offset bottom
-    top: @navbar-os-header-height-desktop - 10;
-    z-index: @zindex-navbar-fixed + 1; // was 1050
+    height: calc(100vh ~"-" (@navbar-os-header-height-mobile + @project-bar-height-mobile));
+    position: fixed;
+    top: (@navbar-os-header-height-mobile + @project-bar-height-mobile);
+    @media(max-width: 350px) {
+      left: 0;
+      width: 100%;
+    }
+    @media(min-width: @screen-sm-min) {
+      height: calc(100vh ~"-" (@navbar-os-header-height-desktop + @project-bar-height-desktop) ~"-" 20px); // 20px bottom gutter
+      top: (@navbar-os-header-height-desktop + @project-bar-height-desktop);
+    }
+    &.drawer-pf-expanded {
+      left: 0;
+      @media(min-width: @screen-sm-min) {
+        left: 270px;
+      }
+    }
     .tech-preview & {
-      top: @navbar-os-header-height-desktop + @tech-preview-banner-height - 10;
+      height: calc(100vh ~"-" (@navbar-os-header-height-mobile + @project-bar-height-mobile + @tech-preview-banner-height));
+      top: (@navbar-os-header-height-mobile + @project-bar-height-mobile + @tech-preview-banner-height);
+      @media(min-width: @screen-sm-min) {
+        height: calc(100vh ~"-" (@navbar-os-header-height-desktop + @project-bar-height-desktop + @tech-preview-banner-height) ~"-" 20px); // 20px bottom gutter
+        top: (@navbar-os-header-height-desktop + @project-bar-height-desktop + @tech-preview-banner-height);
+      }
     }
   }
   // the whole block is clickable, need to set pointer on all of these
@@ -23,25 +38,23 @@ notification-drawer-wrapper {
     cursor: pointer;
   }
   .drawer-pf-notification {
-    padding: 0px;
-  }
-  .drawer-pf-notification.ng-leave {
-    transition:0.25s linear all;
-    opacity:1;
-  }
-  .drawer-pf-notification.ng-leave.ng-leave-active {
-    opacity:0;
+    padding: 0;
+    &.ng-leave {
+      transition: 0.25s linear all;
+      opacity: 1;
+      &.ng-leave-active {
+        opacity: 0;
+      }
+    }
   }
   .drawer-pf-notification-inner {
-    padding:15px;
+    padding: 15px;
     .pficon-close {
-      color: #000;
+      color: @color-pf-black;
     }
   }
-  .expanded-notification {
-    .drawer-pf-notification-message {
-      max-width: 35%; // keeps flex in check in case of a really long message
-    }
+  .expanded-notification .drawer-pf-notification-message {
+    max-width: 35%; // keeps flex in check in case of a really long message
   }
 }
 
@@ -52,7 +65,7 @@ notification-drawer-wrapper {
     //   - https://github.com/patternfly/angular-patternfly/issues/539
     // I'm putting quite a bit of markup inside the header,
     // need to tinker to eliminate this rule.
-    overflow:hidden;
+    overflow: hidden;
     .container-fluid {
       margin-left: 0;
       margin-right: 0;
@@ -62,6 +75,6 @@ notification-drawer-wrapper {
   }
   .small {
     .small();
-    color: #000000;
+    color: @color-pf-black;
   }
 }
diff --git a/app/styles/_project-bar.less b/app/styles/_project-bar.less
@@ -11,7 +11,7 @@
   position: fixed;
   right: 0;
   top: @navbar-os-header-height-mobile;
-  z-index: 1000;
+  z-index: @zindex-navbar-fixed - 1; // one less than navbar
   @media (min-width: @screen-sm-min) {
     height: @project-bar-height-desktop;
     top: @navbar-os-header-height-desktop;

diff --git a/app/styles/_system-status.less b/app/styles/_system-status.less
@@ -4,7 +4,13 @@
 
 // Always show system-status if it exists
 [extension-name="nav-system-status"] {
-  display: block !important;
+  display: inline-block !important;
+}
+
+.nav-item-iconic.system-status {
+  @media(max-width: 350px) {
+    padding-right: 5px !important;
+  }
 }
 
 .status-issue {

diff --git a/app/styles/_variables.less b/app/styles/_variables.less
@@ -60,7 +60,7 @@
 @navbar-header-offset: 2px;
 @navbar-header-right-margin: 10px;
 @navbar-os-header-height-desktop: 59px;
-@navbar-os-header-height-mobile: 39px;
+@navbar-os-header-height-mobile: 41px;
 @navbar-os-bg-color: #1c2127;
 @navbar-os-label-filter-bg: @navbar-os-project-menu-bg;
 @navbar-os-project-bg: @navbar-os-bg-color;

diff --git a/app/views/directives/header/_navbar-utility.html b/app/views/directives/header/_navbar-utility.html
@@ -4,7 +4,7 @@
     extension-name="nav-system-status"
     extension-types="dom"></li>
 
-  <notification-counter></notification-counter>
+  <notification-counter ng-hide="chromeless"></notification-counter>
 
   <li ng-if="launcherApps.length > 0">
     <pf-application-launcher items="launcherApps" is-list="true"></pf-application-launcher>