Skip to content

Commit

Permalink
Resources: move inline styles to an external CSS file for CSP
Browse files Browse the repository at this point in the history
  • Loading branch information
timmywil committed Oct 20, 2024
1 parent a0e3170 commit 17e144e
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 80 deletions.
10 changes: 5 additions & 5 deletions pages/download.html
Original file line number Diff line number Diff line change
Expand Up @@ -49,11 +49,11 @@ <h3>1.4.5</h3>
<li><a href="https://www.asp.net/ajaxLibrary/CDN.ashx#jQuery_Mobile_Releases_on_the_CDN_4">Microsoft CDN &#8211; jQuery Mobile</a></li>
</ul>

<hr>
<hr />

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

<br>
<br />

<h3>1.3.2</h3>

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

<br>
<br />

<h3>1.2.1</h3>

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

<br>
<br />

<h3>1.1.2</h3>

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

<br>
<br />

<h3>1.0.1</h3>

Expand Down
94 changes: 19 additions & 75 deletions pages/resources.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,56 +2,12 @@
"title": "Resources"
}</script>

<style>
table.featuredsites { }
table.featuredsites td { padding-top:32px; text-align:center; }
table.featuredsites td img { margin-bottom:6px; }
table.featuredsites td.featured {
font-size: 12px;
vertical-align: top;
}

.booktable {
margin: -20px;
padding-top: 10px;
border: 0 none !important;
}

.title {
width: 140px;
line-height: 135%;
vertical-align: top;
font-size: 12px !important;
padding:18px 12px 0 7px;
}

.book {
width: 100px;
padding-left: 0px;
padding-top: 22px;
vertical-align: top;
border-bottom: 0px;
}

ul.listicon {
list-style-type: none;
margin-left: -20px;
}

ul.listicon li {
margin-left: 0;
background: none !important;
}
.plugins {
padding: 10px;
text-align: center;
}
</style>
<link rel="stylesheet" href="/resources/resources.css" />

<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>

<hr>
<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>
<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>

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

Expand Down Expand Up @@ -109,13 +65,13 @@ <h3 style="font-size: 14px !important; color: #ddd; padding-bottom: 20px; border
<figcaption>Greyhound</figcaption>
</figure>
</div>
<hr style="clear: both;">
<hr class="clear" />
<a id="Books"></a><h2>Books</h2>
<table style="width:100%;" >
<table class="bookstable">
<tr class="booktable">
<td class="book"><img src="/resources/books/jqmWebDevEssentials.jpg" width="105" style="margin-left:-5px" /></td>
<td class="book book-left"><img src="/resources/books/jqmWebDevEssentials.jpg" width="105" /></td>
<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>
<td class="book"><img src="/resources/books/MasteringjQueryMobile.jpg" width="105" style="margin-left:-5px" /></td>
<td class="book book-left"><img src="/resources/books/MasteringjQueryMobile.jpg" width="105" /></td>
<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>
<td class="book"><img src="/resources/books/master-mobile-web-apps-with-jqm.png" width="95" /></td>
<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>
Expand All @@ -133,25 +89,25 @@ <h3 style="font-size: 14px !important; color: #ddd; padding-bottom: 20px; border
<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>
<td class="book"><img src="/resources/books/CSS3MobilePack.jpeg" width="95" /></td>
<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>
<td class="book"><img src="/resources/books/41XeY6Pua+L._SL500_AA300_.jpg" width="105" style="margin-left:-5px" /></td>
<td class="book book-left"><img src="/resources/books/41XeY6Pua+L._SL500_AA300_.jpg" width="105" /></td>
<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>
</tr>
<tr class="booktable">
<td class="book"><img src="/resources/books/41GwwjDaEsL._SL500_AA300_.jpg" width="105" style="margin-left:-5px; padding-top:5px;" /></td>
<td class="book book-left book-top"><img src="/resources/books/41GwwjDaEsL._SL500_AA300_.jpg" width="105" /></td>
<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>
<td class="book"><img src="/resources/books/jqm_develop_and_design.jpg" width="105" style="margin-left:-5px" /></td>
<td class="book book-left"><img src="/resources/books/jqm_develop_and_design.jpg" width="105" /></td>
<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>
<td class="book"><img src="/resources/books/jqm_in_24_hours.jpg" width="95" style="margin-left:-5px" /></td>
<td class="book book-left"><img src="/resources/books/jqm_in_24_hours.jpg" width="95" /></td>
<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>
</tr>
<tr class="booktable">
<td class="book"><img src="/resources/books/creating_mobile_apps.png" width="105" style="margin-left:-5px" /></td>
<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>
<td class="book"><img src="/resources/books/mobile-app-manual-the-blueprint.jpg" width="95" style="margin-left:-5px" /></td>
<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>
<td class="book book-left"><img src="/resources/books/creating_mobile_apps.png" width="105" /></td>
<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>
<td class="book book-left"><img src="/resources/books/mobile-app-manual-the-blueprint.jpg" width="95" /></td>
<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>
</tr>
</table>
<hr style="clear: both;">
<hr class="clear" />
<a id="Apps"></a><h2>Apps &amp; frameworks</h2>
<ul class="listicon">
<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>
Expand Down Expand Up @@ -184,7 +140,7 @@ <h3 style="font-size: 14px !important; color: #ddd; padding-bottom: 20px; border
<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>
<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>
</ul>
<hr style="clear: both;">
<hr class="clear" />
<a name="Plugins"></a>
<h2>3rd party plugins</h2>
<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>
Expand Down Expand Up @@ -275,7 +231,7 @@ <h2>3rd party plugins</h2>
</figure>
</div>

<hr style="clear: both;">
<hr class="clear" />
<a name="Extensions"></a>
<h2>3rd party extensions</h2>
<p>These are 3rd Party extensions that add capabilities to existing functionality.</p>
Expand All @@ -300,7 +256,7 @@ <h2>3rd party extensions</h2>
<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>
<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>
</ul>
<hr style="clear: both;">
<hr class="clear" />
<a id="Tools"></a>
<h2>Tools</h2>
<ul>
Expand All @@ -309,7 +265,7 @@ <h2>Tools</h2>
<li><a href="http://jquerymobile.com/test/tools/log-page-events.html">bookmarklet for debugging jQueryMobile page navigation problems</a></li>
<li><a href="http://zsprawl.com/iOS/zapps/jqm-reference/">jQuery Mobile Reference 1.1.0 zApp 3.0</a></li>
</ul>
<hr style="clear: both;">
<hr class="clear" />
<a id="Themes"></a>
<h2>Themes</h2>
<ul>
Expand All @@ -324,18 +280,6 @@ <h2>Themes</h2>
<li><a href="http://nativedroid.godesign.ch/">Native Droid Theme</a></li>
</ul>
<hr>
<style>
.resvideo,
.restutorial,
.respresentation,
.resarticle { font-size:11px; color:#fff; font-weight:bold; }
.resvideo { background-color:#7ACEF4; }
.restutorial { background-color:#FAA523; }
.resarticle { background-color:#3EB249; }
.respresentation { background-color:#9C3493; }
span.ressource { font-size:12px; color:#888; }
</style>

<a id="Articles"></a>
<h2>Articles &amp; Tutorials</h2>
<ul>
Expand Down
94 changes: 94 additions & 0 deletions resources/resources.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
#resources-header {
font-size: 14px !important;
color: #ddd;
padding-bottom: 20px;
border-bottom: 1px solid #ccc;
line-height: 170%;
}
.clear {
clear: both;
}

table.featuredsites td {
padding-top: 32px;
text-align: center;
}
table.featuredsites td img {
margin-bottom: 6px;
}
table.featuredsites td.featured {
font-size: 12px;
vertical-align: top;
}

.bookstable {
width: 100%;
}

.booktable {
margin: -20px;
padding-top: 10px;
border: 0 none !important;
}

.title {
width: 140px;
line-height: 135%;
vertical-align: top;
font-size: 12px !important;
padding: 18px 12px 0 7px;
}

.book {
width: 100px;
padding-left: 0px;
padding-top: 22px;
vertical-align: top;
border-bottom: 0px;
}
.book-left img {
margin-left: -5px;
}
.book-top img {
padding-top: 5px;
}

ul.listicon {
list-style-type: none;
margin-left: -20px;
}

ul.listicon li {
margin-left: 0;
background: none !important;
}

.plugins {
padding: 10px;
text-align: center;
}

.resvideo,
.restutorial,
.respresentation,
.resarticle {
font-size: 11px;
color: #fff;
font-weight: bold;
}
.resvideo {
background-color: #7acef4;
}
.restutorial {
background-color: #faa523;
}
.resarticle {
background-color: #3eb249;
}
.respresentation {
background-color: #9c3493;
}
span.ressource {
font-size: 12px;
color: #888;
}

0 comments on commit 17e144e

Please sign in to comment.