actions
/
mdBook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix several theme issues (#648) 

* Don't hide page content when displaying search

* Decrease sidebar animation time

* Fix search key event handler
which wasn't completely de-jqueryified.

* Avoid reflowing page content on small screens
This reduces jank caused by reflowing the page text while animating the
sidebar, and it looks nicer.

* Don't use HTMLParentNode.prepend()
since edge doesn't support it yet

* Don't animate menu border bottom color
since it's the same color as the background, which isn't animated.

* 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

* JS fixes

- Load MathJax async
- Always use local fontawesome and clipboard.js
- Move js class to html element to make theme switching easier

* Give the print button a bit more margin
This commit is contained in:
Matt Ickstadt 2018-04-08 23:10:44 -05:00 committed by Michael Bryan
parent b5ea84c60d
commit f01bf88e69
11 changed files with 159 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/theme/book.css
View File

@ -81,11 +81,13 @@ table thead td {
box-sizing: border-box; box-sizing: border-box;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain; overscroll-behavior-y: contain;
-webkit-transition: -webkit-transform 0.5s; }
-moz-transition: -moz-transform 0.5s; .js .sidebar {
-o-transition: -o-transform 0.5s; -webkit-transition: -webkit-transform 0.3s;
-ms-transition: -ms-transform 0.5s; -moz-transition: -moz-transform 0.3s;
transition: transform 0.5s; -o-transition: -o-transform 0.3s;
-ms-transition: -ms-transform 0.3s;
transition: transform 0.3s;
} }
.sidebar code { .sidebar code {
line-height: 2em; line-height: 2em;
@ -137,42 +139,44 @@ table thead td {
white-space: nowrap; white-space: nowrap;
} }
.page-wrapper { .page-wrapper {
left: 0;
position: absolute;
right: 0;
top: 0;
bottom: 0;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
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; .js .page-wrapper {
-o-transition: padding-left 0.5s, margin-left 0.5s, left 0.5s; -webkit-transition: margin-left 0.3s ease, -webkit-transform 0.3s ease;
-ms-transition: padding-left 0.5s, margin-left 0.5s, left 0.5s; -moz-transition: margin-left 0.3s ease, -moz-transform 0.3s ease;
transition: padding-left 0.5s, margin-left 0.5s, left 0.5s; -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 { .sidebar-visible .page-wrapper {
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 { .page {
outline: 0; outline: 0;
padding: 0 15px; padding: 0 15px;
} }
.content { .content {
position: relative;
top: 0;
bottom: 0;
overflow-y: auto; overflow-y: auto;
right: 0;
left: 0;
padding: 0 15px; padding: 0 15px;
padding-bottom: 50px; padding-bottom: 50px;
} }
.sidebar-visible .content { .content main {
position: absolute;
top: 52px;
}
.content > main {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 750px; max-width: 750px;
@ -205,11 +209,13 @@ table thead td {
-webkit-flex-wrap: wrap; -webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap; -ms-flex-wrap: wrap;
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; .js #menu-bar > #menu-bar-sticky-container {
-o-transition: -o-transform 0.5s, border-bottom-color 0.5s; -webkit-transition: -webkit-transform 0.3s;
-ms-transition: -ms-transform 0.5s, border-bottom-color 0.5s; -moz-transition: -moz-transform 0.3s;
transition: transform 0.5s, border-bottom-color 0.5s; -o-transition: -o-transform 0.3s;
-ms-transition: -ms-transform 0.3s;
transition: transform 0.3s;
} }
#menu-bar i, #menu-bar i,
#menu-bar .icon-button { #menu-bar .icon-button {
@ -217,15 +223,15 @@ table thead td {
margin: 0 10px; margin: 0 10px;
z-index: 10; z-index: 10;
line-height: 50px; line-height: 50px;
cursor: pointer;
-webkit-transition: color 0.5s; -webkit-transition: color 0.5s;
-moz-transition: color 0.5s; -moz-transition: color 0.5s;
-o-transition: color 0.5s; -o-transition: color 0.5s;
-ms-transition: color 0.5s; -ms-transition: color 0.5s;
transition: color 0.5s; transition: color 0.5s;
} }
#menu-bar i:hover, #menu-bar #print-button {
#menu-bar .icon-button:hover { margin: 0 15px;
cursor: pointer;
} }
html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container { html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container {
-webkit-transform: translateY(-60px); -webkit-transform: translateY(-60px);
@ -234,6 +240,9 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
-ms-transform: translateY(-60px); -ms-transform: translateY(-60px);
transform: translateY(-60px); transform: translateY(-60px);
} }
.no-js .left-buttons {
display: none;
}
.menu-title { .menu-title {
display: inline-block; display: inline-block;
font-weight: 200; font-weight: 200;
@ -252,6 +261,8 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
overflow: hidden; overflow: hidden;
-o-text-overflow: ellipsis; -o-text-overflow: ellipsis;
text-overflow: ellipsis; text-overflow: ellipsis;
}
.js .menu-title {
cursor: pointer; cursor: pointer;
} }
.nav-chapters { .nav-chapters {
@ -363,7 +374,6 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
.light .content .header:link, .light .content .header:link,
.light .content .header:visited { .light .content .header:visited {
color: #333; color: #333;
pointer: cursor;
} }
.light .content .header:link:hover, .light .content .header:link:hover,
.light .content .header:visited:hover { .light .content .header:visited:hover {
@ -554,7 +564,6 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
.coal .content .header:link, .coal .content .header:link,
.coal .content .header:visited { .coal .content .header:visited {
color: #98a3ad; color: #98a3ad;
pointer: cursor;
} }
.coal .content .header:link:hover, .coal .content .header:link:hover,
.coal .content .header:visited:hover { .coal .content .header:visited:hover {
@ -745,7 +754,6 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
.navy .content .header:link, .navy .content .header:link,
.navy .content .header:visited { .navy .content .header:visited {
color: #bcbdd0; color: #bcbdd0;
pointer: cursor;
} }
.navy .content .header:link:hover, .navy .content .header:link:hover,
.navy .content .header:visited:hover { .navy .content .header:visited:hover {
@ -936,7 +944,6 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
.rust .content .header:link, .rust .content .header:link,
.rust .content .header:visited { .rust .content .header:visited {
color: #262625; color: #262625;
pointer: cursor;
} }
.rust .content .header:link:hover, .rust .content .header:link:hover,
.rust .content .header:visited:hover { .rust .content .header:visited:hover {
@ -1127,7 +1134,6 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
.ayu .content .header:link, .ayu .content .header:link,
.ayu .content .header:visited { .ayu .content .header:visited {
color: #c5c5c5; color: #c5c5c5;
pointer: cursor;
} }
.ayu .content .header:link:hover, .ayu .content .header:link:hover,
.ayu .content .header:visited:hover { .ayu .content .header:visited:hover {
@ -1401,18 +1407,18 @@ mark {
-o-transition: background-color 300ms linear; -o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear; -ms-transition: background-color 300ms linear;
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; background-color: rgba(0,0,0,0) !important;
cursor: auto;
} }
.searchbar-outer { .searchbar-outer {
display: none;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 750px; max-width: 750px;
} }
#searchbar { #searchbar {
display: block;
width: 100%; width: 100%;
margin: 5px auto 0px auto; margin: 5px auto 0px auto;
padding: 10px 16px; padding: 10px 16px;
@ -1428,7 +1434,6 @@ mark {
padding: 18px 0 0 5px; padding: 18px 0 0 5px;
} }
.searchresults-outer { .searchresults-outer {
display: none;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 750px; max-width: 750px;

17
src/theme/book.js
View File

@ -1,3 +1,5 @@
"use strict";
// Fix back button cache problem // Fix back button cache problem
window.onunload = function () { }; window.onunload = function () { };
@ -55,6 +57,7 @@ function playpen_text(playpen) {
var txt = playpen_text(pre_block); var txt = playpen_text(pre_block);
var re = /extern\s+crate\s+([a-zA-Z_0-9]+)\s*;/g; var re = /extern\s+crate\s+([a-zA-Z_0-9]+)\s*;/g;
var snippet_crates = []; var snippet_crates = [];
var item;
while (item = re.exec(txt)) { while (item = re.exec(txt)) {
snippet_crates.push(item[1]); snippet_crates.push(item[1]);
} }
@ -175,7 +178,7 @@ function playpen_text(playpen) {
buttons.innerHTML = "<button class=\"fa fa-expand\" title=\"Show hidden lines\" aria-label=\"Show hidden lines\"></button>"; buttons.innerHTML = "<button class=\"fa fa-expand\" title=\"Show hidden lines\" aria-label=\"Show hidden lines\"></button>";
// add expand button // add expand button
pre_block.prepend(buttons); pre_block.insertBefore(buttons, pre_block.firstChild);
pre_block.querySelector('.buttons').addEventListener('click', function (e) { pre_block.querySelector('.buttons').addEventListener('click', function (e) {
if (e.target.classList.contains('fa-expand')) { if (e.target.classList.contains('fa-expand')) {
@ -213,7 +216,7 @@ function playpen_text(playpen) {
if (!buttons) { if (!buttons) {
buttons = document.createElement('div'); buttons = document.createElement('div');
buttons.className = 'buttons'; buttons.className = 'buttons';
pre_block.prepend(buttons); pre_block.insertBefore(buttons, pre_block.firstChild);
} }
var clipButton = document.createElement('button'); var clipButton = document.createElement('button');
@ -222,7 +225,7 @@ function playpen_text(playpen) {
clipButton.setAttribute('aria-label', clipButton.title); clipButton.setAttribute('aria-label', clipButton.title);
clipButton.innerHTML = '<i class=\"tooltiptext\"></i>'; clipButton.innerHTML = '<i class=\"tooltiptext\"></i>';
buttons.prepend(clipButton); buttons.insertBefore(clipButton, buttons.firstChild);
} }
}); });
@ -233,7 +236,7 @@ function playpen_text(playpen) {
if (!buttons) { if (!buttons) {
buttons = document.createElement('div'); buttons = document.createElement('div');
buttons.className = 'buttons'; buttons.className = 'buttons';
pre_block.prepend(buttons); pre_block.insertBefore(buttons, pre_block.firstChild);
} }
var runCodeButton = document.createElement('button'); var runCodeButton = document.createElement('button');
@ -248,8 +251,8 @@ function playpen_text(playpen) {
copyCodeClipboardButton.title = 'Copy to clipboard'; copyCodeClipboardButton.title = 'Copy to clipboard';
copyCodeClipboardButton.setAttribute('aria-label', copyCodeClipboardButton.title); copyCodeClipboardButton.setAttribute('aria-label', copyCodeClipboardButton.title);
buttons.prepend(runCodeButton); buttons.insertBefore(runCodeButton, buttons.firstChild);
buttons.prepend(copyCodeClipboardButton); buttons.insertBefore(copyCodeClipboardButton, buttons.firstChild);
runCodeButton.addEventListener('click', function (e) { runCodeButton.addEventListener('click', function (e) {
run_rust_code(pre_block); run_rust_code(pre_block);
@ -262,7 +265,7 @@ function playpen_text(playpen) {
undoChangesButton.title = 'Undo changes'; undoChangesButton.title = 'Undo changes';
undoChangesButton.setAttribute('aria-label', undoChangesButton.title); undoChangesButton.setAttribute('aria-label', undoChangesButton.title);
buttons.prepend(undoChangesButton); buttons.insertBefore(undoChangesButton, buttons.firstChild);
undoChangesButton.addEventListener('click', function () { undoChangesButton.addEventListener('click', function () {
let editor = window.ace.edit(code_block); let editor = window.ace.edit(code_block);

71
src/theme/index.hbs
View File

@ -1,5 +1,5 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html lang="{{ language }}" class="sidebar-visible"> <html lang="{{ language }}" class="sidebar-visible no-js">
<head> <head>
<!-- Book generated using mdBook --> <!-- Book generated using mdBook -->
<meta charset="UTF-8"> <meta charset="UTF-8">
@ -18,38 +18,22 @@
<link rel="shortcut icon" href="{{ favicon }}"> <link rel="shortcut icon" href="{{ favicon }}">
<!-- Font Awesome --> <!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="_FontAwesome/css/font-awesome.css">
<link rel="stylesheet" href="highlight.css"> <link rel="stylesheet" href="highlight.css">
<link rel="stylesheet" href="tomorrow-night.css"> <link rel="stylesheet" href="tomorrow-night.css">
<link rel="stylesheet" href="ayu-highlight.css"> <link rel="stylesheet" href="ayu-highlight.css">
<!-- Custom theme --> <!-- Custom theme stylesheets -->
{{#each additional_css}} {{#each additional_css}}
<link rel="stylesheet" href="{{this}}"> <link rel="stylesheet" href="{{this}}">
{{/each}} {{/each}}
{{#if mathjax_support}} {{#if mathjax_support}}
<!-- MathJax --> <!-- MathJax -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> <script async type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
{{/if}} {{/if}}
<!-- Fetch Clipboard.js from CDN but have a local fallback -->
<script src="https://cdn.jsdelivr.net/clipboard.js/1.6.1/clipboard.min.js"></script>
<script>
if (typeof Clipboard == 'undefined') {
document.write(unescape("%3Cscript src='clipboard.min.js'%3E%3C/script%3E"));
}
</script>
<noscript>
<style type="text/css">
.javascript-only {
display: none;
}
</style>
</noscript>
</head> </head>
<body class="light"> <body class="light">
<!-- Work around some values being stored in localStorage wrapped in quotes --> <!-- Work around some values being stored in localStorage wrapped in quotes -->
@ -74,7 +58,7 @@
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { } try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
if (theme === null || theme === undefined) { theme = 'light'; } if (theme === null || theme === undefined) { theme = 'light'; }
document.body.className = theme; document.body.className = theme;
document.querySelector('html').className = theme; document.querySelector('html').className = theme + ' js';
</script> </script>
<!-- Hide / unhide sidebar before it is displayed --> <!-- Hide / unhide sidebar before it is displayed -->
@ -99,7 +83,7 @@
{{> header}} {{> header}}
<div id="menu-bar" class="menu-bar"> <div id="menu-bar" class="menu-bar">
<div id="menu-bar-sticky-container"> <div id="menu-bar-sticky-container">
<div class="left-buttons javascript-only"> <div class="left-buttons">
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar"> <button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
<i class="fa fa-bars"></i> <i class="fa fa-bars"></i>
</button> </button>
@ -131,14 +115,16 @@
</div> </div>
{{#if search_enabled}} {{#if search_enabled}}
<div id="search-wrapper" class="hidden">
<div id="searchbar-outer" class="searchbar-outer"> <div id="searchbar-outer" class="searchbar-outer">
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header"> <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
</div> </div>
<div id="searchresults-outer" class="searchresults-outer"> <div id="searchresults-outer" class="searchresults-outer hidden">
<div class="searchresults-header" id="searchresults-header"></div> <div id="searchresults-header" class="searchresults-header"></div>
<ul id="searchresults"> <ul id="searchresults">
</ul> </ul>
</div> </div>
</div>
{{/if}} {{/if}}
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM --> <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
@ -190,18 +176,6 @@
</div> </div>
<!-- Local fallback for Font Awesome -->
<script>
if (getComputedStyle(document.querySelector(".fa")).fontFamily !== "FontAwesome") {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = '_FontAwesome/css/font-awesome.css';
document.head.insertBefore(link, document.head.firstChild)
}
</script>
{{#if livereload}} {{#if livereload}}
<!-- Livereload script (if served using the cli tool) --> <!-- Livereload script (if served using the cli tool) -->
<script type="text/javascript"> <script type="text/javascript">
@ -221,7 +195,7 @@
{{#if google_analytics}} {{#if google_analytics}}
<!-- Google Analytics Tag --> <!-- Google Analytics Tag -->
<script> <script type="text/javascript">
var localAddrs = ["localhost", "127.0.0.1", ""]; var localAddrs = ["localhost", "127.0.0.1", ""];
// make sure we don't activate google analytics if the developer is // make sure we don't activate google analytics if the developer is
@ -238,6 +212,14 @@
</script> </script>
{{/if}} {{/if}}
{{#if is_print}}
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
window.print();
})
</script>
{{/if}}
{{#if playpen_js}} {{#if playpen_js}}
<script src="ace.js" type="text/javascript" charset="utf-8"></script> <script src="ace.js" type="text/javascript" charset="utf-8"></script>
<script src="editor.js" type="text/javascript" charset="utf-8"></script> <script src="editor.js" type="text/javascript" charset="utf-8"></script>
@ -255,18 +237,11 @@
<script src="searcher.js" type="text/javascript" charset="utf-8"></script> <script src="searcher.js" type="text/javascript" charset="utf-8"></script>
{{/if}} {{/if}}
{{#if is_print}} <script src="clipboard.min.js" type="text/javascript" charset="utf-8"></script>
<script> <script src="highlight.js" type="text/javascript" charset="utf-8"></script>
document.addEventListener('DOMContentLoaded', function() { <script src="book.js" type="text/javascript" charset="utf-8"></script>
window.print();
})
</script>
{{/if}}
<script src="highlight.js"></script> <!-- Custom JS scripts -->
<script src="book.js"></script>
<!-- Custom JS script -->
{{#each additional_js}} {{#each additional_js}}
<script type="text/javascript" src="{{this}}"></script> <script type="text/javascript" src="{{this}}"></script>
{{/each}} {{/each}}

1
src/theme/playpen_editor/editor.js
View File

@ -1,3 +1,4 @@
"use strict";
window.editors = []; window.editors = [];
(function(editors) { (function(editors) {
if (typeof(ace) === 'undefined' || !ace) { if (typeof(ace) === 'undefined' || !ace) {

84
src/theme/searcher/searcher.js
View File

@ -1,3 +1,4 @@
"use strict";
window.search = window.search || {}; window.search = window.search || {};
(function search(search) { (function search(search) {
// Search functionality // Search functionality
@ -9,7 +10,8 @@ window.search = window.search || {};
return; return;
} }
var searchbar = document.getElementById('searchbar'), var search_wrap = document.getElementById('search-wrapper'),
searchbar = document.getElementById('searchbar'),
searchbar_outer = document.getElementById('searchbar-outer'), searchbar_outer = document.getElementById('searchbar-outer'),
searchresults = document.getElementById('searchresults'), searchresults = document.getElementById('searchresults'),
searchresults_outer = document.getElementById('searchresults-outer'), searchresults_outer = document.getElementById('searchresults-outer'),
@ -299,92 +301,82 @@ window.search = window.search || {};
function globalKeyHandler(e) { function globalKeyHandler(e) {
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || e.target.type === 'textarea') { return; } 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(); e.preventDefault();
searchbar.classList.remove("active"); searchbar.classList.remove("active");
setSearchUrlParameters("", setSearchUrlParameters("",
(searchbar.value.trim() != "") ? "push" : "replace"); (searchbar.value.trim() !== "") ? "push" : "replace");
if (hasFocus()) { if (hasFocus()) {
unfocusSearchbar(); unfocusSearchbar();
} }
showSearch(false); showSearch(false);
marker.unmark(); marker.unmark();
return; } else if (!hasFocus() && e.keyCode === SEARCH_HOTKEY_KEYCODE) {
}
if (!hasFocus() && e.keyCode == SEARCH_HOTKEY_KEYCODE) {
e.preventDefault(); e.preventDefault();
showSearch(true); showSearch(true);
window.scrollTo(0, 0); window.scrollTo(0, 0);
searchbar.focus(); searchbar.select();
return; } else if (hasFocus() && e.keyCode === DOWN_KEYCODE) {
}
if (hasFocus() && e.keyCode == DOWN_KEYCODE) {
e.preventDefault(); e.preventDefault();
unfocusSearchbar(); unfocusSearchbar();
searchresults.children('li').first().classList.add("focus"); searchresults.firstElementChild.classList.add("focus");
return; } else if (!hasFocus() && (e.keyCode === DOWN_KEYCODE
} || e.keyCode === UP_KEYCODE
if (!hasFocus() && (e.keyCode == DOWN_KEYCODE || e.keyCode === SELECT_KEYCODE)) {
|| e.keyCode == UP_KEYCODE
|| e.keyCode == SELECT_KEYCODE)) {
// not `:focus` because browser does annoying scrolling // not `:focus` because browser does annoying scrolling
var current_focus = search.searchresults.find("li.focus"); var focused = searchresults.querySelector("li.focus");
if (current_focus.length == 0) return; if (!focused) return;
e.preventDefault(); e.preventDefault();
if (e.keyCode == DOWN_KEYCODE) { if (e.keyCode === DOWN_KEYCODE) {
var next = current_focus.next() var next = focused.nextElementSibling;
if (next.length > 0) { if (next) {
current_focus.classList.remove("focus"); focused.classList.remove("focus");
next.classList.add("focus"); next.classList.add("focus");
} }
} else if (e.keyCode == UP_KEYCODE) { } else if (e.keyCode === UP_KEYCODE) {
current_focus.classList.remove("focus"); focused.classList.remove("focus");
var prev = current_focus.prev(); var prev = focused.previousElementSibling;
if (prev.length == 0) { if (prev) {
searchbar.focus();
} else {
prev.classList.add("focus"); prev.classList.add("focus");
}
} else { } else {
window.location = current_focus.children('a').attr('href'); searchbar.select();
}
} else { // SELECT_KEYCODE
window.location.assign(focused.querySelector('a'));
} }
} }
} }
function showSearch(yes) { function showSearch(yes) {
if (yes) { if (yes) {
searchbar_outer.style.display = 'block'; search_wrap.classList.remove('hidden');
content.style.display = 'none';
searchicon.setAttribute('aria-expanded', 'true'); searchicon.setAttribute('aria-expanded', 'true');
} else { } else {
content.style.display = 'block'; search_wrap.classList.add('hidden');
searchbar_outer.style.display = 'none';
searchresults_outer.style.display = 'none';
searchbar.value = '';
removeChildren(searchresults);
searchicon.setAttribute('aria-expanded', 'false'); searchicon.setAttribute('aria-expanded', 'false');
var results = searchresults.children;
for (var i = 0; i < results.length; i++) {
results[i].classList.remove("focus");
}
} }
} }
function showResults(yes) { function showResults(yes) {
if (yes) { if (yes) {
searchbar_outer.style.display = 'block'; searchresults_outer.classList.remove('hidden');
content.style.display = 'none';
searchresults_outer.style.display = 'block';
} else { } else {
content.style.display = 'block'; searchresults_outer.classList.add('hidden');
searchresults_outer.style.display = 'none';
} }
} }
// Eventhandler for search icon // Eventhandler for search icon
function searchIconClickHandler() { function searchIconClickHandler() {
if (searchbar_outer.style.display === 'block') { if (search_wrap.classList.contains('hidden')) {
showSearch(false);
} else {
showSearch(true); showSearch(true);
window.scrollTo(0, 0); window.scrollTo(0, 0);
searchbar.focus(); searchbar.select();
} else {
showSearch(false);
} }
} }

21
src/theme/stylus/menu.styl
View File

@ -7,7 +7,9 @@
& > #menu-bar-sticky-container { & > #menu-bar-sticky-container {
display: flex display: flex
flex-wrap: wrap flex-wrap: wrap
transition: transform 0.5s, border-bottom-color 0.5s .js & {
transition: transform 0.3s
}
} }
i, .icon-button { i, .icon-button {
@ -15,18 +17,23 @@
margin: 0 10px margin: 0 10px
z-index: 10 z-index: 10
line-height: 50px line-height: 50px
cursor: pointer
transition: color 0.5s transition: color 0.5s
&:hover { cursor: pointer }
}
} }
#print-button {
margin: 0 15px
}
}
html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container { html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container {
transform: translateY(-60px); transform: translateY(-60px);
} }
.no-js .left-buttons {
display: none
}
.menu-title { .menu-title {
display: inline-block display: inline-block
font-weight: 200 font-weight: 200
@ -38,5 +45,7 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
white-space: nowrap white-space: nowrap
overflow: hidden overflow: hidden
text-overflow: ellipsis text-overflow: ellipsis
cursor: pointer; .js & {
cursor: pointer
}
} }

26
src/theme/stylus/page.styl
View File

@ -2,18 +2,20 @@
.page-wrapper { .page-wrapper {
box-sizing: border-box box-sizing: border-box
left: 0
position: absolute
right: 0
top: 0
bottom: 0
// Animation: slide away // Animation: slide away
transition: padding-left 0.5s, margin-left 0.5s, left 0.5s .js & {
transition: margin-left 0.3s ease, transform 0.3s ease
}
} }
.sidebar-visible .page-wrapper { .sidebar-visible .page-wrapper {
left: $sidebar-width transform: translateX($sidebar-width)
@media only screen and (min-width: $sidebar-reflow-width) {
transform: none
margin-left: $sidebar-width
}
} }
.page { .page {
@ -22,12 +24,7 @@
} }
.content { .content {
position: relative
top: 0
bottom: 0
overflow-y: auto overflow-y: auto
right: 0
left: 0
padding: 0 15px padding: 0 15px
padding-bottom: 50px padding-bottom: 50px
@ -44,8 +41,3 @@
img { max-width: 100%; } img { max-width: 100%; }
} }
.sidebar-visible .content {
position: absolute
top: 52px
}

9
src/theme/stylus/searchbar.styl
View File

@ -9,21 +9,21 @@ mark {
padding: 0 3px 1px 3px; padding: 0 3px 1px 3px;
margin: 0 -3px -1px -3px; margin: 0 -3px -1px -3px;
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 background-color: rgba(0,0,0,0) !important;
cursor: auto;
} }
.searchbar-outer { .searchbar-outer {
display: none;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: $content-max-width; max-width: $content-max-width;
} }
#searchbar { #searchbar {
display: block;
width: 100%; width: 100%;
margin: 5px auto 0px auto; margin: 5px auto 0px auto;
padding: 10px 16px; padding: 10px 16px;
@ -37,7 +37,6 @@ mark {
} }
.searchresults-outer { .searchresults-outer {
display: none;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: $content-max-width; max-width: $content-max-width;

4
src/theme/stylus/sidebar.styl
View File

@ -14,7 +14,9 @@
overscroll-behavior-y: contain; overscroll-behavior-y: contain;
// Animation: slide away // Animation: slide away
transition: transform 0.5s .js & {
transition: transform 0.3s
}
code { code {
line-height: 2em; line-height: 2em;

1
src/theme/stylus/themes/base.styl
View File

@ -5,7 +5,6 @@
.content .header:link, .content .header:visited { .content .header:link, .content .header:visited {
color: $fg; color: $fg;
pointer: cursor;
&:hover { &:hover {
text-decoration: none; text-decoration: none;

2
src/theme/stylus/variables.styl
View File

@ -1,4 +1,6 @@
$sidebar-width = 300px $sidebar-width = 300px
$page-padding = 15px $page-padding = 15px
$content-max-width = 750px $content-max-width = 750px
$content-min-width = 320px
$page-plus-sidebar-width = $content-max-width + $sidebar-width + $page-padding * 2 $page-plus-sidebar-width = $content-max-width + $sidebar-width + $page-padding * 2
$sidebar-reflow-width = $sidebar-width + $content-min-width