From 08b1a5da8872e16091f21b2cb64440e4e7c6ae47 Mon Sep 17 00:00:00 2001 From: Maggie Walker Date: Mon, 26 Sep 2016 12:45:24 -0700 Subject: [PATCH] Website: Fix docs nav functionality and optimize for mobile A few minor styling fixes for the docs nav for mobile, refactoring the markup to remove unneeded parent elements, and fixing a bug where the nav overlapped with the footer if the window was too short. --- www/source/javascripts/nav.js | 23 +++++++++++++++++- www/source/layouts/_nav.slim | 3 ++- www/source/layouts/_sidebar.slim | 35 +++++++++++++--------------- www/source/stylesheets/_layout.scss | 1 + www/source/stylesheets/_nav.scss | 10 ++++++++ www/source/stylesheets/_sidebar.scss | 29 ++++++++++++++++------- 6 files changed, 72 insertions(+), 29 deletions(-) diff --git a/www/source/javascripts/nav.js b/www/source/javascripts/nav.js index e876d5fad..84100b646 100644 --- a/www/source/javascripts/nav.js +++ b/www/source/javascripts/nav.js @@ -2,6 +2,11 @@ const $navLinks = $('.main-nav--links'); const $navToggle = $('.main-nav--toggle'); const navBreakpoint = 730; // this should match $nav-breakpoint in _nav.scss +const $mainContent = $('#main-content'); + +$(document).ready(function() { + $mainContent.css('min-height', $('#main-nav').outerHeight() - $('#main-nav-ctas').outerHeight()); +}); $navToggle.click(function() { $(this).toggleClass('is-active'); @@ -13,4 +18,20 @@ $(window).resize(function() { $navToggle.removeClass('is-active'); $navLinks.attr("style", ""); } -}); \ No newline at end of file +}); + +// toggles fixed nav position when the window is too short +const footerOffsetTop = $("#main-footer").offset().top; +var navOffsetBottom; + +function toggleFixedNavPosition() { + navOffsetBottom = $("#main-nav").outerHeight() + $(window).scrollTop(); + + $("#main-nav").toggleClass("is-fixed-bottom", footerOffsetTop < navOffsetBottom) +} + +toggleFixedNavPosition(); + +$(window).scroll(function() { + toggleFixedNavPosition(); +}); diff --git a/www/source/layouts/_nav.slim b/www/source/layouts/_nav.slim index b97c277ce..8da700a09 100644 --- a/www/source/layouts/_nav.slim +++ b/www/source/layouts/_nav.slim @@ -9,7 +9,8 @@ nav#main-nav class="sidebar-layout-#{locals[:sidebar_layout]}" a.button.transparent.try-demo href="#" Try the Demo a.button.secondary href="https://downloads.chef.io/inspec" Download - if locals[:sidebar_layout] == 'docs' - = partial "layouts/sidebar" + li.main-nav--sidebar + = partial "layouts/sidebar" - else li.main-nav--link a href="/" diff --git a/www/source/layouts/_sidebar.slim b/www/source/layouts/_sidebar.slim index bc03ab9dd..1efe5e6dc 100644 --- a/www/source/layouts/_sidebar.slim +++ b/www/source/layouts/_sidebar.slim @@ -1,19 +1,16 @@ -.container__has-sidebar - .row - .main-sidebar - - if locals[:sidebar_layout] == 'docs' - form.main-sidebar--search action="/docs/search/" method="get" - input type="text" placeholder="Search Documentation" name="q" - ul.main-sidebar--links - - sidebar_data(sidebar_layout).each do |item| - li.main-sidebar--link - h6 = item.title - ul.main-sidebar--list.no-bullet - - item.links.each do |item_link| - li.main-sidebar--list--item class=link_classes(current_resource.url, item_link) - = link_to item_link.title, item_link.link - - if print_sub_links?(current_resource.url, item_link) - ul.main-sidebar--list--item--dropdown.no-bullet - - item_link.sub_links.each do |sub_link| - li.main-sidebar--list--item class=link_classes(current_resource.url, sub_link) - = link_to sub_link.title, sub_link.link +- if locals[:sidebar_layout] == 'docs' + form.main-sidebar--search action="/docs/search/" method="get" + input type="text" placeholder="Search Documentation" name="q" +ul.main-sidebar--links + - sidebar_data(sidebar_layout).each do |item| + li.main-sidebar--link + h6 = item.title + ul.main-sidebar--list.no-bullet + - item.links.each do |item_link| + li.main-sidebar--list--item class=link_classes(current_resource.url, item_link) + = link_to item_link.title, item_link.link + - if print_sub_links?(current_resource.url, item_link) + ul.main-sidebar--list--item--dropdown.no-bullet + - item_link.sub_links.each do |sub_link| + li.main-sidebar--list--item class=link_classes(current_resource.url, sub_link) + = link_to sub_link.title, sub_link.link diff --git a/www/source/stylesheets/_layout.scss b/www/source/stylesheets/_layout.scss index 40cd11989..45ec15db0 100644 --- a/www/source/stylesheets/_layout.scss +++ b/www/source/stylesheets/_layout.scss @@ -1,4 +1,5 @@ body { + position: relative; font-family: $main-font; color: $body-text; } diff --git a/www/source/stylesheets/_nav.scss b/www/source/stylesheets/_nav.scss index 991f4744e..319e488e1 100644 --- a/www/source/stylesheets/_nav.scss +++ b/www/source/stylesheets/_nav.scss @@ -28,6 +28,11 @@ $nav-breakpoint: 730px; position: fixed; z-index: 100; width: $side-nav-width; + + &.is-fixed-bottom { + bottom: 137px; + position: absolute; + } } } @@ -93,6 +98,11 @@ $nav-breakpoint: 730px; @include nav-small { display: none; } + + .sidebar-layout-docs & { + max-height: calc(100vh - 64px); + overflow-y: scroll; + } } .main-nav--link { diff --git a/www/source/stylesheets/_sidebar.scss b/www/source/stylesheets/_sidebar.scss index 7ef685cb6..2c8b6095b 100644 --- a/www/source/stylesheets/_sidebar.scss +++ b/www/source/stylesheets/_sidebar.scss @@ -1,6 +1,26 @@ -.main-sidebar ul { +.sidebar-layout-docs { + .main-nav--links { + border-top: none; + } + + .main-nav--link-ctas { + border-bottom: none; + margin-bottom: 3px; + } +} + +.main-nav--sidebar { + padding: 0 $side-nav-padding-small; + + @include nav-large { + padding: 0 $side-nav-padding-large; + } +} + +.main-sidebar--links { list-style: none; margin-left: 0.5rem; + ul { margin-left: 0; margin-bottom: 1rem; @@ -9,7 +29,6 @@ .main-sidebar--link h6 { font-weight: 500; - } .main-sidebar--list--item { @@ -64,9 +83,3 @@ min-width: 54px; } } - -// FIXME: this is used to remove the top border line of the search -// see https://github.com/chef/inspec/issues/1114#issuecomment-249525984 -.sidebar-layout-docs > .main-nav--links { - border-top: none; -}