forked from krisrak/appframework-templates
-
Notifications
You must be signed in to change notification settings - Fork 0
/
template-GridViewApp.html
194 lines (164 loc) · 7.89 KB
/
template-GridViewApp.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html>
<head>
<title>Grid View App template</title>
<!--
This template can be used for photo app with grid view that will open detail view, for applications like Photo App or Instagram app.
-->
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="appframework/af.ui.css" />
<link rel="stylesheet" type="text/css" href="appframework/icons.css" />
<script type="text/javascript" charset="utf-8" src="appframework/appframework.ui.min.js"></script>
<!-- Required if packaging to native app using Intel XDK -->
<script src="intelxdk.js"></script>
<script src="xhr.js"></script>
<script>
function onDeviceReady(){
$.ui.launch();
intel.xdk.device.hideSplashScreen();
}
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
</script>
<!-- end Intel XDK code -->
<script>
$.ui.autoLaunch = false;
$.ui.backButtonText = "Back";
$(document).ready(function(){
$.ui.launch();
});
</script>
<style>
/* CSS responsive square grid */
.grid-photo {margin:3px -7px;}
.grid-photo:after {content:'';display:block;clear:both;}
.grid-photo li {position: relative; display:block; float:left; width: 10%; padding-bottom: 10%;}
.grid-photo .grid-photo-box {position: absolute;left: 3px;right: 3px;top: 3px;bottom: 3px; background-color: rgba(128,128,128,0.2);}
.grid-photo img {width:100%;height:100%}
@media only screen and (max-width : 1024px) {
.grid-photo li {width: 12.5%; padding-bottom: 12.5%;}
}
@media only screen and (max-width : 768px) {
.grid-photo li {width: 16.6%; padding-bottom: 16.6%;}
}
@media only screen and (max-width : 480px) {
.grid-photo li {width: 25%; padding-bottom: 25%;}
}
@media only screen and (max-width : 320px) {
.grid-photo li {width: 33.3%; padding-bottom: 33.3%;}
}
</style>
</head>
<body>
<div id="afui">
<div id="content" style="">
<!--Grid View Page-->
<div class="panel" title="Title" id="gridview" selected="true">
<header>
<h1>Title</h1>
<a href="#" class="button icon refresh" style="float:right"></a>
</header>
<div class="grid-photo">
<li><div class="grid-photo-box"><a href="#item1"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item2"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item3"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item4"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item5"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item6"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item7"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item8"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item9"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item10"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item11"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item12"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item13"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item14"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item15"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item16"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item17"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item18"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item19"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item20"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item21"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item22"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item23"><img src="" /></a></div></li>
<li><div class="grid-photo-box"><a href="#item24"><img src="" /></a></div></li>
</div>
<a id="more" class="button block">Load More</a>
</div>
<!--Detail View Pages for each grid items-->
<div class="panel" title="Item 1" id="item1">
<p>This is detail view for Item 1</p>
</div>
<div class="panel" title="Item 2" id="item2">
<p>This is detail view for Item 2</p>
</div>
<div class="panel" title="Item 3" id="item3">
<p>This is detail view for Item 3</p>
</div>
<div class="panel" title="Item 4" id="item4">
<p>This is detail view for Item 4</p>
</div>
<div class="panel" title="Item 5" id="item5">
<p>This is detail view for Item 5</p>
</div>
<div class="panel" title="Item 6" id="item6">
<p>This is detail view for Item 6</p>
</div>
<div class="panel" title="Item 7" id="item7">
<p>This is detail view for Item 7</p>
</div>
<div class="panel" title="Item 8" id="item8">
<p>This is detail view for Item 8</p>
</div>
<div class="panel" title="Item 9" id="item9">
<p>This is detail view for Item 9</p>
</div>
<div class="panel" title="Item 10" id="item10">
<p>This is detail view for Item 10</p>
</div>
<div class="panel" title="Item 11" id="item11">
<p>This is detail view for Item 11</p>
</div>
<div class="panel" title="Item 12" id="item12">
<p>This is detail view for Item 12</p>
</div>
<div class="panel" title="Item 13" id="item13">
<p>This is detail view for Item 13</p>
</div>
<div class="panel" title="Item 14" id="item14">
<p>This is detail view for Item 14</p>
</div>
<div class="panel" title="Item 15" id="item15">
<p>This is detail view for Item 15</p>
</div>
<div class="panel" title="Item 16" id="item16">
<p>This is detail view for Item 16</p>
</div>
<div class="panel" title="Item 17" id="item17">
<p>This is detail view for Item 17</p>
</div>
<div class="panel" title="Item 18" id="item18">
<p>This is detail view for Item 18</p>
</div>
<div class="panel" title="Item 19" id="item19">
<p>This is detail view for Item 19</p>
</div>
<div class="panel" title="Item 20" id="item20">
<p>This is detail view for Item 20</p>
</div>
<div class="panel" title="Item 21" id="item21">
<p>This is detail view for Item 11</p>
</div>
<div class="panel" title="Item 22" id="item22">
<p>This is detail view for Item 12</p>
</div>
<div class="panel" title="Item 23" id="item23">
<p>This is detail view for Item 13</p>
</div>
<div class="panel" title="Item 24" id="item24">
<p>This is detail view for Item 14</p>
</div>
</div>
</div>
</body>
</html>