Browse Source

adding better scrolling via pulltorefresh submodule

pull/154/head
Simon Waldherr 12 years ago
parent
commit
f11d6823e6
  1. 3
      .gitmodules
  2. 107
      dist/ratchet.css
  3. 248
      dist/ratchet.js
  4. 63
      dist/template.html
  5. 6
      lib/css/bars.css
  6. 101
      lib/css/pulltorefresh.css
  7. 244
      lib/js/pulltorefresh.js
  8. 3
      lib/js/push.js
  9. 1
      submodules/pulltorefresh
  10. 61
      test/app/checkout.html
  11. 151
      test/app/choose-movie.html
  12. 119
      test/app/choose-theater.html
  13. 4
      test/app/css/app.css
  14. 224
      test/app/index.html
  15. 51
      test/app/settings.html
  16. 169
      test/app/theaters.html

3
.gitmodules vendored

@ -0,0 +1,3 @@
[submodule "submodules/pulltorefresh"]
path = submodules/pulltorefresh
url = git@github.com:SimonWaldherr/PullToRefresh.git

107
dist/ratchet.css vendored

@ -197,6 +197,12 @@ a {
border-bottom-width: 0;
}
/* Bars inside the scrollable div */
.bar-scrolling {
position: relative;
top: auto;
}
/* Title bar
-------------------------------------------------- */
@ -1283,4 +1289,103 @@ select {
.content.slide.right {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}/* PullToRefresh styles
-------------------------------------------------- */
.scrollable {
overflow-y: auto;
height: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
}
.scrollable .wrap {
min-height: 100%;
padding-bottom: 1px;
background: #f5f5f5;
-webkit-transform: translateZ(0);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.wrap {
position: relative;
}
.ptr_box {
position: absolute;
top: -55px;
line-height: 55px;
display: block;
text-align: center;
height: 55px;
left: 0px;
right: 0px;
}
.ptr_container {
position: relative;
width: 230px;
margin: auto;
height: 40px;
top: 15px;
}
.ptr_image {
margin: 5px;
margin-top: 20px;
height: 30px;
width: 30px;
zoom: 0.5;
background-image: url('data:image/png;base64,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');
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
background-repeat: repeat-x;
display: inline-block;
background-position: left center;
float: left;
position: relative;
bottom: 0px;
-webkit-backface-visibility: hidden
}
.ptr_image.loading {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAANOklEQVR4Ae2dDbAWVRnHX6Ar14s3RQUtv64IJnox8YMRpcCxkqkgU0Sb1GkgknRstBybIUVtkplI1HTSyUwr0wYs+hCvJldJSSIkqRHB/BZF0/iqBG8K3X5/epeWl7vvnrPv7r577nuemT+77+45z/Oc5/z37Plabp/u7u6Sl8aNQN/GLbovuSLgCdDgPPAE8ARo8Ag0ePF9C+AJ0OARaPDi+xbAE6DBI9DgxX+fSflnzZpVWrFiRam5udkkuU9DBLq6ukojR44szZgxo9DxMCKAKr+zs7M0YMCAQhcG5waCIeD9YDgYBvYBrUDsDRi8lfP14B3wJngD/BW8CtaCTaAm2bx5c03588psRAA9+ar8lpaWvPwytbMvCY8BE8AIcDAQAfqAJCJCiADCSrAQPAFeB9biQotpRADrkmebQZU+DpwFRoE2kJbsjqKhZYzleBFQ5S8H94GHwUug14hLBFDFTAOTQRvISz6IoYllbOC4ANwGHgfOiwvDwAOJ8g1ATfHloA3US/bG8PngMfBzcDxwWopMAL3HLwaq+EvAXqAooridCUSEbwN1Op2UohJgMNG8F9wE9i9wZNVnUKvUCY4usJ+RrhWRAB/F28VAT5grcgKOigSnuuJw4GeRCNAPpy4DD4LDAwcdOg7C1/ngZId8LsyGEE3WzAXfAWpWXRX1Be4Bh7hSgCK0AMcSrEXApSa/Wv1qMmo2UCe28FJvApxGhB4CmsXrTaJJqjEuFKieBNCEjt6Zav57m+jpn+5CoepFgC8QnJ+Cwi0upFhp6gxq4qjQUg8CqHn8AWgqdGRqd059gUNrV5OthrwJ8EmK8xPg0hpE0hrQa6B/0sx55cuTACdRqJ+BYE0+rzLWy85/MNxVL+OmdvMigJrCu4HGyY0iWjZ+oeiFzYMAeuLvAm1FD0bK/mkzyT9S1pm6ujwIMAevnZoeTSHK/0bHzSnoyVxF1gQ4jxJcmHkpimdAS8SriufWrh5lSYAjMKeNHI0mWsy61pVCZ0UADfNuBb1xlq9a3f6Om+eAd6slKtK9rAhwKYUcV6SC5uDLr7ExERS+4xeORRYE0MLOVWEjDXB+HWXUDOe/XCtr2jNy2tSh9/4A1wKR0N/15FNrp2Guk5J2C/BFonCqk5Gwc7qb5JrVHA2crXwVOc0WQNu3r5bSXizrKJu+C9Bi1pK4cvbrpwax2JImAa6gqPsXu7iJvFtDrqfBb4CGeC+DWFHlb9y4sbRs2bLYtFkk2LZtW6m9vb3U2tpaVX1aBFBTOLWqpeLfVO9d8/d6yl8Ej5V/P8/xLWAl/fv3L61cubJ0xhlnWOVLIfFQdHTxceprHR0dpdGjVTXRkgYB1I/4JkhDV7Sn1e+8x+3NYEsZOteHnl1gK9gI5KcqWdO0uqcO3MtAlav0qngRQOlTEbUCdfigdhLOrwH3mLyC0qi08RjLo+OnyZVXwFrwLHiu/Fsfb74NAgIER5GiEeUQCr2bacFrJYB6OdrLr80Pacs2FK4EfwCPAs2tiwBOTbTgb96iflhuBNAmj7Epl3A5+vSNgD7Ffgqk1iSjqxFkPwpp/G1FrS3ANIzp3Vqr/BMF+hbwDrAUaDeNF/sIqCUeCJpMs9ZCgDaMTDA1FJFO7+vbwS1A73UvtUVAO6407usGej3rNVpVaiHA2Wiu5ZPtBeSfCVZU9dDftImA6kMk0GtzDxDbX0rafIs4k0AS2UCmKUCth6/8JBGMzqPvENQCaBue0XpM0hbgwxg4BtjK78kwHTxtm9GnN4rAvuVUGgUYdQSTtgB6em3Jcxt5TgO+8glCRjKkrFctgBArSQigzsX4WM07J7iSnxcAzdR5yS4Ch5dV9+doNBdg+xRL/1DQrhNDuYx0cwzT+mS1RWBYObsebCMCJGkBRqHcqINBuquBr3yCkIPoqW8L2TF6uJMQwHTe/06cuSbkkD/NNgIHoP6gkAmjujVKFFKqZmVk6HfUqRbBL4666a9nEoE2tIbnZdRXixVbAmilaUiMVk3rTgWa5fOSXwSSDMut5/HVy9QMUzVRj39ltQT+XiYROLFCq9Eimm0LoAmgarKYm9+rlsDfyyQCLWgdUaHZaEHNlgBHVhgJ/9QGjMtB7AJEOJM/TyUCapk1PA9L6gTQUmOlkbDBu/mxNHzBn+cWgXFYCg/7tBpotCPKpgXQPPMHQE+iGb7rerrhr+USgQkVVlT5qRNgEEoHVxgKfs7jxM/xB9HI93gY5o6vMKnNsEKs2LYAPS0wyNCNsZZ8gqwi8CkUaw9AWDQEF2LFhgD7R2hbyPW/RNzzl7ONgCZ7Pt+DiUwIEPX+15YuL/WJgDblHteDaU3GCbFi0wKoE1gpL3BhUeVF/zu3CHwZS2oFKmUdF1IfBmq3aaV0cMG5b+IrC+Ho7+H4PTHC9zUR13e5bNMCtFbkFsN+WXHN/8wvAl/FVNSy/HOmbtgQoHKP2UsY+ZOpIZ8u1Qho2renzl9gZHVwEne0IYA2HIRFS75GHY1wJn+eSgS0z6LygQwUv8vJK8GPuKMNASq3GD0cp9zfzyQCn0Xr6VU0v8W9v1W5v9MtGwKE55q11PjkTpr8jzwioJHYbKB1mSjR0//3qJuV15MS4FUUqQ/gJd8IXI+5agty8kaTcloMMhIbAoQVqvI3hS/488wjMB0L5xlYWWKQZkcSGwK8tyOXn/oNhSKXU834zTGwpP/5xOpzOxsChDd6+OGfQW2klORD6NFeixYDfRr/a3bWWGwIoOGFRO8XKyPbc/l/kkRgCJnmgzbDzNqQo/8DyVhsCKDmRaJ3/5vbz/w/WUZAX1/dD460MPKARdrtSW0I8HZZuSpfY00v2UVgPKoXgiMsTKherDqA0m1DgGDWT2NMo80GMuDFKgJa2fsG+BWI2n8RpfBRblg/mOHJnSjFwfWAAK8FF/wx1QgchjaN8ycm1DovST4bAqwvG1iTxJDPExkBrehdDL4GetpzEZkxdEMTc4+Efhuf2hBAmwwka/938P/WGAFV/GRwCTi6Rl16+jcm0WFDgOD98noSQz7Pjgi0caZm/kvgKFCraHR2Z1IlNgQIpn6DliCpzUbMdwiFPh6cCT4Okjb1ZN1FOrny9C5XDS/YEEBbvzQC8FvAqgdXMT0IDAOjwBhwLBgE0hbtyvpuLUptCKB3jBaBttRi0NG8Tfitd/Zu5aM2x2hDhrAP0BPeBjRuPwCIALqetTyEgUW1GLEhwAYMPQMSdTZqcTKDvAeiU+NsVaoq6nCwJ2gFewBd17G5fIwigMbt9RI9/bOAjonFiABdXV0l/gDBNqzcAPQayE369u1bam5WPSSSPuRSD1sVrub4OLA3GAL2Ay7LvTi/uNYC9Onu7o7VsXr16tKmTZtKJn+AIFaZZQLZnjlzZkl/gcNQlHAs+DQ4GYwAeoJ7k6gVFqGfjyrUli1bSvPnzy+NGqVk0WLUAgwfPjxaQ8Z39PTr798YiJ7oc8H5oNZxtYG5uia5HuuRlW/jmREBbBSmnVavnxjRe/hCcDlQU9/bRUO+G9MqZOEJEFNQVfitQM19I4g6fJeCYGW25jK7TIAxlP7HQB26RpEfUlAtE6cmNsvBqRlNQdHn0PEgaKTK1zt/Rgqx20mFiwSYSgnuAhqrN4qo6f8KWJd2gV0jwAQC8H2gjl8jieZfHsiiwC4R4FACcAdotMr/I2W+IovKl06XCHAV/qa5ipZVTNPUqyZ/CogdCyc16goBhlLAs5IW0tF8eu9fAFZl6b8rBBhPEFqyDEQBdavFm5+1X64Q4CNZB6Jg+jXevzYPn1whwB55BKMgNn6BH5rajl+lS8FhVwiwOYWyuqDitzh5Lgg+w8vcZ1cI8Hjmkai/gYdxYTLIrMffUxFdIcAjOL+1pwL0kmv6Euh0EHx8k1uxXCGAlkBTXQTJLcLxhn5EkrNBait88Sb/n8IVAmhMfA3oTa3ANspzJZgCcnvnY2sncYUAclpToiJBbxDtq9RT/y2QS28/KmguEUBl0NhYewBclk6cHwM03Ku7uEYAPS36pOr2ukcumQOzyabdS88my55+LtcIoAjofTkNfB3kOmTCXlIJmnz5bPVfuCQ1aJrPRQIEZdPT9AmwNLhQ0ONc/DoRzCuify4TQPFcDE4B2i3zAiiSyDc19+eAF4vkWNgX1wmgsug1cDM4AVwEngD1EjXvHeAzYCy4HxRaXN4VXBlYfS1zC9CWsZPAJPAxcCTIUjSefxJoNu8+8BRwRnoTAYKgq0LU/Aq7g6OACKEncig4GOwFkopm7J4Br4IFQJX/Z+CkFJ4A+iyMD1OTBvcdMi4v4yaOuwERYDBoAweBQUC/+4EBYE+g1kREUpO+AbwBVoH1YB0QAQotipnJJ3WFJ0B7e3upo6Njx4epa9euLc2dO7fU1NSUpAI0hHy+jCVJFLiSR5/UDRw4MNZdo6+DY7X4BM5GoDeMApwNfhEc9wQoQi3U0QdPgDoGvwimPQGKUAt19METoI7BL4JpT4Ai1EIdffAEqGPwi2DaE6AItVBHH/4LblUKSJmR62QAAAAASUVORK5CYII=');
background-repeat: no-repeat;
-webkit-animation-name: rotate;
-webkit-animation-duration:0.5s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-play-state:running;
}
.ptr_text {
position: relative;
top: -10px;
left: 20px;
float: left;
font-size: 20px;
}
.inserted {
border-top: 1px solid #0a0a0a;
list-style-type: none;
padding: 0;
margin: 0;
}
.inserted ul {
padding: 0px;
margin: 0px;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}

248
dist/ratchet.js vendored

@ -120,8 +120,7 @@
var bars = {
bartab : '.bar-tab',
bartitle : '.bar-title',
barfooter : '.bar-footer',
barheadersecondary : '.bar-header-secondary'
barfooter : '.bar-footer'
}
var cacheReplace = function (data, updates) {
@ -763,3 +762,248 @@
});
}();
/* ----------------------------------
* PullToRefresh v0.003
* By Simon Waldherr
* https://github.com/SimonWaldherr/PullToRefresh
* Licensed under The MIT License
* http://opensource.org/licenses/MIT
* ---------------------------------- */
var ptr_scrollable_parent = false;
function ptr_init() {
document.getElementsByTagName('body')[0].className = !!('ontouchstart' in window) ?
document.getElementsByTagName('body')[0].className+=' touch' :
document.getElementsByTagName('body')[0].className+=' desktop';
var scrollables = document.getElementsByClassName('scrollable');
for(var i = 0; i<scrollables.length; i++) {
if(scrollables[i].hasAttribute('data-url') != false) {
var ptr_box = document.createElement('div'),
ptr_container = document.createElement('div'),
ptr_image = document.createElement('div'),
ptr_text = document.createElement('div');
ptr_box.appendChild(ptr_container);
ptr_container.appendChild(ptr_image);
ptr_container.appendChild(ptr_text);
ptr_text.innerHTML = 'Pull to refresh';
ptr_box.className = 'ptr_box';
ptr_container.className = 'ptr_container';
ptr_image.className = 'ptr_image';
ptr_text.className = 'ptr_text';
scrollables[i].firstElementChild.insertBefore(ptr_box, scrollables[i].firstElementChild.firstChild);
}
}
document.addEventListener('touchstart',function(e) {
var parent = e.target;
if(typeof parent.className === null) {
return false;
}
for(var i = 0; i < 10; i++) {
if(typeof parent.className !== 'undefined') {
if(parent.className.match('scrollable')) {
ptr_scrollable_parent = i;
i = 10;
if(parent.hasAttribute('data-url') != false) {
if(typeof parent.getElementsByClassName('ptr_box')[0] != 'undefined') {
} else {
var ptr_box = document.createElement('div'),
ptr_container = document.createElement('div'),
ptr_image = document.createElement('div'),
ptr_text = document.createElement('div');
ptr_box.appendChild(ptr_container);
ptr_container.appendChild(ptr_image);
ptr_container.appendChild(ptr_text);
ptr_text.innerHTML = 'Pull to refresh';
ptr_box.className = 'ptr_box';
ptr_container.className = 'ptr_container';
ptr_image.className = 'ptr_image';
ptr_text.className = 'ptr_text';
parent.firstElementChild.insertBefore(ptr_box, parent.firstElementChild.firstChild);
}
} else if(typeof parent.getElementsByClassName('ptr_box')[0] != 'undefined') {
parent.removeChild(parent.getElementsByClassName('ptr_box')[0]);
}
if(parent.scrollTop === 0) {
parent.scrollTop = 1;
} else if((parent.scrollTop+parent.offsetHeight) === parent.scrollHeight) {
parent.scrollTop = parent.scrollTop-1;
}
} else {
}
}
if((typeof parent.parentNode.tagName === 'undefined')) {
i = 10;
return false;
} else if((parent.parentNode.tagName == 'BODY')||(parent.parentNode.tagName == 'HTML')) {
i = 10;
return false;
} else {
parent = parent.parentNode;
}
}
});
document.addEventListener('touchmove',function(e) {
var parent = e.target;
var scroll = false;
var rotate = 90;
if(ptr_scrollable_parent == false) {
e.preventDefault();
return false;
}
for(var i = 0; i < ptr_scrollable_parent; i++) {
parent = parent.parentNode;
}
if((ptr_scrollable_parent != false)&&(parent.hasAttribute('data-url') != false)) {
scroll = true;
var ptr_element = parent;
var ptr_wrapelement = ptr_element.getElementsByClassName('wrap')[0];
var top = ptr_element.scrollTop;
var ptr = ptr_element.getElementsByClassName('ptr_box')[0];
if((ptr_wrapelement.className.indexOf(' active') === -1)&&(!ptr_wrapelement.getElementsByClassName('ptr_image')[0].className.match('loading'))) {
if(ptr_element.scrollTop < -25) {
rotate = (top < -40) ? -90 : 130 + (top*12+270);
}
if(ptr_element.scrollTop < 0) {
ptr.style.opacity = 1.0;
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['-webkit-transform'] = "scale(1) rotate("+rotate+"deg)";
if((ptr_element.scrollTop < -30)&&(ptr_element.scrollTop > -45)) {
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['width'] = "40px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['margin-left'] = "10px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['margin-right'] = "10px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['background-size'] = "50% 100%";
} else if(ptr_element.scrollTop >= -30) {
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['width'] = "30px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['margin-left'] = "15px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['margin-right'] = "15px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['background-size'] = "100% 100%";
} else {
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['width'] = "60px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['margin-left'] = "0px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['margin-right'] = "0px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['background-size'] = "34% 100%";
}
}
if(ptr_element.scrollTop < -51) {
if(ptr_wrapelement.className.indexOf(' active') === -1) {
ptr_wrapelement.className += ' active';
ptr_wrapelement.getElementsByClassName('ptr_text')[0].innerHTML = 'Loading ...';
ptr_wrapelement.getElementsByClassName('ptr_image')[0].className += ' loading';
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['width'] = "30px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['margin-left'] = "15px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['margin-right'] = "15px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['background-size'] = "100% 100%";
var ptr_element = parent;
var ptr_wrapelement = ptr_element.getElementsByClassName('wrap')[0];
var ptr_eleId = parent.id;
var time = new Date();
reqwest({
url: parent.getAttribute('data-url')+'?rt='+time.getTime()
, type: 'html'
, method: 'post'
, data: { usertime: time.getTime() }
, error: function () {
alert('Could not connect');
ptr_wrapelement.style.top = '0px';
ptr.getElementsByClassName('ptr_image')[0].className = ptr.getElementsByClassName('ptr_image')[0].className.replace(' loading', '');
ptr_wrapelement.className = ptr_wrapelement.className.replace(' active', '');
hideLoading(ptr_eleId);
}
, success: function (resp) {
var ptrbox = document.getElementById(ptr_eleId).getElementsByClassName('ptr_box')[0];
var insert = document.createElement('div');
insert.innerHTML = resp;
insert.className = 'inserted';
ptr_wrapelement.insertBefore(insert, ptrbox.nextSibling);
ptr_wrapelement.style.top = '0px';
ptr.getElementsByClassName('ptr_image')[0].className = ptr.getElementsByClassName('ptr_image')[0].className.replace(' loading', '');
ptr_wrapelement.className = ptr_wrapelement.className.replace(' active', '');
var inserted = document.getElementsByClassName('inserted')[0];
ptr_element.scrollTop = inserted.clientHeight-51;
ptr_wrapelement.getElementsByClassName('ptr_text')[0].innerHTML = '';
ptr.style.opacity = 0.0;
ptr_wrapelement.getElementsByClassName('ptr_image')[0].className = ptr_wrapelement.getElementsByClassName('ptr_image')[0].className.replace(' loading', '');
ptr_wrapelement.style.top = '0px';
ptr_scrollable_parent = false;
}
})
}
} else if(ptr_element.scrollTop != 0) {
ptr_wrapelement.className = ptr_wrapelement.className.replace(' active', '');
ptr_wrapelement.getElementsByClassName('ptr_text')[0].innerHTML = 'Pull to refresh';
}
}
} else if((ptr_scrollable_parent != false)) {
scroll = true;
}
if(scroll == false) {
e.preventDefault();
}
});
document.addEventListener('touchend',function(e) {
var parent = e.target;
var scroll = false;
for(var i = 0; i < ptr_scrollable_parent; i++) {
parent = parent.parentNode;
}
if((parent.hasAttribute('data-url') != false)&&(ptr_scrollable_parent != false)) {
if((parent.hasAttribute('data-url') != false)) {
var ptr_element = parent;
var ptr_wrapelement = ptr_element.getElementsByClassName('wrap')[0];
var ptr_eleId = parent.id;
var top = ptr_element.scrollTop;
var ptr = ptr_element.getElementsByClassName('ptr_box')[0];
if(ptr_wrapelement.getElementsByClassName('ptr_image')[0].className.match('loading')) {
ptr_wrapelement.className = ptr_wrapelement.className.replace(' active', '');
ptr_wrapelement.style.top = '51px';
}
}
}
ptr_scrollable_parent = false;
});
}
window.onload = function() {
ptr_init();
}

