compass-ratchet 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.md +67 -0
- data/lib/compass-ratchet.rb +3 -0
- data/stylesheets/_compass-ratchet.scss +14 -0
- data/stylesheets/compass-ratchet/_bars.scss +330 -0
- data/stylesheets/compass-ratchet/_base.scss +155 -0
- data/stylesheets/compass-ratchet/_buttons.scss +124 -0
- data/stylesheets/compass-ratchet/_chevrons.scss +32 -0
- data/stylesheets/compass-ratchet/_counts.scss +42 -0
- data/stylesheets/compass-ratchet/_forms.scss +126 -0
- data/stylesheets/compass-ratchet/_lists.scss +122 -0
- data/stylesheets/compass-ratchet/_popovers.scss +158 -0
- data/stylesheets/compass-ratchet/_push.scss +30 -0
- data/stylesheets/compass-ratchet/_segmented-controllers.scss +67 -0
- data/stylesheets/compass-ratchet/_shared.scss +8 -0
- data/stylesheets/compass-ratchet/_sliders.scss +40 -0
- data/stylesheets/compass-ratchet/_toggles.scss +71 -0
- data/templates/project/checkout.html +81 -0
- data/templates/project/choose-movie.html +125 -0
- data/templates/project/choose-theater.html +110 -0
- data/templates/project/config.rb +8 -0
- data/templates/project/css/app.css +1 -0
- data/templates/project/img/argo.png +0 -0
- data/templates/project/img/ralph.png +0 -0
- data/templates/project/img/skyfall.png +0 -0
- data/templates/project/index.html +160 -0
- data/templates/project/js/popovers.js +63 -0
- data/templates/project/js/push.js +417 -0
- data/templates/project/js/segmented-controllers.js +47 -0
- data/templates/project/js/sliders.js +114 -0
- data/templates/project/js/toggles.js +94 -0
- data/templates/project/manifest.rb +24 -0
- data/templates/project/sass/app.scss +13 -0
- data/templates/project/settings.html +73 -0
- data/templates/project/theaters.html +131 -0
- metadata +111 -0
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Movie finder</title>
|
|
6
|
+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
7
|
+
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
8
|
+
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
9
|
+
|
|
10
|
+
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
|
|
11
|
+
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
|
|
12
|
+
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
|
|
13
|
+
|
|
14
|
+
<link rel="stylesheet" href="../../dist/ratchet.css">
|
|
15
|
+
<link rel="stylesheet" href="css/app.css">
|
|
16
|
+
<script src="../../dist/ratchet.js"></script>
|
|
17
|
+
|
|
18
|
+
</head>
|
|
19
|
+
<body>
|
|
20
|
+
|
|
21
|
+
<header class="bar-title">
|
|
22
|
+
<a class="button-prev" href="theaters.html" data-transition="slide-out">
|
|
23
|
+
Back
|
|
24
|
+
</a>
|
|
25
|
+
<h1 class="title">Choose a movie</h1>
|
|
26
|
+
</header>
|
|
27
|
+
<nav class="bar-standard bar-header-secondary">
|
|
28
|
+
<form>
|
|
29
|
+
<input type="search" placeholder="Search for movies">
|
|
30
|
+
</form>
|
|
31
|
+
</nav>
|
|
32
|
+
|
|
33
|
+
<nav class="bar-tab">
|
|
34
|
+
<ul class="tab-inner">
|
|
35
|
+
<li class="tab-item">
|
|
36
|
+
<a href="index.html" data-transition="fade">
|
|
37
|
+
<img class="tab-icon" src="../../docs/img/icon-hamburger.png">
|
|
38
|
+
<div class="tab-label">Movies</div>
|
|
39
|
+
</a>
|
|
40
|
+
</li>
|
|
41
|
+
<li class="tab-item active">
|
|
42
|
+
<a href="theaters.html" data-transition="fade">
|
|
43
|
+
<img class="tab-icon" src="../../docs/img/icon-hamburger.png">
|
|
44
|
+
<div class="tab-label">Theaters</div>
|
|
45
|
+
</a>
|
|
46
|
+
</li>
|
|
47
|
+
<li class="tab-item">
|
|
48
|
+
<a href="settings.html" data-transition="fade">
|
|
49
|
+
<img class="tab-icon" src="../../docs/img/icon-hamburger.png">
|
|
50
|
+
<div class="tab-label">Settings</div>
|
|
51
|
+
</a>
|
|
52
|
+
</li>
|
|
53
|
+
</ul>
|
|
54
|
+
</nav>
|
|
55
|
+
|
|
56
|
+
<div class="content">
|
|
57
|
+
|
|
58
|
+
<ul class="list">
|
|
59
|
+
<li class="list-divider">Recommended movies</li>
|
|
60
|
+
<li>
|
|
61
|
+
<strong>Argo</strong>
|
|
62
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
63
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
64
|
+
</li>
|
|
65
|
+
<li>
|
|
66
|
+
<strong>Skyfall: 007</strong>
|
|
67
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
68
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
69
|
+
</li>
|
|
70
|
+
<li>
|
|
71
|
+
<strong>Wreck-it Ralph</strong>
|
|
72
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
73
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
74
|
+
</li>
|
|
75
|
+
<li class="list-divider">Top movies</li>
|
|
76
|
+
<li>
|
|
77
|
+
<strong>Movie 4</strong>
|
|
78
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
79
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
80
|
+
</li>
|
|
81
|
+
<li>
|
|
82
|
+
<strong>Movie 5</strong>
|
|
83
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
84
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
85
|
+
</li>
|
|
86
|
+
<li>
|
|
87
|
+
<strong>Movie 6</strong>
|
|
88
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
89
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
90
|
+
</li>
|
|
91
|
+
<li>
|
|
92
|
+
<strong>Movie 7</strong>
|
|
93
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
94
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
95
|
+
</li>
|
|
96
|
+
<li>
|
|
97
|
+
<strong>Movie 8</strong>
|
|
98
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
99
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
100
|
+
</li>
|
|
101
|
+
<li>
|
|
102
|
+
<strong>Movie 9</strong>
|
|
103
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
104
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
105
|
+
</li>
|
|
106
|
+
<li>
|
|
107
|
+
<strong>Movie 10</strong>
|
|
108
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
109
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
110
|
+
</li>
|
|
111
|
+
<li>
|
|
112
|
+
<strong>Movie 11</strong>
|
|
113
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
114
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
115
|
+
</li>
|
|
116
|
+
<li>
|
|
117
|
+
<strong>Movie 12</strong>
|
|
118
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
119
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
120
|
+
</li>
|
|
121
|
+
</ul>
|
|
122
|
+
|
|
123
|
+
</div>
|
|
124
|
+
</body>
|
|
125
|
+
</html>
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Movie finder</title>
|
|
6
|
+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
7
|
+
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
8
|
+
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
9
|
+
|
|
10
|
+
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
|
|
11
|
+
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
|
|
12
|
+
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
|
|
13
|
+
|
|
14
|
+
<link rel="stylesheet" href="../../dist/ratchet.css">
|
|
15
|
+
<link rel="stylesheet" href="css/app.css">
|
|
16
|
+
<script src="../../dist/ratchet.js"></script>
|
|
17
|
+
<script src="../../dos/js/fingerblast.js"></script>
|
|
18
|
+
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
|
|
22
|
+
<header class="bar-title">
|
|
23
|
+
<a class="button-prev" href="index.html" data-transition="slide-out">
|
|
24
|
+
Back
|
|
25
|
+
</a>
|
|
26
|
+
<h1 class="title">Argo</h1>
|
|
27
|
+
</header>
|
|
28
|
+
|
|
29
|
+
<nav class="bar-tab">
|
|
30
|
+
<ul class="tab-inner">
|
|
31
|
+
<li class="tab-item active">
|
|
32
|
+
<a href="index.html" data-transition="fade">
|
|
33
|
+
<img class="tab-icon" src="../../docs/img/icon-hamburger.png">
|
|
34
|
+
<div class="tab-label">Movies</div>
|
|
35
|
+
</a>
|
|
36
|
+
</li>
|
|
37
|
+
<li class="tab-item">
|
|
38
|
+
<a href="theaters.html" data-transition="fade">
|
|
39
|
+
<img class="tab-icon" src="../../docs/img/icon-hamburger.png">
|
|
40
|
+
<div class="tab-label">Theaters</div>
|
|
41
|
+
</a>
|
|
42
|
+
</li>
|
|
43
|
+
<li class="tab-item">
|
|
44
|
+
<a href="settings.html" data-transition="fade">
|
|
45
|
+
<img class="tab-icon" src="../../docs/img/icon-hamburger.png">
|
|
46
|
+
<div class="tab-label">Settings</div>
|
|
47
|
+
</a>
|
|
48
|
+
</li>
|
|
49
|
+
</ul>
|
|
50
|
+
</nav>
|
|
51
|
+
|
|
52
|
+
<div class="content">
|
|
53
|
+
|
|
54
|
+
<ul class="list">
|
|
55
|
+
<li class="list-divider">Theaters nearby</li>
|
|
56
|
+
<li>
|
|
57
|
+
<strong>Metreon 16</strong>
|
|
58
|
+
<p>1.3 miles away</p>
|
|
59
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
60
|
+
</li>
|
|
61
|
+
<li>
|
|
62
|
+
<strong>AMC 5</strong>
|
|
63
|
+
<p>3.5 miles away</p>
|
|
64
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
65
|
+
</li>
|
|
66
|
+
<li>
|
|
67
|
+
<strong>Regal 42</strong>
|
|
68
|
+
<p>7.3 miles away</p>
|
|
69
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
70
|
+
</li>
|
|
71
|
+
<li>
|
|
72
|
+
<strong>Shorline theater</strong>
|
|
73
|
+
<p>12.5 miles away</p>
|
|
74
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
75
|
+
</li>
|
|
76
|
+
<li>
|
|
77
|
+
<strong>AMC 16</strong>
|
|
78
|
+
<p>12.2 miles away</p>
|
|
79
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
80
|
+
</li>
|
|
81
|
+
<li>
|
|
82
|
+
<strong>BW3 16</strong>
|
|
83
|
+
<p>13.4 miles away</p>
|
|
84
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
85
|
+
</li>
|
|
86
|
+
<li>
|
|
87
|
+
<strong>MC Hammer 16</strong>
|
|
88
|
+
<p>14.1 miles away</p>
|
|
89
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
90
|
+
</li>
|
|
91
|
+
<li>
|
|
92
|
+
<strong>AMC 3</strong>
|
|
93
|
+
<p>14.3 miles away</p>
|
|
94
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
95
|
+
</li>
|
|
96
|
+
<li>
|
|
97
|
+
<strong>AMC 2</strong>
|
|
98
|
+
<p>14.7 miles away</p>
|
|
99
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
100
|
+
</li>
|
|
101
|
+
<li>
|
|
102
|
+
<strong>AMC 10</strong>
|
|
103
|
+
<p>15 miles away</p>
|
|
104
|
+
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
|
|
105
|
+
</li>
|
|
106
|
+
</ul>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
</body>
|
|
110
|
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
[class*="bar-"]{position:fixed;right:0;left:0;z-index:10;height:44px;padding:5px;-webkit-box-sizing:border-box;box-sizing:border-box}.bar-header-secondary{top:45px}.bar-footer{bottom:0}.bar-standard{background-color:#f2f2f2;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f2f2f2), color-stop(100%, #e5e5e5));background:-webkit-linear-gradient(top, #f2f2f2,#e5e5e5);background:linear-gradient(top, #f2f2f2,#e5e5e5);border-bottom:1px solid #aaa;-webkit-box-shadow:inset 0 1px 1px -1px #fff;box-shadow:inset 0 1px 1px -1px #fff}.bar-footer.bar-standard,.bar-footer-secondary.bar-standard{border-top:1px solid #aaa;border-bottom-width:0}.bar-title{top:0;display:-webkit-box;display:box;background-color:#1eb0e9;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1eb0e9), color-stop(100%, #109adc));background:-webkit-linear-gradient(top, #1eb0e9,#109adc);background:linear-gradient(top, #1eb0e9,#109adc);border-bottom:1px solid #0e5895;-webkit-box-shadow:inset 0 1px 1px -1px rgba(255,255,255,0.8);box-shadow:inset 0 1px 1px -1px rgba(255,255,255,0.8);-webkit-box-orient:horizontal;box-orient:horizontal}.bar-title .title{position:absolute;top:0;left:0;display:block;width:100%;font-size:20px;font-weight:bold;line-height:44px;color:#fff;text-align:center;text-shadow:0 -1px rgba(0,0,0,0.5);white-space:nowrap}.bar-title>a:not([class*="button"]){display:block;width:100%;height:100%}.bar-title .title a{color:inherit}.bar-tab{bottom:0;height:50px;padding:0;background-color:#393939;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #393939), color-stop(100%, #2b2b2b));background:-webkit-linear-gradient(top, #393939,#2b2b2b);background:linear-gradient(top, #393939,#2b2b2b);border-top:1px solid #000;border-bottom-width:0;-webkit-box-shadow:inset 0 1px 1px -1px rgba(255,255,255,0.6);box-shadow:inset 0 1px 1px -1px rgba(255,255,255,0.6)}.tab-inner{display:-webkit-box;display:box;height:100%;list-style:none;-webkit-box-orient:horizontal;box-orient:horizontal}.tab-item{height:100%;padding-top:9px;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;box-flex:1}.tab-item.active{-webkit-box-shadow:inset 0 0 20px rgba(0,0,0,0.5);box-shadow:inset 0 0 20px rgba(0,0,0,0.5)}.tab-icon{display:block;height:18px;margin:0 auto}.tab-label{margin-top:1px;font-size:10px;font-weight:bold;color:#fff;text-shadow:0 1px rgba(0,0,0,0.3)}.bar-title [class*="button"]{position:relative;z-index:10;font-size:12px;line-height:23px;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.3);background-color:#1eb0e9;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1eb0e9), color-stop(100%, #0984c6));background:-webkit-linear-gradient(top, #1eb0e9,#0984c6);background:linear-gradient(top, #1eb0e9,#0984c6);border:1px solid #0e5895;-webkit-box-shadow:0 1px rgba(255,255,255,0.25);box-shadow:0 1px rgba(255,255,255,0.25);-webkit-box-flex:0;box-flex:0}.bar-title .title+[class*="button"]:last-child,.bar-title .button+[class*="button"]:last-child,.bar-title [class*="button"].pull-right{position:absolute;top:5px;right:5px}.bar-title .button:active{color:#fff;background-color:#0876b1}.bar-title .button-prev,.bar-title .button-next{position:relative}.bar-title .button-prev{margin-left:7px;border-left:0;border-bottom-left-radius:10px 15px;border-top-left-radius:10px 15px}.bar-title .button-next{margin-right:7px;border-right:0;border-top-right-radius:10px 15px;border-bottom-right-radius:10px 15px}.bar-title .button-prev:before,.bar-title .button-next:before{position:absolute;top:2px;width:27px;height:27px;-webkit-border-radius:30px 2px;border-radius:30px 100px 2px 40px / 2px 40px 30px 100px;content:'';-webkit-box-shadow:inset 1px 0 #0e5895,inset 0 1px #0e5895;box-shadow:inset 1px 0 #0e5895,inset 0 1px #0e5895;-webkit-mask-image:-webkit-gradient(linear, left top, right bottom, from(#000), color-stop(0.33, #000), color-stop(0.5, transparent), to(transparent));mask-image:gradient(linear, left top, right bottom, from(#000), color-stop(0.33, #000), color-stop(0.5, transparent), to(transparent))}.bar-title .button-prev:before{left:-5px;background:-webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, #0984c6), color-stop(100%, #1eb0e9));background:-webkit-linear-gradient(left bottom, #0984c6,#1eb0e9);background:linear-gradient(left bottom, #0984c6,#1eb0e9);border-left:1.5px solid rgba(255,255,255,0.25);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform:skew(-10deg, -10deg);transform:skew(-10deg, -10deg)}.bar-title .button-next:before{right:-5px;background:-webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, #1eb0e9), color-stop(100%, #0984c6));background:-webkit-linear-gradient(left bottom, #1eb0e9,#0984c6);background:linear-gradient(left bottom, #1eb0e9,#0984c6);border-top:1.5px solid rgba(255,255,255,0.25);-webkit-transform:rotate(135deg);transform:rotate(135deg);-webkit-transform:skew(-10deg, -10deg);transform:skew(-10deg, -10deg)}.bar-title .button-prev:active,.bar-title .button-next:active,.bar-title .button-prev:active:before,.bar-title .button-next:active:before{color:#fff;background-color:#0876b1;background-image:none}.bar-title .button-prev:active:before,.bar-title .button-next:active:before{content:''}.bar-title .button-prev:active:before{-webkit-box-shadow:inset 0 3px 3px rgba(0,0,0,0.2);box-shadow:inset 0 3px 3px rgba(0,0,0,0.2)}.bar-title .button-next:active:before{-webkit-box-shadow:inset 0 -3px 3px rgba(0,0,0,0.2);box-shadow:inset 0 -3px 3px rgba(0,0,0,0.2)}[class*="bar"] .button-block{padding:7px 0;margin-bottom:0;-webkit-box-shadow:inset 0 1px 1px rgba(255,255,255,0.4),0 1px rgba(255,255,255,0.8);box-shadow:inset 0 1px 1px rgba(255,255,255,0.4),0 1px rgba(255,255,255,0.8)}[class*="bar"] .button-block:active{padding:7px 0}[class*="bar-"] .segmented-controller{margin-bottom:0}[class*="bar-"] .segmented-controller+[class*="button"],[class*="bar-"] [class*="button"]+.segmented-controller{margin-left:5px}.bar-title .segmented-controller{line-height:18px;text-shadow:0 -1px 0 rgba(0,0,0,0.3);background-color:#1eb0e9;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1eb0e9), color-stop(100%, #0984c6));background:-webkit-linear-gradient(top, #1eb0e9,#0984c6);background:linear-gradient(top, #1eb0e9,#0984c6);border:1px solid #0e5895;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px rgba(255,255,255,0.25);box-shadow:0 1px rgba(255,255,255,0.25);-webkit-box-flex:1;box-flex:1}.bar-title .segmented-controller li{border-left:1px solid #0e5895;-webkit-box-shadow:inset 1px 0 rgba(255,255,255,0.25);box-shadow:inset 1px 0 rgba(255,255,255,0.25)}.bar-title .segmented-controller .active+li,.bar-title .segmented-controller li:first-child{-webkit-box-shadow:none;box-shadow:none}.bar-title .segmented-controller li:first-child{border-left-width:0}.bar-title .segmented-controller li.active{background-color:#0082c4;-webkit-box-shadow:inset 0 1px 6px rgba(0,0,0,0.3);box-shadow:inset 0 1px 6px rgba(0,0,0,0.3)}.bar-title .segmented-controller li>a{color:#fff}.bar-standard input[type=search]{height:32px;margin:0}html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,section,summary,time,audio,video{padding:0;margin:0;border:0}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{position:fixed;top:0;right:0;bottom:0;left:0;font:14px/1.25 "Helvetica Neue",sans-serif;color:#222;background-color:#fff}a{color:#0882f0;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.content{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;background:#fff;-webkit-transition-property:top;transition-property:top;-webkit-transition-property:bottom;transition-property:bottom;-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-overflow-scrolling:touch}.content>*{-webkit-transform:translateZ(0px);transform:translateZ(0px)}.content-padded{padding:10px}.bar-title ~ .content{top:44px}.bar-tab ~ .content{bottom:51px}.bar-header-secondary ~ .content{top:88px}[class*="button"]{position:relative;display:inline-block;padding:4px 12px;margin:0;font-weight:bold;line-height:18px;color:#333;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,0.5);vertical-align:top;cursor:pointer;background-color:#f8f8f8;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #d4d4d4));background:-webkit-linear-gradient(top, #f8f8f8,#d4d4d4);background:linear-gradient(top, #f8f8f8,#d4d4d4);border:1px solid rgba(0,0,0,0.3);-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 1px rgba(255,255,255,0.4),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 1px 1px rgba(255,255,255,0.4),0 1px 2px rgba(0,0,0,0.05)}[class*="button"]:active{padding-top:5px;padding-bottom:3px;color:#333;background-color:#ccc;background-image:none;-webkit-box-shadow:inset 0 3px 3px rgba(0,0,0,0.2);box-shadow:inset 0 3px 3px rgba(0,0,0,0.2)}.button-main,.button-positive,.button-negative{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.3)}.button-main{background-color:#1eafe7;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1eafe7), color-stop(100%, #1a97c8));background:-webkit-linear-gradient(top, #1eafe7,#1a97c8);background:linear-gradient(top, #1eafe7,#1a97c8);border:1px solid #117aaa}.button-positive{background-color:#34ba15;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #34ba15), color-stop(100%, #2da012));background:-webkit-linear-gradient(top, #34ba15,#2da012);background:linear-gradient(top, #34ba15,#2da012);border:1px solid #278f0f}.button-negative{background-color:#e71e1e;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e71e1e), color-stop(100%, #c71a1a));background:-webkit-linear-gradient(top, #e71e1e,#c71a1a);background:linear-gradient(top, #e71e1e,#c71a1a);border:1px solid #b51a1a}.button-main:active,.button-positive:active,.button-negative:active{color:#fff}.button-main:active{background-color:#0876b1}.button-positive:active{background-color:#298f11}.button-negative:active{background-color:#b21a1a}.button-block{display:block;padding:11px 0 13px;margin-bottom:10px;font-size:16px}.button-block:active{padding:12px 0}[class*="button"] [class*="count"]{padding-top:2px;padding-bottom:2px;margin-right:-4px;margin-left:4px;text-shadow:none;background-color:rgba(0,0,0,0.2);-webkit-box-shadow:inset 0 1px 1px -1px #000,0 1px 1px -1px #fff;box-shadow:inset 0 1px 1px -1px #000,0 1px 1px -1px #fff}.button-block [class*="count"]{position:absolute;right:0;padding-top:4px;padding-bottom:4px;margin-right:10px}.chevron{display:block;height:20px}.chevron:before,.chevron:after{position:relative;display:block;width:12px;height:4px;background-color:#999;content:''}.chevron:before{top:5px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.chevron:after{top:7px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}[class*="count"]{display:inline-block;padding:4px 9px;font-size:12px;font-weight:bold;line-height:13px;color:#fff;background-color:rgba(0,0,0,0.3);-webkit-border-radius:100px;border-radius:100px}.count-main,.count-positive,.count-negative{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.3)}.count-main{background-color:#1eafe7;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1eafe7), color-stop(100%, #1a97c8));background:-webkit-linear-gradient(top, #1eafe7,#1a97c8);background:linear-gradient(top, #1eafe7,#1a97c8)}.count-positive{background-color:#34ba15;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #34ba15), color-stop(100%, #2da012));background:-webkit-linear-gradient(top, #34ba15,#2da012);background:linear-gradient(top, #34ba15,#2da012)}.count-negative{background-color:#e71e1e;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e71e1e), color-stop(100%, #c71a1a));background:-webkit-linear-gradient(top, #e71e1e,#c71a1a);background:linear-gradient(top, #e71e1e,#c71a1a)}input,textarea,button,select{font-family:inherit;font-size:inherit}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{width:100%;height:40px;padding:10px;margin-bottom:10px;background:#fff;border:1px solid rgba(0,0,0,0.2);-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(255,255,255,0.2),inset 0 1px 1px rgba(0,0,0,0.1);box-shadow:0 1px 1px rgba(255,255,255,0.2),inset 0 1px 1px rgba(0,0,0,0.1);-webkit-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box}input[type=search]{height:34px;font-size:14px;-webkit-border-radius:30px;border-radius:30px}textarea{height:auto}select{height:auto;font-size:14px;background-color:#f8f8f8;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #d4d4d4));background:-webkit-linear-gradient(top, #f8f8f8,#d4d4d4);background:linear-gradient(top, #f8f8f8,#d4d4d4);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px 1px rgba(0,0,0,0.1)}.input-group{width:auto;height:auto;padding:0}.input-group input{margin-bottom:0;background-color:transparent;border:0;border-bottom:1px solid rgba(0,0,0,0.2);-webkit-border-radius:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none}.input-group input:last-child{border-bottom-width:0}.input-row{overflow:hidden;border-bottom:1px solid rgba(0,0,0,0.2)}.input-row:last-child{border-bottom-width:0}.input-row label{float:left;width:25%;padding:11px 10px 9px 13px;font-weight:bold}.input-row label+input{float:right;width:65%;padding-left:0;margin-bottom:0;border-bottom:0}.list{margin-bottom:10px;list-style:none;background-color:#fff}.list li{position:relative;padding:20px 60px 20px 10px;border-bottom:1px solid rgba(0,0,0,0.1)}.list li:first-child{border-top:1px solid rgba(0,0,0,0.1)}.list li>a:not([class*="button"]){position:relative;display:block;padding:inherit;margin:-20px -60px -20px -10px;color:inherit}.list.inset{width:auto;margin-right:10px;margin-left:10px;border:1px solid rgba(0,0,0,0.1);-webkit-border-radius:6px;border-radius:6px;-webkit-box-sizing:border-box;box-sizing:border-box}.list.inset li:first-child{border-top-width:0}.list.inset li:last-child{border-bottom-width:0}.list .list-divider{position:relative;top:-1px;padding-top:6px;padding-bottom:6px;font-size:12px;font-weight:bold;line-height:18px;text-shadow:0 1px 0 rgba(255,255,255,0.5);background-color:#f8f8f8;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #eeeeee));background:-webkit-linear-gradient(top, #f8f8f8,#eeeeee);background:linear-gradient(top, #f8f8f8,#eeeeee);border-top:1px solid rgba(0,0,0,0.1);border-bottom:1px solid rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 1px 1px rgba(255,255,255,0.4);box-shadow:inset 0 1px 1px rgba(255,255,255,0.4)}.list.inset .list-divider:first-child{top:0;border-top-width:0;-webkit-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0}.list.inset .list-divider:last-child{-webkit-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px}.list .chevron,.list [class*="button"],.list [class*="count"],.list .toggle{position:absolute;top:50%;right:10px}.list .chevron,.list [class*="count"]{margin-top:-10px}.list .chevron+[class*="count"]{right:30px}.list [class*="button"]{left:auto;margin-top:-14px}.list .toggle{margin-top:-15px}.popover{position:fixed;top:55px;left:50%;z-index:20;display:none;width:280px;padding:5px;margin-left:-146px;background-color:#555;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(5%, #555555), color-stop(6%, #555555), color-stop(30%, #111111));background:-webkit-linear-gradient(top, #555555 5%,#555555 6%,#111111 30%);background:linear-gradient(top, #555555 5%,#555555 6%,#111111 30%);border:1px solid #111;-webkit-border-radius:6px;border-radius:6px;opacity:0;-webkit-box-shadow:inset 0 1px 1px -1px #fff,0 3px 10px rgba(0,0,0,0.3);box-shadow:inset 0 1px 1px -1px #fff,0 3px 10px rgba(0,0,0,0.3);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);-webkit-transition:-webkit-transform 0.2s ease-in-out,opacity 0.2s ease-in-out;transition:transform 0.2s ease-in-out,opacity 0.2s ease-in-out}.popover:before,.popover:after{position:absolute;left:50%;width:0;height:0;content:''}.popover:before{top:-20px;margin-left:-21px;border-right:21px solid transparent;border-bottom:21px solid #111;border-left:21px solid transparent}.popover:after{top:-19px;margin-left:-20px;border-right:20px solid transparent;border-bottom:20px solid #555;border-left:20px solid transparent}.popover-header{display:-webkit-box;display:box;height:34px;margin-bottom:5px}.popover-header .title{position:absolute;top:0;left:0;width:100%;margin:15px 0;font-size:16px;font-weight:bold;line-height:12px;color:#fff;text-align:center;text-shadow:0 -1px rgba(0,0,0,0.5)}.popover-header [class*="button"]{z-index:25;font-size:12px;line-height:22px;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.3);background-color:#454545;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #454545), color-stop(100%, #353535));background:-webkit-linear-gradient(top, #454545,#353535);background:linear-gradient(top, #454545,#353535);border:1px solid #111;-webkit-box-flex:0;box-flex:0}.popover-header .title+[class*="button"]:last-child,.popover-header .button+[class*="button"]:last-child,.popover-header [class*="button"].pull-right{position:absolute;top:5px;right:5px}.popover-header .button:active{color:#fff;background-color:#0876b1}.popover.visible{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10}.popover .button-block{margin-bottom:5px;border:1px solid #111}.popover .button-block:last-child{margin-bottom:0}.popover .list{width:auto;max-height:250px;margin-right:0;margin-bottom:0;margin-left:0;overflow:auto;background-color:#fff;border:1px solid #000;border-radius:3px;-webkit-overflow-scrolling:touch}.content.fade{left:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-webkit-transition:opacity 0.2s ease-in-out;transition:opacity 0.2s ease-in-out}.content.fade.in{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1}.content.slide{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:-webkit-transform 0.25s ease-in-out;transition:transform 0.25s ease-in-out}.content.slide.left{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}.content.slide.right{-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}.segmented-controller{display:-webkit-box;display:box;margin-bottom:10px;overflow:hidden;font-size:12px;font-weight:bold;text-shadow:0 1px rgba(255,255,255,0.5);list-style:none;background-color:#f8f8f8;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #d4d4d4));background:-webkit-linear-gradient(top, #f8f8f8,#d4d4d4);background:linear-gradient(top, #f8f8f8,#d4d4d4);border:1px solid #aaa;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.5),0 1px rgba(255,255,255,0.8);box-shadow:inset 0 1px rgba(255,255,255,0.5),0 1px rgba(255,255,255,0.8);-webkit-box-orient:horizontal;box-orient:horizontal}.segmented-controller li{overflow:hidden;text-align:center;white-space:nowrap;border-left:1px solid #aaa;-webkit-box-shadow:inset 1px 0 rgba(255,255,255,0.5);box-shadow:inset 1px 0 rgba(255,255,255,0.5);-webkit-box-flex:1;box-flex:1}.segmented-controller li>a{display:block;padding:8px 16px;overflow:hidden;line-height:15px;color:#333;text-overflow:ellipsis}.segmented-controller li:first-child{border-left-width:0;-webkit-box-shadow:none;box-shadow:none}.segmented-controller li.active{background-color:#ccc;-webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,0.3);box-shadow:inset 0 1px 5px rgba(0,0,0,0.3)}.segmented-controller-item{display:none}.segmented-controller-item.active{display:block}.slider,.slider>li{width:100%;height:200px}.slider{overflow:hidden;background-color:#000}.slider>ul{position:relative;font-size:0;white-space:nowrap;-webkit-transition:all 0 linear;transition:all 0 linear}.slider>ul>li{display:inline-block;vertical-align:top;width:100%;height:100%}.slider>ul>li>*{font-size:14px}.toggle{position:relative;width:75px;height:28px;background-color:#eee;border:1px solid #bbb;-webkit-border-radius:20px;border-radius:20px;-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.1);box-shadow:inset 0 0 4px rgba(0,0,0,0.1)}.toggle:before{position:absolute;right:13px;font-weight:bold;line-height:28px;color:#777;text-shadow:0 1px #fff;text-transform:uppercase;content:"Off"}.toggle-handle{position:absolute;top:-1px;left:-1px;z-index:2;width:28px;height:28px;background-color:#fff;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));background:-webkit-linear-gradient(top, #ffffff,#f2f2f2);background:linear-gradient(top, #ffffff,#f2f2f2);border:1px solid rgba(0,0,0,0.2);-webkit-border-radius:100px;border-radius:100px;-webkit-transition:-webkit-transform 0.1s ease-in-out,border 0.1s ease-in-out;transition:transform 0.1s ease-in-out,border 0.1s ease-in-out}.toggle.active{background-color:#19a8e4;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #088cd4), color-stop(100%, #19a8e4));background:-webkit-linear-gradient(top, #088cd4,#19a8e4);background:linear-gradient(top, #088cd4,#19a8e4);border:1px solid #096c9d;-webkit-box-shadow:inset 0 0 15px rgba(255,255,255,0.25);box-shadow:inset 0 0 15px rgba(255,255,255,0.25)}.toggle.active .toggle-handle{border-color:#0a76ad;-webkit-transform:translate3d(48px, 0, 0);transform:translate3d(48px, 0, 0)}.toggle.active:before{right:auto;left:15px;color:#fff;text-shadow:0 -1px rgba(0,0,0,0.25);content:"On"}.slider{margin-bottom:0;height:150px}.slider li img{width:100%}.form-wrapper{padding:10px}
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Movie finder</title>
|
|
6
|
+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
7
|
+
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
8
|
+
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
9
|
+
|
|
10
|
+
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
|
|
11
|
+
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
|
|
12
|
+
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
|
|
13
|
+
|
|
14
|
+
<link rel="stylesheet" href="../../dist/ratchet.css">
|
|
15
|
+
<link rel="stylesheet" href="css/app.css">
|
|
16
|
+
<script src="../../dist/ratchet.js"></script>
|
|
17
|
+
|
|
18
|
+
</head>
|
|
19
|
+
<body>
|
|
20
|
+
|
|
21
|
+
<header class="bar-title">
|
|
22
|
+
<h1 class="title">Movie finder</h1>
|
|
23
|
+
</header>
|
|
24
|
+
<nav class="bar-standard bar-header-secondary">
|
|
25
|
+
<form>
|
|
26
|
+
<input type="search" placeholder="Search">
|
|
27
|
+
</form>
|
|
28
|
+
</nav>
|
|
29
|
+
|
|
30
|
+
<nav class="bar-tab">
|
|
31
|
+
<ul class="tab-inner">
|
|
32
|
+
<li class="tab-item active">
|
|
33
|
+
<a href="index.html" data-transition="fade">
|
|
34
|
+
<img class="tab-icon" src="../../docs/img/icon-hamburger.png">
|
|
35
|
+
<div class="tab-label">Movies</div>
|
|
36
|
+
</a>
|
|
37
|
+
</li>
|
|
38
|
+
<li class="tab-item">
|
|
39
|
+
<a href="theaters.html" data-transition="fade">
|
|
40
|
+
<img class="tab-icon" src="../../docs/img/icon-hamburger.png">
|
|
41
|
+
<div class="tab-label">Theaters</div>
|
|
42
|
+
</a>
|
|
43
|
+
</li>
|
|
44
|
+
<li class="tab-item">
|
|
45
|
+
<a href="settings.html" data-transition="fade">
|
|
46
|
+
<img class="tab-icon" src="../../docs/img/icon-hamburger.png">
|
|
47
|
+
<div class="tab-label">Settings</div>
|
|
48
|
+
</a>
|
|
49
|
+
</li>
|
|
50
|
+
</ul>
|
|
51
|
+
</nav>
|
|
52
|
+
|
|
53
|
+
<div class="content">
|
|
54
|
+
|
|
55
|
+
<div class="slider">
|
|
56
|
+
<ul>
|
|
57
|
+
<li>
|
|
58
|
+
<img src="img/argo.png">
|
|
59
|
+
</li>
|
|
60
|
+
<li>
|
|
61
|
+
<img src="img/skyfall.png">
|
|
62
|
+
</li>
|
|
63
|
+
<li>
|
|
64
|
+
<img src="img/ralph.png">
|
|
65
|
+
</li>
|
|
66
|
+
</ul>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<ul class="list">
|
|
70
|
+
<li class="list-divider">Recommended movies</li>
|
|
71
|
+
<li>
|
|
72
|
+
<a href="choose-theater.html">
|
|
73
|
+
<strong>Argo</strong>
|
|
74
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
75
|
+
<span class="chevron"></span>
|
|
76
|
+
</a>
|
|
77
|
+
</li>
|
|
78
|
+
<li>
|
|
79
|
+
<a href="choose-theater.html" data-transition="slide-in">
|
|
80
|
+
<strong>Skyfall: 007</strong>
|
|
81
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
82
|
+
<span class="chevron"></span>
|
|
83
|
+
</a>
|
|
84
|
+
</li>
|
|
85
|
+
<li>
|
|
86
|
+
<a href="choose-theater.html" data-transition="slide-in">
|
|
87
|
+
<strong>Wreck-it Ralph</strong>
|
|
88
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
89
|
+
<span class="chevron"></span>
|
|
90
|
+
</a>
|
|
91
|
+
</li>
|
|
92
|
+
<li class="list-divider">Top movies</li>
|
|
93
|
+
<li>
|
|
94
|
+
<a href="choose-theater.html" data-transition="slide-in">
|
|
95
|
+
<strong>Movie 4</strong>
|
|
96
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
97
|
+
<span class="chevron"></span>
|
|
98
|
+
</a>
|
|
99
|
+
</li>
|
|
100
|
+
<li>
|
|
101
|
+
<a href="choose-theater.html" data-transition="slide-in">
|
|
102
|
+
<strong>Movie 5</strong>
|
|
103
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
104
|
+
<span class="chevron"></span>
|
|
105
|
+
</a>
|
|
106
|
+
</li>
|
|
107
|
+
<li>
|
|
108
|
+
<a href="choose-theater.html" data-transition="slide-in">
|
|
109
|
+
<strong>Movie 6</strong>
|
|
110
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
111
|
+
<span class="chevron"></span>
|
|
112
|
+
</a>
|
|
113
|
+
</li>
|
|
114
|
+
<li>
|
|
115
|
+
<a href="choose-theater.html" data-transition="slide-in">
|
|
116
|
+
<strong>Movie 7</strong>
|
|
117
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
118
|
+
<span class="chevron"></span>
|
|
119
|
+
</a>
|
|
120
|
+
</li>
|
|
121
|
+
<li>
|
|
122
|
+
<a href="choose-theater.html" data-transition="slide-in">
|
|
123
|
+
<strong>Movie 8</strong>
|
|
124
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
125
|
+
<span class="chevron"></span>
|
|
126
|
+
</a>
|
|
127
|
+
</li>
|
|
128
|
+
<li>
|
|
129
|
+
<a href="choose-theater.html" data-transition="slide-in">
|
|
130
|
+
<strong>Movie 9</strong>
|
|
131
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
132
|
+
<span class="chevron"></span>
|
|
133
|
+
</a>
|
|
134
|
+
</li>
|
|
135
|
+
<li>
|
|
136
|
+
<a href="choose-theater.html" data-transition="slide-in">
|
|
137
|
+
<strong>Movie 10</strong>
|
|
138
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
139
|
+
<span class="chevron"></span>
|
|
140
|
+
</a>
|
|
141
|
+
</li>
|
|
142
|
+
<li>
|
|
143
|
+
<a href="choose-theater.html" data-transition="slide-in">
|
|
144
|
+
<strong>Movie 11</strong>
|
|
145
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
146
|
+
<span class="chevron"></span>
|
|
147
|
+
</a>
|
|
148
|
+
</li>
|
|
149
|
+
<li>
|
|
150
|
+
<a href="choose-theater.html" data-transition="slide-in">
|
|
151
|
+
<strong>Movie 12</strong>
|
|
152
|
+
<p>Lorem ipsum dolor sit amet</p>
|
|
153
|
+
<span class="chevron"></span>
|
|
154
|
+
</a>
|
|
155
|
+
</li>
|
|
156
|
+
</ul>
|
|
157
|
+
|
|
158
|
+
</div>
|
|
159
|
+
</body>
|
|
160
|
+
</html>
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/* ----------------------------------
|
|
2
|
+
* POPOVER v1.0.0
|
|
3
|
+
* Licensed under The MIT License
|
|
4
|
+
* http://opensource.org/licenses/MIT
|
|
5
|
+
* ---------------------------------- */
|
|
6
|
+
|
|
7
|
+
!function () {
|
|
8
|
+
|
|
9
|
+
var popover;
|
|
10
|
+
|
|
11
|
+
var findPopovers = function (target) {
|
|
12
|
+
var i, popovers = document.querySelectorAll('a');
|
|
13
|
+
for (; target && target !== document; target = target.parentNode) {
|
|
14
|
+
for (i = popovers.length; i--;) { if (popovers[i] === target) return target; }
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
var onPopoverHidden = function () {
|
|
19
|
+
document.body.removeChild(backdrop);
|
|
20
|
+
popover.style.display = 'none';
|
|
21
|
+
popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
var backdrop = function () {
|
|
25
|
+
var element = document.createElement('div');
|
|
26
|
+
|
|
27
|
+
element.classList.add('backdrop');
|
|
28
|
+
|
|
29
|
+
element.addEventListener('touchend', function () {
|
|
30
|
+
popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
|
|
31
|
+
popover.classList.remove('visible');
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
return element;
|
|
35
|
+
}();
|
|
36
|
+
|
|
37
|
+
var getPopover = function (e) {
|
|
38
|
+
var anchor = findPopovers(e.target);
|
|
39
|
+
|
|
40
|
+
if (!anchor || !anchor.hash) return;
|
|
41
|
+
|
|
42
|
+
popover = document.querySelector(anchor.hash);
|
|
43
|
+
|
|
44
|
+
if (!popover || !popover.classList.contains('popover')) return;
|
|
45
|
+
|
|
46
|
+
return popover;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
window.addEventListener('touchend', function (e) {
|
|
50
|
+
var popover = getPopover(e);
|
|
51
|
+
|
|
52
|
+
if (!popover) return;
|
|
53
|
+
|
|
54
|
+
popover.style.display = 'block';
|
|
55
|
+
popover.offsetHeight;
|
|
56
|
+
popover.classList.add('visible');
|
|
57
|
+
|
|
58
|
+
popover.parentNode.appendChild(backdrop);
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
window.addEventListener('click', function (e) { if (getPopover(e)) e.preventDefault(); });
|
|
62
|
+
|
|
63
|
+
}();
|