Skip to content

Fix several theme issues #648

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Apr 9, 2018
Merged

Fix several theme issues #648

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
63c410c
Don't hide page content when displaying search
mattico Mar 20, 2018
1c9f4a4
Decrease sidebar animation time
mattico Mar 20, 2018
308ddf6
Fix search key event handler
mattico Mar 20, 2018
3d9ff19
Avoid reflowing page content on small screens
mattico Mar 20, 2018
22c3c71
Don't use HTMLParentNode.prepend()
mattico Mar 20, 2018
cf6845e
Don't animate menu border bottom color
mattico Mar 20, 2018
a728e77
Small CSS improvments
mattico Mar 20, 2018
0cc9ddd
JS fixes
mattico Mar 21, 2018
f14547d
Give the print button a bit more margin
mattico Apr 2, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 48 additions & 43 deletions src/theme/book.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,11 +81,13 @@ table thead td {
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
-o-transition: -o-transform 0.5s;
-ms-transition: -ms-transform 0.5s;
transition: transform 0.5s;
}
.js .sidebar {
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
-o-transition: -o-transform 0.3s;
-ms-transition: -ms-transform 0.3s;
transition: transform 0.3s;
}
.sidebar code {
line-height: 2em;
Expand Down Expand Up @@ -137,42 +139,44 @@ table thead td {
white-space: nowrap;
}
.page-wrapper {
left: 0;
position: absolute;
right: 0;
top: 0;
bottom: 0;
-webkit-box-sizing: border-box;
-moz-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;
-o-transition: padding-left 0.5s, margin-left 0.5s, left 0.5s;
-ms-transition: padding-left 0.5s, margin-left 0.5s, left 0.5s;
transition: padding-left 0.5s, margin-left 0.5s, left 0.5s;
}
.js .page-wrapper {
-webkit-transition: margin-left 0.3s ease, -webkit-transform 0.3s ease;
-moz-transition: margin-left 0.3s ease, -moz-transform 0.3s ease;
-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 {
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 {
outline: 0;
padding: 0 15px;
}
.content {
position: relative;
top: 0;
bottom: 0;
overflow-y: auto;
right: 0;
left: 0;
padding: 0 15px;
padding-bottom: 50px;
}
.sidebar-visible .content {
position: absolute;
top: 52px;
}
.content > main {
.content main {
margin-left: auto;
margin-right: auto;
max-width: 750px;
Expand Down Expand Up @@ -205,27 +209,29 @@ 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;
}
.js #menu-bar > #menu-bar-sticky-container {
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
-o-transition: -o-transform 0.3s;
-ms-transition: -ms-transform 0.3s;
transition: transform 0.3s;
}
#menu-bar i,
#menu-bar .icon-button {
position: relative;
margin: 0 10px;
z-index: 10;
line-height: 50px;
cursor: pointer;
-webkit-transition: color 0.5s;
-moz-transition: color 0.5s;
-o-transition: color 0.5s;
-ms-transition: color 0.5s;
transition: color 0.5s;
}
#menu-bar i:hover,
#menu-bar .icon-button:hover {
cursor: pointer;
#menu-bar #print-button {
margin: 0 15px;
}
html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container {
-webkit-transform: translateY(-60px);
Expand All @@ -234,6 +240,9 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
-ms-transform: translateY(-60px);
transform: translateY(-60px);
}
.no-js .left-buttons {
display: none;
}
.menu-title {
display: inline-block;
font-weight: 200;
Expand All @@ -252,6 +261,8 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.js .menu-title {
cursor: pointer;
}
.nav-chapters {
Expand Down Expand Up @@ -363,7 +374,6 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
.light .content .header:link,
.light .content .header:visited {
color: #333;
pointer: cursor;
}
.light .content .header:link:hover,
.light .content .header:visited:hover {
Expand Down Expand Up @@ -554,7 +564,6 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
.coal .content .header:link,
.coal .content .header:visited {
color: #98a3ad;
pointer: cursor;
}
.coal .content .header:link:hover,
.coal .content .header:visited:hover {
Expand Down Expand Up @@ -745,7 +754,6 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
.navy .content .header:link,
.navy .content .header:visited {
color: #bcbdd0;
pointer: cursor;
}
.navy .content .header:link:hover,
.navy .content .header:visited:hover {
Expand Down Expand Up @@ -936,7 +944,6 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
.rust .content .header:link,
.rust .content .header:visited {
color: #262625;
pointer: cursor;
}
.rust .content .header:link:hover,
.rust .content .header:visited:hover {
Expand Down Expand Up @@ -1127,7 +1134,6 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
.ayu .content .header:link,
.ayu .content .header:visited {
color: #c5c5c5;
pointer: cursor;
}
.ayu .content .header:link:hover,
.ayu .content .header:visited:hover {
Expand Down Expand Up @@ -1401,18 +1407,18 @@ mark {
-o-transition: background-color 300ms linear;
-ms-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;
cursor: auto;
}
.searchbar-outer {
display: none;
margin-left: auto;
margin-right: auto;
max-width: 750px;
}
#searchbar {
display: block;
width: 100%;
margin: 5px auto 0px auto;
padding: 10px 16px;
Expand All @@ -1428,7 +1434,6 @@ mark {
padding: 18px 0 0 5px;
}
.searchresults-outer {
display: none;
margin-left: auto;
margin-right: auto;
max-width: 750px;
Expand Down
17 changes: 10 additions & 7 deletions src/theme/book.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
"use strict";

// Fix back button cache problem
window.onunload = function () { };

Expand Down Expand Up @@ -55,6 +57,7 @@ function playpen_text(playpen) {
var txt = playpen_text(pre_block);
var re = /extern\s+crate\s+([a-zA-Z_0-9]+)\s*;/g;
var snippet_crates = [];
var item;
while (item = re.exec(txt)) {
snippet_crates.push(item[1]);
}
Expand Down Expand Up @@ -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>";

// add expand button
pre_block.prepend(buttons);
pre_block.insertBefore(buttons, pre_block.firstChild);

pre_block.querySelector('.buttons').addEventListener('click', function (e) {
if (e.target.classList.contains('fa-expand')) {
Expand Down Expand Up @@ -213,7 +216,7 @@ function playpen_text(playpen) {
if (!buttons) {
buttons = document.createElement('div');
buttons.className = 'buttons';
pre_block.prepend(buttons);
pre_block.insertBefore(buttons, pre_block.firstChild);
}

var clipButton = document.createElement('button');
Expand All @@ -222,7 +225,7 @@ function playpen_text(playpen) {
clipButton.setAttribute('aria-label', clipButton.title);
clipButton.innerHTML = '<i class=\"tooltiptext\"></i>';

buttons.prepend(clipButton);
buttons.insertBefore(clipButton, buttons.firstChild);
}
});

Expand All @@ -233,7 +236,7 @@ function playpen_text(playpen) {
if (!buttons) {
buttons = document.createElement('div');
buttons.className = 'buttons';
pre_block.prepend(buttons);
pre_block.insertBefore(buttons, pre_block.firstChild);
}

var runCodeButton = document.createElement('button');
Expand All @@ -248,8 +251,8 @@ function playpen_text(playpen) {
copyCodeClipboardButton.title = 'Copy to clipboard';
copyCodeClipboardButton.setAttribute('aria-label', copyCodeClipboardButton.title);

buttons.prepend(runCodeButton);
buttons.prepend(copyCodeClipboardButton);
buttons.insertBefore(runCodeButton, buttons.firstChild);
buttons.insertBefore(copyCodeClipboardButton, buttons.firstChild);

runCodeButton.addEventListener('click', function (e) {
run_rust_code(pre_block);
Expand All @@ -262,7 +265,7 @@ function playpen_text(playpen) {
undoChangesButton.title = 'Undo changes';
undoChangesButton.setAttribute('aria-label', undoChangesButton.title);

buttons.prepend(undoChangesButton);
buttons.insertBefore(undoChangesButton, buttons.firstChild);

undoChangesButton.addEventListener('click', function () {
let editor = window.ace.edit(code_block);
Expand Down
Loading