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

View File

@ -1,7 +1,6 @@
html { html {
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
color: #333; color: #333;
overflow-x: hidden;
} }
body { body {
margin: 0; margin: 0;
@ -144,8 +143,12 @@ table thead td {
.content img { .content img {
max-width: 100%; max-width: 100%;
} }
.menu-bar { #menu-bar {
position: relative; position: sticky;
top: 0;
z-index: 101;
}
#menu-bar > #menu-bar-sticky-container {
display: -webkit-box; display: -webkit-box;
display: -moz-box; display: -moz-box;
display: -webkit-flex; display: -webkit-flex;
@ -158,9 +161,14 @@ 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;
-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 i,
.menu-bar .icon-button { #menu-bar .icon-button {
position: relative; position: relative;
margin: 0 10px; margin: 0 10px;
z-index: 10; z-index: 10;
@ -171,10 +179,17 @@ table thead td {
-ms-transition: color 0.5s; -ms-transition: color 0.5s;
transition: color 0.5s; transition: color 0.5s;
} }
.menu-bar i:hover, #menu-bar i:hover,
.menu-bar .icon-button:hover { #menu-bar .icon-button:hover {
cursor: pointer; 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 { .menu-title {
display: inline-block; display: inline-block;
font-weight: 200; font-weight: 200;
@ -193,19 +208,6 @@ table thead td {
overflow: hidden; overflow: hidden;
-o-text-overflow: ellipsis; -o-text-overflow: ellipsis;
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 { .nav-chapters {
font-size: 2.5em; font-size: 2.5em;
@ -321,6 +323,18 @@ table thead td {
.light .content .header:visited:hover { .light .content .header:visited:hover {
text-decoration: none; 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 { .light .sidebar {
background-color: #fafafa; background-color: #fafafa;
color: #364149; color: #364149;
@ -463,6 +477,18 @@ table thead td {
.coal .content .header:visited:hover { .coal .content .header:visited:hover {
text-decoration: none; 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 { .coal .sidebar {
background-color: #292c2f; background-color: #292c2f;
color: #a1adb8; color: #a1adb8;
@ -605,6 +631,18 @@ table thead td {
.navy .content .header:visited:hover { .navy .content .header:visited:hover {
text-decoration: none; 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 { .navy .sidebar {
background-color: #282d3f; background-color: #282d3f;
color: #c8c9db; color: #c8c9db;
@ -747,6 +785,18 @@ table thead td {
.rust .content .header:visited:hover { .rust .content .header:visited:hover {
text-decoration: none; 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 { .rust .sidebar {
background-color: #3b2e2a; background-color: #3b2e2a;
color: #c8c9db; color: #c8c9db;
@ -889,6 +939,18 @@ table thead td {
.ayu .content .header:visited:hover { .ayu .content .header:visited:hover {
text-decoration: none; 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 { .ayu .sidebar {
background-color: #14191f; background-color: #14191f;
color: #c8c9db; color: #c8c9db;

View File

@ -1,4 +1,4 @@
var html, sidebar, sidebarLinks, sidebarToggleButton; var html, sidebar, sidebarLinks, sidebarToggleButton, themeToggleButton, themePopup;
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
@ -77,8 +77,8 @@ document.addEventListener('DOMContentLoaded', function() {
sidebar = document.getElementById("sidebar"); sidebar = document.getElementById("sidebar");
sidebarLinks = document.querySelectorAll('#sidebar a'); sidebarLinks = document.querySelectorAll('#sidebar a');
sidebarToggleButton = document.getElementById("sidebar-toggle"); sidebarToggleButton = document.getElementById("sidebar-toggle");
var themeToggleButton = document.getElementById('theme-toggle'); themeToggleButton = document.getElementById('theme-toggle');
var themePopup = document.getElementById('theme-list'); themePopup = document.getElementById('theme-list');
// Toggle sidebar // Toggle sidebar
sidebarToggleButton.addEventListener('click', sidebarToggle); 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 // Theme button
themeToggleButton.addEventListener('click', function(){ themeToggleButton.addEventListener('click', function(){
if (themePopup.style.display === 'block') { 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() { function showSidebar() {
html.classList.remove('sidebar-hidden') html.classList.remove('sidebar-hidden')
html.classList.add('sidebar-visible'); 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; }) .then(function(response) { result_block.innerText = response.success ? response.stdout : response.stderr; })
.catch(function(error) { result_block.innerText = "Playground communication" + error.message; }); .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 });
})();

View File

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

View File

@ -1,13 +1,12 @@
html { html {
font-family: "Open Sans", sans-serif font-family: "Open Sans", sans-serif
color: #333 color: #333
overflow-x: hidden
} }
body { body {
margin: 0; margin: 0;
font-size: 1rem; font-size: 1rem;
overflow-x: hidden overflow-x: hidden;
} }
code { code {

View File

@ -1,7 +1,13 @@
.menu-bar { #menu-bar {
position: relative position: sticky
display: flex top: 0
flex-wrap: wrap z-index: 101
& > #menu-bar-sticky-container {
display: flex
flex-wrap: wrap
transition: transform 0.5s, border-bottom-color 0.5s
}
i, .icon-button { i, .icon-button {
position: relative position: relative
@ -15,6 +21,11 @@
} }
} }
html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container {
transform: translateY(-60px);
}
.menu-title { .menu-title {
display: inline-block display: inline-block
font-weight: 200 font-weight: 200
@ -26,11 +37,4 @@
white-space: nowrap white-space: nowrap
overflow: hidden overflow: hidden
text-overflow: ellipsis text-overflow: ellipsis
opacity: 0
transition: opacity 0.5s ease-in-out
}
.menu-bar:hover .menu-title {
opacity: 1
} }

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 { .sidebar {
background-color: $sidebar-bg background-color: $sidebar-bg
color: $sidebar-fg color: $sidebar-fg