Prevent navigation arrows from collapsing with text on smaller screen. Fix #42

This commit is contained in:
Mathieu David 2015-08-31 17:09:18 +02:00
parent 5990c80a00
commit 8e9dc3643f
2 changed files with 68 additions and 11 deletions

View file

@ -37,6 +37,8 @@ html, body {
background: none repeat scroll 0 0 #FFF;
-webkit-overflow-scrolling: touch;
min-height: 100%;
/* Animation: slide away */
-webkit-transition: left 0.5s; /* Safari */
-o-transition: left 0.5s; /* Opera */
@ -44,22 +46,14 @@ html, body {
transition: left 0.5s;
}
@media only screen and (max-width: 1060px) {
.sidebar {
left: -300px;
}
.page-wrapper {
left: 15px;
padding-right: 15px;
}
}
.page {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
padding-right: 15px;
overflow-y: auto;
}
@ -202,6 +196,8 @@ html, body {
transition: color 0.5s;
}
.mobile-nav-chapters { display: none; }
.nav-chapters:hover {
color: #333;
text-decoration: none;
@ -214,3 +210,51 @@ html, body {
.next {
right: 0;
}
@media only screen and (max-width: 1060px) {
.sidebar {
left: -300px;
}
.page-wrapper {
left: 15px;
padding-right: 15px;
}
}
/* Fix the navigation arrows that collapsed with the text on smaller screens */
@media only screen and (max-width: 1250px) {
.nav-chapters {
display: none;
}
.mobile-nav-chapters {
color: #CCC;
font-size: 40px;
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;
background-color: #E0E0E0;
color: #999;
}
.next {
float: right;
}
.previous {
float: left;
}
}

View file

@ -29,8 +29,21 @@
<div id="content" class="content">
{{{ content }}}
</div>
</div>
<!-- Mobile navigation buttons -->
{{#previous}}
<a href="{{link}}" class="mobile-nav-chapters previous">
<i class="fa fa-angle-left"></i>
</a>
{{/previous}}
{{#next}}
<a href="{{link}}" class="mobile-nav-chapters next">
<i class="fa fa-angle-right"></i>
</a>
{{/next}}
</div>
{{#previous}}
<a href="{{link}}" class="nav-chapters previous">