mirror of https://github.com/twbs/ratchet.git
connors
11 years ago
49 changed files with 9115 additions and 1 deletions
@ -0,0 +1,193 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<title>About · Ratchet</title> |
||||
<meta name="description" content="Ratchet: Prototype mobile apps with simple HTML, CSS, and JS components."> |
||||
<meta name="author" content="Connor Sears"> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> |
||||
<link rel="shortcut icon" href="/favicon.ico"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<!-- Google Web Fonts --> |
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700|Open+Sans:300"> |
||||
|
||||
<link rel="stylesheet" href="/dist/css/ratchet.min.css"> |
||||
<link rel="stylesheet" href="/assets/css/docs.min.css"> |
||||
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/img/apple-touch-icon-114x114.png"> |
||||
|
||||
<script> |
||||
var _gaq = _gaq || []; |
||||
_gaq.push(['_setAccount', 'UA-36050008-1']); |
||||
_gaq.push(['_trackPageview']); |
||||
|
||||
(function() { |
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
||||
})(); |
||||
</script> |
||||
|
||||
</head> |
||||
<body ontouchstart=""> |
||||
<!--[if lt IE 9]> |
||||
<div class="bs-callout bs-callout-danger"> |
||||
<h4>Attention!</h4> |
||||
<p> |
||||
Looks like your current browser is old and doesn't support many features used in this page. |
||||
Please take a second to <a href="http://browsehappy.com/">upgrade to a more modern browser</a>. |
||||
</p> |
||||
</div> |
||||
<![endif]--> |
||||
|
||||
<div class="docs-sub-header"> |
||||
<header class="docs-masthead clearfix"> |
||||
<div class="container"> |
||||
<div class="column"> |
||||
<h1 class="docs-title"> |
||||
<a href="/" data-ignore="push">Ratchet</a> |
||||
</h1> |
||||
<nav class="docs-nav clearfix"> |
||||
<a class="docs-nav-trigger icon icon-bars pull-right js-docs-nav-trigger" href="#"></a> |
||||
<div class="docs-nav-group"> |
||||
<a class="docs-nav-item" href="/" data-ignore="push">Home</a> |
||||
<a class="docs-nav-item" href="/getting-started" data-ignore="push">Getting started</a> |
||||
<a class="docs-nav-item" href="/components" data-ignore="push">Components</a> |
||||
<a class="docs-nav-item" href="/examples" data-ignore="push">Examples</a> |
||||
<a class="docs-nav-item" href="/about" data-ignore="push">About</a> |
||||
<a class="docs-nav-item" href="https://github.com/twbs/ratchet" data-ignore="push">GitHub project</a> |
||||
</div> |
||||
</nav> |
||||
</div> |
||||
</div> |
||||
</header> |
||||
|
||||
<div class="container"> |
||||
<div class="docs-sub-content"> |
||||
<h2 class="page-title">About</h2> |
||||
<p class="page-description">Learn about the project's history and meet the maintaining team.</p> |
||||
</div> |
||||
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
<div class="container"> |
||||
<div class="column-group"> |
||||
<div class="column lg-units-8 docs-content"> |
||||
<div class="docs-section"> |
||||
<h2>History</h2> |
||||
<p>The idea for Ratchet was developed by <a href="https://twitter.com/connors">@connors</a>, <a href="https://twitter.com/dhg">@dhg</a>, and <a href="https://twitter.com/fat">@fat</a> in mid-2012. Before it became a full fledged framework, Ratchet began as a series of HTML/CSS prototypes of the Twitter for iPhone app. These prototypes became invaluable to the process of testing new feature designs that ended up being shipped as part of the native mobile app.</p> |
||||
<p>As it became clear that this was the quickest and most effective way to design mobile apps, components were abstracted from these prototypes and became the framework you know today.</p> |
||||
<p>Released in November 2012, Ratchet quickly became one of the most popular prototyping tools on GitHub. Following that initial launch, we released v2 – a complete rewrite. With v2 we've abstracted the platform specific styles into their own theme CSS files, added an icon set called Ratchicons, and offically became part of the Bootstrap family.</p> |
||||
</div> |
||||
|
||||
<div class="docs-section"> |
||||
<h2>Team</h2> |
||||
<p class="lead">Ratchet is maintained by one of its creators, a couple of core contributors, and its awesome community.</p> |
||||
|
||||
<div class="list-group"> |
||||
<div class="list-group-item"> |
||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=connors&type=follow"></iframe> |
||||
<a class="team-member" href="https://github.com/connors"> |
||||
<img src="http://www.gravatar.com/avatar/53d633ae4622de17906338910085275a" alt="@connors"> |
||||
<div class="team-member-info"> |
||||
<strong>Connor Sears</strong> |
||||
@connors |
||||
</div> |
||||
</a> |
||||
</div> |
||||
<div class="list-group-item"> |
||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=connor&type=follow"></iframe> |
||||
<a class="team-member" href="https://github.com/connor"> |
||||
<img src="http://www.gravatar.com/avatar/f12ed6301268a1a8d40f292135e6bfca" alt="@connor"> |
||||
<div class="team-member-info"> |
||||
<strong>Connor Montgomery</strong> |
||||
@connor |
||||
</div> |
||||
</a> |
||||
</div> |
||||
<div class="list-group-item"> |
||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=mdo&type=follow"></iframe> |
||||
<a class="team-member" href="https://github.com/mdo"> |
||||
<img src="http://www.gravatar.com/avatar/bc4ab438f7a4ce1c406aadc688427f2c" alt="@mdo"> |
||||
<div class="team-member-info"> |
||||
<strong>Mark Otto</strong> |
||||
@mdo |
||||
</div> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
|
||||
<p>Get involved with Ratchet development by <a href="https://github.com/twbs/ratchet/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/ratchet/blob/master/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="column lg-units-4"> |
||||
<div class="docs-module"> |
||||
<h4 class="docs-module-title">Ratchet</h4> |
||||
<p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p> |
||||
<a href="https://github.com/twbs/ratchet/releases/download/v2.0.1/ratchet-2.0.1-dist.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.1-dist']);">Download Ratchet</a> |
||||
<p class="version">Currently v2.0.1</p> |
||||
</div> |
||||
|
||||
<div class="docs-module"> |
||||
<h4 class="docs-module-title">Source code</h4> |
||||
<p>If you haven't already, download the source code for Ratchet.</p> |
||||
<a href="https://github.com/twbs/ratchet/archive/v2.0.1.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.1']);">Download source</a> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
<div class="column"> |
||||
<!-- Footer --> |
||||
<div class="docs-footer"> |
||||
<!-- Social links --> |
||||
<ul class="social"> |
||||
<li> |
||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=ratchet&type=watch&count=true" width="100" height="20"></iframe> |
||||
</li> |
||||
<li> |
||||
<a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet – Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a> |
||||
</li> |
||||
<li><a data-ignore="push" href="https://twitter.com/goratchet" class="twitter-follow-button" data-show-count="true"> |
||||
Follow @GoRatchet</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p class="docs-footer-text">Code licensed under the <a href="https://github.com/twbs/ratchet/blob/master/LICENSE" data-ignore="push">MIT License</a> and the docs are licensed under <a href="https://github.com/twbs/ratchet/blob/master/docs/LICENSE" data-ignore="push">CC BY 3.0</a>. Ratchet was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p> |
||||
|
||||
<ul class="docs-footer-links"> |
||||
<li>Currently v2.0.1</li> |
||||
<li>·</li> |
||||
<li><a href="https://github.com/twbs/ratchet/issues" data-ignore="push">Issues</a></li> |
||||
<li>·</li> |
||||
<li><a href="https://github.com/twbs/ratchet/releases" data-ignore="push">Releases</a></li> |
||||
<li>·</li> |
||||
<li><a href="http://goratchet.com/1.0.2/" data-ignore="push">Legacy v1.0.2 Docs</a></li> |
||||
</ul> |
||||
</div> |
||||
|
||||
|
||||
<script> |
||||
window.twttr = (function (d,s,id) { |
||||
var t, js, fjs = d.getElementsByTagName(s)[0]; |
||||
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1; |
||||
js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); |
||||
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } }); |
||||
}(document, "script", "twitter-wjs")); |
||||
</script> |
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> |
||||
<script src="/dist/js/ratchet.min.js"></script> |
||||
<script src="/assets/js/docs.min.js"></script> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,66 @@
|
||||
.hll { background-color: #ffffcc } |
||||
/*{ background: #f0f3f3; }*/ |
||||
.c { color: #999; } /* Comment */ |
||||
.err { color: #AA0000; background-color: #FFAAAA } /* Error */ |
||||
.k { color: #006699; } /* Keyword */ |
||||
.o { color: #555555 } /* Operator */ |
||||
.cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */ |
||||
.cp { color: #009999 } /* Comment.Preproc */ |
||||
.c1 { color: #999; } /* Comment.Single */ |
||||
.cs { color: #999; } /* Comment.Special */ |
||||
.gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */ |
||||
.ge { font-style: italic } /* Generic.Emph */ |
||||
.gr { color: #FF0000 } /* Generic.Error */ |
||||
.gh { color: #003300; } /* Generic.Heading */ |
||||
.gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */ |
||||
.go { color: #AAAAAA } /* Generic.Output */ |
||||
.gp { color: #000099; } /* Generic.Prompt */ |
||||
.gs { } /* Generic.Strong */ |
||||
.gu { color: #003300; } /* Generic.Subheading */ |
||||
.gt { color: #99CC66 } /* Generic.Traceback */ |
||||
.kc { color: #006699; } /* Keyword.Constant */ |
||||
.kd { color: #006699; } /* Keyword.Declaration */ |
||||
.kn { color: #006699; } /* Keyword.Namespace */ |
||||
.kp { color: #006699 } /* Keyword.Pseudo */ |
||||
.kr { color: #006699; } /* Keyword.Reserved */ |
||||
.kt { color: #007788; } /* Keyword.Type */ |
||||
.m { color: #FF6600 } /* Literal.Number */ |
||||
.s { color: #d44950 } /* Literal.String */ |
||||
.na { color: #4f9fcf } /* Name.Attribute */ |
||||
.nb { color: #336666 } /* Name.Builtin */ |
||||
.nc { color: #00AA88; } /* Name.Class */ |
||||
.no { color: #336600 } /* Name.Constant */ |
||||
.nd { color: #9999FF } /* Name.Decorator */ |
||||
.ni { color: #999999; } /* Name.Entity */ |
||||
.ne { color: #CC0000; } /* Name.Exception */ |
||||
.nf { color: #CC00FF } /* Name.Function */ |
||||
.nl { color: #9999FF } /* Name.Label */ |
||||
.nn { color: #00CCFF; } /* Name.Namespace */ |
||||
.nt { color: #2f6f9f; } /* Name.Tag */ |
||||
.nv { color: #003333 } /* Name.Variable */ |
||||
.ow { color: #000000; } /* Operator.Word */ |
||||
.w { color: #bbbbbb } /* Text.Whitespace */ |
||||
.mf { color: #FF6600 } /* Literal.Number.Float */ |
||||
.mh { color: #FF6600 } /* Literal.Number.Hex */ |
||||
.mi { color: #FF6600 } /* Literal.Number.Integer */ |
||||
.mo { color: #FF6600 } /* Literal.Number.Oct */ |
||||
.sb { color: #CC3300 } /* Literal.String.Backtick */ |
||||
.sc { color: #CC3300 } /* Literal.String.Char */ |
||||
.sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */ |
||||
.s2 { color: #CC3300 } /* Literal.String.Double */ |
||||
.se { color: #CC3300; } /* Literal.String.Escape */ |
||||
.sh { color: #CC3300 } /* Literal.String.Heredoc */ |
||||
.si { color: #AA0000 } /* Literal.String.Interpol */ |
||||
.sx { color: #CC3300 } /* Literal.String.Other */ |
||||
.sr { color: #33AAAA } /* Literal.String.Regex */ |
||||
.s1 { color: #CC3300 } /* Literal.String.Single */ |
||||
.ss { color: #FFCC33 } /* Literal.String.Symbol */ |
||||
.bp { color: #336666 } /* Name.Builtin.Pseudo */ |
||||
.vc { color: #003333 } /* Name.Variable.Class */ |
||||
.vg { color: #003333 } /* Name.Variable.Global */ |
||||
.vi { color: #003333 } /* Name.Variable.Instance */ |
||||
.il { color: #FF6600 } /* Literal.Number.Integer.Long */ |
||||
|
||||
.css .o, |
||||
.css .o + .nt, |
||||
.css .nt + .nt { color: #999; } |
||||
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 237 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 254 KiB |
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 116 KiB |
|
After Width: | Height: | Size: 72 KiB |
@ -0,0 +1,183 @@
|
||||
/* jshint jquery: true */ |
||||
/* global FingerBlast: true */ |
||||
|
||||
$(function() { |
||||
'use strict'; |
||||
|
||||
var doc; |
||||
var device; |
||||
var windowWidth; |
||||
var windowHeight; |
||||
var pageHeight; |
||||
var contentPadding; |
||||
var footerHeight; |
||||
var navComponentLinks; |
||||
var componentsList; |
||||
var componentLinks; |
||||
var contentSection; |
||||
var currentActive; |
||||
var topCache; |
||||
var win; |
||||
var bod; |
||||
var eventListeners; |
||||
var toolbarToggle; |
||||
|
||||
|
||||
var initialize = function () { |
||||
currentActive = 0; |
||||
topCache = []; |
||||
win = $(window); |
||||
doc = $(document); |
||||
bod = $(document.body); |
||||
device = device || $('.js-device'); |
||||
navComponentLinks = $('.js-jump-menu'); |
||||
componentsList = $('.js-component-group'); |
||||
componentLinks = $('.component-example a'); |
||||
contentSection = $('.component'); |
||||
topCache = contentSection.map(function () { return $(this).offset().top; }); |
||||
windowHeight = $(window).height() / 3; |
||||
windowWidth = $(window).width(); |
||||
pageHeight = $(document).height(); |
||||
contentPadding = parseInt($('.docs-content').css('padding-bottom'), 10); |
||||
footerHeight = $('.docs-footer').outerHeight(false); |
||||
toolbarToggle = $('.js-docs-component-toolbar'); |
||||
|
||||
// Device placement
|
||||
if (windowWidth >= 768) { |
||||
device.initialLeft = device.offset().left; |
||||
device.initialTop = device.initialTop || device.offset().top; |
||||
device.dockingOffset = ($(window).height() - device.height())/2; |
||||
} |
||||
|
||||
checkDesktopContent(); |
||||
calculateScroll(); |
||||
calculateToggle(); |
||||
|
||||
if (!eventListeners) { |
||||
addEventListeners(); |
||||
} |
||||
}; |
||||
|
||||
var addEventListeners = function () { |
||||
eventListeners = true; |
||||
|
||||
device.on('click', function (e) { |
||||
e.preventDefault(); |
||||
}); |
||||
|
||||
// Mobile navigation
|
||||
$('.js-docs-nav-trigger').on('click', function () { |
||||
var nav = $('.docs-nav-group'); |
||||
var trigger = $('.js-docs-nav-trigger'); |
||||
|
||||
trigger.toggleClass('active'); |
||||
nav.toggleClass('active'); |
||||
}); |
||||
|
||||
navComponentLinks.click(function(e) { |
||||
e.stopPropagation(); |
||||
e.preventDefault(); |
||||
componentsList.toggleClass('active'); |
||||
}); |
||||
|
||||
doc.on('click', function () { |
||||
componentsList.removeClass('active'); |
||||
}); |
||||
|
||||
// Platform switcher
|
||||
$('.platform-switch').on('click', function () { |
||||
var components = $('.docs-components'); |
||||
var platform = $(this).attr('data-platform'); |
||||
|
||||
// Set platform
|
||||
if (components.hasClass('platform-ios')) { |
||||
components.removeClass('platform-ios'); |
||||
components.addClass(platform); |
||||
} else if (components.hasClass('platform-android')) { |
||||
components.removeClass('platform-android'); |
||||
components.addClass(platform); |
||||
} else { |
||||
components.addClass(platform); |
||||
} |
||||
|
||||
// Deal with active states
|
||||
$(this).siblings('.active').removeClass('active'); |
||||
$(this).addClass('active'); |
||||
}); |
||||
|
||||
win.on('scroll', calculateScroll); |
||||
win.on('scroll', calculateToggle); |
||||
}; |
||||
|
||||
var checkDesktopContent = function () { |
||||
windowWidth = $(window).width(); |
||||
if (windowWidth <= 768) { |
||||
var content = $('.content'); |
||||
if (content.length > 1) { |
||||
$(content[0]).remove(); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
var calculateScroll = function() { |
||||
// if small screen don't worry about this
|
||||
if (windowWidth <= 768) { |
||||
return; |
||||
} |
||||
|
||||
// Save scrollTop value
|
||||
var contentSectionItem; |
||||
var currentTop = win.scrollTop(); |
||||
|
||||
if((device.initialTop - currentTop) <= device.dockingOffset) { |
||||
device[0].className = 'device device-fixed'; |
||||
device.css({top: device.dockingOffset}); |
||||
} else { |
||||
device[0].className = 'device'; |
||||
device[0].setAttribute('style',''); |
||||
} |
||||
|
||||
function updateContent(content) { |
||||
$('#iwindow').html(content); |
||||
} |
||||
|
||||
// Injection of components into device
|
||||
for (var l = contentSection.length; l--;) { |
||||
if ((topCache[l] - currentTop) < windowHeight) { |
||||
if (currentActive === l) { |
||||
return; |
||||
} |
||||
currentActive = l; |
||||
bod.find('.component.active').removeClass('active'); |
||||
contentSectionItem = $(contentSection[l]); |
||||
contentSectionItem.addClass('active'); |
||||
if (contentSectionItem.attr('id')) { |
||||
device.attr('id', contentSectionItem.attr('id') + 'InDevice'); |
||||
} else { |
||||
device.attr('id', ''); |
||||
} |
||||
if (!contentSectionItem.hasClass('informational')) { |
||||
updateContent(contentSectionItem.find('.highlight .html').text()); |
||||
} |
||||
break; |
||||
} |
||||
} |
||||
|
||||
}; |
||||
|
||||
// Toolbar toggle
|
||||
var calculateToggle = function () { |
||||
var currentTop = win.scrollTop(); |
||||
var headerHeight = $('.docs-sub-header').outerHeight(); |
||||
|
||||
if(currentTop >= headerHeight) { |
||||
toolbarToggle.addClass('visible'); |
||||
} else if (currentTop <= headerHeight) { |
||||
toolbarToggle.removeClass('visible'); |
||||
componentsList.removeClass('active'); |
||||
} |
||||
}; |
||||
|
||||
$(window).on('load resize', initialize); |
||||
$(window).on('load', function () { new FingerBlast('.device-content'); }); |
||||
}); |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,271 @@
|
||||
// FINGERBLAST.js
|
||||
// --------------
|
||||
// Adapted from phantom limb by Brian Cartensen
|
||||
|
||||
/* jshint bitwise: false */ |
||||
/* global GLOBAL: true */ |
||||
|
||||
function FingerBlast(element) { |
||||
'use strict'; |
||||
|
||||
this.element = typeof element === 'string' ? document.querySelector(element) : element; |
||||
this.listen(); |
||||
} |
||||
|
||||
FingerBlast.prototype = { |
||||
x: NaN, |
||||
y: NaN, |
||||
|
||||
startDistance: NaN, |
||||
startAngle: NaN, |
||||
|
||||
mouseIsDown: false, |
||||
|
||||
listen: function () { |
||||
'use strict'; |
||||
|
||||
var activate = this.activate.bind(this); |
||||
var deactivate = this.deactivate.bind(this); |
||||
|
||||
function contains (element, ancestor) { |
||||
var descendants, index, descendant; |
||||
if ('compareDocumentPosition' in ancestor) { |
||||
return !!(ancestor.compareDocumentPosition(element) & 16); |
||||
} else if ('contains' in ancestor) { |
||||
return ancestor !== element && ancestor.contains(element); |
||||
} else { |
||||
for ((descendants = ancestor.getElementsByTagName('*')), index = 0; (descendant = descendants[index++]);) { |
||||
if (descendant === element) { |
||||
return true; |
||||
} |
||||
} |
||||
return false; |
||||
} |
||||
} |
||||
|
||||
this.element.addEventListener('mouseover', function (e) { |
||||
var target = e.relatedTarget; |
||||
if (target !== this && !contains(target, this)) { |
||||
activate(); |
||||
} |
||||
}); |
||||
|
||||
this.element.addEventListener('mouseout', function (e) { |
||||
var target = e.relatedTarget; |
||||
if (target !== this && !contains(target, this)) { |
||||
deactivate(e); |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
activate: function () { |
||||
'use strict'; |
||||
|
||||
if (this.active) { |
||||
return; |
||||
} |
||||
this.element.addEventListener('mousedown', (this.touchStart = this.touchStart.bind(this)), true); |
||||
this.element.addEventListener('mousemove', (this.touchMove = this.touchMove.bind(this)), true); |
||||
this.element.addEventListener('mouseup', (this.touchEnd = this.touchEnd.bind(this)), true); |
||||
this.element.addEventListener('click', (this.click = this.click.bind(this)), true); |
||||
this.active = true; |
||||
}, |
||||
|
||||
deactivate: function (e) { |
||||
'use strict'; |
||||
|
||||
this.active = false; |
||||
if (this.mouseIsDown) { |
||||
this.touchEnd(e); |
||||
} |
||||
this.element.removeEventListener('mousedown', this.touchStart, true); |
||||
this.element.removeEventListener('mousemove', this.touchMove, true); |
||||
this.element.removeEventListener('mouseup', this.touchEnd, true); |
||||
this.element.removeEventListener('click', this.click, true); |
||||
}, |
||||
|
||||
click: function (e) { |
||||
'use strict'; |
||||
|
||||
if (e.synthetic) { |
||||
return; |
||||
} |
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
}, |
||||
|
||||
touchStart: function (e) { |
||||
'use strict'; |
||||
|
||||
if (e.synthetic || /input|textarea/.test(e.target.tagName.toLowerCase())) { |
||||
return; |
||||
} |
||||
|
||||
this.mouseIsDown = true; |
||||
|
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
|
||||
this.fireTouchEvents('touchstart', e); |
||||
}, |
||||
|
||||
touchMove: function (e) { |
||||
'use strict'; |
||||
|
||||
if (e.synthetic) { |
||||
return; |
||||
} |
||||
|
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
|
||||
this.move(e.clientX, e.clientY); |
||||
|
||||
if (this.mouseIsDown) { |
||||
this.fireTouchEvents('touchmove', e); |
||||
} |
||||
}, |
||||
|
||||
touchEnd: function (e) { |
||||
'use strict'; |
||||
|
||||
if (e.synthetic) { |
||||
return; |
||||
} |
||||
|
||||
this.mouseIsDown = false; |
||||
|
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
|
||||
this.fireTouchEvents('touchend', e); |
||||
|
||||
if (!this.target) { |
||||
return; |
||||
} |
||||
|
||||
// Mobile Safari moves all the mouse events to fire after the touchend event.
|
||||
this.target.dispatchEvent(this.createMouseEvent('mouseover', e)); |
||||
this.target.dispatchEvent(this.createMouseEvent('mousemove', e)); |
||||
this.target.dispatchEvent(this.createMouseEvent('mousedown', e)); |
||||
}, |
||||
|
||||
fireTouchEvents: function (eventName, originalEvent) { |
||||
'use strict'; |
||||
|
||||
var events = []; |
||||
var gestures = []; |
||||
|
||||
if (!this.target) { |
||||
return; |
||||
} |
||||
|
||||
// Convert 'ontouch*' properties and attributes to listeners.
|
||||
var onEventName = 'on' + eventName; |
||||
|
||||
if (onEventName in this.target) { |
||||
console.warn('Converting `' + onEventName + '` property to event listener.', this.target); |
||||
this.target.addEventListener(eventName, this.target[onEventName], false); |
||||
delete this.target[onEventName]; |
||||
} |
||||
|
||||
if (this.target.hasAttribute(onEventName)) { |
||||
console.warn('Converting `' + onEventName + '` attribute to event listener.', this.target); |
||||
var handler = new GLOBAL.Function('event', this.target.getAttribute(onEventName)); |
||||
this.target.addEventListener(eventName, handler, false); |
||||
this.target.removeAttribute(onEventName); |
||||
} |
||||
|
||||
// Set up a new event with the coordinates of the finger.
|
||||
var touch = this.createMouseEvent(eventName, originalEvent); |
||||
|
||||
events.push(touch); |
||||
|
||||
// Figure out scale and rotation.
|
||||
if (events.length > 1) { |
||||
var x = events[0].pageX - events[1].pageX; |
||||
var y = events[0].pageY - events[1].pageY; |
||||
|
||||
var distance = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); |
||||
var angle = Math.atan2(x, y) * (180 / Math.PI); |
||||
|
||||
var gestureName = 'gesturechange'; |
||||
|
||||
if (eventName === 'touchstart') { |
||||
gestureName = 'gesturestart'; |
||||
this.startDistance = distance; |
||||
this.startAngle = angle; |
||||
} |
||||
|
||||
if (eventName === 'touchend') { |
||||
gestureName = 'gestureend'; |
||||
} |
||||
|
||||
events.forEach(function(event) { |
||||
var gesture = this.createMouseEvent.call(event._finger, gestureName, event); |
||||
gestures.push(gesture); |
||||
}.bind(this)); |
||||
|
||||
events.concat(gestures).forEach(function(event) { |
||||
event.scale = distance / this.startDistance; |
||||
event.rotation = this.startAngle - angle; |
||||
}); |
||||
} |
||||
|
||||
// Loop through the events array and fill in each touch array.
|
||||
events.forEach(function(touch) { |
||||
touch.touches = events.filter(function(e) { |
||||
return ~e.type.indexOf('touch') && e.type !== 'touchend'; |
||||
}); |
||||
|
||||
touch.changedTouches = events.filter(function(e) { |
||||
return ~e.type.indexOf('touch') && e._finger.target === touch._finger.target; |
||||
}); |
||||
|
||||
touch.targetTouches = touch.changedTouches.filter(function(e) { |
||||
return ~e.type.indexOf('touch') && e.type !== 'touchend'; |
||||
}); |
||||
}); |
||||
|
||||
// Then fire the events.
|
||||
events.concat(gestures).forEach(function(event, i) { |
||||
event.identifier = i; |
||||
event._finger.target.dispatchEvent(event); |
||||
}); |
||||
}, |
||||
|
||||
createMouseEvent: function (eventName, originalEvent) { |
||||
'use strict'; |
||||
|
||||
var e = document.createEvent('MouseEvent'); |
||||
|
||||
e.initMouseEvent(eventName, true, true, |
||||
originalEvent.view, originalEvent.detail, |
||||
this.x || originalEvent.screenX, this.y || originalEvent.screenY, |
||||
this.x || originalEvent.clientX, this.y || originalEvent.clientY, |
||||
originalEvent.ctrlKey, originalEvent.shiftKey, |
||||
originalEvent.altKey, originalEvent.metaKey, |
||||
originalEvent.button, this.target || originalEvent.relatedTarget |
||||
); |
||||
|
||||
e.synthetic = true; |
||||
e._finger = this; |
||||
|
||||
return e; |
||||
}, |
||||
|
||||
move: function (x, y) { |
||||
'use strict'; |
||||
|
||||
if (isNaN(x) || isNaN(y)) { |
||||
this.target = null; |
||||
} else { |
||||
this.x = x; |
||||
this.y = y; |
||||
|
||||
if (!this.mouseIsDown) { |
||||
this.target = document.elementFromPoint(x, y); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
@ -0,0 +1,588 @@
|
||||
/*! |
||||
* ===================================================== |
||||
* Ratchet v2.0.1 (http://goratchet.com) |
||||
* Copyright 2014 Connor Sears |
||||
* Licensed under MIT. |
||||
* |
||||
* v2.0.1 designed by @connors. |
||||
* ===================================================== |
||||
*/ |
||||
|
||||
body { |
||||
font-family: "Roboto", sans-serif; |
||||
font-size: 18px; |
||||
line-height: 22px; |
||||
color: #222222; |
||||
} |
||||
|
||||
a { |
||||
color: #33b5e5; |
||||
} |
||||
a:active { |
||||
color: #1a9bcb; |
||||
} |
||||
|
||||
.content { |
||||
background-color: #f2f2f2; |
||||
} |
||||
|
||||
.bar-nav ~ .content { |
||||
padding-top: 50px; |
||||
} |
||||
|
||||
.bar-header-secondary ~ .content { |
||||
padding-top: 100px; |
||||
} |
||||
|
||||
.bar-tab ~ .content { |
||||
padding-top: 50px; |
||||
padding-bottom: 0; |
||||
} |
||||
|
||||
.bar-footer ~ .content { |
||||
padding-bottom: 50px; |
||||
} |
||||
|
||||
.bar-footer-secondary ~ .content { |
||||
padding-bottom: 100px; |
||||
} |
||||
|
||||
.btn { |
||||
padding: 8px 15px; |
||||
font-size: 14px; |
||||
color: #222222; |
||||
background-color: #cecece; |
||||
border: 0; |
||||
border-radius: 2px; |
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25); |
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25); |
||||
} |
||||
.btn:active, .btn.active { |
||||
color: #222222; |
||||
border: 0; |
||||
background-color: #999999; |
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); |
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); |
||||
} |
||||
|
||||
.btn-primary { |
||||
color: #fff; |
||||
border: 0; |
||||
background-color: #33b5e5; |
||||
} |
||||
.btn-primary:active, .btn-primary.active { |
||||
color: #fff; |
||||
border: 0; |
||||
background-color: #1a9bcb; |
||||
} |
||||
|
||||
.btn-positive { |
||||
color: #fff; |
||||
border: 0; |
||||
background-color: #99cc00; |
||||
} |
||||
.btn-positive:active, .btn-positive.active { |
||||
color: #fff; |
||||
border: 0; |
||||
background-color: #739900; |
||||
} |
||||
|
||||
.btn-negative { |
||||
color: #fff; |
||||
border: 0; |
||||
background-color: #ff4444; |
||||
} |
||||
.btn-negative:active, .btn-negative.active { |
||||
color: #fff; |
||||
border: 0; |
||||
background-color: #ff1111; |
||||
} |
||||
|
||||
.btn-outlined { |
||||
border: 1px solid #999999; |
||||
background-color: transparent; |
||||
-webkit-box-shadow: none; |
||||
box-shadow: none; |
||||
} |
||||
.btn-outlined.btn-primary { |
||||
border: 1px solid #33b5e5; |
||||
color: #33b5e5; |
||||
} |
||||
.btn-outlined.btn-primary:active { |
||||
border: 1px solid #33b5e5; |
||||
background-color: #33b5e5; |
||||
} |
||||
.btn-outlined.btn-positive { |
||||
border: 1px solid #99cc00; |
||||
color: #99cc00; |
||||
} |
||||
.btn-outlined.btn-positive:active { |
||||
border: 1px solid #99cc00; |
||||
background-color: #99cc00; |
||||
} |
||||
.btn-outlined.btn-negative { |
||||
border: 1px solid #ff4444; |
||||
color: #ff4444; |
||||
} |
||||
.btn-outlined.btn-negative:active { |
||||
border: 1px solid #ff4444; |
||||
background-color: #ff4444; |
||||
} |
||||
.btn-outlined:active { |
||||
border: 1px solid #999999; |
||||
background-color: #999999; |
||||
-webkit-box-shadow: none; |
||||
box-shadow: none; |
||||
} |
||||
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { |
||||
color: #fff; |
||||
-webkit-box-shadow: none; |
||||
box-shadow: none; |
||||
} |
||||
|
||||
.btn-link { |
||||
color: #33b5e5; |
||||
background-color: transparent; |
||||
border: none; |
||||
-webkit-box-shadow: none; |
||||
box-shadow: none; |
||||
} |
||||
.btn-link:active, .btn-link.active { |
||||
color: #1a9bcb; |
||||
background-color: transparent; |
||||
-webkit-box-shadow: none; |
||||
box-shadow: none; |
||||
} |
||||
|
||||
.btn-block { |
||||
padding: 15px 0; |
||||
font-size: 18px; |
||||
} |
||||
|
||||
.btn .badge { |
||||
background-color: rgba(0, 0, 0, 0.15); |
||||
} |
||||
.btn .badge.badge-inverted { |
||||
background-color: transparent; |
||||
} |
||||
.btn:active .badge { |
||||
color: #fff; |
||||
} |
||||
|
||||
.bar { |
||||
height: 50px; |
||||
background-color: #dddddd; |
||||
border-bottom: 1px solid #b1b1b1; |
||||
-webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07); |
||||
box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07); |
||||
} |
||||
.bar.bar-header-secondary { |
||||
top: 50px; |
||||
} |
||||
.bar.bar-footer-secondary { |
||||
bottom: 50px; |
||||
} |
||||
.bar.bar-footer-secondary-tab { |
||||
bottom: 50px; |
||||
} |
||||
.bar .bar-footer, |
||||
.bar .bar-footer-secondary, |
||||
.bar .bar-footer-secondary-tab { |
||||
border-bottom: 0; |
||||
border-top: 1px solid #b1b1b1; |
||||
-webkit-box-shadow: inset 0 -2px 0 #33b5e5; |
||||
box-shadow: inset 0 -2px 0 #33b5e5; |
||||
} |
||||
|
||||
.bar-tab { |
||||
top: 0; |
||||
bottom: auto; |
||||
height: 50px; |
||||
border-top: 0; |
||||
} |
||||
.bar-tab .tab-item { |
||||
color: #929292; |
||||
} |
||||
.bar-tab .tab-item.active { |
||||
color: #33b5e5; |
||||
-webkit-box-shadow: inset 0 -2px 0 #33b5e5; |
||||
box-shadow: inset 0 -2px 0 #33b5e5; |
||||
} |
||||
.bar-tab .tab-item:active { |
||||
color: #929292; |
||||
background-color: #78c6e3; |
||||
} |
||||
.bar-tab .tab-item .icon { |
||||
top: 3px; |
||||
padding-top: 0; |
||||
padding-bottom: 0; |
||||
} |
||||
|
||||
.title { |
||||
position: static; |
||||
padding-left: 15px; |
||||
font-size: 18px; |
||||
line-height: 49px; |
||||
text-align: left; |
||||
} |
||||
|
||||
.bar .btn { |
||||
top: 7px; |
||||
padding-top: 10px; |
||||
padding-bottom: 10px; |
||||
} |
||||
.bar .btn-link { |
||||
top: 0; |
||||
padding: 0; |
||||
color: #33b5e5; |
||||
font-size: 18px; |
||||
line-height: 49px; |
||||
} |
||||
.bar .btn-link:active, .bar .btn-link.active { |
||||
color: #1a9bcb; |
||||
} |
||||
.bar .btn-link .icon { |
||||
top: 2px; |
||||
padding: 0; |
||||
} |
||||
.bar .btn-block { |
||||
top: 4px; |
||||
} |
||||
|
||||
.bar .segmented-control { |
||||
top: 7px; |
||||
} |
||||
|
||||
.bar .icon { |
||||
padding-top: 13px; |
||||
padding-bottom: 13px; |
||||
} |
||||
.bar .title .icon { |
||||
padding: 0; |
||||
} |
||||
.bar .title .icon.icon-caret { |
||||
top: 10px; |
||||
color: #777; |
||||
} |
||||
|
||||
.bar input[type="search"] { |
||||
height: 35px; |
||||
} |
||||
|
||||
.badge.badge-inverted { |
||||
color: #999999; |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.badge-primary { |
||||
color: #fff; |
||||
background-color: #33b5e5; |
||||
} |
||||
.badge-primary.badge-inverted { |
||||
color: #33b5e5; |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.badge-positive { |
||||
color: #fff; |
||||
background-color: #99cc00; |
||||
} |
||||
.badge-positive.badge-inverted { |
||||
color: #99cc00; |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.badge-negative { |
||||
color: #fff; |
||||
background-color: #ff4444; |
||||
} |
||||
.badge-negative.badge-inverted { |
||||
color: #ff4444; |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.card { |
||||
border-color: #d9d9d9; |
||||
border-radius: 2px; |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.table-view { |
||||
background-color: transparent; |
||||
} |
||||
.table-view .table-view-cell { |
||||
border-bottom: 1px solid #d9d9d9; |
||||
} |
||||
.table-view .table-view-cell:last-child { |
||||
background-image: none; |
||||
} |
||||
.table-view .table-view-cell > a:not(.btn):active { |
||||
background-color: #e0e0e0; |
||||
} |
||||
.table-view .table-view-cell > a:not(.btn):active .icon { |
||||
color: #fff; |
||||
} |
||||
.table-view .table-view-divider { |
||||
padding-top: 25px; |
||||
font-size: 12px; |
||||
font-weight: bold; |
||||
text-transform: uppercase; |
||||
border-top: 0; |
||||
border-bottom: 2px solid #a9a9a9; |
||||
background-color: transparent; |
||||
} |
||||
|
||||
select, |
||||
textarea, |
||||
input[type="text"], |
||||
input[type="search"], |
||||
input[type="password"], |
||||
input[type="datetime"], |
||||
input[type="datetime-local"], |
||||
input[type="date"], |
||||
input[type="month"], |
||||
input[type="time"], |
||||
input[type="week"], |
||||
input[type="number"], |
||||
input[type="email"], |
||||
input[type="url"], |
||||
input[type="tel"], |
||||
input[type="color"], |
||||
.input-group { |
||||
height: 40px; |
||||
padding: 10px 15px; |
||||
border: 1px solid rgba(0, 0, 0, 0.2); |
||||
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); |
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); |
||||
} |
||||
|
||||
input[type="search"] { |
||||
border-radius: 2px; |
||||
} |
||||
|
||||
select, |
||||
textarea, |
||||
.input-group { |
||||
height: auto; |
||||
} |
||||
|
||||
.input-group { |
||||
padding: 0; |
||||
border: 0; |
||||
} |
||||
|
||||
.input-group input { |
||||
border: 0; |
||||
border-bottom: 1px solid #d9d9d9; |
||||
-webkit-box-shadow: none; |
||||
box-shadow: none; |
||||
} |
||||
|
||||
.input-group input:last-child { |
||||
background-image: none; |
||||
} |
||||
|
||||
.input-row { |
||||
border-bottom: 1px solid #d9d9d9; |
||||
} |
||||
|
||||
.input-row label + input { |
||||
background-image: none; |
||||
border-bottom: 0; |
||||
} |
||||
|
||||
.segmented-control { |
||||
font-size: 14px; |
||||
background-color: #cecece; |
||||
border: 0; |
||||
border-radius: 2px; |
||||
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); |
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); |
||||
} |
||||
.segmented-control .control-item { |
||||
padding-top: 10px; |
||||
padding-bottom: 10px; |
||||
color: #222222; |
||||
border-left: 1px solid #999; |
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); |
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); |
||||
} |
||||
.segmented-control .control-item:first-child { |
||||
border-left-width: 0; |
||||
} |
||||
.segmented-control .control-item:active, .segmented-control .control-item.active { |
||||
background-color: #999999; |
||||
} |
||||
|
||||
.segmented-control-primary { |
||||
border: 0; |
||||
} |
||||
.segmented-control-primary .control-item { |
||||
color: #fff; |
||||
border-color: inherit; |
||||
} |
||||
.segmented-control-primary .control-item:active, .segmented-control-primary .control-item.active { |
||||
color: #fff; |
||||
background-color: #33b5e5; |
||||
} |
||||
|
||||
.segmented-control-positive { |
||||
border: 0; |
||||
} |
||||
.segmented-control-positive .control-item { |
||||
color: #fff; |
||||
border-color: inherit; |
||||
} |
||||
.segmented-control-positive .control-item:active, .segmented-control-positive .control-item.active { |
||||
color: #fff; |
||||
background-color: #99cc00; |
||||
} |
||||
|
||||
.segmented-control-negative { |
||||
border: 0; |
||||
} |
||||
.segmented-control-negative .control-item { |
||||
color: #fff; |
||||
border-color: inherit; |
||||
} |
||||
.segmented-control-negative .control-item:active, .segmented-control-negative .control-item.active { |
||||
color: #fff; |
||||
background-color: #ff4444; |
||||
} |
||||
|
||||
.popover { |
||||
top: 47px; |
||||
left: 15px; |
||||
width: 200px; |
||||
margin-left: 0; |
||||
border: 1px solid #9b9b9b; |
||||
border-radius: 0; |
||||
-webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out; |
||||
-moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out; |
||||
transition: transform .1s ease-in-out, opacity .2s ease-in-out; |
||||
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); |
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); |
||||
-webkit-transform: scale(0.75); |
||||
-ms-transform: scale(0.75); |
||||
transform: scale(0.75); |
||||
} |
||||
.popover:before { |
||||
display: none; |
||||
} |
||||
.popover.visible { |
||||
-webkit-transform: scale(1); |
||||
-ms-transform: scale(1); |
||||
transform: scale(1); |
||||
} |
||||
|
||||
.backdrop { |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.popover .bar { |
||||
border-radius: 0; |
||||
} |
||||
.popover .bar-nav ~ .table-view { |
||||
padding-top: 50px; |
||||
} |
||||
|
||||
.popover .table-view { |
||||
border-radius: 12px; |
||||
} |
||||
|
||||
.toggle { |
||||
width: 104px; |
||||
height: 28px; |
||||
border: 2px solid #d7d7d7; |
||||
border-radius: 0; |
||||
background-color: #d7d7d7; |
||||
} |
||||
.toggle .toggle-handle { |
||||
top: 0; |
||||
left: 0; |
||||
width: 50px; |
||||
height: 24px; |
||||
border: 1px solid #b5b5b5; |
||||
border-radius: 2px; |
||||
background-color: #bebebe; |
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1); |
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1); |
||||
} |
||||
.toggle:before { |
||||
top: 1px; |
||||
right: auto; |
||||
left: 11px; |
||||
z-index: 3; |
||||
color: #fff; |
||||
} |
||||
.toggle.active { |
||||
border: 2px solid #d7d7d7; |
||||
background-color: #d7d7d7; |
||||
} |
||||
.toggle.active .toggle-handle { |
||||
margin-right: 2px; |
||||
background-color: #33b5e5; |
||||
border-color: #33b5e5; |
||||
-webkit-transform: translate3d(50px, 0, 0); |
||||
-ms-transform: translate3d(50px, 0, 0); |
||||
transform: translate3d(50px, 0, 0); |
||||
} |
||||
.toggle.active:before { |
||||
left: auto; |
||||
right: 14px; |
||||
color: #fff; |
||||
} |
||||
|
||||
.navigate-left:after, |
||||
.push-left:after { |
||||
content: ''; |
||||
} |
||||
|
||||
.navigate-right:after, |
||||
.push-right:after { |
||||
content: ''; |
||||
} |
||||
|
||||
.icon-caret:before { |
||||
content: '\e800'; |
||||
} |
||||
|
||||
.icon-down:before, |
||||
.icon-down-nav:before { |
||||
content: '\e801'; |
||||
} |
||||
|
||||
.icon-download:before { |
||||
content: '\e802'; |
||||
} |
||||
|
||||
.icon-left:before, |
||||
.icon-left-nav:before { |
||||
content: '\e803'; |
||||
} |
||||
|
||||
.icon-more-vertical:before { |
||||
content: '\e804'; |
||||
} |
||||
|
||||
.icon-more:before { |
||||
content: '\e805'; |
||||
} |
||||
|
||||
.icon-right:before, |
||||
.icon-right-nav:before { |
||||
content: '\e806'; |
||||
} |
||||
|
||||
.icon-search:before { |
||||
content: '\e807'; |
||||
} |
||||
|
||||
.icon-share:before { |
||||
content: '\e808'; |
||||
} |
||||
|
||||
.icon-up:before, |
||||
.icon-up-nav:before { |
||||
content: '\e809'; |
||||
} |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,471 @@
|
||||
/*! |
||||
* ===================================================== |
||||
* Ratchet v2.0.1 (http://goratchet.com) |
||||
* Copyright 2014 Connor Sears |
||||
* Licensed under MIT. |
||||
* |
||||
* v2.0.1 designed by @connors. |
||||
* ===================================================== |
||||
*/ |
||||
|
||||
a { |
||||
color: #007aff; |
||||
} |
||||
a:active { |
||||
color: #0062cc; |
||||
} |
||||
|
||||
.content { |
||||
background-color: #efeff4; |
||||
} |
||||
|
||||
.h5, h5, |
||||
.h6, h6, |
||||
p { |
||||
color: #8f8f94; |
||||
} |
||||
|
||||
.h5, h5, |
||||
.h6, h6 { |
||||
font-weight: normal; |
||||
text-transform: uppercase; |
||||
} |
||||
|
||||
.btn { |
||||
border: 1px solid #929292; |
||||
color: #929292; |
||||
background-color: rgba(247, 247, 247, 0.98); |
||||
-webkit-transition: all; |
||||
-moz-transition: all; |
||||
transition: all; |
||||
-webkit-transition-duration: 0.2s; |
||||
-moz-transition-duration: 0.2s; |
||||
transition-duration: 0.2s; |
||||
-webkit-transition-timing-function: linear; |
||||
-moz-transition-timing-function: linear; |
||||
transition-timing-function: linear; |
||||
} |
||||
.btn:active, .btn.active { |
||||
color: #fff; |
||||
background-color: #929292; |
||||
} |
||||
|
||||
.btn-primary { |
||||
color: #fff; |
||||
border: 1px solid #007aff; |
||||
background-color: #007aff; |
||||
} |
||||
.btn-primary:active, .btn-primary.active { |
||||
border: 1px solid #0062cc; |
||||
background-color: #0062cc; |
||||
} |
||||
|
||||
.btn-positive { |
||||
color: #fff; |
||||
border: 1px solid #4cd964; |
||||
background-color: #4cd964; |
||||
} |
||||
.btn-positive:active, .btn-positive.active { |
||||
border: 1px solid #2ac845; |
||||
background-color: #2ac845; |
||||
} |
||||
|
||||
.btn-negative { |
||||
color: #fff; |
||||
border: 1px solid #dd524d; |
||||
background-color: #dd524d; |
||||
} |
||||
.btn-negative:active, .btn-negative.active { |
||||
border: 1px solid #cf2d28; |
||||
background-color: #cf2d28; |
||||
} |
||||
|
||||
.btn-outlined { |
||||
background-color: transparent; |
||||
} |
||||
.btn-outlined.btn-primary { |
||||
color: #007aff; |
||||
} |
||||
.btn-outlined.btn-positive { |
||||
color: #4cd964; |
||||
} |
||||
.btn-outlined.btn-negative { |
||||
color: #dd524d; |
||||
} |
||||
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { |
||||
color: #fff; |
||||
} |
||||
|
||||
.btn-link { |
||||
color: #007aff; |
||||
background-color: transparent; |
||||
border: none; |
||||
} |
||||
.btn-link:active, .btn-link.active { |
||||
color: #0062cc; |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.btn .badge { |
||||
background-color: rgba(0, 0, 0, 0.15); |
||||
} |
||||
.btn .badge.badge-inverted { |
||||
background-color: transparent; |
||||
} |
||||
.btn:active .badge { |
||||
color: #fff; |
||||
} |
||||
|
||||
.bar { |
||||
border-bottom: 0; |
||||
background-color: rgba(247, 247, 247, 0.98); |
||||
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); |
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); |
||||
} |
||||
.bar.bar-header-secondary { |
||||
top: 44px; |
||||
} |
||||
.bar.bar-footer-secondary { |
||||
bottom: 44px; |
||||
} |
||||
.bar.bar-footer-secondary-tab { |
||||
bottom: 50px; |
||||
} |
||||
.bar.bar-footer, .bar.bar-footer-secondary, .bar.bar-footer-secondary-tab { |
||||
border-top: 0; |
||||
} |
||||
|
||||
.bar-tab { |
||||
border-top: 0; |
||||
} |
||||
|
||||
.tab-item { |
||||
color: #929292; |
||||
} |
||||
.tab-item.active, .tab-item:active { |
||||
color: #007aff; |
||||
} |
||||
|
||||
.bar-nav .btn-link { |
||||
color: #007aff; |
||||
} |
||||
.bar-nav .btn-link:active { |
||||
color: #007aff; |
||||
opacity: .6; |
||||
} |
||||
|
||||
.badge.badge-inverted { |
||||
color: #929292; |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.badge-primary { |
||||
color: #fff; |
||||
background-color: #007aff; |
||||
} |
||||
.badge-primary.badge-inverted { |
||||
color: #007aff; |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.badge-positive { |
||||
color: #fff; |
||||
background-color: #4cd964; |
||||
} |
||||
.badge-positive.badge-inverted { |
||||
color: #4cd964; |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.badge-negative { |
||||
color: #fff; |
||||
background-color: #dd524d; |
||||
} |
||||
.badge-negative.badge-inverted { |
||||
color: #dd524d; |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.card .table-view { |
||||
background-image: none; |
||||
} |
||||
|
||||
.card .table-view-cell:last-child { |
||||
background-image: none; |
||||
} |
||||
|
||||
.table-view { |
||||
border-top: 0; |
||||
border-bottom: 0; |
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); |
||||
background-position: 0 100%, 0 0%; |
||||
background-repeat: no-repeat; |
||||
} |
||||
.table-view .table-view-cell { |
||||
border-bottom: 0; |
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); |
||||
background-position: 15px 100%; |
||||
background-repeat: no-repeat; |
||||
} |
||||
.table-view .table-view-cell:last-child { |
||||
background-image: none; |
||||
} |
||||
.table-view .table-view-divider { |
||||
border-top: 0; |
||||
border-bottom: 0; |
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); |
||||
background-position: 0 100%, 0 0%; |
||||
background-repeat: no-repeat; |
||||
} |
||||
|
||||
select, |
||||
textarea, |
||||
input[type="text"], |
||||
input[type="search"], |
||||
input[type="password"], |
||||
input[type="datetime"], |
||||
input[type="datetime-local"], |
||||
input[type="date"], |
||||
input[type="month"], |
||||
input[type="time"], |
||||
input[type="week"], |
||||
input[type="number"], |
||||
input[type="email"], |
||||
input[type="url"], |
||||
input[type="tel"], |
||||
input[type="color"], |
||||
.input-group { |
||||
height: 40px; |
||||
padding: 10px 15px; |
||||
border: 1px solid rgba(0, 0, 0, 0.2); |
||||
} |
||||
|
||||
input[type="search"] { |
||||
height: 34px; |
||||
text-align: center; |
||||
background-color: rgba(0, 0, 0, 0.1); |
||||
border: 0; |
||||
border-radius: 6px; |
||||
} |
||||
|
||||
input[type="search"]:focus { |
||||
text-align: left; |
||||
} |
||||
|
||||
select, |
||||
textarea, |
||||
.input-group { |
||||
height: auto; |
||||
} |
||||
|
||||
.input-group { |
||||
padding: 0; |
||||
border: 0; |
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); |
||||
background-position: 0 100%, 0 0%; |
||||
background-repeat: no-repeat; |
||||
} |
||||
|
||||
.input-group input { |
||||
border: 0; |
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); |
||||
background-position: 15px 100%; |
||||
background-repeat: no-repeat; |
||||
} |
||||
|
||||
.input-group input:last-child { |
||||
background-image: none; |
||||
} |
||||
|
||||
.input-row { |
||||
border-bottom: 0; |
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); |
||||
background-position: 15px 100%; |
||||
background-repeat: no-repeat; |
||||
} |
||||
|
||||
.input-row:last-child, |
||||
.input-row label + input { |
||||
background-image: none; |
||||
} |
||||
|
||||
.segmented-control { |
||||
background-color: transparent; |
||||
border: 1px solid #929292; |
||||
} |
||||
.segmented-control .control-item { |
||||
color: #929292; |
||||
border-color: #929292; |
||||
-webkit-transition: background-color 0.1s linear; |
||||
-moz-transition: background-color 0.1s linear; |
||||
transition: background-color 0.1s linear; |
||||
} |
||||
.segmented-control .control-item:active { |
||||
background-color: #ebebeb; |
||||
} |
||||
.segmented-control .control-item.active { |
||||
color: #fff; |
||||
background-color: #929292; |
||||
} |
||||
|
||||
.segmented-control-primary { |
||||
border: 1px solid #007aff; |
||||
} |
||||
.segmented-control-primary .control-item { |
||||
color: #007aff; |
||||
border-color: inherit; |
||||
} |
||||
.segmented-control-primary .control-item:active { |
||||
background-color: #b3d7ff; |
||||
} |
||||
.segmented-control-primary .control-item.active { |
||||
color: #fff; |
||||
background-color: #007aff; |
||||
} |
||||
|
||||
.segmented-control-positive { |
||||
border: 1px solid #4cd964; |
||||
} |
||||
.segmented-control-positive .control-item { |
||||
color: #4cd964; |
||||
border-color: inherit; |
||||
} |
||||
.segmented-control-positive .control-item:active { |
||||
background-color: #dff8e3; |
||||
} |
||||
.segmented-control-positive .control-item.active { |
||||
color: #fff; |
||||
background-color: #4cd964; |
||||
} |
||||
|
||||
.segmented-control-negative { |
||||
border: 1px solid #dd524d; |
||||
} |
||||
.segmented-control-negative .control-item { |
||||
color: #dd524d; |
||||
border-color: inherit; |
||||
} |
||||
.segmented-control-negative .control-item:active { |
||||
background-color: #fae4e3; |
||||
} |
||||
.segmented-control-negative .control-item.active { |
||||
color: #fff; |
||||
background-color: #dd524d; |
||||
} |
||||
|
||||
.popover { |
||||
border-radius: 12px; |
||||
-webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out; |
||||
-moz-transition: -moz-transform .2s ease-in-out, opacity .2s ease-in-out; |
||||
transition: transform .2s ease-in-out, opacity .2s ease-in-out; |
||||
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; |
||||
-moz-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; |
||||
transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; |
||||
} |
||||
.popover:before { |
||||
border-bottom: 15px solid rgba(247, 247, 247, 0.98); |
||||
} |
||||
|
||||
.popover .bar { |
||||
-webkit-box-shadow: none; |
||||
box-shadow: none; |
||||
} |
||||
|
||||
.popover .bar-nav { |
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.15); |
||||
} |
||||
|
||||
.popover .table-view { |
||||
border-radius: 12px; |
||||
background-image: none; |
||||
} |
||||
|
||||
.modal { |
||||
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); |
||||
-moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); |
||||
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); |
||||
} |
||||
.modal.active { |
||||
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); |
||||
-moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); |
||||
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); |
||||
} |
||||
|
||||
.toggle { |
||||
width: 47px; |
||||
border: 2px solid #e6e6e6; |
||||
-webkit-box-shadow: inset 0 0 0 0 #e1e1e1; |
||||
box-shadow: inset 0 0 0 0 #e1e1e1; |
||||
-webkit-transition-property: box-shadow, border; |
||||
-moz-transition-property: box-shadow, border; |
||||
transition-property: box-shadow, border; |
||||
-webkit-transition-duration: 0.2s; |
||||
-moz-transition-duration: 0.2s; |
||||
transition-duration: 0.2s; |
||||
} |
||||
.toggle .toggle-handle { |
||||
border: 1px solid rgba(0, 0, 0, 0.2); |
||||
-webkit-transition-property: -webkit-transform, border, width; |
||||
-moz-transition-property: -moz-transform, border, width; |
||||
transition-property: transform, border, width; |
||||
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); |
||||
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); |
||||
} |
||||
.toggle:before { |
||||
display: none; |
||||
} |
||||
.toggle.active { |
||||
border: 2px solid #4cd964; |
||||
background-color: transparent; |
||||
-webkit-box-shadow: inset 0 0 0 13px #4cd964; |
||||
box-shadow: inset 0 0 0 13px #4cd964; |
||||
} |
||||
.toggle.active .toggle-handle { |
||||
-webkit-transform: translate3d(17px, 0, 0); |
||||
-ms-transform: translate3d(17px, 0, 0); |
||||
transform: translate3d(17px, 0, 0); |
||||
} |
||||
.toggle.active .toggle-handle { |
||||
border-color: #4cd964; |
||||
} |
||||
|
||||
.content.fade { |
||||
-webkit-transition: opacity 0.2s ease-in-out; |
||||
-moz-transition: opacity 0.2s ease-in-out; |
||||
transition: opacity 0.2s ease-in-out; |
||||
} |
||||
.content.sliding { |
||||
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); |
||||
-moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); |
||||
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); |
||||
} |
||||
.content.sliding.sliding-in, .content.sliding.right:not([class*="sliding-in"]) { |
||||
-webkit-animation-name: fadeOverlay; |
||||
-moz-animation-name: fadeOverlay; |
||||
animation-name: fadeOverlay; |
||||
-webkit-animation-duration: 0.4s; |
||||
-moz-animation-duration: 0.4s; |
||||
animation-duration: 0.4s; |
||||
} |
||||
.content.sliding.right:not([class*="sliding-in"]) { |
||||
-webkit-animation-direction: reverse; |
||||
-moz-animation-direction: reverse; |
||||
animation-direction: reverse; |
||||
} |
||||
.content.sliding.left { |
||||
-webkit-transform: translate3d(-20%, 0, 0); |
||||
-ms-transform: translate3d(-20%, 0, 0); |
||||
transform: translate3d(-20%, 0, 0); |
||||
} |
||||
|
||||
@-webkit-keyframes fadeOverlay { |
||||
from { |
||||
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0); |
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0); |
||||
} |
||||
|
||||
to { |
||||
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1); |
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1); |
||||
} |
||||
} |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,916 @@
|
||||
/*! |
||||
* ===================================================== |
||||
* Ratchet v2.0.1 (http://goratchet.com)
|
||||
* Copyright 2014 Connor Sears |
||||
* Licensed under MIT. |
||||
* |
||||
* v2.0.1 designed by @connors. |
||||
* ===================================================== |
||||
*/ |
||||
/* ---------------------------------- |
||||
* MODAL v2.0.1 |
||||
* Licensed under The MIT License |
||||
* http://opensource.org/licenses/MIT
|
||||
* ---------------------------------- */ |
||||
|
||||
!(function () { |
||||
'use strict'; |
||||
|
||||
var findModals = function (target) { |
||||
var i, modals = document.querySelectorAll('a'); |
||||
for (; target && target !== document; target = target.parentNode) { |
||||
for (i = modals.length; i--;) { |
||||
if (modals[i] === target) { |
||||
return target; |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
|
||||
var getModal = function (event) { |
||||
var modalToggle = findModals(event.target); |
||||
if (modalToggle && modalToggle.hash) { |
||||
return document.querySelector(modalToggle.hash); |
||||
} |
||||
}; |
||||
|
||||
window.addEventListener('touchend', function (event) { |
||||
var modal = getModal(event); |
||||
if (modal) { |
||||
if (modal && modal.classList.contains('modal')) { |
||||
modal.classList.toggle('active'); |
||||
} |
||||
event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
|
||||
} |
||||
}); |
||||
}()); |
||||
|
||||
/* ---------------------------------- |
||||
* POPOVER v2.0.1 |
||||
* Licensed under The MIT License |
||||
* http://opensource.org/licenses/MIT
|
||||
* ---------------------------------- */ |
||||
|
||||
!(function () { |
||||
'use strict'; |
||||
|
||||
var popover; |
||||
|
||||
var findPopovers = function (target) { |
||||
var i, popovers = document.querySelectorAll('a'); |
||||
for (; target && target !== document; target = target.parentNode) { |
||||
for (i = popovers.length; i--;) { |
||||
if (popovers[i] === target) { |
||||
return target; |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
|
||||
var onPopoverHidden = function () { |
||||
popover.style.display = 'none'; |
||||
popover.removeEventListener('webkitTransitionEnd', onPopoverHidden); |
||||
}; |
||||
|
||||
var backdrop = (function () { |
||||
var element = document.createElement('div'); |
||||
|
||||
element.classList.add('backdrop'); |
||||
|
||||
element.addEventListener('touchend', function () { |
||||
popover.addEventListener('webkitTransitionEnd', onPopoverHidden); |
||||
popover.classList.remove('visible'); |
||||
popover.parentNode.removeChild(backdrop); |
||||
}); |
||||
|
||||
return element; |
||||
}()); |
||||
|
||||
var getPopover = function (e) { |
||||
var anchor = findPopovers(e.target); |
||||
|
||||
if (!anchor || !anchor.hash || (anchor.hash.indexOf('/') > 0)) { |
||||
return; |
||||
} |
||||
|
||||
try { |
||||
popover = document.querySelector(anchor.hash); |
||||
} |
||||
catch (error) { |
||||
popover = null; |
||||
} |
||||
|
||||
if (popover == null) { |
||||
return; |
||||
} |
||||
|
||||
if (!popover || !popover.classList.contains('popover')) { |
||||
return; |
||||
} |
||||
|
||||
return popover; |
||||
}; |
||||
|
||||
var showHidePopover = function (e) { |
||||
var popover = getPopover(e); |
||||
|
||||
if (!popover) { |
||||
return; |
||||
} |
||||
|
||||
popover.style.display = 'block'; |
||||
popover.offsetHeight; |
||||
popover.classList.add('visible'); |
||||
|
||||
popover.parentNode.appendChild(backdrop); |
||||
}; |
||||
|
||||
window.addEventListener('touchend', showHidePopover); |
||||
window.addEventListener('click', showHidePopover); |
||||
|
||||
}()); |
||||
|
||||
/* ---------------------------------- |
||||
* PUSH v2.0.1 |
||||
* Licensed under The MIT License |
||||
* inspired by chris's jquery.pjax.js |
||||
* http://opensource.org/licenses/MIT
|
||||
* ---------------------------------- */ |
||||
|
||||
/* global _gaq: true */ |
||||
|
||||
!(function () { |
||||
'use strict'; |
||||
|
||||
var noop = function () {}; |
||||
|
||||
|
||||
// Pushstate cacheing
|
||||
// ==================
|
||||
|
||||
var isScrolling; |
||||
var maxCacheLength = 20; |
||||
var cacheMapping = sessionStorage; |
||||
var domCache = {}; |
||||
var transitionMap = { |
||||
'slide-in' : 'slide-out', |
||||
'slide-out' : 'slide-in', |
||||
'fade' : 'fade' |
||||
}; |
||||
|
||||
var bars = { |
||||
bartab : '.bar-tab', |
||||
barnav : '.bar-nav', |
||||
barfooter : '.bar-footer', |
||||
barheadersecondary : '.bar-header-secondary' |
||||
}; |
||||
|
||||
var cacheReplace = function (data, updates) { |
||||
PUSH.id = data.id; |
||||
if (updates) { |
||||
data = getCached(data.id); |
||||
} |
||||
cacheMapping[data.id] = JSON.stringify(data); |
||||
window.history.replaceState(data.id, data.title, data.url); |
||||
domCache[data.id] = document.body.cloneNode(true); |
||||
}; |
||||
|
||||
var cachePush = function () { |
||||
var id = PUSH.id; |
||||
|
||||
var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]'); |
||||
var cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]'); |
||||
|
||||
cacheBackStack.push(id); |
||||
|
||||
while (cacheForwardStack.length) { |
||||
delete cacheMapping[cacheForwardStack.shift()]; |
||||
} |
||||
while (cacheBackStack.length > maxCacheLength) { |
||||
delete cacheMapping[cacheBackStack.shift()]; |
||||
} |
||||
|
||||
window.history.pushState(null, '', cacheMapping[PUSH.id].url); |
||||
|
||||
cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack); |
||||
cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack); |
||||
}; |
||||
|
||||
var cachePop = function (id, direction) { |
||||
var forward = direction === 'forward'; |
||||
var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]'); |
||||
var cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]'); |
||||
var pushStack = forward ? cacheBackStack : cacheForwardStack; |
||||
var popStack = forward ? cacheForwardStack : cacheBackStack; |
||||
|
||||
if (PUSH.id) { |
||||
pushStack.push(PUSH.id); |
||||
} |
||||
popStack.pop(); |
||||
|
||||
cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack); |
||||
cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack); |
||||
}; |
||||
|
||||
var getCached = function (id) { |
||||
return JSON.parse(cacheMapping[id] || null) || {}; |
||||
}; |
||||
|
||||
var getTarget = function (e) { |
||||
var target = findTarget(e.target); |
||||
|
||||
if (!target || |
||||
e.which > 1 || |
||||
e.metaKey || |
||||
e.ctrlKey || |
||||
isScrolling || |
||||
location.protocol !== target.protocol || |
||||
location.host !== target.host || |
||||
!target.hash && /#/.test(target.href) || |
||||
target.hash && target.href.replace(target.hash, '') === location.href.replace(location.hash, '') || |
||||
target.getAttribute('data-ignore') === 'push') { return; } |
||||
|
||||
return target; |
||||
}; |
||||
|
||||
|
||||
// Main event handlers (touchend, popstate)
|
||||
// ==========================================
|
||||
|
||||
var touchend = function (e) { |
||||
var target = getTarget(e); |
||||
|
||||
if (!target) { |
||||
return; |
||||
} |
||||
|
||||
e.preventDefault(); |
||||
|
||||
PUSH({ |
||||
url : target.href, |
||||
hash : target.hash, |
||||
timeout : target.getAttribute('data-timeout'), |
||||
transition : target.getAttribute('data-transition') |
||||
}); |
||||
}; |
||||
|
||||
var popstate = function (e) { |
||||
var key; |
||||
var barElement; |
||||
var activeObj; |
||||
var activeDom; |
||||
var direction; |
||||
var transition; |
||||
var transitionFrom; |
||||
var transitionFromObj; |
||||
var id = e.state; |
||||
|
||||
if (!id || !cacheMapping[id]) { |
||||
return; |
||||
} |
||||
|
||||
direction = PUSH.id < id ? 'forward' : 'back'; |
||||
|
||||
cachePop(id, direction); |
||||
|
||||
activeObj = getCached(id); |
||||
activeDom = domCache[id]; |
||||
|
||||
if (activeObj.title) { |
||||
document.title = activeObj.title; |
||||
} |
||||
|
||||
if (direction === 'back') { |
||||
transitionFrom = JSON.parse(direction === 'back' ? cacheMapping.cacheForwardStack : cacheMapping.cacheBackStack); |
||||
transitionFromObj = getCached(transitionFrom[transitionFrom.length - 1]); |
||||
} else { |
||||
transitionFromObj = activeObj; |
||||
} |
||||
|
||||
if (direction === 'back' && !transitionFromObj.id) { |
||||
return (PUSH.id = id); |
||||
} |
||||
|
||||
transition = direction === 'back' ? transitionMap[transitionFromObj.transition] : transitionFromObj.transition; |
||||
|
||||
if (!activeDom) { |
||||
return PUSH({ |
||||
id : activeObj.id, |
||||
url : activeObj.url, |
||||
title : activeObj.title, |
||||
timeout : activeObj.timeout, |
||||
transition : transition, |
||||
ignorePush : true |
||||
}); |
||||
} |
||||
|
||||
if (transitionFromObj.transition) { |
||||
activeObj = extendWithDom(activeObj, '.content', activeDom.cloneNode(true)); |
||||
for (key in bars) { |
||||
if (bars.hasOwnProperty(key)) { |
||||
barElement = document.querySelector(bars[key]); |
||||
if (activeObj[key]) { |
||||
swapContent(activeObj[key], barElement); |
||||
} else if (barElement) { |
||||
barElement.parentNode.removeChild(barElement); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
swapContent( |
||||
(activeObj.contents || activeDom).cloneNode(true), |
||||
document.querySelector('.content'), |
||||
transition |
||||
); |
||||
|
||||
PUSH.id = id; |
||||
|
||||
document.body.offsetHeight; // force reflow to prevent scroll
|
||||
}; |
||||
|
||||
|
||||
// Core PUSH functionality
|
||||
// =======================
|
||||
|
||||
var PUSH = function (options) { |
||||
var key; |
||||
var xhr = PUSH.xhr; |
||||
|
||||
options.container = options.container || options.transition ? document.querySelector('.content') : document.body; |
||||
|
||||
for (key in bars) { |
||||
if (bars.hasOwnProperty(key)) { |
||||
options[key] = options[key] || document.querySelector(bars[key]); |
||||
} |
||||
} |
||||
|
||||
if (xhr && xhr.readyState < 4) { |
||||
xhr.onreadystatechange = noop; |
||||
xhr.abort(); |
||||
} |
||||
|
||||
xhr = new XMLHttpRequest(); |
||||
xhr.open('GET', options.url, true); |
||||
xhr.setRequestHeader('X-PUSH', 'true'); |
||||
|
||||
xhr.onreadystatechange = function () { |
||||
if (options._timeout) { |
||||
clearTimeout(options._timeout); |
||||
} |
||||
if (xhr.readyState === 4) { |
||||
xhr.status === 200 ? success(xhr, options) : failure(options.url); |
||||
} |
||||
}; |
||||
|
||||
if (!PUSH.id) { |
||||
cacheReplace({ |
||||
id : +new Date(), |
||||
url : window.location.href, |
||||
title : document.title, |
||||
timeout : options.timeout, |
||||
transition : null |
||||
}); |
||||
} |
||||
|
||||
if (options.timeout) { |
||||
options._timeout = setTimeout(function () { xhr.abort('timeout'); }, options.timeout); |
||||
} |
||||
|
||||
xhr.send(); |
||||
|
||||
if (xhr.readyState && !options.ignorePush) { |
||||
cachePush(); |
||||
} |
||||
}; |
||||
|
||||
|
||||
// Main XHR handlers
|
||||
// =================
|
||||
|
||||
var success = function (xhr, options) { |
||||
var key; |
||||
var barElement; |
||||
var data = parseXHR(xhr, options); |
||||
|
||||
if (!data.contents) { |
||||
return locationReplace(options.url); |
||||
} |
||||
|
||||
if (data.title) { |
||||
document.title = data.title; |
||||
} |
||||
|
||||
if (options.transition) { |
||||
for (key in bars) { |
||||
if (bars.hasOwnProperty(key)) { |
||||
barElement = document.querySelector(bars[key]); |
||||
if (data[key]) { |
||||
swapContent(data[key], barElement); |
||||
} else if (barElement) { |
||||
barElement.parentNode.removeChild(barElement); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
swapContent(data.contents, options.container, options.transition, function () { |
||||
cacheReplace({ |
||||
id : options.id || +new Date(), |
||||
url : data.url, |
||||
title : data.title, |
||||
timeout : options.timeout, |
||||
transition : options.transition |
||||
}, options.id); |
||||
triggerStateChange(); |
||||
}); |
||||
|
||||
if (!options.ignorePush && window._gaq) { |
||||
_gaq.push(['_trackPageview']); // google analytics
|
||||
} |
||||
if (!options.hash) { |
||||
return; |
||||
} |
||||
}; |
||||
|
||||
var failure = function (url) { |
||||
throw new Error('Could not get: ' + url); |
||||
}; |
||||
|
||||
|
||||
// PUSH helpers
|
||||
// ============
|
||||
|
||||
var swapContent = function (swap, container, transition, complete) { |
||||
var enter; |
||||
var containerDirection; |
||||
var swapDirection; |
||||
|
||||
if (!transition) { |
||||
if (container) { |
||||
container.innerHTML = swap.innerHTML; |
||||
} else if (swap.classList.contains('content')) { |
||||
document.body.appendChild(swap); |
||||
} else { |
||||
document.body.insertBefore(swap, document.querySelector('.content')); |
||||
} |
||||
} else { |
||||
enter = /in$/.test(transition); |
||||
|
||||
if (transition === 'fade') { |
||||
container.classList.add('in'); |
||||
container.classList.add('fade'); |
||||
swap.classList.add('fade'); |
||||
} |
||||
|
||||
if (/slide/.test(transition)) { |
||||
swap.classList.add('sliding-in', enter ? 'right' : 'left'); |
||||
swap.classList.add('sliding'); |
||||
container.classList.add('sliding'); |
||||
} |
||||
|
||||
container.parentNode.insertBefore(swap, container); |
||||
} |
||||
|
||||
if (!transition) { |
||||
complete && complete(); |
||||
} |
||||
|
||||
if (transition === 'fade') { |
||||
container.offsetWidth; // force reflow
|
||||
container.classList.remove('in'); |
||||
var fadeContainerEnd = function () { |
||||
container.removeEventListener('webkitTransitionEnd', fadeContainerEnd); |
||||
swap.classList.add('in'); |
||||
swap.addEventListener('webkitTransitionEnd', fadeSwapEnd); |
||||
}; |
||||
var fadeSwapEnd = function () { |
||||
swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd); |
||||
container.parentNode.removeChild(container); |
||||
swap.classList.remove('fade'); |
||||
swap.classList.remove('in'); |
||||
complete && complete(); |
||||
}; |
||||
container.addEventListener('webkitTransitionEnd', fadeContainerEnd); |
||||
|
||||
} |
||||
|
||||
if (/slide/.test(transition)) { |
||||
var slideEnd = function () { |
||||
swap.removeEventListener('webkitTransitionEnd', slideEnd); |
||||
swap.classList.remove('sliding', 'sliding-in'); |
||||
swap.classList.remove(swapDirection); |
||||
container.parentNode.removeChild(container); |
||||
complete && complete(); |
||||
}; |
||||
|
||||
container.offsetWidth; // force reflow
|
||||
swapDirection = enter ? 'right' : 'left'; |
||||
containerDirection = enter ? 'left' : 'right'; |
||||
container.classList.add(containerDirection); |
||||
swap.classList.remove(swapDirection); |
||||
swap.addEventListener('webkitTransitionEnd', slideEnd); |
||||
} |
||||
}; |
||||
|
||||
var triggerStateChange = function () { |
||||
var e = new CustomEvent('push', { |
||||
detail: { state: getCached(PUSH.id) }, |
||||
bubbles: true, |
||||
cancelable: true |
||||
}); |
||||
|
||||
window.dispatchEvent(e); |
||||
}; |
||||
|
||||
var findTarget = function (target) { |
||||
var i, toggles = document.querySelectorAll('a'); |
||||
for (; target && target !== document; target = target.parentNode) { |
||||
for (i = toggles.length; i--;) { |
||||
if (toggles[i] === target) { |
||||
return target; |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
|
||||
var locationReplace = function (url) { |
||||
window.history.replaceState(null, '', '#'); |
||||
window.location.replace(url); |
||||
}; |
||||
|
||||
var extendWithDom = function (obj, fragment, dom) { |
||||
var i; |
||||
var result = {}; |
||||
|
||||
for (i in obj) { |
||||
if (obj.hasOwnProperty(i)) { |
||||
result[i] = obj[i]; |
||||
} |
||||
} |
||||
|
||||
Object.keys(bars).forEach(function (key) { |
||||
var el = dom.querySelector(bars[key]); |
||||
if (el) { |
||||
el.parentNode.removeChild(el); |
||||
} |
||||
result[key] = el; |
||||
}); |
||||
|
||||
result.contents = dom.querySelector(fragment); |
||||
|
||||
return result; |
||||
}; |
||||
|
||||
var parseXHR = function (xhr, options) { |
||||
var head; |
||||
var body; |
||||
var data = {}; |
||||
var responseText = xhr.responseText; |
||||
|
||||
data.url = options.url; |
||||
|
||||
if (!responseText) { |
||||
return data; |
||||
} |
||||
|
||||
if (/<html/i.test(responseText)) { |
||||
head = document.createElement('div'); |
||||
body = document.createElement('div'); |
||||
head.innerHTML = responseText.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0]; |
||||
body.innerHTML = responseText.match(/<body[^>]*>([\s\S.]*)<\/body>/i)[0]; |
||||
} else { |
||||
head = body = document.createElement('div'); |
||||
head.innerHTML = responseText; |
||||
} |
||||
|
||||
data.title = head.querySelector('title'); |
||||
data.title = data.title && data.title.innerText.trim(); |
||||
|
||||
if (options.transition) { |
||||
data = extendWithDom(data, '.content', body); |
||||
} else { |
||||
data.contents = body; |
||||
} |
||||
|
||||
return data; |
||||
}; |
||||
|
||||
|
||||
// Attach PUSH event handlers
|
||||
// ==========================
|
||||
|
||||
window.addEventListener('touchstart', function () { isScrolling = false; }); |
||||
window.addEventListener('touchmove', function () { isScrolling = true; }); |
||||
window.addEventListener('touchend', touchend); |
||||
window.addEventListener('click', function (e) { if (getTarget(e)) {e.preventDefault();} }); |
||||
window.addEventListener('popstate', popstate); |
||||
window.PUSH = PUSH; |
||||
|
||||
}()); |
||||
|
||||
/* ---------------------------------- |
||||
* Segmented controls v2.0.1 |
||||
* Licensed under The MIT License |
||||
* http://opensource.org/licenses/MIT
|
||||
* ---------------------------------- */ |
||||
|
||||
!(function () { |
||||
'use strict'; |
||||
|
||||
var getTarget = function (target) { |
||||
var i, segmentedControls = document.querySelectorAll('.segmented-control .control-item'); |
||||
for (; target && target !== document; target = target.parentNode) { |
||||
for (i = segmentedControls.length; i--;) { |
||||
if (segmentedControls[i] === target) { |
||||
return target; |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
|
||||
window.addEventListener('touchend', function (e) { |
||||
var activeTab; |
||||
var activeBodies; |
||||
var targetBody; |
||||
var targetTab = getTarget(e.target); |
||||
var className = 'active'; |
||||
var classSelector = '.' + className; |
||||
|
||||
if (!targetTab) { |
||||
return; |
||||
} |
||||
|
||||
activeTab = targetTab.parentNode.querySelector(classSelector); |
||||
|
||||
if (activeTab) { |
||||
activeTab.classList.remove(className); |
||||
} |
||||
|
||||
targetTab.classList.add(className); |
||||
|
||||
if (!targetTab.hash) { |
||||
return; |
||||
} |
||||
|
||||
targetBody = document.querySelector(targetTab.hash); |
||||
|
||||
if (!targetBody) { |
||||
return; |
||||
} |
||||
|
||||
activeBodies = targetBody.parentNode.querySelectorAll(classSelector); |
||||
|
||||
for (var i = 0; i < activeBodies.length; i++) { |
||||
activeBodies[i].classList.remove(className); |
||||
} |
||||
|
||||
targetBody.classList.add(className); |
||||
}); |
||||
|
||||
window.addEventListener('click', function (e) { if (getTarget(e.target)) {e.preventDefault();} }); |
||||
}()); |
||||
/* ---------------------------------- |
||||
* SLIDER v2.0.1 |
||||
* Licensed under The MIT License |
||||
* Adapted from Brad Birdsall's swipe |
||||
* http://opensource.org/licenses/MIT
|
||||
* ---------------------------------- */ |
||||
|
||||
!(function () { |
||||
'use strict'; |
||||
|
||||
var pageX; |
||||
var pageY; |
||||
var slider; |
||||
var deltaX; |
||||
var deltaY; |
||||
var offsetX; |
||||
var lastSlide; |
||||
var startTime; |
||||
var resistance; |
||||
var sliderWidth; |
||||
var slideNumber; |
||||
var isScrolling; |
||||
var scrollableArea; |
||||
|
||||
var getSlider = function (target) { |
||||
var i, sliders = document.querySelectorAll('.slider > .slide-group'); |
||||
for (; target && target !== document; target = target.parentNode) { |
||||
for (i = sliders.length; i--;) { |
||||
if (sliders[i] === target) { |
||||
return target; |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
|
||||
var getScroll = function () { |
||||
var translate3d = slider.style.webkitTransform.match(/translate3d\(([^,]*)/); |
||||
var ret = translate3d ? translate3d[1] : 0; |
||||
return parseInt(ret, 10); |
||||
}; |
||||
|
||||
var setSlideNumber = function (offset) { |
||||
var round = offset ? (deltaX < 0 ? 'ceil' : 'floor') : 'round'; |
||||
slideNumber = Math[round](getScroll() / ( scrollableArea / slider.children.length) ); |
||||
slideNumber += offset; |
||||
slideNumber = Math.min(slideNumber, 0); |
||||
slideNumber = Math.max(-(slider.children.length - 1), slideNumber); |
||||
}; |
||||
|
||||
var onTouchStart = function (e) { |
||||
slider = getSlider(e.target); |
||||
|
||||
if (!slider) { |
||||
return; |
||||
} |
||||
|
||||
var firstItem = slider.querySelector('.slide'); |
||||
|
||||
scrollableArea = firstItem.offsetWidth * slider.children.length; |
||||
isScrolling = undefined; |
||||
sliderWidth = slider.offsetWidth; |
||||
resistance = 1; |
||||
lastSlide = -(slider.children.length - 1); |
||||
startTime = +new Date(); |
||||
pageX = e.touches[0].pageX; |
||||
pageY = e.touches[0].pageY; |
||||
deltaX = 0; |
||||
deltaY = 0; |
||||
|
||||
setSlideNumber(0); |
||||
|
||||
slider.style['-webkit-transition-duration'] = 0; |
||||
}; |
||||
|
||||
var onTouchMove = function (e) { |
||||
if (e.touches.length > 1 || !slider) { |
||||
return; // Exit if a pinch || no slider
|
||||
} |
||||
|
||||
deltaX = e.touches[0].pageX - pageX; |
||||
deltaY = e.touches[0].pageY - pageY; |
||||
pageX = e.touches[0].pageX; |
||||
pageY = e.touches[0].pageY; |
||||
|
||||
if (typeof isScrolling === 'undefined') { |
||||
isScrolling = Math.abs(deltaY) > Math.abs(deltaX); |
||||
} |
||||
|
||||
if (isScrolling) { |
||||
return; |
||||
} |
||||
|
||||
offsetX = (deltaX / resistance) + getScroll(); |
||||
|
||||
e.preventDefault(); |
||||
|
||||
resistance = slideNumber === 0 && deltaX > 0 ? (pageX / sliderWidth) + 1.25 : |
||||
slideNumber === lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1; |
||||
|
||||
slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)'; |
||||
}; |
||||
|
||||
var onTouchEnd = function (e) { |
||||
if (!slider || isScrolling) { |
||||
return; |
||||
} |
||||
|
||||
setSlideNumber( |
||||
(+new Date()) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0 |
||||
); |
||||
|
||||
offsetX = slideNumber * sliderWidth; |
||||
|
||||
slider.style['-webkit-transition-duration'] = '.2s'; |
||||
slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)'; |
||||
|
||||
e = new CustomEvent('slide', { |
||||
detail: { slideNumber: Math.abs(slideNumber) }, |
||||
bubbles: true, |
||||
cancelable: true |
||||
}); |
||||
|
||||
slider.parentNode.dispatchEvent(e); |
||||
}; |
||||
|
||||
window.addEventListener('touchstart', onTouchStart); |
||||
window.addEventListener('touchmove', onTouchMove); |
||||
window.addEventListener('touchend', onTouchEnd); |
||||
|
||||
}()); |
||||
|
||||
/* ---------------------------------- |
||||
* TOGGLE v2.0.1 |
||||
* Licensed under The MIT License |
||||
* http://opensource.org/licenses/MIT
|
||||
* ---------------------------------- */ |
||||
|
||||
!(function () { |
||||
'use strict'; |
||||
|
||||
var start = {}; |
||||
var touchMove = false; |
||||
var distanceX = false; |
||||
var toggle = false; |
||||
|
||||
var findToggle = function (target) { |
||||
var i, toggles = document.querySelectorAll('.toggle'); |
||||
for (; target && target !== document; target = target.parentNode) { |
||||
for (i = toggles.length; i--;) { |
||||
if (toggles[i] === target) { |
||||
return target; |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
|
||||
window.addEventListener('touchstart', function (e) { |
||||
e = e.originalEvent || e; |
||||
|
||||
toggle = findToggle(e.target); |
||||
|
||||
if (!toggle) { |
||||
return; |
||||
} |
||||
|
||||
var handle = toggle.querySelector('.toggle-handle'); |
||||
var toggleWidth = toggle.clientWidth; |
||||
var handleWidth = handle.clientWidth; |
||||
var offset = toggle.classList.contains('active') ? (toggleWidth - handleWidth) : 0; |
||||
|
||||
start = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY }; |
||||
touchMove = false; |
||||
}); |
||||
|
||||
window.addEventListener('touchmove', function (e) { |
||||
e = e.originalEvent || e; |
||||
|
||||
if (e.touches.length > 1) { |
||||
return; // Exit if a pinch
|
||||
} |
||||
|
||||
if (!toggle) { |
||||
return; |
||||
} |
||||
|
||||
var handle = toggle.querySelector('.toggle-handle'); |
||||
var current = e.touches[0]; |
||||
var toggleWidth = toggle.clientWidth; |
||||
var handleWidth = handle.clientWidth; |
||||
var offset = toggleWidth - handleWidth; |
||||
|
||||
touchMove = true; |
||||
distanceX = current.pageX - start.pageX; |
||||
|
||||
if (Math.abs(distanceX) < Math.abs(current.pageY - start.pageY)) { |
||||
return; |
||||
} |
||||
|
||||
e.preventDefault(); |
||||
|
||||
if (distanceX < 0) { |
||||
return (handle.style.webkitTransform = 'translate3d(0,0,0)'); |
||||
} |
||||
if (distanceX > offset) { |
||||
return (handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)'); |
||||
} |
||||
|
||||
handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)'; |
||||
|
||||
toggle.classList[(distanceX > (toggleWidth/2 - handleWidth/2)) ? 'add' : 'remove']('active'); |
||||
}); |
||||
|
||||
window.addEventListener('touchend', function (e) { |
||||
if (!toggle) { |
||||
return; |
||||
} |
||||
|
||||
var handle = toggle.querySelector('.toggle-handle'); |
||||
var toggleWidth = toggle.clientWidth; |
||||
var handleWidth = handle.clientWidth; |
||||
var offset = (toggleWidth - handleWidth); |
||||
var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth/2 - handleWidth/2))); |
||||
|
||||
if (slideOn) { |
||||
handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)'; |
||||
} else { |
||||
handle.style.webkitTransform = 'translate3d(0,0,0)'; |
||||
} |
||||
|
||||
toggle.classList[slideOn ? 'add' : 'remove']('active'); |
||||
|
||||
e = new CustomEvent('toggle', { |
||||
detail: { isActive: slideOn }, |
||||
bubbles: true, |
||||
cancelable: true |
||||
}); |
||||
|
||||
toggle.dispatchEvent(e); |
||||
|
||||
touchMove = false; |
||||
toggle = false; |
||||
}); |
||||
|
||||
}()); |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,5 @@
|
||||
.slider, |
||||
.slider img { |
||||
margin-bottom: 0; |
||||
height: 150px; |
||||
} |
||||
@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Notes</title> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<!-- Roboto --> |
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700"> |
||||
|
||||
<link rel="stylesheet" href="../../dist/css/ratchet.min.css"> |
||||
<link rel="stylesheet" href="../../dist/css/ratchet-theme-android.min.css"> |
||||
<link rel="stylesheet" href="css/app.css"> |
||||
<script src="../../dist/js/ratchet.min.js"></script> |
||||
</head> |
||||
<body> |
||||
<header class="bar bar-nav"> |
||||
<a class="icon icon-compose pull-right" href="#composeModal"></a> |
||||
<a href="#navPopover"> |
||||
<h1 class="title"> |
||||
<span class="icon icon-home"></span> |
||||
Notes |
||||
<span class="icon icon-caret"></span> |
||||
</h1> |
||||
</a> |
||||
</header> |
||||
|
||||
<div class="content"> |
||||
|
||||
<ul class="table-view"> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<!-- Compose modal --> |
||||
<div id="composeModal" class="modal"> |
||||
<header class="bar bar-nav"> |
||||
<a class="icon icon-left pull-left" href="#composeModal"></a> |
||||
<h1 class="title">New note</h1> |
||||
</header> |
||||
|
||||
<div class="content"> |
||||
<form class="content-padded"> |
||||
<input type="text" placeholder="Title"> |
||||
<textarea rows="10"></textarea> |
||||
<a class="btn btn-positive btn-block" href="#composeModal">Save note</a> |
||||
</form> |
||||
</div> |
||||
</div><!-- /.modal --> |
||||
|
||||
<!-- Popover --> |
||||
<div id="navPopover" class="popover"> |
||||
<ul class="table-view"> |
||||
<li class="table-view-cell">Item1</li> |
||||
<li class="table-view-cell">Item2</li> |
||||
<li class="table-view-cell">Item3</li> |
||||
<li class="table-view-cell">Item4</li> |
||||
<li class="table-view-cell">Item5</li> |
||||
<li class="table-view-cell">Item6</li> |
||||
<li class="table-view-cell">Item7</li> |
||||
<li class="table-view-cell">Item8</li> |
||||
<li class="table-view-cell">Item9</li> |
||||
<li class="table-view-cell">Item10</li> |
||||
</ul> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,12 @@
|
||||
.updated-text { |
||||
position: absolute; |
||||
left: 0; |
||||
right: 0; |
||||
padding: 10px 0; |
||||
font-size: 11px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.table-view-cell .icon { |
||||
color: #007aff; |
||||
} |
||||
@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Mail</title> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<link rel="stylesheet" href="../../dist/css/ratchet.min.css"> |
||||
<link rel="stylesheet" href="../../dist/css/ratchet-theme-ios.min.css"> |
||||
<link rel="stylesheet" href="css/app.css"> |
||||
<script src="../../dist/js/ratchet.min.js"></script> |
||||
</head> |
||||
<body> |
||||
<header class="bar bar-nav"> |
||||
<a class="icon icon-left-nav pull-left" href="index.html" data-transition="slide-out"></a> |
||||
<a class="icon icon-refresh pull-right"></a> |
||||
<h1 class="title">All inboxes</h1> |
||||
</header> |
||||
|
||||
<div class="content"> |
||||
|
||||
<ul class="table-view"> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</div><!-- /.content --> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Mail</title> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<link rel="stylesheet" href="../../dist/css/ratchet.min.css"> |
||||
<link rel="stylesheet" href="../../dist/css/ratchet-theme-ios.min.css"> |
||||
<link rel="stylesheet" href="css/app.css"> |
||||
<script src="../../dist/js/ratchet.min.js"></script> |
||||
</head> |
||||
<body> |
||||
<header class="bar bar-nav"> |
||||
<a class="icon icon-refresh pull-right"></a> |
||||
<h1 class="title">Mailboxes</h1> |
||||
</header> |
||||
|
||||
<div class="bar bar-footer"> |
||||
<a class="icon icon-compose pull-right" href="#composeModal"></a> |
||||
<small class="updated-text">Updated just now</small> |
||||
</div> |
||||
|
||||
<div class="content"> |
||||
|
||||
<ul class="table-view"> |
||||
<li class="table-view-cell media"> |
||||
<a class="navigate-right" href="inbox.html" data-transition="slide-in"> |
||||
<span class="media-object icon icon-pages pull-left"></span> |
||||
<div class="media-body"> |
||||
All inboxes |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="navigate-right" href="inbox.html" data-transition="slide-in"> |
||||
<span class="media-object icon icon-person pull-left"></span> |
||||
<div class="media-body"> |
||||
Personal email |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="navigate-right" href="inbox.html" data-transition="slide-in"> |
||||
<span class="media-object icon icon-star-filled pull-left"></span> |
||||
<div class="media-body"> |
||||
Starred |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="navigate-right" href="inbox.html" data-transition="slide-in"> |
||||
<span class="media-object icon icon-trash pull-left"></span> |
||||
<div class="media-body"> |
||||
Trash |
||||
</div> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
<h5 class="content-padded">Other accounts</h5> |
||||
<ul class="table-view"> |
||||
<li class="table-view-cell media"> |
||||
<a class="navigate-right" href="inbox.html" data-transition="slide-in"> |
||||
<span class="media-object icon icon-more pull-left"></span> |
||||
<div class="media-body"> |
||||
Misc |
||||
</div> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</div><!-- /.content --> |
||||
|
||||
<!-- Compose modal --> |
||||
<div id="composeModal" class="modal"> |
||||
<header class="bar bar-nav"> |
||||
<a class="btn btn-link pull-right" href="#composeModal"> |
||||
<strong>Send</strong> |
||||
</a> |
||||
<a class="btn btn-link pull-left" href="#composeModal"> |
||||
Cancel |
||||
</a> |
||||
<h1 class="title">New message</h1> |
||||
</header> |
||||
|
||||
<div class="content"> |
||||
<form class="input-group"> |
||||
<input type="text" placeholder="To:"> |
||||
<input type="email" placeholder="From:"> |
||||
<input type="text" placeholder="Subject:"> |
||||
<textarea rows="20"></textarea> |
||||
</form> |
||||
</div> |
||||
</div><!-- /.modal --> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Movie finder</title> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<link rel="stylesheet" href="../../dist/css/ratchet.min.css"> |
||||
<link rel="stylesheet" href="css/app.css"> |
||||
<script src="../../dist/js/ratchet.min.js"></script> |
||||
</head> |
||||
<body> |
||||
<header class="bar bar-nav"> |
||||
<a class="btn btn-link btn-nav pull-left" href="index.html" data-transition="slide-out"> |
||||
<span class="icon icon-left-nav"></span> |
||||
Back |
||||
</a> |
||||
<h1 class="title">Argo</h1> |
||||
</header> |
||||
|
||||
<div class="bar bar-standard bar-header-secondary"> |
||||
<form> |
||||
<input type="search" placeholder="Search theaters"> |
||||
</form> |
||||
</div> |
||||
|
||||
<div class="content"> |
||||
<ul class="table-view"> |
||||
<li class="table-view-cell table-view-divider">Theaters nearby</li> |
||||
<li class="table-view-cell"> |
||||
Metreon 16 |
||||
<p>1.3 miles away</p> |
||||
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
AMC 5 |
||||
<p>3.5 miles away</p> |
||||
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
Regal 42 |
||||
<p>7.3 miles away</p> |
||||
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
Shorline theater |
||||
<p>12.5 miles away</p> |
||||
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
AMC 16 |
||||
<p>12.2 miles away</p> |
||||
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
BW3 16 |
||||
<p>13.4 miles away</p> |
||||
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
MC Hammer 16 |
||||
<p>14.1 miles away</p> |
||||
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
AMC 3 |
||||
<p>14.3 miles away</p> |
||||
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
AMC 2 |
||||
<p>14.7 miles away</p> |
||||
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
AMC 10 |
||||
<p>15 miles away</p> |
||||
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,10 @@
|
||||
.slider { |
||||
margin-bottom: 0; |
||||
} |
||||
.slider img { |
||||
width: auto; |
||||
height: 150px; |
||||
} |
||||
.content-padded { |
||||
margin: 30px 15px 15px; |
||||
} |
||||
|
After Width: | Height: | Size: 247 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 16 KiB |
@ -0,0 +1,170 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Movie finder</title> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<link rel="stylesheet" href="../../dist/css/ratchet.min.css"> |
||||
<link rel="stylesheet" href="css/app.css"> |
||||
<script src="../../dist/js/ratchet.min.js"></script> |
||||
</head> |
||||
<body> |
||||
<header class="bar bar-nav"> |
||||
<a class="icon icon-gear pull-right" href="#settingsModal" ></a> |
||||
<h1 class="title">Movie finder</h1> |
||||
</header> |
||||
|
||||
<div class="bar bar-standard bar-header-secondary"> |
||||
<form> |
||||
<input type="search" placeholder="Search"> |
||||
</form> |
||||
</div> |
||||
|
||||
<div class="content"> |
||||
|
||||
<div class="slider"> |
||||
<div class="slide-group"> |
||||
<div class="slide"> |
||||
<img src="img/argo.png" alt="Argo" width="640" height="300"> |
||||
</div> |
||||
<div class="slide"> |
||||
<img src="img/skyfall.png" alt="Skyfall" width="640" height="300"> |
||||
</div> |
||||
<div class="slide"> |
||||
<img src="img/ralph.png" alt="Wreck-It Ralph" width="640" height="300"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<ul class="table-view"> |
||||
<li class="table-view-cell table-view-divider">Recommended movies</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster"> |
||||
<div class="media-body"> |
||||
Argo |
||||
<p>Lorem ipsum dolor sit amet, consectetur.</p> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster"> |
||||
<div class="media-body"> |
||||
Skyfall: 007 |
||||
<p>Lorem ipsum dolor sit amet, consectetur.</p> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster"> |
||||
<div class="media-body"> |
||||
Wreck-it Ralph |
||||
<p>Lorem ipsum dolor sit amet, consectetur.</p> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster"> |
||||
<div class="media-body"> |
||||
Argo |
||||
<p>Lorem ipsum dolor sit amet, consectetur.</p> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster"> |
||||
<div class="media-body"> |
||||
Skyfall: 007 |
||||
<p>Lorem ipsum dolor sit amet, consectetur.</p> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster"> |
||||
<div class="media-body"> |
||||
Wreck-it Ralph |
||||
<p>Lorem ipsum dolor sit amet, consectetur.</p> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster"> |
||||
<div class="media-body"> |
||||
Argo |
||||
<p>Lorem ipsum dolor sit amet, consectetur.</p> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster"> |
||||
<div class="media-body"> |
||||
Skyfall: 007 |
||||
<p>Lorem ipsum dolor sit amet, consectetur.</p> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="navigate-right" href="choose-theater.html" data-transition="slide-in"> |
||||
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster"> |
||||
<div class="media-body"> |
||||
Wreck-it Ralph |
||||
<p>Lorem ipsum dolor sit amet, consectetur.</p> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</div><!-- /.content --> |
||||
|
||||
<!-- Settings modal --> |
||||
<div id="settingsModal" class="modal"> |
||||
<header class="bar bar-nav"> |
||||
<a class="icon icon-close pull-right" href="#settingsModal"></a> |
||||
<h1 class="title">Settings</h1> |
||||
</header> |
||||
|
||||
<div class="content"> |
||||
<form class="input-group"> |
||||
<input type="text" placeholder="Full name"> |
||||
<input type="email" placeholder="Email"> |
||||
<input type="text" placeholder="Username"> |
||||
</form> |
||||
|
||||
<h5 class="content-padded">App settings</h5> |
||||
|
||||
<ul class="table-view"> |
||||
<li class="table-view-cell media"> |
||||
<span class="media-object pull-left icon icon-sound"></span> |
||||
<div class="media-body"> |
||||
Enable sounds |
||||
</div> |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<span class="media-object pull-left icon icon-person"></span> |
||||
<div class="media-body"> |
||||
Parental controls |
||||
</div> |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
<div class="content-padded"> |
||||
<button class="btn btn-positive btn-block">Save settings</button> |
||||
</div> |
||||
</div> |
||||
</div><!-- /.modal --> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,176 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<title>Examples · Ratchet</title> |
||||
<meta name="description" content="Ratchet: Prototype mobile apps with simple HTML, CSS, and JS components."> |
||||
<meta name="author" content="Connor Sears"> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> |
||||
<link rel="shortcut icon" href="/favicon.ico"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<!-- Google Web Fonts --> |
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700|Open+Sans:300"> |
||||
|
||||
<link rel="stylesheet" href="/dist/css/ratchet.min.css"> |
||||
<link rel="stylesheet" href="/assets/css/docs.min.css"> |
||||
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/img/apple-touch-icon-114x114.png"> |
||||
|
||||
<script> |
||||
var _gaq = _gaq || []; |
||||
_gaq.push(['_setAccount', 'UA-36050008-1']); |
||||
_gaq.push(['_trackPageview']); |
||||
|
||||
(function() { |
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
||||
})(); |
||||
</script> |
||||
|
||||
</head> |
||||
<body ontouchstart=""> |
||||
<!--[if lt IE 9]> |
||||
<div class="bs-callout bs-callout-danger"> |
||||
<h4>Attention!</h4> |
||||
<p> |
||||
Looks like your current browser is old and doesn't support many features used in this page. |
||||
Please take a second to <a href="http://browsehappy.com/">upgrade to a more modern browser</a>. |
||||
</p> |
||||
</div> |
||||
<![endif]--> |
||||
|
||||
<div class="docs-sub-header"> |
||||
<header class="docs-masthead clearfix"> |
||||
<div class="container"> |
||||
<div class="column"> |
||||
<h1 class="docs-title"> |
||||
<a href="/" data-ignore="push">Ratchet</a> |
||||
</h1> |
||||
<nav class="docs-nav clearfix"> |
||||
<a class="docs-nav-trigger icon icon-bars pull-right js-docs-nav-trigger" href="#"></a> |
||||
<div class="docs-nav-group"> |
||||
<a class="docs-nav-item" href="/" data-ignore="push">Home</a> |
||||
<a class="docs-nav-item" href="/getting-started" data-ignore="push">Getting started</a> |
||||
<a class="docs-nav-item" href="/components" data-ignore="push">Components</a> |
||||
<a class="docs-nav-item" href="/examples" data-ignore="push">Examples</a> |
||||
<a class="docs-nav-item" href="/about" data-ignore="push">About</a> |
||||
<a class="docs-nav-item" href="https://github.com/twbs/ratchet" data-ignore="push">GitHub project</a> |
||||
</div> |
||||
</nav> |
||||
</div> |
||||
</div> |
||||
</header> |
||||
|
||||
<div class="container"> |
||||
<div class="docs-sub-content"> |
||||
<h2 class="page-title">Examples</h2> |
||||
<p class="page-description">Take a look at some of these example apps built on Ratchet.</p> |
||||
</div> |
||||
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
<div class="container"> |
||||
<div class="column-group"> |
||||
<div class="column lg-units-8 docs-examples docs-content"> |
||||
|
||||
<p class="lead">Checkout out the examples on a desktop browser or visit on your mobile device see the apps as intended.</p> |
||||
|
||||
<div class="column-group"> |
||||
<div class="column lg-units-4"> |
||||
<div class="example-wrap"> |
||||
<a class="example" href="/examples/app-movies" data-ignore="push"> |
||||
<img src="/assets/img/example.png" alt="Movie finder app example" width="640" height="480"> |
||||
</a> |
||||
<h4 class="example-title">Movie finder</h4> |
||||
</div> |
||||
</div> |
||||
<div class="column lg-units-4"> |
||||
<div class="example-wrap"> |
||||
<a class="example" href="/examples/app-ios-mail" data-ignore="push"> |
||||
<img src="/assets/img/example-ios.png" alt="iOS mail app example" width="640" height="480"> |
||||
</a> |
||||
<h4 class="example-title">iOS mail app</h4> |
||||
</div> |
||||
</div> |
||||
<div class="column lg-units-4"> |
||||
<div class="example-wrap"> |
||||
<a class="example" href="/examples/app-android-notes" data-ignore="push"> |
||||
<img src="/assets/img/example-android.png" alt="Android notes app example" width="640" height="480"> |
||||
</a> |
||||
<h4 class="example-title">Android notes app</h4> |
||||
</div> |
||||
</div> <!-- .column-group --> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="column lg-units-4"> |
||||
<div class="docs-module"> |
||||
<h4 class="docs-module-title">Ratchet</h4> |
||||
<p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p> |
||||
<a href="https://github.com/twbs/ratchet/releases/download/v2.0.1/ratchet-2.0.1-dist.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.1-dist']);">Download Ratchet</a> |
||||
<p class="version">Currently v2.0.1</p> |
||||
</div> |
||||
|
||||
<div class="docs-module"> |
||||
<h4 class="docs-module-title">Source code</h4> |
||||
<p>If you haven't already, download the source code for Ratchet.</p> |
||||
<a href="https://github.com/twbs/ratchet/archive/v2.0.1.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.1']);">Download source</a> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
<div class="column"> |
||||
<!-- Footer --> |
||||
<div class="docs-footer"> |
||||
<!-- Social links --> |
||||
<ul class="social"> |
||||
<li> |
||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=ratchet&type=watch&count=true" width="100" height="20"></iframe> |
||||
</li> |
||||
<li> |
||||
<a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet – Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a> |
||||
</li> |
||||
<li><a data-ignore="push" href="https://twitter.com/goratchet" class="twitter-follow-button" data-show-count="true"> |
||||
Follow @GoRatchet</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p class="docs-footer-text">Code licensed under the <a href="https://github.com/twbs/ratchet/blob/master/LICENSE" data-ignore="push">MIT License</a> and the docs are licensed under <a href="https://github.com/twbs/ratchet/blob/master/docs/LICENSE" data-ignore="push">CC BY 3.0</a>. Ratchet was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p> |
||||
|
||||
<ul class="docs-footer-links"> |
||||
<li>Currently v2.0.1</li> |
||||
<li>·</li> |
||||
<li><a href="https://github.com/twbs/ratchet/issues" data-ignore="push">Issues</a></li> |
||||
<li>·</li> |
||||
<li><a href="https://github.com/twbs/ratchet/releases" data-ignore="push">Releases</a></li> |
||||
<li>·</li> |
||||
<li><a href="http://goratchet.com/1.0.2/" data-ignore="push">Legacy v1.0.2 Docs</a></li> |
||||
</ul> |
||||
</div> |
||||
|
||||
|
||||
<script> |
||||
window.twttr = (function (d,s,id) { |
||||
var t, js, fjs = d.getElementsByTagName(s)[0]; |
||||
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1; |
||||
js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); |
||||
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } }); |
||||
}(document, "script", "twitter-wjs")); |
||||
</script> |
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> |
||||
<script src="/dist/js/ratchet.min.js"></script> |
||||
<script src="/assets/js/docs.min.js"></script> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
|
After Width: | Height: | Size: 8.2 KiB |
@ -0,0 +1,304 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<title>Getting started · Ratchet</title> |
||||
<meta name="description" content="Ratchet: Prototype mobile apps with simple HTML, CSS, and JS components."> |
||||
<meta name="author" content="Connor Sears"> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> |
||||
<link rel="shortcut icon" href="/favicon.ico"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<!-- Google Web Fonts --> |
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700|Open+Sans:300"> |
||||
|
||||
<link rel="stylesheet" href="/dist/css/ratchet.min.css"> |
||||
<link rel="stylesheet" href="/assets/css/docs.min.css"> |
||||
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/img/apple-touch-icon-114x114.png"> |
||||
|
||||
<script> |
||||
var _gaq = _gaq || []; |
||||
_gaq.push(['_setAccount', 'UA-36050008-1']); |
||||
_gaq.push(['_trackPageview']); |
||||
|
||||
(function() { |
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
||||
})(); |
||||
</script> |
||||
|
||||
</head> |
||||
<body ontouchstart=""> |
||||
<!--[if lt IE 9]> |
||||
<div class="bs-callout bs-callout-danger"> |
||||
<h4>Attention!</h4> |
||||
<p> |
||||
Looks like your current browser is old and doesn't support many features used in this page. |
||||
Please take a second to <a href="http://browsehappy.com/">upgrade to a more modern browser</a>. |
||||
</p> |
||||
</div> |
||||
<![endif]--> |
||||
|
||||
<div class="docs-sub-header"> |
||||
<header class="docs-masthead clearfix"> |
||||
<div class="container"> |
||||
<div class="column"> |
||||
<h1 class="docs-title"> |
||||
<a href="/" data-ignore="push">Ratchet</a> |
||||
</h1> |
||||
<nav class="docs-nav clearfix"> |
||||
<a class="docs-nav-trigger icon icon-bars pull-right js-docs-nav-trigger" href="#"></a> |
||||
<div class="docs-nav-group"> |
||||
<a class="docs-nav-item" href="/" data-ignore="push">Home</a> |
||||
<a class="docs-nav-item" href="/getting-started" data-ignore="push">Getting started</a> |
||||
<a class="docs-nav-item" href="/components" data-ignore="push">Components</a> |
||||
<a class="docs-nav-item" href="/examples" data-ignore="push">Examples</a> |
||||
<a class="docs-nav-item" href="/about" data-ignore="push">About</a> |
||||
<a class="docs-nav-item" href="https://github.com/twbs/ratchet" data-ignore="push">GitHub project</a> |
||||
</div> |
||||
</nav> |
||||
</div> |
||||
</div> |
||||
</header> |
||||
|
||||
<div class="container"> |
||||
<div class="docs-sub-content"> |
||||
<h2 class="page-title">Getting started</h2> |
||||
<p class="page-description">Once you've downloaded Ratchet, here's what to do next.</p> |
||||
</div> |
||||
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
<div class="container"> |
||||
<div class="column-group"> |
||||
<div class="column lg-units-8 docs-content"> |
||||
<div class="docs-section"> |
||||
<h2>Quick start</h2> |
||||
<p class="lead">Quickly get up and running with a Ratchet app.</p> |
||||
|
||||
<h3>1. Create your pages</h3> |
||||
<p>Use the <a href="/components" data-ignore="push">documentation</a> as a reference for all the available components and piece together the pages of your app. Be sure to look at the <a href="#pageLayout">basic page template</a> and <a href="/examples" data-ignore="push">example applications</a>. Make sure to add <code>ratchet-theme-ios.css</code> or <code>ratchet-theme-android.css</code> to your app's <code><head></code> if you have a specific platform in mind.</p> |
||||
|
||||
<h3>2. Connect pages with push.js</h3> |
||||
<p>Read about <a href="/components/#push" data-ignore="push">push.js</a> then start connecting your pages. Push.js allows you to create a app that feels like a real app when you save it to your phone. (Need to have a server running).</p> |
||||
|
||||
<h3>3. Save the app to your phone</h3> |
||||
<p>There are <a href="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw" data-ignore="push">a few ways to do this</a>, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the <span class="icon icon-share"></span> button and "Add to Home Screen". For Android, check out <a href="https://developers.google.com/chrome/mobile/docs/installtohomescreen" data-ignore="push">this guide</a>.</p> |
||||
</div> |
||||
|
||||
<div class="docs-section"> |
||||
<h2>What's included</h2> |
||||
<p class="lead">Ratchet is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p> |
||||
|
||||
<h3>Precompiled Ratchet</h3> |
||||
<p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Ratchet. You'll see something like this:</p> |
||||
<!-- NOTE: This info is intentionally duplicated in the README. |
||||
Copy any changes made here over to the README too. --> |
||||
<div class="highlight"><pre><code class="bash">ratchet/ |
||||
├── css/ |
||||
│ ├── ratchet.css |
||||
│ ├── ratchet.min.css |
||||
│ ├── ratchet-theme-android.css |
||||
│ ├── ratchet-theme-android.min.css |
||||
│ ├── ratchet-theme-ios.css |
||||
│ ├── ratchet-theme-ios.min.css |
||||
├── js/ |
||||
│ ├── ratchet.js |
||||
│ └── ratchet.min.js |
||||
└── fonts/ |
||||
├── ratchicons.eot |
||||
├── ratchicons.svg |
||||
├── ratchicons.ttf |
||||
└── ratchicons.woff |
||||
</code></pre></div> |
||||
|
||||
<p>This is the most basic form of Ratchet: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>ratchet.*</code>), as well as compiled and minified CSS and JS (<code>ratchet.min.*</code>). The Ratchicon fonts are included, as are the Android and iOS platform themes.</p> |
||||
|
||||
<h3>Ratchet source code</h3> |
||||
<p>The Ratchet source code download includes the precompiled CSS, JavaScript, and font assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:</p> |
||||
<div class="highlight"><pre><code class="bash">ratchet/ |
||||
├── sass/ |
||||
├── js/ |
||||
├── fonts/ |
||||
├── dist/ |
||||
│ ├── css/ |
||||
│ ├── js/ |
||||
│ └── fonts/ |
||||
└── docs/ |
||||
└── examples/ |
||||
</code></pre></div> |
||||
|
||||
<p>The <code>sass/</code>, <code>js/</code>, and <code>fonts/</code> are the source code for our CSS, JS, and icon fonts (respectively). The <code>dist/</code> folder includes everything listed in the precompiled download section above. The <code>docs/</code> folder includes the source code for our documentation, and <code>examples/</code> of Ratchet usage. Beyond that, any other included file provides support for packages, license information, and development.</p> |
||||
</div> |
||||
|
||||
|
||||
|
||||
<div class="docs-section"> |
||||
<h2>Page setup</h2> |
||||
<p class="lead">Three simple rules for structuring your Ratchet pages</p> |
||||
<h3>1. Fixed bars come first</h3> |
||||
<p>All fixed bars (<code>.bar</code>) should always be the first thing in the <code><body></code> of the page. This is really important!</p> |
||||
|
||||
<h3>2. Everything else goes in <code>.content</code></h3> |
||||
<p>Anything that's not a <code>.bar</code> should be put in a div with the class <code>.content</code>. Put this div after the bars in the <code><body></code> tag. The <code>.content</code> div is what actually scrolls in a Ratchet prototype.</p> |
||||
|
||||
<h3>3. Don't forget your meta tags</h3> |
||||
<p>They're included in the template.html page included in the download, but make sure they stay in the page. They are important to Ratchet working just right.</p> |
||||
</div> |
||||
|
||||
|
||||
|
||||
<div class="docs-section"> |
||||
<h2 id="pageLayout">Basic template</h2> |
||||
<p class="lead">Use this basic template to get your app started.</p> |
||||
<div class="highlight"><pre><code class="html"><span class="cp"><!DOCTYPE html></span> |
||||
<span class="nt"><html></span> |
||||
<span class="nt"><head></span> |
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span> |
||||
<span class="nt"><title></span>Ratchet template page<span class="nt"></title></span> |
||||
|
||||
<span class="c"><!-- Sets initial viewport load and disables zooming --></span> |
||||
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"initial-scale=1, maximum-scale=1, user-scalable=no"</span><span class="nt">></span> |
||||
|
||||
<span class="c"><!-- Makes your prototype chrome-less once bookmarked to your phone's home screen --></span> |
||||
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"apple-mobile-web-app-capable"</span> <span class="na">content=</span><span class="s">"yes"</span><span class="nt">></span> |
||||
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"apple-mobile-web-app-status-bar-style"</span> <span class="na">content=</span><span class="s">"black"</span><span class="nt">></span> |
||||
|
||||
<span class="c"><!-- Include the compiled Ratchet CSS --></span> |
||||
<span class="nt"><link</span> <span class="na">href=</span><span class="s">"ratchet.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">></span> |
||||
|
||||
<span class="c"><!-- Include the compiled Ratchet JS --></span> |
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"ratchet.js"</span><span class="nt">></script></span> |
||||
<span class="nt"></head></span> |
||||
<span class="nt"><body></span> |
||||
|
||||
<span class="c"><!-- Make sure all your bars are the first things in your <body> --></span> |
||||
<span class="nt"><header</span> <span class="na">class=</span><span class="s">"bar bar-nav"</span><span class="nt">></span> |
||||
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">></span>Ratchet<span class="nt"></h1></span> |
||||
<span class="nt"></header></span> |
||||
|
||||
<span class="c"><!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) --></span> |
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">></span> |
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"content-padded"</span><span class="nt">></span>Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:<span class="nt"></p></span> |
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span> |
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"table-view"</span><span class="nt">></span> |
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"table-view-cell"</span><span class="nt">></span> |
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"push-right"</span> <span class="na">href=</span><span class="s">"http://goratchet.com"</span><span class="nt">></span> |
||||
<span class="nt"><strong></span>Ratchet documentation<span class="nt"></strong></span> |
||||
<span class="nt"></a></span> |
||||
<span class="nt"></li></span> |
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"table-view-cell"</span><span class="nt">></span> |
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"push-right"</span> <span class="na">href=</span><span class="s">"https://github.com/twbs/ratchet/"</span><span class="nt">></span> |
||||
<span class="nt"><strong></span>Ratchet on Github<span class="nt"></strong></span> |
||||
<span class="nt"></a></span> |
||||
<span class="nt"></li></span> |
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"table-view-cell"</span><span class="nt">></span> |
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"push-right"</span> <span class="na">href=</span><span class="s">"https://groups.google.com/forum/#!forum/goratchet"</span><span class="nt">></span> |
||||
<span class="nt"><strong></span>Ratchet Google group<span class="nt"></strong></span> |
||||
<span class="nt"></a></span> |
||||
<span class="nt"></li></span> |
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"table-view-cell"</span><span class="nt">></span> |
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"push-right"</span> <span class="na">href=</span><span class="s">"https://twitter.com/goratchet"</span><span class="nt">></span> |
||||
<span class="nt"><strong></span>Ratchet on Twitter<span class="nt"></strong></span> |
||||
<span class="nt"></a></span> |
||||
<span class="nt"></li></span> |
||||
<span class="nt"></ul></span> |
||||
<span class="nt"></div></span> |
||||
<span class="nt"></div></span> |
||||
|
||||
<span class="nt"></body></span> |
||||
<span class="nt"></html></span> |
||||
</code></pre></div> |
||||
</div> |
||||
|
||||
|
||||
|
||||
<div class="docs-section"> |
||||
<h2>Community</h2> |
||||
<p class="lead">Stay up to date on the development of Ratchet and reach out to the community with these helpful resources.</p> |
||||
<ol> |
||||
<li> |
||||
<p>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a> (which includes Ratchet releases and news).</p> |
||||
</li> |
||||
<li> |
||||
<p>For help using Ratchet, ask on <a href="http://stackoverflow.com/questions/tagged/ratchet-2">StackOverflow using the tag <code>ratchet-2</code></a>.</p> |
||||
</li> |
||||
<li> |
||||
<p>Start a discussion on the <a href="https://groups.google.com/forum/#!forum/goratchet">Ratchet Google group</a>.</p> |
||||
</li> |
||||
</ol> |
||||
<p>You can also follow <a href="https://twitter.com/goratchet">@goratchet</a> on Twitter for the latest news.</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="column lg-units-4"> |
||||
<div class="docs-module"> |
||||
<h4 class="docs-module-title">Ratchet</h4> |
||||
<p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p> |
||||
<a href="https://github.com/twbs/ratchet/releases/download/v2.0.1/ratchet-2.0.1-dist.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.1-dist']);">Download Ratchet</a> |
||||
<p class="version">Currently v2.0.1</p> |
||||
</div> |
||||
|
||||
<div class="docs-module"> |
||||
<h4 class="docs-module-title">Source code</h4> |
||||
<p>If you haven't already, download the source code for Ratchet.</p> |
||||
<a href="https://github.com/twbs/ratchet/archive/v2.0.1.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.1']);">Download source</a> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
<div class="column"> |
||||
<!-- Footer --> |
||||
<div class="docs-footer"> |
||||
<!-- Social links --> |
||||
<ul class="social"> |
||||
<li> |
||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=ratchet&type=watch&count=true" width="100" height="20"></iframe> |
||||
</li> |
||||
<li> |
||||
<a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet – Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a> |
||||
</li> |
||||
<li><a data-ignore="push" href="https://twitter.com/goratchet" class="twitter-follow-button" data-show-count="true"> |
||||
Follow @GoRatchet</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p class="docs-footer-text">Code licensed under the <a href="https://github.com/twbs/ratchet/blob/master/LICENSE" data-ignore="push">MIT License</a> and the docs are licensed under <a href="https://github.com/twbs/ratchet/blob/master/docs/LICENSE" data-ignore="push">CC BY 3.0</a>. Ratchet was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p> |
||||
|
||||
<ul class="docs-footer-links"> |
||||
<li>Currently v2.0.1</li> |
||||
<li>·</li> |
||||
<li><a href="https://github.com/twbs/ratchet/issues" data-ignore="push">Issues</a></li> |
||||
<li>·</li> |
||||
<li><a href="https://github.com/twbs/ratchet/releases" data-ignore="push">Releases</a></li> |
||||
<li>·</li> |
||||
<li><a href="http://goratchet.com/1.0.2/" data-ignore="push">Legacy v1.0.2 Docs</a></li> |
||||
</ul> |
||||
</div> |
||||
|
||||
|
||||
<script> |
||||
window.twttr = (function (d,s,id) { |
||||
var t, js, fjs = d.getElementsByTagName(s)[0]; |
||||
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1; |
||||
js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); |
||||
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } }); |
||||
}(document, "script", "twitter-wjs")); |
||||
</script> |
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> |
||||
<script src="/dist/js/ratchet.min.js"></script> |
||||
<script src="/assets/js/docs.min.js"></script> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<title>Ratchet</title> |
||||
<meta name="description" content="Ratchet: Prototype mobile apps with simple HTML, CSS, and JS components."> |
||||
<meta name="author" content="Connor Sears"> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> |
||||
<link rel="shortcut icon" href="/favicon.ico"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<!-- Google Web Fonts --> |
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700|Open+Sans:300"> |
||||
|
||||
<link rel="stylesheet" href="/dist/css/ratchet.min.css"> |
||||
<link rel="stylesheet" href="/assets/css/docs.min.css"> |
||||
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/img/apple-touch-icon-114x114.png"> |
||||
|
||||
<script> |
||||
var _gaq = _gaq || []; |
||||
_gaq.push(['_setAccount', 'UA-36050008-1']); |
||||
_gaq.push(['_trackPageview']); |
||||
|
||||
(function() { |
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
||||
})(); |
||||
</script> |
||||
|
||||
</head> |
||||
<body class="docs-home" ontouchstart=""> |
||||
<!--[if lt IE 9]> |
||||
<div class="bs-callout bs-callout-danger"> |
||||
<h4>Attention!</h4> |
||||
<p> |
||||
Looks like your current browser is old and doesn't support many features used in this page. |
||||
Please take a second to <a href="http://browsehappy.com/">upgrade to a more modern browser</a>. |
||||
</p> |
||||
</div> |
||||
<![endif]--> |
||||
|
||||
<div class="docs-header"> |
||||
<header class="docs-masthead clearfix"> |
||||
<div class="container"> |
||||
<div class="column"> |
||||
<h1 class="docs-title"> |
||||
<a href="/" data-ignore="push">Ratchet</a> |
||||
</h1> |
||||
<nav class="docs-nav clearfix"> |
||||
<a class="docs-nav-trigger icon icon-bars pull-right js-docs-nav-trigger" href="#"></a> |
||||
<div class="docs-nav-group"> |
||||
<a class="docs-nav-item" href="/" data-ignore="push">Home</a> |
||||
<a class="docs-nav-item" href="/getting-started" data-ignore="push">Getting started</a> |
||||
<a class="docs-nav-item" href="/components" data-ignore="push">Components</a> |
||||
<a class="docs-nav-item" href="/examples" data-ignore="push">Examples</a> |
||||
<a class="docs-nav-item" href="/about" data-ignore="push">About</a> |
||||
<a class="docs-nav-item" href="https://github.com/twbs/ratchet" data-ignore="push">GitHub project</a> |
||||
</div> |
||||
</nav> |
||||
</div> |
||||
</div> |
||||
</header> |
||||
|
||||
<div class="docs-header-content"> |
||||
<p class="docs-subtitle">Build mobile apps with simple HTML‚ CSS‚ and JS components.</p> |
||||
<a data-ignore="push" href="https://github.com/twbs/ratchet/archive/v2.0.1.zip" class="btn btn-primary" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.1']);">Download Ratchet</a> |
||||
<p class="version">Currently v2.0.1</p> |
||||
</div> |
||||
|
||||
<div class="docs-header-bottom"> |
||||
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div> |
||||
|
||||
<div class="docs-footer"> |
||||
<!-- Social links --> |
||||
<ul class="social"> |
||||
<li> |
||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=ratchet&type=watch&count=true" width="100" height="20"></iframe> |
||||
</li> |
||||
<li> |
||||
<a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet – Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a> |
||||
</li> |
||||
<li><a data-ignore="push" href="https://twitter.com/goratchet" class="twitter-follow-button" data-show-count="true"> |
||||
Follow @GoRatchet</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p class="docs-footer-text">Code licensed under the <a href="https://github.com/twbs/ratchet/blob/master/LICENSE" data-ignore="push">MIT License</a> and the docs are licensed under <a href="https://github.com/twbs/ratchet/blob/master/docs/LICENSE" data-ignore="push">CC BY 3.0</a>. Ratchet was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p> |
||||
|
||||
<ul class="docs-footer-links"> |
||||
<li>Currently v2.0.1</li> |
||||
<li>·</li> |
||||
<li><a href="https://github.com/twbs/ratchet/issues" data-ignore="push">Issues</a></li> |
||||
<li>·</li> |
||||
<li><a href="https://github.com/twbs/ratchet/releases" data-ignore="push">Releases</a></li> |
||||
<li>·</li> |
||||
<li><a href="http://goratchet.com/1.0.2/" data-ignore="push">Legacy v1.0.2 Docs</a></li> |
||||
</ul> |
||||
</div> |
||||
|
||||
|
||||
<script> |
||||
window.twttr = (function (d,s,id) { |
||||
var t, js, fjs = d.getElementsByTagName(s)[0]; |
||||
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1; |
||||
js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); |
||||
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } }); |
||||
}(document, "script", "twitter-wjs")); |
||||
</script> |
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> |
||||
<script src="/dist/js/ratchet.min.js"></script> |
||||
<script src="/assets/js/docs.min.js"></script> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Ratchet</title> |
||||
<meta name="description" content=""> |
||||
<meta name="author" content=""> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> |
||||
<link rel="shortcut icon" href="favicon.ico"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
<link rel="stylesheet" href="/dist/css/ratchet.min.css"> |
||||
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/img/apple-touch-icon-114x114.png"> |
||||
</head> |
||||
<body ontouchstart=""> |
||||
<header class="bar bar-nav"> |
||||
<h1 class="title">Push</h1> |
||||
</header> |
||||
<div class="content"> |
||||
<div class="card"> |
||||
<ul class="table-view"> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="two.html" data-transition="slide-in" data-selector=".device-content"> |
||||
Load new page with push |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Ratchet template page</title> |
||||
|
||||
<!-- Sets initial viewport load and disables zooming --> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> |
||||
|
||||
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen --> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<!-- Set a shorter title for iOS6 devices when saved to home screen --> |
||||
<meta name="apple-mobile-web-app-title" content="Ratchet"> |
||||
|
||||
<!-- Include the compiled Ratchet CSS --> |
||||
<link rel="stylesheet" href="/dist/css/ratchet.min.css"> |
||||
|
||||
<!-- Intro paragraph styles. Delete once you start using this page --> |
||||
<style> |
||||
.welcome { |
||||
line-height: 1.5; |
||||
color: #555; |
||||
} |
||||
</style> |
||||
|
||||
</head> |
||||
<body> |
||||
|
||||
<!-- Make sure all your bars are the first things in your <body> --> |
||||
<header class="bar bar-nav"> |
||||
<h1 class="title">Ratchet</h1> |
||||
</header> |
||||
|
||||
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) --> |
||||
<div class="content"> |
||||
<p class="welcome">Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:</p> |
||||
<div class="card"> |
||||
<ul class="table-view"> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="http://goratchet.com"> |
||||
<strong>Ratchet documentation</strong> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="https://github.com/twbs/ratchet/"> |
||||
<strong>Ratchet on Github</strong> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="https://groups.google.com/forum/#!forum/goratchet"> |
||||
<strong>Ratchet Google group</strong> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="navigate-right" href="https://twitter.com/goratchet"> |
||||
<strong>Ratchet on Twitter</strong> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Include the compiled Ratchet JS --> |
||||
<script src="/dist/js/ratchet.min.js"></script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Ratchet</title> |
||||
<meta name="description" content=""> |
||||
<meta name="author" content=""> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> |
||||
<link rel="shortcut icon" href="favicon.ico"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
<link rel="stylesheet" href="/dist/css/ratchet.min.css"> |
||||
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/img/apple-touch-icon-114x114.png"> |
||||
</head> |
||||
<body ontouchstart=""> |
||||
<header class="bar bar-nav"> |
||||
<a class="icon icon-left-nav pull-left" href="one.html" data-transition="slide-out"></a> |
||||
<h1 class="title">Page two</h1> |
||||
</header> |
||||
<div class="content"> |
||||
<div class="card"> |
||||
<ul class="table-view"> |
||||
<li class="table-view-cell"> |
||||
<a href="one.html" data-transition="slide-out">Tap or click here to go back. You can also try your browser's back button.</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue