feat(theme/stylus/menu): Make sticky (#551)

* feat(theme/stylus/menu): Make sticky * feat(theme/stylus/menu): Faint bottom border * feat(theme/book): Auto hide menu when scrolling down * feat(theme/stylus/menu): Don't hide title * feat(theme/stylus/menu): Only show bottom border when sticky * fix(theme/stylus/menu): Don't hide when sidebar is expanded * feat(theme/book): Show menu bar on hover
2018-01-19 16:41:50 +01:00 · 2018-01-19 16:41:50 +01:00 · 80f42675d6
parent fa84da0856
commit 80f42675d6
6 changed files with 176 additions and 66 deletions
--- a/src/theme/book.css
+++ b/src/theme/book.css
@ -1,7 +1,6 @@
 html {
  font-family: "Open Sans", sans-serif;
  color: #333;
-  overflow-x: hidden;
 }
 body {
  margin: 0;
@ -144,8 +143,12 @@ table thead td {
 .content img {
  max-width: 100%;
 }
-.menu-bar {
-  position: relative;
+#menu-bar {
+  position: sticky;
+  top: 0;
+  z-index: 101;
+}
+#menu-bar > #menu-bar-sticky-container {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
@ -158,9 +161,14 @@ table thead td {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
+  -webkit-transition: -webkit-transform 0.5s, border-bottom-color 0.5s;
+  -moz-transition: -moz-transform 0.5s, border-bottom-color 0.5s;
+  -o-transition: -o-transform 0.5s, border-bottom-color 0.5s;
+  -ms-transition: -ms-transform 0.5s, border-bottom-color 0.5s;
+  transition: transform 0.5s, border-bottom-color 0.5s;
 }
-.menu-bar i,
-.menu-bar .icon-button {
+#menu-bar i,
+#menu-bar .icon-button {
  position: relative;
  margin: 0 10px;
  z-index: 10;
@ -171,10 +179,17 @@ table thead td {
  -ms-transition: color 0.5s;
  transition: color 0.5s;
 }
-.menu-bar i:hover,
-.menu-bar .icon-button:hover {
+#menu-bar i:hover,
+#menu-bar .icon-button:hover {
  cursor: pointer;
 }
+html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container {
+  -webkit-transform: translateY(-60px);
+  -moz-transform: translateY(-60px);
+  -o-transform: translateY(-60px);
+  -ms-transform: translateY(-60px);
+  transform: translateY(-60px);
+}
 .menu-title {
  display: inline-block;
  font-weight: 200;
@ -193,19 +208,6 @@ table thead td {
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
-  opacity: 0;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-  filter: alpha(opacity=0);
-  -webkit-transition: opacity 0.5s ease-in-out;
-  -moz-transition: opacity 0.5s ease-in-out;
-  -o-transition: opacity 0.5s ease-in-out;
-  -ms-transition: opacity 0.5s ease-in-out;
-  transition: opacity 0.5s ease-in-out;
-}
-.menu-bar:hover .menu-title {
-  opacity: 1;
-  -ms-filter: none;
-  filter: none;
 }
 .nav-chapters {
  font-size: 2.5em;
@ -321,6 +323,18 @@ table thead td {
 .light .content .header:visited:hover {
  text-decoration: none;
 }
+.light .menu-bar {
+  margin: auto -15px;
+}
+.light .menu-bar > #menu-bar-sticky-container {
+  background-color: #fff;
+  border-bottom-color: #fff;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+.light .menu-bar.bordered > #menu-bar-sticky-container {
+  border-bottom-color: #f2f2f2;
+}
 .light .sidebar {
  background-color: #fafafa;
  color: #364149;
@ -463,6 +477,18 @@ table thead td {
 .coal .content .header:visited:hover {
  text-decoration: none;
 }
+.coal .menu-bar {
+  margin: auto -15px;
+}
+.coal .menu-bar > #menu-bar-sticky-container {
+  background-color: #141617;
+  border-bottom-color: #141617;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+.coal .menu-bar.bordered > #menu-bar-sticky-container {
+  border-bottom-color: #1f2223;
+}
 .coal .sidebar {
  background-color: #292c2f;
  color: #a1adb8;
@ -605,6 +631,18 @@ table thead td {
 .navy .content .header:visited:hover {
  text-decoration: none;
 }
+.navy .menu-bar {
+  margin: auto -15px;
+}
+.navy .menu-bar > #menu-bar-sticky-container {
+  background-color: #161923;
+  border-bottom-color: #161923;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+.navy .menu-bar.bordered > #menu-bar-sticky-container {
+  border-bottom-color: #1f2331;
+}
 .navy .sidebar {
  background-color: #282d3f;
  color: #c8c9db;
@ -747,6 +785,18 @@ table thead td {
 .rust .content .header:visited:hover {
  text-decoration: none;
 }
+.rust .menu-bar {
+  margin: auto -15px;
+}
+.rust .menu-bar > #menu-bar-sticky-container {
+  background-color: #e1e1db;
+  border-bottom-color: #e1e1db;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+.rust .menu-bar.bordered > #menu-bar-sticky-container {
+  border-bottom-color: #d7d7cf;
+}
 .rust .sidebar {
  background-color: #3b2e2a;
  color: #c8c9db;
@ -889,6 +939,18 @@ table thead td {
 .ayu .content .header:visited:hover {
  text-decoration: none;
 }
+.ayu .menu-bar {
+  margin: auto -15px;
+}
+.ayu .menu-bar > #menu-bar-sticky-container {
+  background-color: #0f1419;
+  border-bottom-color: #0f1419;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+.ayu .menu-bar.bordered > #menu-bar-sticky-container {
+  border-bottom-color: #182028;
+}
 .ayu .sidebar {
  background-color: #14191f;
  color: #c8c9db;
--- a/src/theme/book.js
+++ b/src/theme/book.js
@ -1,4 +1,4 @@
-var html, sidebar, sidebarLinks, sidebarToggleButton;
+var html, sidebar, sidebarLinks, sidebarToggleButton, themeToggleButton, themePopup;

 document.addEventListener('DOMContentLoaded', function() {

@ -77,8 +77,8 @@ document.addEventListener('DOMContentLoaded', function() {
    sidebar = document.getElementById("sidebar");
    sidebarLinks = document.querySelectorAll('#sidebar a');
    sidebarToggleButton = document.getElementById("sidebar-toggle");
-    var themeToggleButton = document.getElementById('theme-toggle');
-    var themePopup = document.getElementById('theme-list');
+    themeToggleButton = document.getElementById('theme-toggle');
+    themePopup = document.getElementById('theme-list');

    // Toggle sidebar
    sidebarToggleButton.addEventListener('click', sidebarToggle);
@ -116,16 +116,6 @@ document.addEventListener('DOMContentLoaded', function() {
        }
    });

-    function showThemes() {
-        themePopup.style.display = 'block';
-        themeToggleButton.setAttribute('aria-expanded', true);
-    }
-
-    function hideThemes() {
-        themePopup.style.display = 'none';
-        themeToggleButton.setAttribute('aria-expanded', false);
-    }
-
    // Theme button
    themeToggleButton.addEventListener('click', function(){
        if (themePopup.style.display === 'block') {
@ -440,6 +430,16 @@ function sidebarToggle() {
    }
 }

+function showThemes() {
+    themePopup.style.display = 'block';
+    themeToggleButton.setAttribute('aria-expanded', true);
+}
+
+function hideThemes() {
+    themePopup.style.display = 'none';
+    themeToggleButton.setAttribute('aria-expanded', false);
+}
+
 function showSidebar() {
    html.classList.remove('sidebar-hidden')
    html.classList.add('sidebar-visible');
@ -501,3 +501,29 @@ function run_rust_code(code_block) {
        .then(function(response) { result_block.innerText = response.success ? response.stdout : response.stderr; })
        .catch(function(error) { result_block.innerText = "Playground communication" + error.message; });
 }
+
+(function autoHideMenu() {
+    var scrollingContainer = document.querySelector('html');
+    var menu = document.getElementById('menu-bar');
+
+    var previousScrollTop = scrollingContainer.scrollTop;
+
+    document.addEventListener('scroll', function() {
+        if (menu.classList.contains('folded') && scrollingContainer.scrollTop < previousScrollTop) {
+            menu.classList.remove('folded');
+        } else if (!menu.classList.contains('folded') && scrollingContainer.scrollTop > previousScrollTop) {
+            menu.classList.add('folded');
+        }
+
+        if (!menu.classList.contains('bordered') && scrollingContainer.scrollTop > 0) {
+            menu.classList.add('bordered');
+        }
+
+        if (menu.classList.contains('bordered') && scrollingContainer.scrollTop === 0) {
+            menu.classList.remove('bordered');
+        }
+
+        previousScrollTop = scrollingContainer.scrollTop;
+        hideThemes();
+    }, { passive: true });
+})();
--- a/src/theme/index.hbs
+++ b/src/theme/index.hbs
@ -70,6 +70,7 @@
            <div class="page">
                {{> header}}
                <div id="menu-bar" class="menu-bar">
+                    <div id="menu-bar-sticky-container">
                        <div class="left-buttons">
                            <button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-controls="sidebar">
                                <i class="fa fa-bars"></i>
@ -94,6 +95,7 @@
                            </a>
                        </div>
                    </div>
+                </div>

                <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
                <script type="text/javascript">
--- a/src/theme/stylus/general.styl
+++ b/src/theme/stylus/general.styl
@ -1,13 +1,12 @@
 html {
    font-family: "Open Sans", sans-serif
    color: #333
-    overflow-x: hidden
 }

 body {
    margin: 0;
    font-size: 1rem;
-    overflow-x: hidden
+    overflow-x: hidden;
 }

 code {
--- a/src/theme/stylus/menu.styl
+++ b/src/theme/stylus/menu.styl
@ -1,7 +1,13 @@
-.menu-bar {
-    position: relative
+#menu-bar {
+    position: sticky
+    top: 0
+    z-index: 101
+
+    & > #menu-bar-sticky-container {
        display: flex
        flex-wrap: wrap
+        transition: transform 0.5s, border-bottom-color 0.5s
+    }

    i, .icon-button {
        position: relative
@ -15,6 +21,11 @@
    }
 }

+
+html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container  {
+    transform: translateY(-60px);
+}
+
 .menu-title {
    display: inline-block
    font-weight: 200
@ -26,11 +37,4 @@
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
-
-    opacity: 0
-    transition: opacity 0.5s ease-in-out
-}
-
-.menu-bar:hover .menu-title {
-    opacity: 1
 }
--- a/src/theme/stylus/themes/base.styl
+++ b/src/theme/stylus/themes/base.styl
@ -12,6 +12,23 @@
        }
    }

+    .menu-bar {
+        margin: auto (- $page-padding);
+
+        & > #menu-bar-sticky-container {
+            background-color: $bg
+            border-bottom-color: $bg
+            border-bottom-width: 1px
+            border-bottom-style: solid
+        }
+
+        &.bordered > #menu-bar-sticky-container  {
+            border-bottom-color: $table-border-color
+        }
+    }
+
+    $table-border-color
+
    .sidebar {
        background-color: $sidebar-bg
        color: $sidebar-fg