Skip to content

Commit dc64bf7

Browse files
arschmitzarschmitz
committed
Demos: Give more attention to 3rd party demos
Also cleans up the home page and menu to make better use of space Fixes jquery-archivegh-7377 Closes jquery-archivegh-8198
1 parent bfa24f7 commit dc64bf7

File tree

5 files changed

+433
-130
lines changed

5 files changed

+433
-130
lines changed

‎demos/_assets/css/jqm-demos.css‎

Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -78,14 +78,28 @@
7878
.jqm-demos .jqm-content > h3,
7979
.jqm-demos .jqm-content > p,
8080
.jqm-demos .jqm-content > ul li,
81-
.jqm-demos .jqm-content > a {
81+
.jqm-demos .jqm-content > a,
82+
.jqm-demos-intro h1,
83+
.jqm-demos-intro p {
8284
font-family: 'Open Sans', sans-serif;
8385
font-weight: 300;
8486
}
85-
.jqm-demos .jqm-content > h1 {
87+
.jqm-demos .jqm-content > h1,
88+
.jqm-demos-intro > h1 {
8689
font-size: 2.4em;
8790
margin: 0 0 .625em;
8891
}
92+
.jqm-demos-intro {
93+
width:65%;
94+
padding:2%;
95+
display: inline-block;
96+
vertical-align: top;
97+
}
98+
.jqm-demos-hero {
99+
width: 190px;
100+
float: left;
101+
margin-right: 2em;
102+
}
89103
.jqm-demos .jqm-content > h2 {
90104
color: #3eb249;
91105
background-color: transparent;
@@ -100,7 +114,8 @@
100114
font-size: 1.4em;
101115
margin: 0 0 1em;
102116
}
103-
.jqm-demos .jqm-content > p {
117+
.jqm-demos .jqm-content > p,
118+
.jqm-demos-intro > p {
104119
font-size: 1.2em;
105120
line-height: 1.5;
106121
}
@@ -132,12 +147,6 @@
132147
}
133148

134149
/* Homepage */
135-
.jqm-home > .jqm-content > img {
136-
width: 400px;
137-
max-width: 100%;
138-
display: block;
139-
margin: 2.5em 0;
140-
}
141150
.jqm-home .ui-grid-a {
142151
margin: 2.5em -.5em -.5em;
143152
}
@@ -313,16 +322,23 @@
313322
color: #fff;
314323
}
315324

325+
.jqm-3rd-party {
326+
background: rgba(62, 178, 73, .2);
327+
}
328+
329+
.jqm-3rd-party:after {
330+
content: "* 3rd Party Demo";
331+
position: absolute;
332+
top: .2em;
333+
right: .2em;
334+
font-size: .8em;
335+
}
336+
316337
@media (min-width: 60em) {
317338
.jqm-demos .jqm-header h2 {
318-
padding: 1em 0 .7em;
319339
margin: 0 1em 0 3%;
320340
text-align: left;
321341
}
322-
.jqm-demos .jqm-header h2 img {
323-
width: 275px;
324-
height: 78px;
325-
}
326342
.jqm-demos .jqm-header p {
327343
bottom: auto;
328344
left: auto;
@@ -427,7 +443,7 @@
427443
}
428444
@media (min-width: 35em) {
429445
.jqm-block-content {
430-
min-height: 18em;
446+
min-height: 10em;
431447
}
432448
}
433449

‎demos/index.php‎

Lines changed: 31 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -23,22 +23,18 @@
2323
</div><!-- /header -->
2424

2525
<div role="main" class="ui-content jqm-content">
26+
<img src="_assets/img/devices.png" class="jqm-demos-hero">
27+
<h1>Demos</h1>
2628

27-
<h1>Demos</h1>
28-
29-
<p><strong>jQuery Mobile is a touch-optimized HTML5 UI framework designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.</strong></p>
30-
31-
<img src="_assets/img/devices.png">
32-
33-
<p>New to jQuery Mobile? Get started by reading this <a href="intro/" data-ajax="false">introduction</a>. For technical info, visit the <a href="http://api.jquerymobile.com" title="jQuery Mobile API documentation" target="_blank">API documentation</a>. Downloads and info about the project can be found on <a href="http://jquerymobile.com" title="jQuery Mobile web site" target="_blank">jquerymobile.com</a>.</p>
29+
<p><strong>jQuery Mobile is a touch-optimized HTML5 UI framework designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.</strong></p>
3430

31+
<p>New to jQuery Mobile? Get started by reading this <a href="intro/" data-ajax="false">introduction</a>. For technical info, visit the <a href="http://api.jquerymobile.com" title="jQuery Mobile API documentation" target="_blank">API documentation</a>. Downloads and info about the project can be found on <a href="http://jquerymobile.com" title="jQuery Mobile web site" target="_blank">jquerymobile.com</a>.</p>
3532
<div class="ui-grid-a ui-responsive">
3633
<div class="ui-block-a">
3734
<div class="jqm-block-content">
3835
<h3>Pages &amp; Navigation</h3>
3936

40-
<p><a href="pages/" data-ajax="false">Pages</a></p>
41-
<p><a href="navigation/" data-ajax="false">Navigation</a></p>
37+
<p><a href="pages/" data-ajax="false">Pages</a>, <a href="navigation/" data-ajax="false">Navigation</a></p>
4238
<p><a href="loader/" data-ajax="false">Loader</a></p>
4339
<p><a href="transitions/" data-ajax="false">Transitions</a></p>
4440
</div>
@@ -47,37 +43,47 @@
4743
<div class="jqm-block-content">
4844
<h3>CSS Framework</h3>
4945

50-
<p><a href="theme-default/" data-ajax="false">Theming</a></p>
51-
<p><a href="button/" data-ajax="false">Buttons</a></p>
52-
<p><a href="icons/" data-ajax="false">Icons</a></p>
53-
<p><a href="grids/" data-ajax="false">Grids</a></p>
46+
<p><a href="theme-default/" data-ajax="false">Theming</a>, <a href="grids/" data-ajax="false">Grids</a></p>
47+
<p><a href="button/" data-ajax="false">Buttons</a>, <a href="icons/" data-ajax="false">Icons</a></p>
5448
<p><a href="../body-bar-classes/" data-ajax="false">Body and bar classes</a></p>
5549
</div>
56-
</div>
50+
</div>
5751
<div class="ui-block-a">
5852
<div class="jqm-block-content">
5953
<h3>Widgets</h3>
6054

61-
<p><a href="toolbar/" data-ajax="false">Toolbar</a>, <a href="navbar/" data-ajax="false">Navbar</a></p>
55+
<p><a href="toolbar/" data-ajax="false">Toolbar</a>, <a href="navbar/" data-ajax="false">Navbar</a>, <a href="controlgroup/" data-ajax="false">Controlgroup</a></p>
6256
<p><a href="tabs/" data-ajax="false">Tabs</a>, <a href="panel/" data-ajax="false">Panel</a>, <a href="popup/" data-ajax="false">Popup</a></p>
63-
<p><a href="listview/" data-ajax="false">Listview</a></p>
64-
<p><a href="collapsible/" data-ajax="false">Collapsible</a>, <a href="collapsibleset/" data-ajax="false">Collapsible set</a></p>
65-
<p><a href="table-reflow/" data-ajax="false">Table Reflow</a>, <a href="table-column-toggle/" data-ajax="false">Table Column Toggle</a></p>
66-
<p><a href="filterable/" data-ajax="false">Filterable</a></p>
57+
<p><a href="collapsible/" data-ajax="false">Collapsible</a>, <a href="collapsibleset/" data-ajax="false">Collapsible set</a>, <a href="filterable/" data-ajax="false">Filterable</a></p>
6758
</div>
6859
</div>
6960
<div class="ui-block-b">
7061
<div class="jqm-block-content">
71-
<h3>Form widgets</h3>
62+
<h3>Form Widgets</h3>
7263

73-
<p><a href="button/" data-ajax="false">Button</a></p>
74-
<p><a href="controlgroup/" data-ajax="false">Controlgroup</a></p>
75-
<p><a href="checkboxradio-checkbox/" data-ajax="false">Checkboxes</a>, <a href="checkboxradio-radio/" data-ajax="false">Radio buttons</a></p>
64+
<p><a href="button/" data-ajax="false">Button</a>, <a href="slider/" data-ajax="false">Slider</a>, <a href="rangeslider/" data-ajax="false">Rangeslider</a></p>
65+
<p><a href="flipswitch/" data-ajax="false">Flipswitch</a>, <a href="checkboxradio-checkbox/" data-ajax="false">Checkboxes</a>, <a href="checkboxradio-radio/" data-ajax="false">Radio buttons</a></p>
7666
<p><a href="selectmenu/" data-ajax="false">Selectmenu</a>, <a href="selectmenu-custom/" data-ajax="false">Custom menu</a></p>
77-
<p><a href="flipswitch/" data-ajax="false">Flipswitch</a></p>
78-
<p><a href="slider/" data-ajax="false">Slider</a>, <a href="rangeslider/" data-ajax="false">Rangeslider</a></p>
7967
</div>
8068
</div>
69+
<div class="ui-block-a">
70+
<div class="jqm-block-content">
71+
<h3>3rd Party Integrations</h3>
72+
73+
<p><a href="../datepicker/" data-ajax="false">Datepicker</a>, <a href="../listview-nested-lists/" data-ajax="false">Nested Listviews</a></p>
74+
<p><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></p>
75+
<p><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a>, <a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></p>
76+
<p></p>
77+
</div>
78+
</div>
79+
<div class="ui-block-b">
80+
<div class="jqm-block-content">
81+
<h3>Lists and Tables</h3>
82+
83+
<p><a href="listview/" data-ajax="false">Listview</a>, <a href="../listview-collapsible-item-flat/" data-ajax="false">Collapsible Listview</a></p>
84+
<p><a href="table-reflow/" data-ajax="false">Table Reflow</a>, <a href="table-column-toggle/" data-ajax="false">Table Column Toggle</a></p>
85+
</div>
86+
</div>
8187
</div>
8288

8389
</div><!-- /content -->

0 commit comments

Comments
 (0)