Merge pull request #501 from lifta42/master

Fix misplaced "previous" icon
This commit is contained in:
Michael Bryan 2017-12-10 22:34:09 +11:00 committed by GitHub
commit 3838fa0e68
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 46 additions and 21 deletions

View File

@ -114,11 +114,11 @@ table thead td {
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 100%;
-webkit-transition: padding-left 0.5s;
-moz-transition: padding-left 0.5s;
-o-transition: padding-left 0.5s;
-ms-transition: padding-left 0.5s;
transition: padding-left 0.5s;
-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 {
@ -130,6 +130,7 @@ table thead td {
}
.sidebar-visible .page-wrapper {
padding-left: 300px;
margin-right: -300px;
}
.page {
outline: 0;
@ -265,6 +266,12 @@ table thead td {
.sidebar-visible .previous {
left: 315px;
}
@media only screen and (max-width: 1060px) {
.nav-wrapper {
max-width: 750px;
margin: 0 auto;
}
}
.theme-popup {
position: absolute;
left: 10px;
@ -284,7 +291,7 @@ table thead td {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
@media only screen and (max-width: 1250px) {
@media only screen and (max-width: 1060px) {
.nav-chapters {
display: none;
}

View File

@ -94,18 +94,27 @@
{{{ content }}}
</div>
<!-- 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}}
<!--
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}}
{{#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>
@ -139,7 +148,7 @@
<script>
var localAddrs = ["localhost", "127.0.0.1", ""];
// make sure we don't activate google analytics if the developer is
// make sure we don't activate google analytics if the developer is
// inspecting the book locally...
if (localAddrs.indexOf(document.location.hostname) === -1) {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

View File

@ -36,3 +36,10 @@
.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
}
}

View File

@ -7,7 +7,7 @@
min-height: 100%
// Animation: slide away
transition: padding-left 0.5s
transition: padding-left 0.5s, margin-right 0.5s
@media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
padding-left: 0
@ -20,6 +20,7 @@
.sidebar-visible .page-wrapper {
padding-left: $sidebar-width
margin-right: - $sidebar-width
}
.page {
@ -30,7 +31,7 @@
.content {
margin-left: auto
margin-right:auto
max-width: 750px
max-width: $content-max-width
padding-bottom: 50px
a {

View File

@ -23,7 +23,7 @@
}
@media only screen and (max-width: 1250px) {
@media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
.nav-chapters {
display: none

View File

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