diff --git a/www/source/javascripts/nav.js b/www/source/javascripts/nav.js index ce150d8bc..5d1239667 100644 --- a/www/source/javascripts/nav.js +++ b/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'); - -$(document).ready(function() { - $mainContent.css('min-height', $mainNav.outerHeight() - $('#main-nav-ctas').outerHeight()); -}); +const $mainNavCtas = $('#main-nav-ctas'); $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 navOffsetBottom; +var footerOffsetTop, 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(); + } +}); \ No newline at end of file diff --git a/www/source/layouts/_global-message.slim b/www/source/layouts/_global-message.slim new file mode 100644 index 000000000..e8d5e78fd --- /dev/null +++ b/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'; diff --git a/www/source/layouts/layout.slim b/www/source/layouts/layout.slim index 4aaeecfd3..7ab67022a 100644 --- a/www/source/layouts/layout.slim +++ b/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" diff --git a/www/source/stylesheets/_global-message.scss b/www/source/stylesheets/_global-message.scss new file mode 100644 index 000000000..652b40ee0 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/www/source/stylesheets/_layout.scss b/www/source/stylesheets/_layout.scss index 45ec15db0..2c1031f3e 100644 --- a/www/source/stylesheets/_layout.scss +++ b/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; diff --git a/www/source/stylesheets/_nav.scss b/www/source/stylesheets/_nav.scss index 319e488e1..78501f23f 100644 --- a/www/source/stylesheets/_nav.scss +++ b/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 { - bottom: 137px; + &.is-fixed-bottom { + @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 { diff --git a/www/source/stylesheets/site.css.scss b/www/source/stylesheets/site.css.scss index 3c3bfb417..b2299be2c 100644 --- a/www/source/stylesheets/site.css.scss +++ b/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";