Skip to content

Commit 80f4267

Browse files
sorin-davidoiMichael-F-Bryan
sorin-davidoi
authored and
Michael-F-Bryan
committed
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
1 parent fa84da0 commit 80f4267

File tree

6 files changed

+179
-69
lines changed

6 files changed

+179
-69
lines changed

‎src/theme/book.css

Lines changed: 83 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
html {
22
font-family: "Open Sans", sans-serif;
33
color: #333;
4-
overflow-x: hidden;
54
}
65
body {
76
margin: 0;
@@ -144,8 +143,12 @@ table thead td {
144143
.content img {
145144
max-width: 100%;
146145
}
147-
.menu-bar {
148-
position: relative;
146+
#menu-bar {
147+
position: sticky;
148+
top: 0;
149+
z-index: 101;
150+
}
151+
#menu-bar > #menu-bar-sticky-container {
149152
display: -webkit-box;
150153
display: -moz-box;
151154
display: -webkit-flex;
@@ -158,9 +161,14 @@ table thead td {
158161
-webkit-flex-wrap: wrap;
159162
-ms-flex-wrap: wrap;
160163
flex-wrap: wrap;
161-
}
162-
.menu-bar i,
163-
.menu-bar .icon-button {
164+
-webkit-transition: -webkit-transform 0.5s, border-bottom-color 0.5s;
165+
-moz-transition: -moz-transform 0.5s, border-bottom-color 0.5s;
166+
-o-transition: -o-transform 0.5s, border-bottom-color 0.5s;
167+
-ms-transition: -ms-transform 0.5s, border-bottom-color 0.5s;
168+
transition: transform 0.5s, border-bottom-color 0.5s;
169+
}
170+
#menu-bar i,
171+
#menu-bar .icon-button {
164172
position: relative;
165173
margin: 0 10px;
166174
z-index: 10;
@@ -171,10 +179,17 @@ table thead td {
171179
-ms-transition: color 0.5s;
172180
transition: color 0.5s;
173181
}
174-
.menu-bar i:hover,
175-
.menu-bar .icon-button:hover {
182+
#menu-bar i:hover,
183+
#menu-bar .icon-button:hover {
176184
cursor: pointer;
177185
}
186+
html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container {
187+
-webkit-transform: translateY(-60px);
188+
-moz-transform: translateY(-60px);
189+
-o-transform: translateY(-60px);
190+
-ms-transform: translateY(-60px);
191+
transform: translateY(-60px);
192+
}
178193
.menu-title {
179194
display: inline-block;
180195
font-weight: 200;
@@ -193,19 +208,6 @@ table thead td {
193208
overflow: hidden;
194209
-o-text-overflow: ellipsis;
195210
text-overflow: ellipsis;
196-
opacity: 0;
197-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
198-
filter: alpha(opacity=0);
199-
-webkit-transition: opacity 0.5s ease-in-out;
200-
-moz-transition: opacity 0.5s ease-in-out;
201-
-o-transition: opacity 0.5s ease-in-out;
202-
-ms-transition: opacity 0.5s ease-in-out;
203-
transition: opacity 0.5s ease-in-out;
204-
}
205-
.menu-bar:hover .menu-title {
206-
opacity: 1;
207-
-ms-filter: none;
208-
filter: none;
209211
}
210212
.nav-chapters {
211213
font-size: 2.5em;
@@ -321,6 +323,18 @@ table thead td {
321323
.light .content .header:visited:hover {
322324
text-decoration: none;
323325
}
326+
.light .menu-bar {
327+
margin: auto -15px;
328+
}
329+
.light .menu-bar > #menu-bar-sticky-container {
330+
background-color: #fff;
331+
border-bottom-color: #fff;
332+
border-bottom-width: 1px;
333+
border-bottom-style: solid;
334+
}
335+
.light .menu-bar.bordered > #menu-bar-sticky-container {
336+
border-bottom-color: #f2f2f2;
337+
}
324338
.light .sidebar {
325339
background-color: #fafafa;
326340
color: #364149;
@@ -463,6 +477,18 @@ table thead td {
463477
.coal .content .header:visited:hover {
464478
text-decoration: none;
465479
}
480+
.coal .menu-bar {
481+
margin: auto -15px;
482+
}
483+
.coal .menu-bar > #menu-bar-sticky-container {
484+
background-color: #141617;
485+
border-bottom-color: #141617;
486+
border-bottom-width: 1px;
487+
border-bottom-style: solid;
488+
}
489+
.coal .menu-bar.bordered > #menu-bar-sticky-container {
490+
border-bottom-color: #1f2223;
491+
}
466492
.coal .sidebar {
467493
background-color: #292c2f;
468494
color: #a1adb8;
@@ -605,6 +631,18 @@ table thead td {
605631
.navy .content .header:visited:hover {
606632
text-decoration: none;
607633
}
634+
.navy .menu-bar {
635+
margin: auto -15px;
636+
}
637+
.navy .menu-bar > #menu-bar-sticky-container {
638+
background-color: #161923;
639+
border-bottom-color: #161923;
640+
border-bottom-width: 1px;
641+
border-bottom-style: solid;
642+
}
643+
.navy .menu-bar.bordered > #menu-bar-sticky-container {
644+
border-bottom-color: #1f2331;
645+
}
608646
.navy .sidebar {
609647
background-color: #282d3f;
610648
color: #c8c9db;
@@ -747,6 +785,18 @@ table thead td {
747785
.rust .content .header:visited:hover {
748786
text-decoration: none;
749787
}
788+
.rust .menu-bar {
789+
margin: auto -15px;
790+
}
791+
.rust .menu-bar > #menu-bar-sticky-container {
792+
background-color: #e1e1db;
793+
border-bottom-color: #e1e1db;
794+
border-bottom-width: 1px;
795+
border-bottom-style: solid;
796+
}
797+
.rust .menu-bar.bordered > #menu-bar-sticky-container {
798+
border-bottom-color: #d7d7cf;
799+
}
750800
.rust .sidebar {
751801
background-color: #3b2e2a;
752802
color: #c8c9db;
@@ -889,6 +939,18 @@ table thead td {
889939
.ayu .content .header:visited:hover {
890940
text-decoration: none;
891941
}
942+
.ayu .menu-bar {
943+
margin: auto -15px;
944+
}
945+
.ayu .menu-bar > #menu-bar-sticky-container {
946+
background-color: #0f1419;
947+
border-bottom-color: #0f1419;
948+
border-bottom-width: 1px;
949+
border-bottom-style: solid;
950+
}
951+
.ayu .menu-bar.bordered > #menu-bar-sticky-container {
952+
border-bottom-color: #182028;
953+
}
892954
.ayu .sidebar {
893955
background-color: #14191f;
894956
color: #c8c9db;

‎src/theme/book.js

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
var html, sidebar, sidebarLinks, sidebarToggleButton;
1+
var html, sidebar, sidebarLinks, sidebarToggleButton, themeToggleButton, themePopup;
22

33
document.addEventListener('DOMContentLoaded', function() {
44

@@ -77,8 +77,8 @@ document.addEventListener('DOMContentLoaded', function() {
7777
sidebar = document.getElementById("sidebar");
7878
sidebarLinks = document.querySelectorAll('#sidebar a');
7979
sidebarToggleButton = document.getElementById("sidebar-toggle");
80-
var themeToggleButton = document.getElementById('theme-toggle');
81-
var themePopup = document.getElementById('theme-list');
80+
themeToggleButton = document.getElementById('theme-toggle');
81+
themePopup = document.getElementById('theme-list');
8282

8383
// Toggle sidebar
8484
sidebarToggleButton.addEventListener('click', sidebarToggle);
@@ -116,16 +116,6 @@ document.addEventListener('DOMContentLoaded', function() {
116116
}
117117
});
118118

119-
function showThemes() {
120-
themePopup.style.display = 'block';
121-
themeToggleButton.setAttribute('aria-expanded', true);
122-
}
123-
124-
function hideThemes() {
125-
themePopup.style.display = 'none';
126-
themeToggleButton.setAttribute('aria-expanded', false);
127-
}
128-
129119
// Theme button
130120
themeToggleButton.addEventListener('click', function(){
131121
if (themePopup.style.display === 'block') {
@@ -440,6 +430,16 @@ function sidebarToggle() {
440430
}
441431
}
442432

433+
function showThemes() {
434+
themePopup.style.display = 'block';
435+
themeToggleButton.setAttribute('aria-expanded', true);
436+
}
437+
438+
function hideThemes() {
439+
themePopup.style.display = 'none';
440+
themeToggleButton.setAttribute('aria-expanded', false);
441+
}
442+
443443
function showSidebar() {
444444
html.classList.remove('sidebar-hidden')
445445
html.classList.add('sidebar-visible');
@@ -501,3 +501,29 @@ function run_rust_code(code_block) {
501501
.then(function(response) { result_block.innerText = response.success ? response.stdout : response.stderr; })
502502
.catch(function(error) { result_block.innerText = "Playground communication" + error.message; });
503503
}
504+
505+
(function autoHideMenu() {
506+
var scrollingContainer = document.querySelector('html');
507+
var menu = document.getElementById('menu-bar');
508+
509+
var previousScrollTop = scrollingContainer.scrollTop;
510+
511+
document.addEventListener('scroll', function() {
512+
if (menu.classList.contains('folded') && scrollingContainer.scrollTop < previousScrollTop) {
513+
menu.classList.remove('folded');
514+
} else if (!menu.classList.contains('folded') && scrollingContainer.scrollTop > previousScrollTop) {
515+
menu.classList.add('folded');
516+
}
517+
518+
if (!menu.classList.contains('bordered') && scrollingContainer.scrollTop > 0) {
519+
menu.classList.add('bordered');
520+
}
521+
522+
if (menu.classList.contains('bordered') && scrollingContainer.scrollTop === 0) {
523+
menu.classList.remove('bordered');
524+
}
525+
526+
previousScrollTop = scrollingContainer.scrollTop;
527+
hideThemes();
528+
}, { passive: true });
529+
})();

‎src/theme/index.hbs

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -70,28 +70,30 @@
7070
<div class="page">
7171
{{> header}}
7272
<div id="menu-bar" class="menu-bar">
73-
<div class="left-buttons">
74-
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-controls="sidebar">
75-
<i class="fa fa-bars"></i>
76-
</button>
77-
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
78-
<i class="fa fa-paint-brush"></i>
79-
</button>
80-
<ul id="theme-list" class="theme-popup" aria-label="submenu">
81-
<li><button class="theme" id="light">Light <span class="default">(default)</span></button></li>
82-
<li><button class="theme" id="rust">Rust</button></li>
83-
<li><button class="theme" id="coal">Coal</button></li>
84-
<li><button class="theme" id="navy">Navy</button></li>
85-
<li><button class="theme" id="ayu">Ayu</button></li>
86-
</ul>
87-
</div>
88-
89-
<h1 class="menu-title">{{ book_title }}</h1>
90-
91-
<div class="right-buttons">
92-
<a href="print.html" title="Print this book">
93-
<i id="print-button" class="fa fa-print"></i>
94-
</a>
73+
<div id="menu-bar-sticky-container">
74+
<div class="left-buttons">
75+
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-controls="sidebar">
76+
<i class="fa fa-bars"></i>
77+
</button>
78+
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
79+
<i class="fa fa-paint-brush"></i>
80+
</button>
81+
<ul id="theme-list" class="theme-popup" aria-label="submenu">
82+
<li><button class="theme" id="light">Light <span class="default">(default)</span></button></li>
83+
<li><button class="theme" id="rust">Rust</button></li>
84+
<li><button class="theme" id="coal">Coal</button></li>
85+
<li><button class="theme" id="navy">Navy</button></li>
86+
<li><button class="theme" id="ayu">Ayu</button></li>
87+
</ul>
88+
</div>
89+
90+
<h1 class="menu-title">{{ book_title }}</h1>
91+
92+
<div class="right-buttons">
93+
<a href="print.html" title="Print this book">
94+
<i id="print-button" class="fa fa-print"></i>
95+
</a>
96+
</div>
9597
</div>
9698
</div>
9799

‎src/theme/stylus/general.styl

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
html {
22
font-family: "Open Sans", sans-serif
33
color: #333
4-
overflow-x: hidden
54
}
65

76
body {
87
margin: 0;
98
font-size: 1rem;
10-
overflow-x: hidden
9+
overflow-x: hidden;
1110
}
1211

1312
code {

‎src/theme/stylus/menu.styl

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1-
.menu-bar {
2-
position: relative
3-
display: flex
4-
flex-wrap: wrap
1+
#menu-bar {
2+
position: sticky
3+
top: 0
4+
z-index: 101
5+
6+
& > #menu-bar-sticky-container {
7+
display: flex
8+
flex-wrap: wrap
9+
transition: transform 0.5s, border-bottom-color 0.5s
10+
}
511

612
i, .icon-button {
713
position: relative
@@ -15,6 +21,11 @@
1521
}
1622
}
1723

24+
25+
html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container {
26+
transform: translateY(-60px);
27+
}
28+
1829
.menu-title {
1930
display: inline-block
2031
font-weight: 200
@@ -26,11 +37,4 @@
2637
white-space: nowrap
2738
overflow: hidden
2839
text-overflow: ellipsis
29-
30-
opacity: 0
31-
transition: opacity 0.5s ease-in-out
32-
}
33-
34-
.menu-bar:hover .menu-title {
35-
opacity: 1
3640
}

‎src/theme/stylus/themes/base.styl

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,23 @@
1212
}
1313
}
1414

15+
.menu-bar {
16+
margin: auto (- $page-padding);
17+
18+
& > #menu-bar-sticky-container {
19+
background-color: $bg
20+
border-bottom-color: $bg
21+
border-bottom-width: 1px
22+
border-bottom-style: solid
23+
}
24+
25+
&.bordered > #menu-bar-sticky-container {
26+
border-bottom-color: $table-border-color
27+
}
28+
}
29+
30+
$table-border-color
31+
1532
.sidebar {
1633
background-color: $sidebar-bg
1734
color: $sidebar-fg

0 commit comments

Comments
 (0)