Sidebar is now hidden on mobile devices and can be hidden/shown with the button

This commit is contained in:
Mathieu David 2015-07-29 13:34:48 +02:00
parent ecdcc31e9e
commit 0e27a473c5
3 changed files with 58 additions and 35 deletions

View File

@ -3,7 +3,7 @@ html, body {
color: #333; color: #333;
} }
@media only screen {
.sidebar { .sidebar {
position: absolute; position: absolute;
left: 0; left: 0;
@ -18,35 +18,40 @@ html, body {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
background-color: #fafafa; background-color: #fafafa;
color: #364149; color: #364149;
/* Animation: slide away */
-webkit-transition: left 0.5s; /* Safari */
-o-transition: left 0.5s; /* Opera */
-moz-transition: left 0.5s; /* Mozilla Firefox */
transition: left 0.5s;
} }
.page-wrapper { .page-wrapper {
position: absolute; position: absolute;
overflow-y: auto; overflow-y: auto;
left: 310px; left: 315px;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
box-sizing: border-box; box-sizing: border-box;
background: none repeat scroll 0 0 #FFF; background: none repeat scroll 0 0 #FFF;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
}
/* Animation: slide away */
-webkit-transition: left 0.5s; /* Safari */
-o-transition: left 0.5s; /* Opera */
-moz-transition: left 0.5s; /* Mozilla Firefox */
transition: left 0.5s;
} }
@media only screen and (max-width: 1060px) { @media only screen and (max-width: 1060px) {
.sidebar { .sidebar {
width: 100%; left: -300px;
margin-right: 0;
top: 40px;
} }
.page-wrapper { .page-wrapper {
top: 40px;
left: 15px; left: 15px;
padding-right: 15px; padding-right: 15px;
} }
.mobile-hidden {
display: none;
}
} }
.page { .page {

View File

@ -0,0 +1,17 @@
$( document ).ready(function() {
// Interesting DOM Elements
var sidebar = $("#sidebar");
var page_wrapper = $("#page-wrapper");
$("#sidebar-toggle").click(function(event){
if(sidebar.position().left === 0){
sidebar.css({left: "-300px"});
page_wrapper.css({left: "15px"});
} else {
sidebar.css({left: "0"});
page_wrapper.css({left: "315px"});
}
});
});

View File

@ -20,7 +20,7 @@
<div id="page-wrapper" class="page-wrapper"> <div id="page-wrapper" class="page-wrapper">
<div id="menu-bar" class="menu-bar"> <div id="menu-bar" class="menu-bar">
<i class="fa fa-bars left"></i> <i id="sidebar-toggle" class="fa fa-bars left"></i>
<h1 class="menu-title">{{ title }}</h1> <h1 class="menu-title">{{ title }}</h1>
</div> </div>
@ -30,6 +30,7 @@
</div> </div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="book.js"></script> <script src="book.js"></script>
</body> </body>
</html> </html>