This repository has been archived by the owner on Oct 8, 2021. It is now read-only.
/
movie-list.php
242 lines (228 loc) · 8.42 KB
/
movie-list.php
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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Table Reflow: Custom styles - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../../favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="../../../js/jquery.js"></script>
<script src="../../_assets/js/"></script>
<script src="../../../js/"></script>
<style>
/* These apply across all breakpoints because they are outside of a media query */
/* Make the labels light gray all caps across the board */
.movie-list thead th,
.movie-list tbody th .ui-table-cell-label,
.movie-list tbody td .ui-table-cell-label {
text-transform: uppercase;
font-size: .7em;
color: rgba(0,0,0,0.5);
font-weight: normal;
}
/* White bg, large blue text for rank and title */
.movie-list tbody th {
font-size: 1.2em;
background-color: #fff;
color: #77bbff;
text-align: center;
}
/* Add a bit of extra left padding for the title */
.movie-list tbody td.title {
padding-left: .8em;
}
/* Custom stacked styles for mobile sizes */
/* Use a max-width media query so we don't have to undo these styles */
@media (max-width: 40em) {
/* Negate the margin between sections */
.movie-list tbody th {
margin-top: 0;
text-align: left;
}
/* White bg, large blue text for rank and title */
.movie-list tbody th,
.movie-list tbody td.title {
display: block;
font-size: 1.2em;
line-height: 110%;
padding: .5em .5em;
background-color: #fff;
color: #77bbff;
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.1);
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.1);
box-shadow: 0 1px 6px rgba(0,0,0,.1);
}
/* Hide labels for rank and title */
.movie-list tbody th .ui-table-cell-label,
.movie-list tbody td.title .ui-table-cell-label {
display: none;
}
/* Position the title next to the rank, pad to the left */
.movie-list tbody td.title {
margin-top: -2.1em;
padding-left: 2.2em;
border-bottom: 1px solid rgba(0,0,0,.15);
}
/* Make the data bold */
.movie-list th,
.movie-list td {
font-weight: bold;
}
/* Make the label elements a percentage width */
.movie-list td .ui-table-cell-label,
.movie-list th .ui-table-cell-label {
min-width: 20%;
}
}
/* Media query to show as a standard table at wider widths */
@media ( min-width: 40em ) {
/* Show the table header rows */
.movie-list td,
.movie-list th,
.movie-list tbody th,
.movie-list tbody td,
.movie-list thead td,
.movie-list thead th {
display: table-cell;
margin: 0;
}
/* Hide the labels in each cell */
.movie-list td .ui-table-cell-label,
.movie-list th .ui-table-cell-label {
display: none;
}
}
/* Hack to make IE9 and WP7.5 treat cells like block level elements */
/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this */
@media ( max-width: 40em ) {
.movie-list td,
.movie-list th {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
clear: left;
}
}
</style>
</head>
<body>
<div data-role="page" class="jqm-demos">
<div data-role="header" class="jqm-header">
<h1 class="jqm-logo"><a href="../../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>
<?php include( '../../search.php' ); ?>
</div><!-- /header -->
<div data-role="content" class="jqm-content jqm-fullwidth">
<h1>Table Reflow: Custom styles</h1>
<p>Custom styles for the reflow table at stacked widths.</p>
<h3>Top Movies</h3>
<div data-demo-html="true" data-demo-css="true">
<table data-role="table" id="movie-table-custom" data-mode="reflow" class="movie-list table-stroke">
<thead>
<tr>
<th data-priority="1">Rank</th>
<th style="width:40%">Movie Title</th>
<th data-priority="2">Year</th>
<th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th data-priority="4">Reviews</th>
<th data-priority="4">Director</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td class="title"><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
<td>1941</td>
<td>100%</td>
<td>74</td>
<td>Orson Welles</td>
</tr>
<tr>
<th>2</th>
<td class="title"><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
<td>1942</td>
<td>97%</td>
<td>64</td>
<td>Michael Curtiz</td>
</tr>
<tr>
<th>3</th>
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
<td>1972</td>
<td>97%</td>
<td>87</td>
<td>Francis Ford Coppola</td>
</tr>
<tr>
<th>4</th>
<td class="title"><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
<td>1939</td>
<td>96%</td>
<td>87</td>
<td>Victor Fleming</td>
</tr>
<tr>
<th>5</th>
<td class="title"><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
<td>1962</td>
<td>94%</td>
<td>87</td>
<td>Sir David Lean</td>
</tr>
<tr>
<th>6</th>
<td class="title"><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
<td>1964</td>
<td>92%</td>
<td>74</td>
<td>Stanley Kubrick</td>
</tr>
<tr>
<th>7</th>
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
<td>1967</td>
<td>91%</td>
<td>122</td>
<td>Mike Nichols</td>
</tr>
<tr>
<th>8</th>
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
<td>1939</td>
<td>90%</td>
<td>72</td>
<td>Victor Fleming</td>
</tr>
<tr>
<th>9</th>
<td class="title"><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
<td>1952</td>
<td>89%</td>
<td>85</td>
<td>Stanley Donen, Gene Kelly</td>
</tr>
<tr>
<th>10</th>
<td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
<td>2010</td>
<td>84%</td>
<td>78</td>
<td>Christopher Nolan</td>
</tr>
</tbody>
</table>
</div><!-- /data-demo -->
</div><!-- /content -->
<div data-role="footer" class="jqm-footer">
<p class="jqm-version"></p>
<p>Copyright 2013 The jQuery Foundation</p>
</div><!-- /footer -->
<?php include( '../../global-nav.php' ); ?>
</div><!-- /page -->
</body>
</html>