From f466f247422d93557ae54d7b9a4a77cbb730bd34 Mon Sep 17 00:00:00 2001 From: Vladimir Jimenez Date: Fri, 21 Apr 2017 09:04:19 -0700 Subject: [PATCH] Fix sidebar scrolling (#2860) * Simplify both left and right sidebars - Rewrite the sidebars to use the same CSS class instead of having two very similar classes. This involves removing all affix related attributes and functionality from the sidebars and replaced them with `position: sticky`. - The table of content elements should not be floated - Removed unused CSS rules related to the sidebars - Remove JavaScript used to resize the sidebars * Improve the mobile menu to be fixed - Simply JS used to hide/display the navigation bar on mobile viewports - The mobile menu should be fixed so it can be viewable from the bottom of the page. Before this change, you would have to scroll up to see the menu that `position: absolute` * Fix disappearing top navbar on homepage - Change the calculation of the affix offset for the navbar on the home page to ensure the navbar never leaves the viewport. This change also takes into account the change of how the sidebars' offsets are used * Fix auto scrolling on overflow * Add polyfill for 'position: sticky' on IE * Fix hamburger menu at incorrect breakpoint * Fix left nav hidden after expanding from mobile If you expand and collapse the left nav while on mobile and expand to a desktop view, the left nav would be hidden; this has been fixed * Unify navbar on homepage with rest of website --- _includes/global-header.html | 40 +++-------------- _includes/header.html | 31 +------------- _includes/navigation.html | 28 ++++++++++++ _includes/side-menu.html | 2 +- _layouts/docs.html | 5 ++- _scss/_layout.scss | 83 +++++++++--------------------------- _scss/_mobile.scss | 40 ++++++----------- _scss/_navigation.scss | 12 +----- _scss/_utilities.scss | 8 +--- css/temp.css | 5 --- js/docs.js | 42 +++--------------- js/stickyfill.min.js | 8 ++++ 12 files changed, 91 insertions(+), 213 deletions(-) create mode 100644 _includes/navigation.html create mode 100644 js/stickyfill.min.js diff --git a/_includes/global-header.html b/_includes/global-header.html index 147b2d272e..4cdc0e0b2b 100644 --- a/_includes/global-header.html +++ b/_includes/global-header.html @@ -69,38 +69,12 @@ - + + \ No newline at end of file diff --git a/_includes/header.html b/_includes/header.html index ac9763e69b..5376678654 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -8,36 +8,7 @@ \ No newline at end of file diff --git a/_includes/navigation.html b/_includes/navigation.html new file mode 100644 index 0000000000..0e021c1409 --- /dev/null +++ b/_includes/navigation.html @@ -0,0 +1,28 @@ +
+
+ +
+
+
+ +
+
+
+ +
+
+
+
    + {% include treebuilder.html %} +
+
+ +
\ No newline at end of file diff --git a/_includes/side-menu.html b/_includes/side-menu.html index 23230234bc..8ebfbb054b 100644 --- a/_includes/side-menu.html +++ b/_includes/side-menu.html @@ -1,5 +1,5 @@ {% if page.landing == true %}