Merge pull request #1190 from chef/mw/nav

Website: Fix buggy behavior in nav and add global message

www/source/javascripts/nav.js

@@ -4,10 +4,7 @@ const $navToggle = $('.main-nav--toggle');
 const navBreakpoint = 730; // this should match $nav-breakpoint in _nav.scss
 const $mainContent = $('#main-content');
 const $mainNav = $('#main-nav');
-
+const $mainNavCtas = $('#main-nav-ctas');
-$(document).ready(function() {
-  $mainContent.css('min-height', $mainNav.outerHeight() - $('#main-nav-ctas').outerHeight());
-});
 
 $navToggle.click(function() {
   $(this).toggleClass('is-active');
@@ -22,17 +19,57 @@ $(window).resize(function() {
 });
 
 // toggles fixed nav position when the window is too short
-const footerOffsetTop = $("#main-footer").offset().top;
+var footerOffsetTop, navOffsetBottom;
-var navOffsetBottom;
 
 function toggleFixedNavPosition() {
   navOffsetBottom = $mainNav.outerHeight() + $(window).scrollTop();
+  footerOffsetTop = $("#main-footer").offset().top;
 
-  $mainNav.toggleClass("is-fixed-bottom", footerOffsetTop < navOffsetBottom)
+  $mainNav.toggleClass("is-fixed-bottom", (footerOffsetTop < navOffsetBottom) && $(window).height() <= 759)
 }
 
-toggleFixedNavPosition();
+$(document).ready(function() {
+  $mainContent.css('min-height', $mainNav.outerHeight() - $('#main-nav-ctas').outerHeight());
+  toggleFixedNavPosition();
+});
 
 $(window).scroll(function() {
   toggleFixedNavPosition();
 });
+
+// handle nav when global message exists
+// gm_session_id is set on at template level
+var globalMessageHeight;
+const $globalMessage = $("#global-message");
+
+function adjustNavPosition() {
+  globalMessageHeight = $globalMessage.outerHeight();
+
+  if ($globalMessage.is(":visible")) {
+    $mainNav.css('top', globalMessageHeight);
+    $mainNavCtas.css('top', globalMessageHeight);
+    $mainContent.css('margin-top', globalMessageHeight + 100);
+  }
+}
+
+if(!localStorage.getItem(gm_session_id)) {
+  $globalMessage.addClass('is-visible');
+  adjustNavPosition();
+}
+
+$(document).ready(function() {
+  $("#global-message .dismiss-button").click(function(e) {
+    $globalMessage.removeClass('is-visible')
+    $mainNav.css('top', '');
+    $mainNavCtas.css('top', '');
+    $mainContent.css('margin-top', 100);
+    localStorage.setItem(gm_session_id, "true");
+    return false;
+  });
+});
+
+$(window).resize(function() {
+  if(!localStorage.getItem(gm_session_id)) {
+    adjustNavPosition();
+  }
+});

www/source/layouts/_global-message.slim

@@ -0,0 +1,18 @@
+/ If you update the content, you need to update the value of gm_session_id
+/ in order for the Div to show.
+
+#global-message
+  .container
+    .row
+      .columns.small-8.medium-8.medium-push-2.medium-text-center
+        a href="https://www.chef.io/webinars/?commid=225819" target="_blank"
+          strong Upcoming Webinar: Compliance as Code with InSpec 1.0 Oct 25 10AM PST
+          |  Register now!
+
+      .columns.small-4.medium-2.text-right
+        span.dismiss-button
+          i.fa.fa-times-circle-o
+          | Dismiss
+
+javascript:
+  gm_session_id = 'inspecGlobalMessage1';

www/source/layouts/layout.slim

@@ -16,6 +16,8 @@ html
     == stylesheet_link_tag :site
 
   body class="#{page_classes}"
+    = partial "layouts/global-message"
+
     .container
       = partial "layouts/nav"
 

www/source/stylesheets/_global-message.scss

@@ -0,0 +1,47 @@
+#global-message {
+  position: fixed;
+  z-index: 95;
+  top: -200px;
+  right: 0;
+  left: 0;
+  padding: 15px 0;
+  background-color: $inspec-blue;
+  color: $white;
+  font-size: 15px;
+  transition: top 0.3s ease;
+
+  &.is-visible {
+    top: 0;
+  }
+
+  .dismiss-button {
+    margin: 3px;
+    color: $white;
+    cursor: pointer;
+    font-weight: 700;
+
+    .fa {
+      margin-right: 5px;
+    }
+  }
+
+  a, a:hover, a:visited, a:active, a:link {
+    color: $white;
+    text-decoration: none;
+  }
+
+  @media (max-width: 649px) {
+    font-size: 13px;
+  }
+
+  @include nav-small {
+    position: fixed;
+    top: -200px;
+    right: 0;
+    left: 0;
+  }
+
+  @include nav-large {
+    z-index: 1100;
+  }
+}

www/source/stylesheets/_layout.scss

@@ -14,7 +14,9 @@ body {
 }
 
 #main-content {
+  position: relative;
   margin-top: 64px;
+  transition: margin 0.3s ease;
 
   @include nav-small {
     padding: 0 $side-nav-padding-small;

www/source/stylesheets/_nav.scss

@@ -23,16 +23,27 @@ $nav-breakpoint: 730px;
   z-index: 1000;
   width: 100%;
   background: $white;
+  transition: top 0.3s ease;
 
   @include nav-large {
     position: fixed;
     z-index: 100;
     width: $side-nav-width;
+  }
 
-    &.is-fixed-bottom {
+  &.is-fixed-bottom {
-      bottom: 137px;
+    @include nav-large {
+      top: auto !important;
       position: absolute;
     }
+
+    @media (min-width: 640px) and (max-width: 879px) {
+      bottom: 156px;
+    }
+
+    @media (min-width: 880px) {
+      bottom: 141px;
+    }
   }
 }
 
@@ -102,6 +113,10 @@ $nav-breakpoint: 730px;
   .sidebar-layout-docs & {
     max-height: calc(100vh - 64px);
     overflow-y: scroll;
+
+    @include nav-large {
+      max-height: calc(100vh - 107px);
+    }
   }
 }
 
@@ -143,6 +158,7 @@ $nav-breakpoint: 730px;
 }
 
 #main-nav-ctas {
+  transition: top 0.3s ease;
   background: $white;
 
   @include nav-small {

www/source/stylesheets/site.css.scss

@@ -4,6 +4,7 @@
 @import "settings";
 @import "buttons";
 @import "nav";
+@import "global-message";
 @import "sidebar";
 @import "footer";
 @import "layout";