Skip to content

Commit e77d0a9

Browse files
KrinkleKrinkle
committed
Icons: Fix icons page examples to use 1.5.0 syntax
Since the demos were upgraded to 1.5.0-alpha.1, these broke as they were missing the "ui-icon" class that is now required. While at it, also clean up some indentation and unneeded local `ui-btn-icon-notext` and `text` classes and their styles. Fixes jquery/jquery-wp-content#407.
1 parent ad7d8cd commit e77d0a9

File tree

2 files changed

+116
-130
lines changed

2 files changed

+116
-130
lines changed

‎pages/icons.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,11 @@ <h2>Icons</h2>
1616
<a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
1717
</code></pre>
1818

19-
2019
<p>The following is a full list of the icons provided:</p>
2120

22-
<p><iframe src="/resources/icons-list.html" style="width:100%;height:750px;border:0px"></iframe></p>
21+
<iframe src="/resources/icons-list.html" style="width: 100%; height: 750px; border: 0px;"></iframe>
2322

2423
<h2>Icons and themes</h2>
2524
<p>The semi-transparent black circle behind the white icon ensures good contrast on any background color so it works well with the jQuery Mobile theming system. Here are examples of the same icons sitting on top of a range of different color swatches with themed buttons.</p>
26-
27-
<p><iframe src="/resources/buttonMarkup/example17.html" style="width:100%;height:450px;border:0px"></iframe></p>
2825

26+
<iframe src="/resources/buttonMarkup/example17.html" style="width: 100%; height: 450px; border: 0px;"></iframe>

‎resources/icons-list.html

