From 63c410c94a4866b9eaf8fa8de6d2bc75882f4fcf Mon Sep 17 00:00:00 2001 From: Matt Ickstadt Date: Tue, 20 Mar 2018 10:48:54 -0500 Subject: [PATCH 1/9] Don't hide page content when displaying search --- src/theme/book.css | 31 +++++++------------------------ src/theme/index.hbs | 16 +++++++++------- src/theme/searcher/searcher.js | 29 +++++++++++------------------ src/theme/stylus/page.styl | 19 ++----------------- src/theme/stylus/searchbar.styl | 3 --- 5 files changed, 29 insertions(+), 69 deletions(-) diff --git a/src/theme/book.css b/src/theme/book.css index 2584af9ab7..411496ddd0 100644 --- a/src/theme/book.css +++ b/src/theme/book.css @@ -137,42 +137,28 @@ table thead td { white-space: nowrap; } .page-wrapper { - left: 0; - position: absolute; - right: 0; - top: 0; - bottom: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - -webkit-transition: padding-left 0.5s, margin-left 0.5s, left 0.5s; - -moz-transition: padding-left 0.5s, margin-left 0.5s, left 0.5s; - -o-transition: padding-left 0.5s, margin-left 0.5s, left 0.5s; - -ms-transition: padding-left 0.5s, margin-left 0.5s, left 0.5s; - transition: padding-left 0.5s, margin-left 0.5s, left 0.5s; + -webkit-transition: margin-left 0.5s; + -moz-transition: margin-left 0.5s; + -o-transition: margin-left 0.5s; + -ms-transition: margin-left 0.5s; + transition: margin-left 0.5s; } .sidebar-visible .page-wrapper { - left: 300px; + margin-left: 300px; } .page { outline: 0; padding: 0 15px; } .content { - position: relative; - top: 0; - bottom: 0; overflow-y: auto; - right: 0; - left: 0; padding: 0 15px; padding-bottom: 50px; } -.sidebar-visible .content { - position: absolute; - top: 52px; -} -.content > main { +.content main { margin-left: auto; margin-right: auto; max-width: 750px; @@ -1406,13 +1392,11 @@ mark { background-color: rgba(0,0,0,0) !important; } .searchbar-outer { - display: none; margin-left: auto; margin-right: auto; max-width: 750px; } #searchbar { - display: block; width: 100%; margin: 5px auto 0px auto; padding: 10px 16px; @@ -1428,7 +1412,6 @@ mark { padding: 18px 0 0 5px; } .searchresults-outer { - display: none; margin-left: auto; margin-right: auto; max-width: 750px; diff --git a/src/theme/index.hbs b/src/theme/index.hbs index a1949b4fe7..73033ba6d3 100644 --- a/src/theme/index.hbs +++ b/src/theme/index.hbs @@ -131,13 +131,15 @@ {{#if search_enabled}} -
- -
-
-
- + {{/if}} diff --git a/src/theme/searcher/searcher.js b/src/theme/searcher/searcher.js index 7e5440b73b..6814a65b3a 100644 --- a/src/theme/searcher/searcher.js +++ b/src/theme/searcher/searcher.js @@ -9,7 +9,8 @@ window.search = window.search || {}; return; } - var searchbar = document.getElementById('searchbar'), + var search_wrap = document.getElementById('search-wrapper'), + searchbar = document.getElementById('searchbar'), searchbar_outer = document.getElementById('searchbar-outer'), searchresults = document.getElementById('searchresults'), searchresults_outer = document.getElementById('searchresults-outer'), @@ -315,7 +316,7 @@ window.search = window.search || {}; e.preventDefault(); showSearch(true); window.scrollTo(0, 0); - searchbar.focus(); + searchbar.select(); return; } if (hasFocus() && e.keyCode == DOWN_KEYCODE) { @@ -353,38 +354,30 @@ window.search = window.search || {}; function showSearch(yes) { if (yes) { - searchbar_outer.style.display = 'block'; - content.style.display = 'none'; + search_wrap.classList.remove('hidden'); searchicon.setAttribute('aria-expanded', 'true'); } else { - content.style.display = 'block'; - searchbar_outer.style.display = 'none'; - searchresults_outer.style.display = 'none'; - searchbar.value = ''; - removeChildren(searchresults); + search_wrap.classList.add('hidden'); searchicon.setAttribute('aria-expanded', 'false'); } } function showResults(yes) { if (yes) { - searchbar_outer.style.display = 'block'; - content.style.display = 'none'; - searchresults_outer.style.display = 'block'; + searchresults_outer.classList.remove('hidden'); } else { - content.style.display = 'block'; - searchresults_outer.style.display = 'none'; + searchresults_outer.classList.add('hidden'); } } // Eventhandler for search icon function searchIconClickHandler() { - if (searchbar_outer.style.display === 'block') { - showSearch(false); - } else { + if (search_wrap.classList.contains('hidden')) { showSearch(true); window.scrollTo(0, 0); - searchbar.focus(); + searchbar.select(); + } else { + showSearch(false); } } diff --git a/src/theme/stylus/page.styl b/src/theme/stylus/page.styl index 6c49dfd9ca..3c290c13ae 100644 --- a/src/theme/stylus/page.styl +++ b/src/theme/stylus/page.styl @@ -2,18 +2,13 @@ .page-wrapper { box-sizing: border-box - left: 0 - position: absolute - right: 0 - top: 0 - bottom: 0 // Animation: slide away - transition: padding-left 0.5s, margin-left 0.5s, left 0.5s + transition: margin-left 0.5s } .sidebar-visible .page-wrapper { - left: $sidebar-width + margin-left: $sidebar-width } .page { @@ -22,12 +17,7 @@ } .content { - position: relative - top: 0 - bottom: 0 overflow-y: auto - right: 0 - left: 0 padding: 0 15px padding-bottom: 50px @@ -44,8 +34,3 @@ img { max-width: 100%; } } - -.sidebar-visible .content { - position: absolute - top: 52px -} diff --git a/src/theme/stylus/searchbar.styl b/src/theme/stylus/searchbar.styl index 7dc680e813..58e8332ff8 100644 --- a/src/theme/stylus/searchbar.styl +++ b/src/theme/stylus/searchbar.styl @@ -16,14 +16,12 @@ mark { } .searchbar-outer { - display: none; margin-left: auto; margin-right: auto; max-width: $content-max-width; } #searchbar { - display: block; width: 100%; margin: 5px auto 0px auto; padding: 10px 16px; @@ -37,7 +35,6 @@ mark { } .searchresults-outer { - display: none; margin-left: auto; margin-right: auto; max-width: $content-max-width; From 1c9f4a486157d319647d93d3f3c6800ccf41a6f3 Mon Sep 17 00:00:00 2001 From: Matt Ickstadt Date: Tue, 20 Mar 2018 10:53:57 -0500 Subject: [PATCH 2/9] Decrease sidebar animation time --- src/theme/book.css | 30 +++++++++++++++--------------- src/theme/stylus/menu.styl | 2 +- src/theme/stylus/page.styl | 2 +- src/theme/stylus/sidebar.styl | 2 +- 4 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/theme/book.css b/src/theme/book.css index 411496ddd0..dbf72378db 100644 --- a/src/theme/book.css +++ b/src/theme/book.css @@ -81,11 +81,11 @@ table thead td { box-sizing: border-box; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; - -webkit-transition: -webkit-transform 0.5s; - -moz-transition: -moz-transform 0.5s; - -o-transition: -o-transform 0.5s; - -ms-transition: -ms-transform 0.5s; - transition: transform 0.5s; + -webkit-transition: -webkit-transform 0.3s; + -moz-transition: -moz-transform 0.3s; + -o-transition: -o-transform 0.3s; + -ms-transition: -ms-transform 0.3s; + transition: transform 0.3s; } .sidebar code { line-height: 2em; @@ -140,11 +140,11 @@ table thead td { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - -webkit-transition: margin-left 0.5s; - -moz-transition: margin-left 0.5s; - -o-transition: margin-left 0.5s; - -ms-transition: margin-left 0.5s; - transition: margin-left 0.5s; + -webkit-transition: margin-left 0.3s; + -moz-transition: margin-left 0.3s; + -o-transition: margin-left 0.3s; + -ms-transition: margin-left 0.3s; + transition: margin-left 0.3s; } .sidebar-visible .page-wrapper { margin-left: 300px; @@ -191,11 +191,11 @@ 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; + -webkit-transition: -webkit-transform 0.3s, border-bottom-color 0.5s; + -moz-transition: -moz-transform 0.3s, border-bottom-color 0.5s; + -o-transition: -o-transform 0.3s, border-bottom-color 0.5s; + -ms-transition: -ms-transform 0.3s, border-bottom-color 0.5s; + transition: transform 0.3s, border-bottom-color 0.5s; } #menu-bar i, #menu-bar .icon-button { diff --git a/src/theme/stylus/menu.styl b/src/theme/stylus/menu.styl index e50987b525..faa6eb8bfb 100644 --- a/src/theme/stylus/menu.styl +++ b/src/theme/stylus/menu.styl @@ -7,7 +7,7 @@ & > #menu-bar-sticky-container { display: flex flex-wrap: wrap - transition: transform 0.5s, border-bottom-color 0.5s + transition: transform 0.3s, border-bottom-color 0.5s } i, .icon-button { diff --git a/src/theme/stylus/page.styl b/src/theme/stylus/page.styl index 3c290c13ae..da57095425 100644 --- a/src/theme/stylus/page.styl +++ b/src/theme/stylus/page.styl @@ -4,7 +4,7 @@ box-sizing: border-box // Animation: slide away - transition: margin-left 0.5s + transition: margin-left 0.3s } .sidebar-visible .page-wrapper { diff --git a/src/theme/stylus/sidebar.styl b/src/theme/stylus/sidebar.styl index 7faba9d919..367426ae49 100644 --- a/src/theme/stylus/sidebar.styl +++ b/src/theme/stylus/sidebar.styl @@ -14,7 +14,7 @@ overscroll-behavior-y: contain; // Animation: slide away - transition: transform 0.5s + transition: transform 0.3s code { line-height: 2em; From 308ddf611563feb62bac584efca5162c245c670b Mon Sep 17 00:00:00 2001 From: Matt Ickstadt Date: Tue, 20 Mar 2018 12:04:54 -0500 Subject: [PATCH 3/9] Fix search key event handler which wasn't completely de-jqueryified. --- src/theme/book.js | 3 ++ src/theme/playpen_editor/editor.js | 1 + src/theme/searcher/searcher.js | 57 +++++++++++++++--------------- 3 files changed, 32 insertions(+), 29 deletions(-) diff --git a/src/theme/book.js b/src/theme/book.js index 4da984c7ff..f192c55bb1 100644 --- a/src/theme/book.js +++ b/src/theme/book.js @@ -1,3 +1,5 @@ +"use strict"; + // Fix back button cache problem window.onunload = function () { }; @@ -55,6 +57,7 @@ function playpen_text(playpen) { var txt = playpen_text(pre_block); var re = /extern\s+crate\s+([a-zA-Z_0-9]+)\s*;/g; var snippet_crates = []; + var item; while (item = re.exec(txt)) { snippet_crates.push(item[1]); } diff --git a/src/theme/playpen_editor/editor.js b/src/theme/playpen_editor/editor.js index ee8dc1af8f..4e3bdcaf71 100644 --- a/src/theme/playpen_editor/editor.js +++ b/src/theme/playpen_editor/editor.js @@ -1,3 +1,4 @@ +"use strict"; window.editors = []; (function(editors) { if (typeof(ace) === 'undefined' || !ace) { diff --git a/src/theme/searcher/searcher.js b/src/theme/searcher/searcher.js index 6814a65b3a..ab4bf9a033 100644 --- a/src/theme/searcher/searcher.js +++ b/src/theme/searcher/searcher.js @@ -1,3 +1,4 @@ +"use strict"; window.search = window.search || {}; (function search(search) { // Search functionality @@ -246,7 +247,7 @@ window.search = window.search || {}; // Set up events searchicon.addEventListener('click', function(e) { searchIconClickHandler(); }, false); searchbar.addEventListener('keyup', function(e) { searchbarKeyUpHandler(); }, false); - document.addEventListener('keydown', function (e) { globalKeyHandler(e); }, false); + document.addEventListener('keydown', function(e) { globalKeyHandler(e); }, false); // If the user uses the browser buttons, do the same as if a reload happened window.onpopstate = function(e) { doSearchOrMarkFromUrl(); }; @@ -300,54 +301,48 @@ window.search = window.search || {}; function globalKeyHandler(e) { if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || e.target.type === 'textarea') { return; } - if (e.keyCode == ESCAPE_KEYCODE) { + if (e.keyCode === ESCAPE_KEYCODE) { e.preventDefault(); searchbar.classList.remove("active"); setSearchUrlParameters("", - (searchbar.value.trim() != "") ? "push" : "replace"); + (searchbar.value.trim() !== "") ? "push" : "replace"); if (hasFocus()) { unfocusSearchbar(); } showSearch(false); marker.unmark(); - return; - } - if (!hasFocus() && e.keyCode == SEARCH_HOTKEY_KEYCODE) { + } else if (!hasFocus() && e.keyCode === SEARCH_HOTKEY_KEYCODE) { e.preventDefault(); showSearch(true); window.scrollTo(0, 0); searchbar.select(); - return; - } - if (hasFocus() && e.keyCode == DOWN_KEYCODE) { + } else if (hasFocus() && e.keyCode === DOWN_KEYCODE) { e.preventDefault(); unfocusSearchbar(); - searchresults.children('li').first().classList.add("focus"); - return; - } - if (!hasFocus() && (e.keyCode == DOWN_KEYCODE - || e.keyCode == UP_KEYCODE - || e.keyCode == SELECT_KEYCODE)) { + searchresults.firstElementChild.classList.add("focus"); + } else if (!hasFocus() && (e.keyCode === DOWN_KEYCODE + || e.keyCode === UP_KEYCODE + || e.keyCode === SELECT_KEYCODE)) { // not `:focus` because browser does annoying scrolling - var current_focus = search.searchresults.find("li.focus"); - if (current_focus.length == 0) return; + var focused = searchresults.querySelector("li.focus"); + if (!focused) return; e.preventDefault(); - if (e.keyCode == DOWN_KEYCODE) { - var next = current_focus.next() - if (next.length > 0) { - current_focus.classList.remove("focus"); + if (e.keyCode === DOWN_KEYCODE) { + var next = focused.nextElementSibling; + if (next) { + focused.classList.remove("focus"); next.classList.add("focus"); } - } else if (e.keyCode == UP_KEYCODE) { - current_focus.classList.remove("focus"); - var prev = current_focus.prev(); - if (prev.length == 0) { - searchbar.focus(); - } else { + } else if (e.keyCode === UP_KEYCODE) { + focused.classList.remove("focus"); + var prev = focused.previousElementSibling; + if (prev) { prev.classList.add("focus"); + } else { + searchbar.select(); } - } else { - window.location = current_focus.children('a').attr('href'); + } else { // SELECT_KEYCODE + window.location.assign(focused.querySelector('a')); } } } @@ -359,6 +354,10 @@ window.search = window.search || {}; } else { search_wrap.classList.add('hidden'); searchicon.setAttribute('aria-expanded', 'false'); + var results = searchresults.children; + for (var i = 0; i < results.length; i++) { + results[i].classList.remove("focus"); + } } } From 3d9ff196444afc6476f68b968230ff2717cb587e Mon Sep 17 00:00:00 2001 From: Matt Ickstadt Date: Tue, 20 Mar 2018 13:41:09 -0500 Subject: [PATCH 4/9] Avoid reflowing page content on small screens This reduces jank caused by reflowing the page text while animating the sidebar, and it looks nicer. --- src/theme/book.css | 26 ++++++++++++++++++++------ src/theme/stylus/page.styl | 9 +++++++-- src/theme/stylus/variables.styl | 2 ++ 3 files changed, 29 insertions(+), 8 deletions(-) diff --git a/src/theme/book.css b/src/theme/book.css index dbf72378db..bdf8ab9fa7 100644 --- a/src/theme/book.css +++ b/src/theme/book.css @@ -140,14 +140,28 @@ table thead td { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - -webkit-transition: margin-left 0.3s; - -moz-transition: margin-left 0.3s; - -o-transition: margin-left 0.3s; - -ms-transition: margin-left 0.3s; - transition: margin-left 0.3s; + -webkit-transition: margin-left 0.3s ease, -webkit-transform 0.3s ease; + -moz-transition: margin-left 0.3s ease, -moz-transform 0.3s ease; + -o-transition: margin-left 0.3s ease, -o-transform 0.3s ease; + -ms-transition: margin-left 0.3s ease, -ms-transform 0.3s ease; + transition: margin-left 0.3s ease, transform 0.3s ease; } .sidebar-visible .page-wrapper { - margin-left: 300px; + -webkit-transform: translateX(300px); + -moz-transform: translateX(300px); + -o-transform: translateX(300px); + -ms-transform: translateX(300px); + transform: translateX(300px); +} +@media only screen and (min-width: 620px) { + .sidebar-visible .page-wrapper { + -webkit-transform: none; + -moz-transform: none; + -o-transform: none; + -ms-transform: none; + transform: none; + margin-left: 300px; + } } .page { outline: 0; diff --git a/src/theme/stylus/page.styl b/src/theme/stylus/page.styl index da57095425..da363eaaa1 100644 --- a/src/theme/stylus/page.styl +++ b/src/theme/stylus/page.styl @@ -4,11 +4,16 @@ box-sizing: border-box // Animation: slide away - transition: margin-left 0.3s + transition: margin-left 0.3s ease, transform 0.3s ease } .sidebar-visible .page-wrapper { - margin-left: $sidebar-width + transform: translateX($sidebar-width) + + @media only screen and (min-width: $sidebar-reflow-width) { + transform: none + margin-left: $sidebar-width + } } .page { diff --git a/src/theme/stylus/variables.styl b/src/theme/stylus/variables.styl index 3d2c95b239..5249703596 100644 --- a/src/theme/stylus/variables.styl +++ b/src/theme/stylus/variables.styl @@ -1,4 +1,6 @@ $sidebar-width = 300px $page-padding = 15px $content-max-width = 750px +$content-min-width = 320px $page-plus-sidebar-width = $content-max-width + $sidebar-width + $page-padding * 2 +$sidebar-reflow-width = $sidebar-width + $content-min-width From 22c3c71a177e497a90626b5290dd400405d96764 Mon Sep 17 00:00:00 2001 From: Matt Ickstadt Date: Tue, 20 Mar 2018 13:45:17 -0500 Subject: [PATCH 5/9] Don't use HTMLParentNode.prepend() since edge doesn't support it yet --- src/theme/book.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/theme/book.js b/src/theme/book.js index f192c55bb1..b0d89f33d2 100644 --- a/src/theme/book.js +++ b/src/theme/book.js @@ -178,7 +178,7 @@ function playpen_text(playpen) { buttons.innerHTML = ""; // add expand button - pre_block.prepend(buttons); + pre_block.insertBefore(buttons, pre_block.firstChild); pre_block.querySelector('.buttons').addEventListener('click', function (e) { if (e.target.classList.contains('fa-expand')) { @@ -216,7 +216,7 @@ function playpen_text(playpen) { if (!buttons) { buttons = document.createElement('div'); buttons.className = 'buttons'; - pre_block.prepend(buttons); + pre_block.insertBefore(buttons, pre_block.firstChild); } var clipButton = document.createElement('button'); @@ -225,7 +225,7 @@ function playpen_text(playpen) { clipButton.setAttribute('aria-label', clipButton.title); clipButton.innerHTML = ''; - buttons.prepend(clipButton); + buttons.insertBefore(clipButton, buttons.firstChild); } }); @@ -236,7 +236,7 @@ function playpen_text(playpen) { if (!buttons) { buttons = document.createElement('div'); buttons.className = 'buttons'; - pre_block.prepend(buttons); + pre_block.insertBefore(buttons, pre_block.firstChild); } var runCodeButton = document.createElement('button'); @@ -251,8 +251,8 @@ function playpen_text(playpen) { copyCodeClipboardButton.title = 'Copy to clipboard'; copyCodeClipboardButton.setAttribute('aria-label', copyCodeClipboardButton.title); - buttons.prepend(runCodeButton); - buttons.prepend(copyCodeClipboardButton); + buttons.insertBefore(runCodeButton, buttons.firstChild); + buttons.insertBefore(copyCodeClipboardButton, buttons.firstChild); runCodeButton.addEventListener('click', function (e) { run_rust_code(pre_block); @@ -265,7 +265,7 @@ function playpen_text(playpen) { undoChangesButton.title = 'Undo changes'; undoChangesButton.setAttribute('aria-label', undoChangesButton.title); - buttons.prepend(undoChangesButton); + buttons.insertBefore(undoChangesButton, buttons.firstChild); undoChangesButton.addEventListener('click', function () { let editor = window.ace.edit(code_block); From cf6845eb6f3574fedefe23484adfb5424e9f25e5 Mon Sep 17 00:00:00 2001 From: Matt Ickstadt Date: Tue, 20 Mar 2018 13:48:00 -0500 Subject: [PATCH 6/9] Don't animate menu border bottom color since it's the same color as the background, which isn't animated. --- src/theme/book.css | 10 +++++----- src/theme/stylus/menu.styl | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/theme/book.css b/src/theme/book.css index bdf8ab9fa7..7a248c763f 100644 --- a/src/theme/book.css +++ b/src/theme/book.css @@ -205,11 +205,11 @@ table thead td { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; - -webkit-transition: -webkit-transform 0.3s, border-bottom-color 0.5s; - -moz-transition: -moz-transform 0.3s, border-bottom-color 0.5s; - -o-transition: -o-transform 0.3s, border-bottom-color 0.5s; - -ms-transition: -ms-transform 0.3s, border-bottom-color 0.5s; - transition: transform 0.3s, border-bottom-color 0.5s; + -webkit-transition: -webkit-transform 0.3s; + -moz-transition: -moz-transform 0.3s; + -o-transition: -o-transform 0.3s; + -ms-transition: -ms-transform 0.3s; + transition: transform 0.3s; } #menu-bar i, #menu-bar .icon-button { diff --git a/src/theme/stylus/menu.styl b/src/theme/stylus/menu.styl index faa6eb8bfb..6034e6cde2 100644 --- a/src/theme/stylus/menu.styl +++ b/src/theme/stylus/menu.styl @@ -7,7 +7,7 @@ & > #menu-bar-sticky-container { display: flex flex-wrap: wrap - transition: transform 0.3s, border-bottom-color 0.5s + transition: transform 0.3s } i, .icon-button { From a728e77127a9a05603df9e4ceb818a86ca43b19e Mon Sep 17 00:00:00 2001 From: Matt Ickstadt Date: Tue, 20 Mar 2018 15:18:08 -0500 Subject: [PATCH 7/9] Small CSS improvments - Remove invalid `pointer: cursor` style - Disable transitions for noscript to stop page from spazzing on every load - Add `cursor: pointer` to mark - Disable `cursor: pointer` on noscript menu-title --- src/theme/book.css | 25 +++++++++++++++---------- src/theme/book.js | 3 ++- src/theme/index.hbs | 13 +++---------- src/theme/stylus/menu.styl | 19 ++++++++++++------- src/theme/stylus/page.styl | 4 +++- src/theme/stylus/searchbar.styl | 6 ++++-- src/theme/stylus/sidebar.styl | 4 +++- src/theme/stylus/themes/base.styl | 1 - 8 files changed, 42 insertions(+), 33 deletions(-) diff --git a/src/theme/book.css b/src/theme/book.css index 7a248c763f..69776c7987 100644 --- a/src/theme/book.css +++ b/src/theme/book.css @@ -81,6 +81,8 @@ table thead td { box-sizing: border-box; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; +} +.js .sidebar { -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; -o-transition: -o-transform 0.3s; @@ -140,6 +142,8 @@ table thead td { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; +} +.js .page-wrapper { -webkit-transition: margin-left 0.3s ease, -webkit-transform 0.3s ease; -moz-transition: margin-left 0.3s ease, -moz-transform 0.3s ease; -o-transition: margin-left 0.3s ease, -o-transform 0.3s ease; @@ -205,6 +209,8 @@ table thead td { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; +} +.js #menu-bar > #menu-bar-sticky-container { -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; -o-transition: -o-transform 0.3s; @@ -217,16 +223,13 @@ table thead td { margin: 0 10px; z-index: 10; line-height: 50px; + cursor: pointer; -webkit-transition: color 0.5s; -moz-transition: color 0.5s; -o-transition: color 0.5s; -ms-transition: color 0.5s; transition: color 0.5s; } -#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); @@ -234,6 +237,9 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta -ms-transform: translateY(-60px); transform: translateY(-60px); } +.no-js .left-buttons { + display: none; +} .menu-title { display: inline-block; font-weight: 200; @@ -252,6 +258,8 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; +} +.js .menu-title { cursor: pointer; } .nav-chapters { @@ -363,7 +371,6 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta .light .content .header:link, .light .content .header:visited { color: #333; - pointer: cursor; } .light .content .header:link:hover, .light .content .header:visited:hover { @@ -554,7 +561,6 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta .coal .content .header:link, .coal .content .header:visited { color: #98a3ad; - pointer: cursor; } .coal .content .header:link:hover, .coal .content .header:visited:hover { @@ -745,7 +751,6 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta .navy .content .header:link, .navy .content .header:visited { color: #bcbdd0; - pointer: cursor; } .navy .content .header:link:hover, .navy .content .header:visited:hover { @@ -936,7 +941,6 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta .rust .content .header:link, .rust .content .header:visited { color: #262625; - pointer: cursor; } .rust .content .header:link:hover, .rust .content .header:visited:hover { @@ -1127,7 +1131,6 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta .ayu .content .header:link, .ayu .content .header:visited { color: #c5c5c5; - pointer: cursor; } .ayu .content .header:link:hover, .ayu .content .header:visited:hover { @@ -1401,9 +1404,11 @@ mark { -o-transition: background-color 300ms linear; -ms-transition: background-color 300ms linear; transition: background-color 300ms linear; + cursor: pointer; } -.fade-out { +mark.fade-out { background-color: rgba(0,0,0,0) !important; + cursor: auto; } .searchbar-outer { margin-left: auto; diff --git a/src/theme/book.js b/src/theme/book.js index b0d89f33d2..2b6f1940af 100644 --- a/src/theme/book.js +++ b/src/theme/book.js @@ -349,7 +349,8 @@ function playpen_text(playpen) { try { localStorage.setItem('mdbook-theme', theme); } catch (e) { } - document.body.className = theme; + document.body.classList.remove(previousTheme); + document.body.classList.add(theme); html.classList.remove(previousTheme); html.classList.add(theme); } diff --git a/src/theme/index.hbs b/src/theme/index.hbs index 73033ba6d3..2f118d7706 100644 --- a/src/theme/index.hbs +++ b/src/theme/index.hbs @@ -42,16 +42,8 @@ } - - - + @@ -99,7 +92,7 @@ {{> header}}