Skip to content

Instantly share code, notes, and snippets.

@justindarc

justindarc/index.html

Created January 26, 2014 06:43
Show Gist options
  • Save justindarc/8629412 to your computer and use it in GitHub Desktop.
Save justindarc/8629412 to your computer and use it in GitHub Desktop.
Download ZIP
Snap.js Lists
Raw
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if IEMobile 7 ]> <html class="no-js iem7"> <![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Snap List</title>
<meta name="description" content="">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta http-equiv="cleartype" content="on">
<!-- CSS -->
<link rel="stylesheet" href="./vendor/mobile-boilerplate/css/normalize.css">
<link rel="stylesheet" href="./vendor/mobile-boilerplate/css/main.css">
<link rel="stylesheet" href="./vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="./vendor/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="./vendor/snap.js/snap.css">
<link rel="stylesheet" href="./snap-list.css">
</head>
<body>
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<ul class="snap-list">
<li class="snap-header">
<h1 class="snap-list-text">This is a header</h1>
</li>
<li class="snap-header">
<h1 class="snap-list-text">This is a really really long header</h1>
</li>
<li class="snap-header">
<button class="snap-button-left">
<i class="fa fa-fw fa-home"></i>
</button>
<button class="snap-button-left" disabled>
<i class="fa fa-fw fa-home"></i>
</button>
<button class="snap-button-right">
<i class="fa fa-fw fa-home"></i>
</button>
<button class="snap-button-right">
<i class="fa fa-fw fa-home"></i>
</button>
</li>
<li>
<button class="snap-button-left">
<i class="fa fa-fw fa-home"></i>
</button>
<a class="snap-list-text">This is a really really really long item</a>
</li>
<li>
<button class="snap-button-right">
<i class="fa fa-fw fa-home"></i>
</button>
<span class="snap-list-text">This is a really really really long item</span>
</li>
<li>
<button class="snap-button-right">
<i class="fa fa-fw fa-home"></i>
</button>
<button class="snap-button-right">
<i class="fa fa-fw fa-home"></i>
</button>
<span class="snap-list-text">This is a really really really long item</span>
</li>
<li>
<a class="snap-list-text">This is an item</a>
</li>
<li class="active">
<a class="snap-list-text">This is an item</a>
</li>
<li>
<a class="snap-list-text">This is a really really really long item</a>
</li>
<li>
<span class="snap-list-text">This is an item</span>
</li>
<li class="snap-header">
<h1 class="snap-list-text">This is a header</h1>
</li>
<li>
<a class="snap-list-text">
<h1>This is an item</h1>
<h2>This item has a sub-heading</h2>
</a>
</li>
<li class="active">
<a class="snap-list-text">
<h1>This is an item</h1>
<h2>This item has a sub-heading</h2>
</a>
</li>
<li>
<span class="snap-list-text">
<h1>This is an item</h1>
<h2>This item has a sub-heading</h2>
</span>
</li>
<li>
<a class="snap-list-text">
<h1>This is a really really really really long item</h1>
<h2>This is a really really really really really long sub-heading</h2>
</a>
</li>
<li>
<span class="snap-list-text">
<h1>This is a really really really really long item</h1>
<h2>This is a really really really really really long sub-heading</h2>
</span>
</li>
<li>
<div class="form-group">
<input type="text" class="form-control" value="This is an item">
</div>
</li>
<li>
<div class="form-group">
<select class="form-control">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</li>
<li>
<div class="form-group">
<input type="text" class="form-control" value="This is an item">
</div>
<div class="form-group">
<select class="form-control">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</li>
<li>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" value="This is an item">
<div class="input-group-btn">
<button class="btn btn-primary">Go!</button>
</div>
</div>
</div>
</li>
<li>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" value="This is an item">
<div class="input-group-btn">
<button class="btn btn-success">
<i class="fa fa-fw fa-check"></i>
</button>
<button class="btn btn-danger">
<i class="fa fa-fw fa-ban"></i>
</button>
</div>
</div>
</div>
</li>
<li class="snap-header">
<button class="snap-button-left">
<i class="fa fa-fw fa-home"></i>
</button>
<h1 class="snap-list-text">This is a really really long header</h1>
</li>
<li class="snap-header">
<button class="snap-button-right">
<i class="fa fa-fw fa-home"></i>
</button>
<h1 class="snap-list-text">This is a really really long header</h1>
</li>
<li class="snap-header">
<button class="snap-button-left">
<i class="fa fa-fw fa-home"></i>
</button>
<button class="snap-button-left">
<i class="fa fa-fw fa-home"></i>
</button>
<h1 class="snap-list-text">This is a really really long header</h1>
</li>
<li class="snap-header">
<button class="snap-button-left">
<i class="fa fa-fw fa-home"></i>
</button>
<button class="snap-button-right">
<i class="fa fa-fw fa-home"></i>
</button>
<h1 class="snap-list-text">This is a really really long header</h1>
</li>
<li class="snap-header">
<button class="snap-button-left">
<i class="fa fa-fw fa-home"></i>
</button>
<button class="snap-button-right">
<i class="fa fa-fw fa-home"></i>
</button>
<button class="snap-button-right">
<i class="fa fa-fw fa-home"></i>
</button>
<h1 class="snap-list-text">This is a really really long header</h1>
</li>
<li class="snap-header">
<button class="snap-button-right">
<i class="fa fa-fw fa-home"></i>
</button>
<button class="snap-button-right">
<i class="fa fa-fw fa-home"></i>
</button>
<h1 class="snap-list-text">This is a really really long header</h1>
</li>
</ul>
</div>
<div class="snap-drawer snap-drawer-right">
</div>
</div>
<div class="snap-content">
<div class="scrollable">
</div>
</div>
<!-- JavaScript -->
<script src="./vendor/jquery/jquery-2.1.0.js"></script>
<script src="./vendor/mobile-boilerplate/js/helper.js"></script>
<script src="./vendor/bootstrap/js/bootstrap.js"></script>
<script src="./vendor/snap.js/snap.js"></script>
<script>
$(function() {
var snapper = new Snap({
element: $('.snap-content')[0]
});
snapper.open('left');
});
</script>
</body>
</html>
Raw
snap-list.css
.snap-content {
background-color: #b0b0b0;
overflow: visible;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}
.snap-content > .scrollable {
position: absolute;
padding: 5px 10px 40px;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1020;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.snap-drawers {
background-color: #1a1a1a;
color: #eee;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.snap-drawer {
background-color: #303030;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
/**
Lists
*/
.snap-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.snap-list > li:before,
.snap-list > li:after {
display: table;
content: ' ';
}
.snap-list > li:after {
clear: both;
}
.snap-list > li {
border-top: 1px solid #3a3a3a;
border-bottom: 1px solid #2a2a2a;
}
.snap-list > li.active {
background-color: #202020;
border-top-color: transparent;
}
/**
List Items
*/
.snap-list .snap-list-text {
color: #b0b0b0;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
font-size: 16px;
font-weight: 200;
line-height: 1em;
text-decoration: none;
cursor: pointer;
display: block;
padding: 16px 10px;
height: 48px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-transition: color 0.2s ease;
-moz-transition: color 0.2s ease;
-ms-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.snap-list a.snap-list-text:hover {
color: #e0e0e0;
}
.snap-list > li.active .snap-list-text {
cursor: default;
}
.snap-list > li.active a.snap-list-text,
.snap-list > li.active a.snap-list-text:hover {
color: #909090;
}
.snap-list .snap-list-text > h1,
.snap-list .snap-list-text > h2 {
font-size: 18px;
font-weight: 200;
line-height: 1em;
margin: -10px 0 0;
padding: 2px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.snap-list .snap-list-text > h2 {
color: #8a8a8a;
font-size: 12px;
margin: -2px 0 0;
}
.snap-list a.snap-list-text:hover > h2 {
color: #9a9a9a;
}
.snap-list > li.active a.snap-list-text:hover > h2 {
color: #8a8a8a;
}
/**
Inputs
*/
.snap-list .form-group {
margin: 0;
padding: 7px 5px;
}
.snap-list .form-group + .form-group {
margin-top: 2px;
}
.snap-list .form-group input,
.snap-list .form-group select {
font-size: 16px;
font-weight: 200;
line-height: 1em;
padding: 5px 4px;
}
.snap-list .form-group input {
background-color: #202020;
border-color: #1c1c1c;
color: #909090;
}
/**
Headers
*/
.snap-list > .snap-header {
background-color: #404040;
border-top: 1px solid #4a4a4a;
border-bottom: none;
color: #aaa;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(255, 255, 255, 0.1);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), inset 0 -1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), inset 0 -1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), inset 0 -1px 1px rgba(0, 0, 0, 0.1);
}
.snap-list > .snap-header > .snap-list-text {
font-size: 20px;
font-weight: 300;
line-height: 1em;
display: block;
margin: 0;
padding: 14px 5px;
height: 48px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/**
Buttons
*/
.snap-button-right,
.snap-button-left {
background-color: transparent;
border: none;
color: #c0c0c0;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(255, 255, 255, 0.1);
font-size: 20px;
line-height: 1em;
text-align: center;
cursor: pointer;
display: block;
float: left;
margin: 0;
padding: 14px 0;
width: 36px;
height: 48px;
-webkit-transition: color 0.2s ease;
-moz-transition: color 0.2s ease;
-ms-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.snap-button-right {
float: right;
}
.snap-button-right:hover,
.snap-button-left:hover {
color: #f0f0f0;
}
.snap-button-right[disabled],
.snap-button-left[disabled],
.snap-button-right.disabled,
.snap-button-left.disabled {
cursor: normal;
}
.snap-button-right[disabled]:hover,
.snap-button-left[disabled]:hover,
.snap-button-right.disabled:hover,
.snap-button-left.disabled:hover {
color: #c0c0c0;
}
.snap-button-right + .snap-list-text,
.snap-button-left + .snap-list-text {
position: absolute;
}
/* Button + Text */
.snap-list .snap-button-left + .snap-list-text {
left: 36px;
right: 0;
}
/* Button + Button + Text */
.snap-list .snap-button-left + .snap-button-left + .snap-list-text {
left: 72px;
right: 0;
}
/* Button + Text + Button */
.snap-list .snap-button-left + .snap-button-right + .snap-list-text,
.snap-list .snap-button-right + .snap-button-left + .snap-list-text {
left: 36px;
right: 36px;
}
/* Button + Text + Button + Button */
.snap-list .snap-button-left + .snap-button-right + .snap-button-right + .snap-list-text,
.snap-list .snap-button-right + .snap-button-right + .snap-button-left + .snap-list-text,
.snap-list .snap-button-right + .snap-button-left + .snap-button-right + .snap-list-text {
left: 36px;
right: 72px;
}
/* Text + Button */
.snap-list .snap-button-right + .snap-list-text {
left: 0;
right: 36px;
}
/* Text + Button + Button */
.snap-list .snap-button-right + .snap-button-right + .snap-list-text {
left: 0;
right: 72px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment