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

Merge pull request #470 from stgn/sidebar-page-ux 

Improve experience on smaller screens
This commit is contained in:
Michael Bryan 2017-12-30 16:15:50 +08:00 committed by GitHub
parent 06c9d67e75 31fb443562
commit 549a9ffd54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 109 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/theme/book.css
View File

@ -1,11 +1,12 @@
html,
body {
html {
font-family: "Open Sans", sans-serif;
color: #333;
overflow-x: hidden;
}
body {
margin: 0;
font-size: 1rem;
overflow-x: hidden;
}
code {
font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
@ -66,20 +67,12 @@ table thead td {
-ms-transition: left 0.5s;
transition: left 0.5s;
}
@media only screen and (max-width: 1060px) {
.sidebar {
left: -300px;
}
}
.sidebar code {
line-height: 2em;
}
.sidebar-hidden .sidebar {
left: -300px;
}
.sidebar-visible .sidebar {
left: 0;
}
.chapter {
list-style: none outside none;
padding-left: 0;
@ -109,28 +102,25 @@ table thead td {
white-space: nowrap;
}
.page-wrapper {
padding-left: 300px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 100%;
-webkit-transition: padding-left 0.5s, margin-right 0.5s;
-moz-transition: padding-left 0.5s, margin-right 0.5s;
-o-transition: padding-left 0.5s, margin-right 0.5s;
-ms-transition: padding-left 0.5s, margin-right 0.5s;
transition: padding-left 0.5s, margin-right 0.5s;
}
@media only screen and (max-width: 1060px) {
.page-wrapper {
padding-left: 0;
}
}
.sidebar-hidden .page-wrapper {
padding-left: 0;
width: 100%;
-webkit-transition: padding-left 0.5s, margin-left 0.5s;
-moz-transition: padding-left 0.5s, margin-left 0.5s;
-o-transition: padding-left 0.5s, margin-left 0.5s;
-ms-transition: padding-left 0.5s, margin-left 0.5s;
transition: padding-left 0.5s, margin-left 0.5s;
}
.sidebar-visible .page-wrapper {
padding-left: 300px;
margin-right: -300px;
}
@media only screen and (max-width: 1079px) {
.sidebar-visible .page-wrapper {
padding-left: 0;
margin-left: 300px;
}
}
.page {
outline: 0;
@ -238,38 +228,41 @@ table thead td {
-ms-transition: color 0.5s;
transition: color 0.5s;
}
.mobile-nav-chapters {
display: none;
}
.nav-chapters:hover {
text-decoration: none;
}
.previous {
left: 315px;
-webkit-transition: left 0.5s;
-moz-transition: left 0.5s;
-o-transition: left 0.5s;
-ms-transition: left 0.5s;
transition: left 0.5s;
.nav-wrapper {
margin-top: 50px;
display: none;
}
@media only screen and (max-width: 1060px) {
.previous {
left: 15px;
}
.mobile-nav-chapters {
font-size: 2.5em;
text-align: center;
text-decoration: none;
width: 90px;
border-radius: 5px;
}
.previous {
float: left;
}
.next {
float: right;
right: 15px;
}
.sidebar-hidden .previous {
left: 15px;
}
.sidebar-visible .previous {
left: 315px;
}
@media only screen and (max-width: 1060px) {
@media only screen and (max-width: 1080px) {
.nav-chapters {
display: none;
}
.nav-wrapper {
max-width: 750px;
margin: 0 auto;
display: block;
}
}
@media only screen and (max-width: 1380px) {
.sidebar-visible .nav-chapters {
display: none;
}
.sidebar-visible .nav-wrapper {
display: block;
}
}
.theme-popup {
@ -291,37 +284,6 @@ table thead td {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
@media only screen and (max-width: 1060px) {
.nav-chapters {
display: none;
}
.mobile-nav-chapters {
font-size: 2.5em;
text-align: center;
text-decoration: none;
max-width: 150px;
min-width: 90px;
-webkit-box-pack: center;
-moz-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-line-pack: center;
-webkit-align-content: center;
align-content: center;
position: relative;
display: inline-block;
margin-bottom: 50px;
border-radius: 5px;
}
.next {
float: right;
}
.previous {
float: left;
}
}
.light {
color: #333;
background-color: #fff;

8
src/theme/book.js
View File

@ -68,14 +68,6 @@ $( document ).ready(function() {
// Toggle sidebar
$("#sidebar-toggle").click(sidebarToggle);
// Hide sidebar on section link click if it occupies large space
// in relation to the whole screen (phone in portrait)
$("#sidebar a").click(function(event){
if (sidebar.width() > window.screen.width * 0.4) {
sidebarToggle();
}
});
// Scroll sidebar to current active section
var activeSection = sidebar.find(".active");
if(activeSection.length) {

47
src/theme/index.hbs
View File

@ -62,9 +62,10 @@
<!-- Hide / unhide sidebar before it is displayed -->
<script type="text/javascript">
var sidebar = store.get('mdbook-sidebar');
if (sidebar === "hidden") { $("html").addClass("sidebar-hidden") }
else if (sidebar === "visible") { $("html").addClass("sidebar-visible") }
var sidebar = 'hidden';
if (document.body.clientWidth >= 1080)
sidebar = store.get('mdbook-sidebar') || 'visible';
$("html").addClass("sidebar-" + sidebar);
</script>
<div id="sidebar" class="sidebar">
@ -92,30 +93,24 @@
<div id="content" class="content">
{{{ content }}}
<div class="nav-wrapper">
<!-- Mobile navigation buttons -->
{{#previous}}
<a rel="prev" href="{{link}}" class="mobile-nav-chapters previous" title="Previous chapter">
<i class="fa fa-angle-left"></i>
</a>
{{/previous}}
{{#next}}
<a rel="next" href="{{link}}" class="mobile-nav-chapters next" title="Next chapter">
<i class="fa fa-angle-right"></i>
</a>
{{/next}}
<div style="clear: both"></div>
</div>
</div>
<!--
Constrain the space between buttons on small screen so the total
width of the buttons group will not exceed the main content
above.
-->
<div class="nav-wrapper">
<!-- Mobile navigation buttons -->
{{#previous}}
<a rel="prev" href="{{link}}" class="mobile-nav-chapters previous" title="Previous chapter">
<i class="fa fa-angle-left"></i>
</a>
{{/previous}}
{{#next}}
<a rel="next" href="{{link}}" class="mobile-nav-chapters next" title="Next chapter">
<i class="fa fa-angle-right"></i>
</a>
{{/next}}
<div style="clear: both"></div>
</div>
</div>
{{#previous}}

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

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

54
src/theme/stylus/nav-icons.styl
View File

@ -9,6 +9,7 @@
margin: 0
max-width: 150px
min-width: 90px
display: flex
justify-content: center
align-content: center
@ -17,29 +18,38 @@
transition: color 0.5s
}
.mobile-nav-chapters { display: none }
.nav-chapters:hover { text-decoration: none }
.previous {
left: $sidebar-width + $page-padding
transition: left 0.5s
@media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
left: $page-padding
}
}
.next { right: $page-padding }
.sidebar-hidden .previous {
left: $page-padding
}
.sidebar-visible .previous {
left: $sidebar-width + $page-padding
}
.nav-wrapper {
@media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
max-width: $content-max-width
margin: 0 auto
}
margin-top: 50px
display: none
}
.mobile-nav-chapters {
font-size: 2.5em
text-align: center
text-decoration: none
width: 90px
border-radius: 5px
}
.previous {
float: left
}
.next {
float: right
right: $page-padding
}
@media only screen and (max-width: $page-plus-sidebar-width) {
.nav-chapters { display: none }
.nav-wrapper { display: block }
}
@media only screen and (max-width: $page-plus-sidebar-width + $sidebar-width) {
.sidebar-visible {
.nav-chapters { display: none }
.nav-wrapper { display: block }
}
}

22
src/theme/stylus/page.styl
View File

@ -1,26 +1,24 @@
@require 'variables'
.page-wrapper {
padding-left: $sidebar-width
box-sizing: border-box
min-height: 100%
width: 100%
// Animation: slide away
transition: padding-left 0.5s, margin-right 0.5s
@media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
padding-left: 0
}
}
.sidebar-hidden .page-wrapper {
padding-left: 0
transition: padding-left 0.5s, margin-left 0.5s
}
.sidebar-visible .page-wrapper {
padding-left: $sidebar-width
margin-right: - $sidebar-width
}
@media only screen and (max-width: $page-plus-sidebar-width - 1) {
.sidebar-visible .page-wrapper {
padding-left: 0
margin-left: $sidebar-width
}
}
.page {
@ -30,7 +28,7 @@
.content {
margin-left: auto
margin-right:auto
margin-right: auto
max-width: $content-max-width
padding-bottom: 50px

8
src/theme/stylus/sidebar.styl
View File

@ -15,10 +15,6 @@
// Animation: slide away
transition: left 0.5s
@media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
left: - $sidebar-width
}
code {
line-height: 2em;
}
@ -28,10 +24,6 @@
left: - $sidebar-width
}
.sidebar-visible .sidebar {
left: 0
}
.chapter {
list-style: none outside none
padding-left: 0

35
src/theme/stylus/theme-popup.styl
View File

@ -21,37 +21,4 @@
}
}
}
@media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
.nav-chapters {
display: none
}
.mobile-nav-chapters {
font-size: 2.5em
text-align: center
text-decoration: none
max-width: 150px
min-width: 90px
justify-content: center
align-content: center
position: relative
display: inline-block
margin-bottom: 50px
border-radius: 5px
}
.next {
float: right
}
.previous {
float: left
}
}
}

2
src/theme/stylus/variables.styl
View File

@ -1,4 +1,4 @@
$sidebar-width = 300px
$page-padding = 15px
$max-page-width-with-hidden-sidebar = 1060px
$content-max-width = 750px
$page-plus-sidebar-width = $content-max-width + $sidebar-width + $page-padding * 2