Lines changed: 114 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,249 +1,237 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html>
33
<head>
44
<title>jQuery Mobile Icons</title>
5-
65
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
86
<link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css" />
97
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
108
<script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
11-
<style>
9+
<style>
1210
ul {
13-
list-style-type: none;
14-
padding: 0;
15-
margin: 0;
11+
list-style-type: none;
12+
padding: 0;
13+
margin: 0;
1614
}
1715
li {
18-
width: 12em;
19-
float: left;
20-
padding: 0.5em;
21-
}
22-
.ui-icon, .text {
23-
display: inline-block;
24-
vertical-align: middle;
16+
width: 12em;
17+
float: left;
18+
padding: 0.5em;
2519
}
26-
.text {
27-
padding-left: 1.2em;
20+
.ui-icon {
21+
display: inline-block;
22+
vertical-align: middle;
2823
}
29-
span {
30-
position: relative;
31-
left: 20px;
32-
}
33-
span.ui-btn-icon-notext {
34-
vertical-align: middle;
35-
}
3624
</style>
3725
</head>
3826

3927
<body>
4028
<div data-role="page" id="Icons" style="max-height:750px; min-height:750px;">
41-
<div data-role="header">
29+
<div data-role="toolbar" data-type="header">
4230
<h1>List of Icons</h1>
4331
</div>
44-
<div role="main" class="ui-content">
32+
<div role="main" class="ui-content">
4533
<ul class="ui-helper-clearfix">
4634
<li>
47-
<span class="ui-btn-icon-notext ui-icon-action"></span>
48-
<span class="text">action</span>
35+
<span class="ui-icon ui-icon-action"></span>
36+
action
4937
</li>
5038
<li>
51-
<span class="ui-btn-icon-notext ui-icon-alert"></span>
52-
<span class="text">alert</span>
39+
<span class="ui-icon ui-icon-alert"></span>
40+
alert
5341
</li>
5442
<li>
55-
<span class="ui-btn-icon-notext ui-icon-arrow-d"></span>
56-
<span class="text">arrow-d</span>
43+
<span class="ui-icon ui-icon-arrow-d"></span>
44+
arrow-d
5745
</li>
5846
<li>
59-
<span class="ui-btn-icon-notext ui-icon-arrow-d-l"></span>
60-
<span class="text">arrow-d-l</span>
47+
<span class="ui-icon ui-icon-arrow-d-l"></span>
48+
arrow-d-l
6149
</li>
6250
<li>
63-
<span class="ui-btn-icon-notext ui-icon-arrow-d-r"></span>
64-
<span class="text">arrow-d-r</span>
51+
<span class="ui-icon ui-icon-arrow-d-r"></span>
52+
arrow-d-r
6553
</li>
6654
<li>
67-
<span class="ui-btn-icon-notext ui-icon-arrow-l"></span>
68-
<span class="text">arrow-l</span>
55+
<span class="ui-icon ui-icon-arrow-l"></span>
56+
arrow-l
6957
</li>
7058
<li>
71-
<span class="ui-btn-icon-notext ui-icon-arrow-r"></span>
72-
<span class="text">arrow-r</span>
59+
<span class="ui-icon ui-icon-arrow-r"></span>
60+
arrow-r
7361
</li>
7462
<li>
75-
<span class="ui-btn-icon-notext ui-icon-arrow-u"></span>
76-
<span class="text">arrow-u</span>
63+
<span class="ui-icon ui-icon-arrow-u"></span>
64+
arrow-u
7765
</li>
7866
<li>
79-
<span class="ui-btn-icon-notext ui-icon-arrow-u-l"></span>
80-
<span class="text">arrow-u-l</span>
67+
<span class="ui-icon ui-icon-arrow-u-l"></span>
68+
arrow-u-l
8169
</li>
8270
<li>
83-
<span class="ui-btn-icon-notext ui-icon-arrow-u-r"></span>
84-
<span class="text">arrow-u-r</span>
71+
<span class="ui-icon ui-icon-arrow-u-r"></span>
72+
arrow-u-r
8573
</li>
8674
<li>
87-
<span class="ui-btn-icon-notext ui-icon-audio"></span>
88-
<span class="text">audio</span>
75+
<span class="ui-icon ui-icon-audio"></span>
76+
audio
8977
</li>
9078
<li>
91-
<span class="ui-btn-icon-notext ui-icon-back"></span>
92-
<span class="text">back</span>
79+
<span class="ui-icon ui-icon-back"></span>
80+
back
9381
</li>
9482
<li>
95-
<span class="ui-btn-icon-notext ui-icon-bars"></span>
96-
<span class="text">bars</span>
83+
<span class="ui-icon ui-icon-bars"></span>
84+
bars
9785
</li>
9886
<li>
99-
<span class="ui-btn-icon-notext ui-icon-bullets"></span>
100-
<span class="text">bullets</span>
87+
<span class="ui-icon ui-icon-bullets"></span>
88+
bullets
10189
</li>
10290
<li>
103-
<span class="ui-btn-icon-notext ui-icon-calendar"></span>
104-
<span class="text">calendar</span>
91+
<span class="ui-icon ui-icon-calendar"></span>
92+
calendar
10593
</li>
10694
<li>
107-
<span class="ui-btn-icon-notext ui-icon-camera"></span>
108-
<span class="text">camera</span>
95+
<span class="ui-icon ui-icon-camera"></span>
96+
camera
10997
</li>
11098
<li>
111-
<span class="ui-btn-icon-notext ui-icon-carat-d"></span>
112-
<span class="text">carat-d</span>
99+
<span class="ui-icon ui-icon-carat-d"></span>
100+
carat-d
113101
</li>
114102
<li>
115-
<span class="ui-btn-icon-notext ui-icon-carat-l"></span>
116-
<span class="text">carat-l</span>
103+
<span class="ui-icon ui-icon-carat-l"></span>
104+
carat-l
117105
</li>
118106
<li>
119-
<span class="ui-btn-icon-notext ui-icon-carat-r"></span>
120-
<span class="text">carat-r</span>
107+
<span class="ui-icon ui-icon-carat-r"></span>
108+
carat-r
121109
</li>
122110
<li>
123-
<span class="ui-btn-icon-notext ui-icon-carat-u"></span>
124-
<span class="text">carat-u</span>
111+
<span class="ui-icon ui-icon-carat-u"></span>
112+
carat-u
125113
</li>
126114
<li>
127-
<span class="ui-btn-icon-notext ui-icon-check"></span>
128-
<span class="text">check</span>
115+
<span class="ui-icon ui-icon-check"></span>
116+
check
129117
</li>
130118
<li>
131-
<span class="ui-btn-icon-notext ui-icon-clock"></span>
132-
<span class="text">clock</span>
119+
<span class="ui-icon ui-icon-clock"></span>
120+
clock
133121
</li>
134122
<li>
135-
<span class="ui-btn-icon-notext ui-icon-cloud"></span>
136-
<span class="text">cloud</span>
123+
<span class="ui-icon ui-icon-cloud"></span>
124+
cloud
137125
</li>
138126
<li>
139-
<span class="ui-btn-icon-notext ui-icon-comment"></span>
140-
<span class="text">comment</span>
127+
<span class="ui-icon ui-icon-comment"></span>
128+
comment
141129
</li>
142130
<li>
143-
<span class="ui-btn-icon-notext ui-icon-delete"></span>
144-
<span class="text">delete</span>
131+
<span class="ui-icon ui-icon-delete"></span>
132+
delete
145133
</li>
146134
<li>
147-
<span class="ui-btn-icon-notext ui-icon-edit"></span>
148-
<span class="text">edit</span>
135+
<span class="ui-icon ui-icon-edit"></span>
136+
edit
149137
</li>
150138
<li>
151-
<span class="ui-btn-icon-notext ui-icon-eye"></span>
152-
<span class="text">eye</span>
139+
<span class="ui-icon ui-icon-eye"></span>
140+
eye
153141
</li>
154142
<li>
155-
<span class="ui-btn-icon-notext ui-icon-forbidden"></span>
156-
<span class="text">forbidden</span>
143+
<span class="ui-icon ui-icon-forbidden"></span>
144+
forbidden
157145
</li>
158146
<li>
159-
<span class="ui-btn-icon-notext ui-icon-forward"></span>
160-
<span class="text">forward</span>
147+
<span class="ui-icon ui-icon-forward"></span>
148+
forward
161149
</li>
162150
<li>
163-
<span class="ui-btn-icon-notext ui-icon-gear"></span>
164-
<span class="text">gear</span>
151+
<span class="ui-icon ui-icon-gear"></span>
152+
gear
165153
</li>
166154
<li>
167-
<span class="ui-btn-icon-notext ui-icon-grid"></span>
168-
<span class="text">grid</span>
155+
<span class="ui-icon ui-icon-grid"></span>
156+
grid
169157
</li>
170158
<li>
171-
<span class="ui-btn-icon-notext ui-icon-heart"></span>
172-
<span class="text">heart</span>
159+
<span class="ui-icon ui-icon-heart"></span>
160+
heart
173161
</li>
174162
<li>
175-
<span class="ui-btn-icon-notext ui-icon-home"></span>
176-
<span class="text">home</span>
163+
<span class="ui-icon ui-icon-home"></span>
164+
home
177165
</li>
178166
<li>
179-
<span class="ui-btn-icon-notext ui-icon-info"></span>
180-
<span class="text">info</span>
167+
<span class="ui-icon ui-icon-info"></span>
168+
info
181169
</li>
182170
<li>
183-
<span class="ui-btn-icon-notext ui-icon-location"></span>
184-
<span class="text">location</span>
171+
<span class="ui-icon ui-icon-location"></span>
172+
location
185173
</li>
186174
<li>
187-
<span class="ui-btn-icon-notext ui-icon-lock"></span>
188-
<span class="text">lock</span>
175+
<span class="ui-icon ui-icon-lock"></span>
176+
lock
189177
</li>
190178
<li>
191-
<span class="ui-btn-icon-notext ui-icon-mail"></span>
192-
<span class="text">mail</span>
179+
<span class="ui-icon ui-icon-mail"></span>
180+
mail
193181
</li>
194182
<li>
195-
<span class="ui-btn-icon-notext ui-icon-minus"></span>
196-
<span class="text">minus</span>
183+
<span class="ui-icon ui-icon-minus"></span>
184+
minus
197185
</li>
198186
<li>
199-
<span class="ui-btn-icon-notext ui-icon-navigation"></span>
200-
<span class="text">navigation</span>
187+
<span class="ui-icon ui-icon-navigation"></span>
188+
navigation
201189
</li>
202190
<li>
203-
<span class="ui-btn-icon-notext ui-icon-phone"></span>
204-
<span class="text">phone</span>
191+
<span class="ui-icon ui-icon-phone"></span>
192+
phone
205193
</li>
206194
<li>
207-
<span class="ui-btn-icon-notext ui-icon-plus"></span>
208-
<span class="text">plus</span>
195+
<span class="ui-icon ui-icon-plus"></span>
196+
plus
209197
</li>
210198
<li>
211-
<span class="ui-btn-icon-notext ui-icon-power"></span>
212-
<span class="text">power</span>
199+
<span class="ui-icon ui-icon-power"></span>
200+
power
213201
</li>
214202
<li>
215-
<span class="ui-btn-icon-notext ui-icon-recycle"></span>
216-
<span class="text">recycle</span>
203+
<span class="ui-icon ui-icon-recycle"></span>
204+
recycle
217205
</li>
218206
<li>
219-
<span class="ui-btn-icon-notext ui-icon-refresh"></span>
220-
<span class="text">refresh</span>
207+
<span class="ui-icon ui-icon-refresh"></span>
208+
refresh
221209
</li>
222210
<li>
223-
<span class="ui-btn-icon-notext ui-icon-search"></span>
224-
<span class="text">search</span>
211+
<span class="ui-icon ui-icon-search"></span>
212+
search
225213
</li>
226214
<li>
227-
<span class="ui-btn-icon-notext ui-icon-shop"></span>
228-
<span class="text">shop</span>
215+
<span class="ui-icon ui-icon-shop"></span>
216+
shop
229217
</li>
230218
<li>
231-
<span class="ui-btn-icon-notext ui-icon-star"></span>
232-
<span class="text">star</span>
219+
<span class="ui-icon ui-icon-star"></span>
220+
star
233221
</li>
234222
<li>
235-
<span class="ui-btn-icon-notext ui-icon-tag"></span>
236-
<span class="text">tag</span>
223+
<span class="ui-icon ui-icon-tag"></span>
224+
tag
237225
</li>
238226
<li>
239-
<span class="ui-btn-icon-notext ui-icon-user"></span>
240-
<span class="text">user</span>
227+
<span class="ui-icon ui-icon-user"></span>
228+
user
241229
</li>
242230
<li>
243-
<span class="ui-btn-icon-notext ui-icon-video"></span>
244-
<span class="text">video</span>
231+
<span class="ui-icon ui-icon-video"></span>
232+
video
245233
</li>
246-
</ul>
234+
</ul>
247235
</div>
248236
</div>
249237
</body>

0 commit comments

Comments
 (0)