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:
parent
fa84da0856
commit
80f42675d6
|
@ -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;
|
||||||
|
|
|
@ -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 });
|
||||||
|
})();
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue