Skip to content

Commit dd7781c

Browse files
timmywiltimmywil
committed
Resources: move inline styles to an external CSS file for CSP
Ref jquery/infrastructure-puppet#54
1 parent 1f67733 commit dd7781c

File tree

3 files changed

+118
-80
lines changed

3 files changed

+118
-80
lines changed

‎pages/download.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,11 @@ <h3>1.4.5</h3>
4949
<li><a href="https://www.asp.net/ajaxLibrary/CDN.ashx#jQuery_Mobile_Releases_on_the_CDN_4">Microsoft CDN &#8211; jQuery Mobile</a></li>
5050
</ul>
5151

52-
<hr>
52+
<hr />
5353

5454
<h2 id="download">Legacy versions</h2>
5555

56-
<br>
56+
<br />
5757

5858
<h3>1.3.2</h3>
5959

@@ -86,7 +86,7 @@ <h3>1.3.2</h3>
8686
<li><a href="https://www.asp.net/ajaxLibrary/CDN.ashx#jQuery_Mobile_Releases_on_the_CDN_4">Microsoft CDN &#8211; jQuery Mobile</a></li>
8787
</ul>
8888

89-
<br>
89+
<br />
9090

9191
<h3>1.2.1</h3>
9292

@@ -119,7 +119,7 @@ <h3>1.2.1</h3>
119119
<li><a href="https://www.asp.net/ajaxLibrary/CDN.ashx#jQuery_Mobile_Releases_on_the_CDN_4">Microsoft CDN &#8211; jQuery Mobile</a></li>
120120
</ul>
121121

122-
<br>
122+
<br />
123123

124124
<h3>1.1.2</h3>
125125

@@ -152,7 +152,7 @@ <h3>1.1.2</h3>
152152
<li><a href="https://www.asp.net/ajaxLibrary/CDN.ashx#jQuery_Mobile_Releases_on_the_CDN_4">Microsoft CDN &#8211; jQuery Mobile</a></li>
153153
</ul>
154154

155-
<br>
155+
<br />
156156

157157
<h3>1.0.1</h3>
158158

‎pages/resources.html

Lines changed: 19 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -2,56 +2,12 @@
22
"title": "Resources"
33
}</script>
44

5-
<style>
6-
table.featuredsites { }
7-
table.featuredsites td { padding-top:32px; text-align:center; }
8-
table.featuredsites td img { margin-bottom:6px; }
9-
table.featuredsites td.featured {
10-
font-size: 12px;
11-
vertical-align: top;
12-
}
13-
14-
.booktable {
15-
margin: -20px;
16-
padding-top: 10px;
17-
border: 0 none !important;
18-
}
19-
20-
.title {
21-
width: 140px;
22-
line-height: 135%;
23-
vertical-align: top;
24-
font-size: 12px !important;
25-
padding:18px 12px 0 7px;
26-
}
27-
28-
.book {
29-
width: 100px;
30-
padding-left: 0px;
31-
padding-top: 22px;
32-
vertical-align: top;
33-
border-bottom: 0px;
34-
}
35-
36-
ul.listicon {
37-
list-style-type: none;
38-
margin-left: -20px;
39-
}
40-
41-
ul.listicon li {
42-
margin-left: 0;
43-
background: none !important;
44-
}
45-
.plugins {
46-
padding: 10px;
47-
text-align: center;
48-
}
49-
</style>
5+
<link rel="stylesheet" href="/resources/resources.css" />
506

517
<p>In this section, we have gathered useful resources that will help you learn more about jQuery Mobile, find tools to develop jQuery Mobile application designs and mockups, tutorials and tools to guide your through the development of simple or more complex applications and related articles.</p>
528

539
<hr>
54-
<h3 style="font-size: 14px !important; color: #ddd; padding-bottom: 20px; border-bottom: 1px solid #ccc; line-height: 170%;"><a href="#Inspiration">Featured sites</a> | <a href="#Books">Books</a> | <a href="#Apps">Apps &amp; Frameworks</a> | <a href="#Plugins">Plugins</a> | <a href="#Extensions">Extensions</a> | <a href="#Tools">Tools</a> | <a href="#Themes">Themes</a> | <a href="#Articles">Articles &amp; Tutorials</a></h3>
10+
<h3 id="resources-header"><a href="#Inspiration">Featured sites</a> | <a href="#Books">Books</a> | <a href="#Apps">Apps &amp; Frameworks</a> | <a href="#Plugins">Plugins</a> | <a href="#Extensions">Extensions</a> | <a href="#Tools">Tools</a> | <a href="#Themes">Themes</a> | <a href="#Articles">Articles &amp; Tutorials</a></h3>
5511

5612
<a id="Inspiration"></a><h2>Featured jQuery Mobile sites from jQMGallery.com</h2>
5713

@@ -109,13 +65,13 @@ <h3 style="font-size: 14px !important; color: #ddd; padding-bottom: 20px; border
10965
<figcaption>Greyhound</figcaption>
11066
</figure>
11167
</div>
112-
<hr style="clear: both;">
68+
<hr class="clear" />
11369
<a id="Books"></a><h2>Books</h2>
114-
<table style="width:100%;" >
70+
<table class="bookstable">
11571
<tr class="booktable">
116-
<td class="book"><img src="/resources/books/jqmWebDevEssentials.jpg" width="105" style="margin-left:-5px" /></td>
72+
<td class="book book-left"><img src="/resources/books/jqmWebDevEssentials.jpg" width="105" /></td>
11773
<td class="title">&#8220;<a href="https://www.packtpub.com/application-development/jquery-mobile-web-development-essentials-third-edition">jQuery Mobile Web Development Essentials - Third Edition</a>&#8221;<br /> by Raymond Camden and Andy Matthews,<br /> Packt Publishing</td>
118-
<td class="book"><img src="/resources/books/MasteringjQueryMobile.jpg" width="105" style="margin-left:-5px" /></td>
74+
<td class="book book-left"><img src="/resources/books/MasteringjQueryMobile.jpg" width="105" /></td>
11975
<td class="title">&#8220;<a href="https://www.packtpub.com/web-development/mastering-jquery-mobile">Mastering jQuery Mobile</a>&#8221;<br /> by Chip Lambert and Shreerang Patwardhan,<br /> Packt Publishing</td>
12076
<td class="book"><img src="/resources/books/master-mobile-web-apps-with-jqm.png" width="95" /></td>
12177
<td class="title" width="140">&#8220;<a href="http://store.elated.com/">Master Mobile Web Apps with jQuery Mobile</a>&#8221;<br/> by Matt Doyle, <br />Elated Books</td>
@@ -133,25 +89,25 @@ <h3 style="font-size: 14px !important; color: #ddd; padding-bottom: 20px; border
13389
<td class="title">&#8220;<a href="http://www.peachpit.com/store/product.aspx?isbn=032177325X">Adobe Dreamweaver CS5.5: Designing and Developing for Mobile with jQuery, HTML5, and CSS3</a>&#8221;<br /> by David Powers,<br /> Adobe Press</td>
13490
<td class="book"><img src="/resources/books/CSS3MobilePack.jpeg" width="95" /></td>
13591
<td class="title">&#8220;<a href="http://www.peachpit.com/store/product.aspx?isbn=0132979780">Using the CSS3 Mobile Pack for Adobe Fireworks CS5</a>&#8221;<br />by Jim Babbage, <br />Peachpit Press</td>
136-
<td class="book"><img src="/resources/books/41XeY6Pua+L._SL500_AA300_.jpg" width="105" style="margin-left:-5px" /></td>
92+
<td class="book book-left"><img src="/resources/books/41XeY6Pua+L._SL500_AA300_.jpg" width="105" /></td>
13793
<td class="title">&#8220;<a href="http://www.amazon.com/Pro-jQuery-Mobile-Brad-Broulik/dp/1430239662/ref=sr_1_9?s=books&amp;ie=UTF8&amp;qid=1320859255&amp;sr=1-9">Pro jQuery Mobile</a>&#8221;<br /> by Brad Broulik,<br /> Apress</td>
13894
</tr>
13995
<tr class="booktable">
140-
<td class="book"><img src="/resources/books/41GwwjDaEsL._SL500_AA300_.jpg" width="105" style="margin-left:-5px; padding-top:5px;" /></td>
96+
<td class="book book-left book-top"><img src="/resources/books/41GwwjDaEsL._SL500_AA300_.jpg" width="105" /></td>
14197
<td class="title">&#8220;<a href="http://www.amazon.com/Teach-Yourself-jQuery-Mobile-Minutes/dp/0672335573/ref=sr_1_1?s=books&amp;ie=UTF8&amp;qid=1320859235&amp;sr=1-1">Sams Teach Yourself jQuery Mobile in 10 Minutes (Sams Teach Yourself &#8212; Minutes)</a>&#8221;<br /> by Steven E. Holzner,<br /> Sams</td>
142-
<td class="book"><img src="/resources/books/jqm_develop_and_design.jpg" width="105" style="margin-left:-5px" /></td>
98+
<td class="book book-left"><img src="/resources/books/jqm_develop_and_design.jpg" width="105" /></td>
14399
<td class="title">&#8220;<a href="http://www.amazon.com/jQuery-Mobile-Develop-Kris-Hadlock/dp/032182041X">jQuery Mobile: Develop and Design</a>&#8221;<br /> by Kris Hadlock,<br /> Peachpit Press</td>
144-
<td class="book"><img src="/resources/books/jqm_in_24_hours.jpg" width="95" style="margin-left:-5px" /></td>
100+
<td class="book book-left"><img src="/resources/books/jqm_in_24_hours.jpg" width="95" /></td>
145101
<td class="title">&#8220;<a href="http://www.pearsonhighered.com/educator/product/Sams-Teach-Yourself-jQuery-Mobile-in-24-Hours/9780672335945.page">Sams Teach Yourself jQuery Mobile in 24 Hours</a>&#8221;<br /> by Phillip Dutson,<br /> Sams Publishing</td>
146102
</tr>
147103
<tr class="booktable">
148-
<td class="book"><img src="/resources/books/creating_mobile_apps.png" width="105" style="margin-left:-5px" /></td>
149-
<td class="title">&#8220;<a href="http://www.packtpub.com/creating-mobile-apps-with-jquery/book">Creating Mobile Apps with jQuery Mobile</a>&#8221;<br> by Shane Gliser,<br> Packt Publishing</td>
150-
<td class="book"><img src="/resources/books/mobile-app-manual-the-blueprint.jpg" width="95" style="margin-left:-5px" /></td>
151-
<td class="title">&#8220;<a href="http://mobileappmanual.com/">Mobile App Manual: The Blueprint &#8211;<br>How to Start Creating Mobile Apps Using jQuery Mobile and PhoneGap Build</a>&#8221;<br /> by Jeff Pelletier,<br> withinsight</td>
104+
<td class="book book-left"><img src="/resources/books/creating_mobile_apps.png" width="105" /></td>
105+
<td class="title">&#8220;<a href="http://www.packtpub.com/creating-mobile-apps-with-jquery/book">Creating Mobile Apps with jQuery Mobile</a>&#8221;<br /> by Shane Gliser,<br /> Packt Publishing</td>
106+
<td class="book book-left"><img src="/resources/books/mobile-app-manual-the-blueprint.jpg" width="95" /></td>
107+
<td class="title">&#8220;<a href="http://mobileappmanual.com/">Mobile App Manual: The Blueprint &#8211;<br />How to Start Creating Mobile Apps Using jQuery Mobile and PhoneGap Build</a>&#8221;<br /> by Jeff Pelletier,<br /> withinsight</td>
152108
</tr>
153109
</table>
154-
<hr style="clear: both;">
110+
<hr class="clear" />
155111
<a id="Apps"></a><h2>Apps &amp; frameworks</h2>
156112
<ul class="listicon">
157113
<li><img src="/resources/logoapps/phonegap.ico" width="18" /> <a href="http://phonegap.com/" target="_blank">PhoneGap</a> &#8211; tool to wrap jQuery Mobile code for native app deployment</li>
@@ -184,7 +140,7 @@ <h3 style="font-size: 14px !important; color: #ddd; padding-bottom: 20px; border
184140
<li><img src="/resources/logoapps/ezoapp.ico" width="18"/> <a href="http://ezoui.com/" target="_blank">EZoApp</a> &#8211; A drag and drop mobile app design tool with online code editor using jQuery Mobile</li>
185141
<li><img src="/resources/logoapps/jqm4gwt.png" width="18"/> <a href="https://github.com/jqm4gwt/jqm4gwt">jqm4gwt</a> &#8211; A GWT wrapper around jQuery Mobile, which enables you to use pure Java to build your UI</li>
186142
</ul>
187-
<hr style="clear: both;">
143+
<hr class="clear" />
188144
<a name="Plugins"></a>
189145
<h2>3rd party plugins</h2>
190146
<p>These are all jQuery Mobile compatible plugins, many use the theme framework, auto-initialization and data- attribute configuration features or core mobile widgets.</p>
@@ -275,7 +231,7 @@ <h2>3rd party plugins</h2>
275231
</figure>
276232
</div>
277233

278-
<hr style="clear: both;">
234+
<hr class="clear" />
279235
<a name="Extensions"></a>
280236
<h2>3rd party extensions</h2>
281237
<p>These are 3rd Party extensions that add capabilities to existing functionality.</p>
@@ -300,7 +256,7 @@ <h2>3rd party extensions</h2>
300256
<li><a href="http://www.intlaqa.com/jquery-mobile-rtl/">jQuery Mobile RTL for Right-To-Left layout.</a> &#8211; To make jQuery Mobile work on right-to-left layouts such as Arabic, Persian, Urdu and Hebrew.</li>
301257
<li><a href="http://ressio.github.io/lazy-load-xt">Lazy Load XT</a> &#8211; jQuery plugin to improve performance by lazy loading of images, videos, widgets, etc. (with built-in support for jQuery Mobile)</li>
302258
</ul>
303-
<hr style="clear: both;">
259+
<hr class="clear" />
304260
<a id="Tools"></a>
305261
<h2>Tools</h2>
306262
<ul>
@@ -309,7 +265,7 @@ <h2>Tools</h2>
309265
<li><a href="http://jquerymobile.com/test/tools/log-page-events.html">bookmarklet for debugging jQueryMobile page navigation problems</a></li>
310266
<li><a href="http://zsprawl.com/iOS/zapps/jqm-reference/">jQuery Mobile Reference 1.1.0 zApp 3.0</a></li>
311267
</ul>
312-
<hr style="clear: both;">
268+
<hr class="clear" />
313269
<a id="Themes"></a>
314270
<h2>Themes</h2>
315271
<ul>
@@ -324,18 +280,6 @@ <h2>Themes</h2>
324280
<li><a href="http://nativedroid.godesign.ch/">Native Droid Theme</a></li>
325281
</ul>
326282
<hr>
327-
<style>
328-
.resvideo,
329-
.restutorial,
330-
.respresentation,
331-
.resarticle { font-size:11px; color:#fff; font-weight:bold; }
332-
.resvideo { background-color:#7ACEF4; }
333-
.restutorial { background-color:#FAA523; }
334-
.resarticle { background-color:#3EB249; }
335-
.respresentation { background-color:#9C3493; }
336-
span.ressource { font-size:12px; color:#888; }
337-
</style>
338-
339283
<a id="Articles"></a>
340284
<h2>Articles &amp; Tutorials</h2>
341285
<ul>

‎resources/resources.css

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
#resources-header {
2+
font-size: 14px !important;
3+
color: #ddd;
4+
padding-bottom: 20px;
5+
border-bottom: 1px solid #ccc;
6+
line-height: 170%;
7+
}
8+
.clear {
9+
clear: both;
10+
}
11+
12+
table.featuredsites td {
13+
padding-top: 32px;
14+
text-align: center;
15+
}
16+
table.featuredsites td img {
17+
margin-bottom: 6px;
18+
}
19+
table.featuredsites td.featured {
20+
font-size: 12px;
21+
vertical-align: top;
22+
}
23+
24+
.bookstable {
25+
width: 100%;
26+
}
27+
28+
.booktable {
29+
margin: -20px;
30+
padding-top: 10px;
31+
border: 0 none !important;
32+
}
33+
34+
.title {
35+
width: 140px;
36+
line-height: 135%;
37+
vertical-align: top;
38+
font-size: 12px !important;
39+
padding: 18px 12px 0 7px;
40+
}
41+
42+
.book {
43+
width: 100px;
44+
padding-left: 0px;
45+
padding-top: 22px;
46+
vertical-align: top;
47+
border-bottom: 0px;
48+
}
49+
.book-left img {
50+
margin-left: -5px;
51+
}
52+
.book-top img {
53+
padding-top: 5px;
54+
}
55+
56+
ul.listicon {
57+
list-style-type: none;
58+
margin-left: -20px;
59+
}
60+
61+
ul.listicon li {
62+
margin-left: 0;
63+
background: none !important;
64+
}
65+
66+
.plugins {
67+
padding: 10px;
68+
text-align: center;
69+
}
70+
71+
.resvideo,
72+
.restutorial,
73+
.respresentation,
74+
.resarticle {
75+
font-size: 11px;
76+
color: #fff;
77+
font-weight: bold;
78+
}
79+
.resvideo {
80+
background-color: #7acef4;
81+
}
82+
.restutorial {
83+
background-color: #faa523;
84+
}
85+
.resarticle {
86+
background-color: #3eb249;
87+
}
88+
.respresentation {
89+
background-color: #9c3493;
90+
}
91+
span.ressource {
92+
font-size: 12px;
93+
color: #888;
94+
}

0 commit comments

Comments
 (0)