Skip to content

Instantly share code, notes, and snippets.

@ptbrowne

ptbrowne/jsbin.romeboqu.html

Created July 25, 2014 08:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ptbrowne/ca1b5bd0e5d63a65ed93 to your computer and use it in GitHub Desktop.
Save ptbrowne/ca1b5bd0e5d63a65ed93 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.romeboqu.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Mobile Layout" />
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.1.3/hammer.min.js'></script>
<script src='//cdn.jsdelivr.net/jquery.hammerjs/1.1.2/jquery.hammer-full.js'></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class='menu row col purple'>
<h2>Menu</h2>
</div>
<div class='notifs row col pink'>
<h2>Notifs</h2>
</div>
<div class='container col row'>
<div class="header row crimson">
<h2> <button id='toggle' class=''>Menu</button>My header<button id='toggle-notif' class=''>Notif</button></h2>
</div>
<div class="body row scroll-y green">
<div class='body scroll-y row no-header'>
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
<div class='footer row yellow'>
<button class='row col'>Save</button>
</div>
</div>
<div class="footer row blue">
<h2>My footer</h2>
</div>
</div>
</body>
</html>
Raw
jsbin.romeboqu.js
$('body').hammer().on('swiperight', function () {
$('body').addClass('open')
})
$('body').hammer().on('swipeleft', function () {
$('body').removeClass('open');
})
var $body = $('body');
$('#toggle').click(function () {
$body.toggleClass('open');
});
$('#toggle-notif').click(function () {
$('body').toggleClass('open-notif');
});
Raw
jsbin.romeboqu.less
/* Generic pane rules */
body { margin: 0; font-family: sans-serif; }
* { box-sizing: border-box; padding: 0.1em 0 0 0.1em; }
.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }
.scroll-x, .scroll-y { -webkit-overflow-scrolling: touch; }
@headerSize: 4rem;
@footerSize: 4rem;
.header.row { height: @headerSize; top: 0; }
.body.row { top: @headerSize; bottom: @footerSize; }
.footer.row { height: @footerSize; bottom: 0; }
.no-header.row { top: 0; }
.no-footer.row { bottom: 0; }
.crimson { background: crimson; color: white; }
.yellow { background: yellow; }
.blue { background: royalblue; color: white }
.green { background: lawngreen; }
.purple { background: slateblue; }
.pink { background: pink; }
/* Menu */
@transitionTime: 0.3s;
@menuWidth: 200px;
.container, .menu { transition: transform ease @transitionTime; }
.menu { transform: translateX(-(@menuWidth)); }
.open .container { transform: translateX(@menuWidth); }
.open .menu { transform: translateX(0); }
.notifs { transition: opacity ease @transitionTime @transitionTime; }
.notifs { opacity: 0; }
.open-notif .notifs { transition: opacity 0 ease; }
.notifs { transition: opacity @transitionTime @transitionTime ease; }
.open-notif .notifs { opacity: 1; }
.open-notif .container { transform: translateY(calc(100%-@headerSize)); }
button.row {
width: 100%;
font-size: 1.5rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment