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

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
This commit is contained in:
Sorin Davidoi 2018-01-19 16:41:50 +01:00 committed by Michael Bryan
parent fa84da0856
commit 80f42675d6
6 changed files with 176 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/theme/book.css
View File

@ -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;

52
src/theme/book.js
View File

@ -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 });
})();

42
src/theme/index.hbs
View File

@ -70,28 +70,30 @@
<div class="page">
{{> header}}
<div id="menu-bar" class="menu-bar">
<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>
</button>
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
<i class="fa fa-paint-brush"></i>
</button>
<ul id="theme-list" class="theme-popup" aria-label="submenu">
<li><button class="theme" id="light">Light <span class="default">(default)</span></button></li>
<li><button class="theme" id="rust">Rust</button></li>
<li><button class="theme" id="coal">Coal</button></li>
<li><button class="theme" id="navy">Navy</button></li>
<li><button class="theme" id="ayu">Ayu</button></li>
</ul>
</div>
<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>
</button>
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
<i class="fa fa-paint-brush"></i>
</button>
<ul id="theme-list" class="theme-popup" aria-label="submenu">
<li><button class="theme" id="light">Light <span class="default">(default)</span></button></li>
<li><button class="theme" id="rust">Rust</button></li>
<li><button class="theme" id="coal">Coal</button></li>
<li><button class="theme" id="navy">Navy</button></li>
<li><button class="theme" id="ayu">Ayu</button></li>
</ul>
</div>
<h1 class="menu-title">{{ book_title }}</h1>
<h1 class="menu-title">{{ book_title }}</h1>
<div class="right-buttons">
<a href="print.html" title="Print this book">
<i id="print-button" class="fa fa-print"></i>
</a>
<div class="right-buttons">
<a href="print.html" title="Print this book">
<i id="print-button" class="fa fa-print"></i>
</a>
</div>
</div>
</div>

3
src/theme/stylus/general.styl
View File

@ -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 {

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

@ -1,7 +1,13 @@
.menu-bar {
position: relative
display: flex
flex-wrap: wrap
#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
}

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

@ -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