63
dist/template.html vendored

@ -42,38 +42,39 @@
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<div class="content-padded">
<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="content scrollable" id="list">
<div class="wrap">
<div class="content-padded">
<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>
<ul class="list inset">
<li>
<a href="http://maker.github.com/ratchet/">
<strong>Ratchet documentation</strong>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="http://www.github.com/maker/ratchet/">
<strong>Ratchet on Github</strong>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="https://groups.google.com/forum/#!forum/goratchet">
<strong>Ratchet Google group</strong>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="http://www.twitter.com/GoRatchet">
<strong>Ratchet on Twitter</strong>
<span class="chevron"></span>
</a>
</li>
</ul>
</div>
<ul class="list inset">
<li>
<a href="http://maker.github.com/ratchet/">
<strong>Ratchet documentation</strong>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="http://www.github.com/maker/ratchet/">
<strong>Ratchet on Github</strong>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="https://groups.google.com/forum/#!forum/goratchet">
<strong>Ratchet Google group</strong>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="http://www.twitter.com/GoRatchet">
<strong>Ratchet on Twitter</strong>
<span class="chevron"></span>
</a>
</li>
</ul>
</div>
</body>

6
lib/css/bars.css

@ -37,6 +37,12 @@
border-bottom-width: 0;
}
/* Bars inside the scrollable div */
.bar-scrolling {
position: relative;
top: auto;
}
/* Title bar
-------------------------------------------------- */

101
lib/css/pulltorefresh.css

@ -0,0 +1,101 @@
/* PullToRefresh styles
-------------------------------------------------- */
.scrollable {
overflow-y: auto;
height: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
bottom: 50px;
}
.scrollable .wrap {
min-height: 100%;
padding-bottom: 1px;
background: #f5f5f5;
-webkit-transform: translateZ(0);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.wrap {
position: relative;
}
.ptr_box {
position: absolute;
top: -55px;
line-height: 55px;
display: block;
text-align: center;
height: 55px;
left: 0px;
right: 0px;
}
.ptr_container {
position: relative;
width: 230px;
margin: auto;
height: 40px;
top: 15px;
}
.ptr_image {
margin: 5px;
margin-top: 20px;
height: 30px;
width: 30px;
zoom: 0.5;
background-image: url('data:image/png;base64,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');
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
background-repeat: repeat-x;
display: inline-block;
background-position: left center;
float: left;
position: relative;
bottom: 0px;
-webkit-backface-visibility: hidden
}
.ptr_image.loading {
background-image: url('data:image/png;base64,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');
background-repeat: no-repeat;
-webkit-animation-name: rotate;
-webkit-animation-duration:0.5s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-play-state:running;
}
.ptr_text {
position: relative;
top: -10px;
left: 20px;
float: left;
font-size: 20px;
}
.inserted {
border-top: 1px solid #0a0a0a;
list-style-type: none;
padding: 0;
margin: 0;
}
.inserted ul {
padding: 0px;
margin: 0px;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}

244
lib/js/pulltorefresh.js

@ -0,0 +1,244 @@
/* ----------------------------------
* PullToRefresh v0.003
* By Simon Waldherr
* https://github.com/SimonWaldherr/PullToRefresh
* Licensed under The MIT License
* http://opensource.org/licenses/MIT
* ---------------------------------- */
var ptr_scrollable_parent = false;
function ptr_init() {
document.getElementsByTagName('body')[0].className = !!('ontouchstart' in window) ?
document.getElementsByTagName('body')[0].className+=' touch' :
document.getElementsByTagName('body')[0].className+=' desktop';
var scrollables = document.getElementsByClassName('scrollable');
for(var i = 0; i<scrollables.length; i++) {
if(scrollables[i].hasAttribute('data-url') != false) {
var ptr_box = document.createElement('div'),
ptr_container = document.createElement('div'),
ptr_image = document.createElement('div'),
ptr_text = document.createElement('div');
ptr_box.appendChild(ptr_container);
ptr_container.appendChild(ptr_image);
ptr_container.appendChild(ptr_text);
ptr_text.innerHTML = 'Pull to refresh';
ptr_box.className = 'ptr_box';
ptr_container.className = 'ptr_container';
ptr_image.className = 'ptr_image';
ptr_text.className = 'ptr_text';
scrollables[i].firstElementChild.insertBefore(ptr_box, scrollables[i].firstElementChild.firstChild);
}
}
document.addEventListener('touchstart',function(e) {
var parent = e.target;
if(typeof parent.className === null) {
return false;
}
for(var i = 0; i < 10; i++) {
if(typeof parent.className !== 'undefined') {
if(parent.className.match('scrollable')) {
ptr_scrollable_parent = i;
i = 10;
if(parent.hasAttribute('data-url') != false) {
if(typeof parent.getElementsByClassName('ptr_box')[0] != 'undefined') {
} else {
var ptr_box = document.createElement('div'),
ptr_container = document.createElement('div'),
ptr_image = document.createElement('div'),
ptr_text = document.createElement('div');
ptr_box.appendChild(ptr_container);
ptr_container.appendChild(ptr_image);
ptr_container.appendChild(ptr_text);
ptr_text.innerHTML = 'Pull to refresh';
ptr_box.className = 'ptr_box';
ptr_container.className = 'ptr_container';
ptr_image.className = 'ptr_image';
ptr_text.className = 'ptr_text';
parent.firstElementChild.insertBefore(ptr_box, parent.firstElementChild.firstChild);
}
} else if(typeof parent.getElementsByClassName('ptr_box')[0] != 'undefined') {
parent.removeChild(parent.getElementsByClassName('ptr_box')[0]);
}
if(parent.scrollTop === 0) {
parent.scrollTop = 1;
} else if((parent.scrollTop+parent.offsetHeight) === parent.scrollHeight) {
parent.scrollTop = parent.scrollTop-1;
}
} else {
}
}
if((typeof parent.parentNode.tagName === 'undefined')) {
i = 10;
return false;
} else if((parent.parentNode.tagName == 'BODY')||(parent.parentNode.tagName == 'HTML')) {
i = 10;
return false;
} else {
parent = parent.parentNode;
}
}
});
document.addEventListener('touchmove',function(e) {
var parent = e.target;
var scroll = false;
var rotate = 90;
if(ptr_scrollable_parent == false) {
e.preventDefault();
return false;
}
for(var i = 0; i < ptr_scrollable_parent; i++) {
parent = parent.parentNode;
}
if((ptr_scrollable_parent != false)&&(parent.hasAttribute('data-url') != false)) {
scroll = true;
var ptr_element = parent;
var ptr_wrapelement = ptr_element.getElementsByClassName('wrap')[0];
var top = ptr_element.scrollTop;
var ptr = ptr_element.getElementsByClassName('ptr_box')[0];
if((ptr_wrapelement.className.indexOf(' active') === -1)&&(!ptr_wrapelement.getElementsByClassName('ptr_image')[0].className.match('loading'))) {
if(ptr_element.scrollTop < -25) {
rotate = (top < -40) ? -90 : 130 + (top*12+270);
}
if(ptr_element.scrollTop < 0) {
ptr.style.opacity = 1.0;
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['-webkit-transform'] = "scale(1) rotate("+rotate+"deg)";
if((ptr_element.scrollTop < -30)&&(ptr_element.scrollTop > -45)) {
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['width'] = "40px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['margin-left'] = "10px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['margin-right'] = "10px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['background-size'] = "50% 100%";
} else if(ptr_element.scrollTop >= -30) {
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['width'] = "30px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['margin-left'] = "15px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['margin-right'] = "15px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['background-size'] = "100% 100%";
} else {
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['width'] = "60px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['margin-left'] = "0px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['margin-right'] = "0px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['background-size'] = "34% 100%";
}
}
if(ptr_element.scrollTop < -51) {
if(ptr_wrapelement.className.indexOf(' active') === -1) {
ptr_wrapelement.className += ' active';
ptr_wrapelement.getElementsByClassName('ptr_text')[0].innerHTML = 'Loading ...';
ptr_wrapelement.getElementsByClassName('ptr_image')[0].className += ' loading';
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['width'] = "30px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['margin-left'] = "15px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['margin-right'] = "15px";
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['background-size'] = "100% 100%";
var ptr_element = parent;
var ptr_wrapelement = ptr_element.getElementsByClassName('wrap')[0];
var ptr_eleId = parent.id;
var time = new Date();
reqwest({
url: parent.getAttribute('data-url')+'?rt='+time.getTime()
, type: 'html'
, method: 'post'
, data: { usertime: time.getTime() }
, error: function () {
alert('Could not connect');
ptr_wrapelement.style.top = '0px';
ptr.getElementsByClassName('ptr_image')[0].className = ptr.getElementsByClassName('ptr_image')[0].className.replace(' loading', '');
ptr_wrapelement.className = ptr_wrapelement.className.replace(' active', '');
hideLoading(ptr_eleId);
}
, success: function (resp) {
var ptrbox = document.getElementById(ptr_eleId).getElementsByClassName('ptr_box')[0];
var insert = document.createElement('div');
insert.innerHTML = resp;
insert.className = 'inserted';
ptr_wrapelement.insertBefore(insert, ptrbox.nextSibling);
ptr_wrapelement.style.top = '0px';
ptr.getElementsByClassName('ptr_image')[0].className = ptr.getElementsByClassName('ptr_image')[0].className.replace(' loading', '');
ptr_wrapelement.className = ptr_wrapelement.className.replace(' active', '');
var inserted = document.getElementsByClassName('inserted')[0];
ptr_element.scrollTop = inserted.clientHeight-51;
ptr_wrapelement.getElementsByClassName('ptr_text')[0].innerHTML = '';
ptr.style.opacity = 0.0;
ptr_wrapelement.getElementsByClassName('ptr_image')[0].className = ptr_wrapelement.getElementsByClassName('ptr_image')[0].className.replace(' loading', '');
ptr_wrapelement.style.top = '0px';
ptr_scrollable_parent = false;
}
})
}
} else if(ptr_element.scrollTop != 0) {
ptr_wrapelement.className = ptr_wrapelement.className.replace(' active', '');
ptr_wrapelement.getElementsByClassName('ptr_text')[0].innerHTML = 'Pull to refresh';
}
}
} else if((ptr_scrollable_parent != false)) {
scroll = true;
}
if(scroll == false) {
e.preventDefault();
}
});
document.addEventListener('touchend',function(e) {
var parent = e.target;
var scroll = false;
for(var i = 0; i < ptr_scrollable_parent; i++) {
parent = parent.parentNode;
}
if((parent.hasAttribute('data-url') != false)&&(ptr_scrollable_parent != false)) {
if((parent.hasAttribute('data-url') != false)) {
var ptr_element = parent;
var ptr_wrapelement = ptr_element.getElementsByClassName('wrap')[0];
var ptr_eleId = parent.id;
var top = ptr_element.scrollTop;
var ptr = ptr_element.getElementsByClassName('ptr_box')[0];
if(ptr_wrapelement.getElementsByClassName('ptr_image')[0].className.match('loading')) {
ptr_wrapelement.className = ptr_wrapelement.className.replace(' active', '');
ptr_wrapelement.style.top = '51px';
}
}
}
ptr_scrollable_parent = false;
});
}
window.onload = function() {
ptr_init();
}

3
lib/js/push.js

@ -25,8 +25,7 @@
var bars = {
bartab : '.bar-tab',
bartitle : '.bar-title',
barfooter : '.bar-footer',
barheadersecondary : '.bar-header-secondary'
barfooter : '.bar-footer'
}
var cacheReplace = function (data, updates) {

1
submodules/pulltorefresh

@ -0,0 +1 @@
Subproject commit a4a3875eb07f02cf4266ccb09f74263d2755ec02

61
test/app/checkout.html

@ -24,7 +24,36 @@
</a>
<h1 class="title">Buy tickets</h1>
</header>
<div class="content scrollable" id="list">
<div class="wrap">
<div class="">
<div class="checkout-form content-padded">
<form>
<div class="input-group">
<div class="input-row">
<input type="text" placeholder="Fullname">
</div>
<div class="input-row">
<input type="email" placeholder="Email">
</div>
</div>
<div class="input-group">
<div class="input-row">
<input type="text" placeholder="Name on card">
</div>
<div class="input-row">
<input type="text" placeholder="Credit card number">
</div>
<div class="input-row">
<input type="text" placeholder="Security code">
</div>
</div>
<a class="button-positive button-block">Checkout</a>
</form>
</div>
</div>
</div>
</div>
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
@ -47,35 +76,5 @@
</li>
</ul>
</nav>
<div class="content">
<div class="checkout-form content-padded">
<form>
<div class="input-group">
<div class="input-row">
<input type="text" placeholder="Fullname">
</div>
<div class="input-row">
<input type="email" placeholder="Email">
</div>
</div>
<div class="input-group">
<div class="input-row">
<input type="text" placeholder="Name on card">
</div>
<div class="input-row">
<input type="text" placeholder="Credit card number">
</div>
<div class="input-row">
<input type="text" placeholder="Security code">
</div>
</div>
<a class="button-positive button-block">Checkout</a>
</form>
</div>
</div>
</body>
</html>

151
test/app/choose-movie.html

@ -17,19 +17,87 @@
</head>
<body>
<header class="bar-title">
<a class="button-prev" href="theaters.html" data-transition="slide-out">
Back
</a>
<h1 class="title">Choose a movie</h1>
</header>
<nav class="bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search for movies">
</form>
</nav>
<div class="content scrollable" id="list">
<div class="wrap">
<nav class="bar-standard bar-header-secondary bar-scrolling">
<form>
<input type="search" placeholder="Search for movies">
</form>
</nav>
<div class="">
<ul class="list">
<li class="list-divider">Recommended movies</li>
<li>
<strong>Argo</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Skyfall: 007</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Wreck-it Ralph</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="list-divider">Top movies</li>
<li>
<strong>Movie 4</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Movie 5</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Movie 6</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Movie 7</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Movie 8</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Movie 9</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Movie 10</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Movie 11</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Movie 12</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
</ul>
</div>
</div>
</div>
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item">
@ -52,74 +120,5 @@
</li>
</ul>
</nav>
<div class="content">
<ul class="list">
<li class="list-divider">Recommended movies</li>
<li>
<strong>Argo</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Skyfall: 007</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Wreck-it Ralph</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="list-divider">Top movies</li>
<li>
<strong>Movie 4</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Movie 5</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Movie 6</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Movie 7</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Movie 8</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Movie 9</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Movie 10</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Movie 11</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Movie 12</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
</ul>
</div>
</body>
</html>

119
test/app/choose-theater.html

@ -18,14 +18,71 @@
</head>
<body>
<header class="bar-title">
<a class="button-prev" href="index.html" data-transition="slide-out">
Back
</a>
<h1 class="title">Argo</h1>
</header>
<div class="content scrollable" id="list">
<div class="wrap">
<div class="">
<ul class="list">
<li class="list-divider">Theaters nearby</li>
<li>
<strong>Metreon 16</strong>
<p>1.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>AMC 5</strong>
<p>3.5 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Regal 42</strong>
<p>7.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Shorline theater</strong>
<p>12.5 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>AMC 16</strong>
<p>12.2 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>BW3 16</strong>
<p>13.4 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>MC Hammer 16</strong>
<p>14.1 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>AMC 3</strong>
<p>14.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>AMC 2</strong>
<p>14.7 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>AMC 10</strong>
<p>15 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
</ul>
</div>
</div>
</div>
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
@ -48,63 +105,5 @@
</li>
</ul>
</nav>
<div class="content">
<ul class="list">
<li class="list-divider">Theaters nearby</li>
<li>
<strong>Metreon 16</strong>
<p>1.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>AMC 5</strong>
<p>3.5 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Regal 42</strong>
<p>7.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>Shorline theater</strong>
<p>12.5 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>AMC 16</strong>
<p>12.2 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>BW3 16</strong>
<p>13.4 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>MC Hammer 16</strong>
<p>14.1 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>AMC 3</strong>
<p>14.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>AMC 2</strong>
<p>14.7 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<strong>AMC 10</strong>
<p>15 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
</ul>
</div>
</body>
</html>

4
test/app/css/app.css

@ -9,4 +9,8 @@
.form-wrapper {
padding: 10px;
}
.scrollable {
bottom: 50px;
}

224
test/app/index.html

@ -17,16 +17,119 @@
</head>
<body>
<header class="bar-title">
<h1 class="title">Movie finder</h1>
</header>
<nav class="bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search">
</form>
</nav>
<div class="content scrollable" id="list">
<div class="wrap">
<nav class="bar-standard bar-header-secondary bar-scrolling">
<form>
<input type="search" placeholder="Search">
</form>
</nav>
<div class="slider">
<ul>
<li>
<img src="img/argo.png">
</li>
<li>
<img src="img/skyfall.png">
</li>
<li>
<img src="img/ralph.png">
</li>
</ul>
</div>
<ul class="list">
<li class="list-divider">Recommended movies</li>
<li>
<a href="choose-theater.html">
<strong>Argo</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Skyfall: 007</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Wreck-it Ralph</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="list-divider">Top movies</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 4</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 5</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 6</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 7</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 8</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 9</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 10</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 11</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 12</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
</ul>
</div>
</div>
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
@ -49,112 +152,5 @@
</li>
</ul>
</nav>
<div class="content">
<div class="slider">
<ul>
<li>
<img src="img/argo.png">
</li>
<li>
<img src="img/skyfall.png">
</li>
<li>
<img src="img/ralph.png">
</li>
</ul>
</div>
<ul class="list">
<li class="list-divider">Recommended movies</li>
<li>
<a href="choose-theater.html">
<strong>Argo</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Skyfall: 007</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Wreck-it Ralph</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="list-divider">Top movies</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 4</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 5</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 6</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 7</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 8</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 9</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 10</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 11</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 12</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
</ul>
</div>
</body>
</html>

51
test/app/settings.html

@ -18,11 +18,34 @@
</head>
<body>
<header class="bar-title">
<h1 class="title">Settings</h1>
</header>
<div class="content" id="list">
<div class="wrap">
<div class="">
<div class="form-wrapper">
<form>
<div class="input-group">
<div class="input-row">
<label>Full name</label>
<input type="text" placeholder="Mister Ratchet">
</div>
<div class="input-row">
<label>Email</label>
<input type="email" placeholder="ratchetframework@gmail.com">
</div>
<div class="input-row">
<label>Username</label>
<input type="text" placeholder="goRatchet">
</div>
</div>
<a class="button-block">Save changes</a>
</form>
</div>
</div>
</div>
</div>
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item">
@ -45,29 +68,5 @@
</li>
</ul>
</nav>
<div class="content">
<div class="form-wrapper">
<form>
<div class="input-group">
<div class="input-row">
<label>Full name</label>
<input type="text" placeholder="Mister Ratchet">
</div>
<div class="input-row">
<label>Email</label>
<input type="email" placeholder="ratchetframework@gmail.com">
</div>
<div class="input-row">
<label>Username</label>
<input type="text" placeholder="goRatchet">
</div>
</div>
<a class="button-block">Save changes</a>
</form>
</div>
</div>
</body>
</html>

169
test/app/theaters.html

@ -17,16 +17,93 @@
</head>
<body>
<header class="bar-title">
<h1 class="title">Find a theater</h1>
</header>
<nav class="bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search">
</form>
</nav>
<div class="content scrollable" id="list">
<div class="wrap">
<nav class="bar-standard bar-header-secondary bar-scrolling">
<form>
<input type="search" placeholder="Search">
</form>
</nav>
<div class="">
<ul class="list">
<li class="list-divider">Theaters nearby</li>
<li>
<a href="choose-movie.html" data-transition="slide-in">
<strong>Metreon 16</strong>
<p>1.3 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 5</strong>
<p>3.5 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-movie.html" data-transition="slide-in">
<strong>Regal 42</strong>
<p>7.3 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-movie.html" data-transition="slide-in">
<strong>Shorline theater</strong>
<p>12.5 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 16</strong>
<p>12.2 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-movie.html" data-transition="slide-in">
<strong>BW3 16</strong>
<p>13.4 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-movie.html" data-transition="slide-in">
<strong>MC Hammer 16</strong>
<p>14.1 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 3</strong>
<p>14.3 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 2</strong>
<p>14.7 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 10</strong>
<p>15 miles away</p>
<span class="chevron"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item">
@ -49,83 +126,5 @@
</li>
</ul>
</nav>
<div class="content">
<ul class="list">
<li class="list-divider">Theaters nearby</li>
<li>
<a href="choose-movie.html" data-transition="slide-in">
<strong>Metreon 16</strong>
<p>1.3 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 5</strong>
<p>3.5 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-movie.html" data-transition="slide-in">
<strong>Regal 42</strong>
<p>7.3 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-movie.html" data-transition="slide-in">
<strong>Shorline theater</strong>
<p>12.5 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 16</strong>
<p>12.2 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-movie.html" data-transition="slide-in">
<strong>BW3 16</strong>
<p>13.4 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-movie.html" data-transition="slide-in">
<strong>MC Hammer 16</strong>
<p>14.1 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 3</strong>
<p>14.3 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 2</strong>
<p>14.7 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 10</strong>
<p>15 miles away</p>
<span class="chevron"></span>
</a>
</li>
</ul>
</div>
</body>
</html>
Loading…
Cancel
Save