1.0 Stable Release

Enhancement: Updated XML files for PhoneGap 1.9.0 support Bug fix: toolbar item positioning Bug fix: CSS segmented button problems Bug fix: transition jerky movements Enhancement: Added hidef icons for Retina screen iPhone submitions
toddwprice · Jul 4, 2012 · 7c466b8 · 7c466b8
1 parent 2625170
commit 7c466b8
Show file tree

Hide file tree

Showing 29 changed files with 447 additions and 71 deletions.
diff --git a/cache.manifest b/cache.manifest
@@ -0,0 +1,81 @@
+CACHE MANIFEST
+./includes/jsTouch.js
+./includes/jquery.js
+./includes/iscroll.js
+./includes/cache.js
+./index.html
+./pages/test.php
+./pages/buttons.html
+./pages/tabs-tab4.html
+./pages/tabs.html
+./pages/forms_save.php
+./pages/home.html
+./pages/overlay-buttons.html
+./pages/tabs-tab3.html
+./pages/list-edgetoedge.html
+./pages/animations.html
+./pages/lists.html
+./pages/tabs-tab2.html
+./pages/overlays.html
+./pages/about.html
+./pages/forms.html
+./pages/tabs-tab1.html
+./pages/tabs-tab5.html
+./pages/overlay-msg2.html
+./pages/list-rounded.html
+./pages/overlay-list.html
+./pages/overlay-msg.html
+./pages/themes.html
+./w2touch-r1.zip
+./config.xml
+./cache.manifest
+./css/ipad-light.css
+./css/apple.css
+./css/core.css
+./css/ipad-dark.css
+./index.js
+./images/iphone_startup_p.png
+./images/iphone_startup_l.png
+./images/dark-linen.jpg
+./images/on_off.png
+./images/iphone_startup_2x.png
+./images/iphone4.png
+./images/iphone_icon_2x.png
+./images/iphone_icon.png
+./images/tabs/mute.png
+./images/tabs/play-back.png
+./images/tabs/person.png
+./images/tabs/go-right.png
+./images/tabs/flag.png
+./images/tabs/tag.png
+./images/tabs/guitar.png
+./images/tabs/sound-loud.png
+./images/tabs/note.png
+./images/tabs/play-pause.png
+./images/tabs/cloud.png
+./images/tabs/phone.png
+./images/tabs/unlock.png
+./images/tabs/music.png
+./images/tabs/tag2.png
+./images/tabs/search.png
+./images/tabs/lock.png
+./images/tabs/bright-light.png
+./images/tabs/bright-dark.png
+./images/tabs/clock.png
+./images/tabs/wizard.png
+./images/tabs/aim.png
+./images/tabs/delete.png
+./images/tabs/camera.png
+./images/tabs/play.png
+./images/tabs/passforward.png
+./images/tabs/go-left.png
+./images/tabs/info.png
+./images/tabs/heart.png
+./images/tabs/pause.png
+./images/tabs/sound-normal.png
+./images/tabs/rewind.png
+./images/stripes.png
+./images/web20-touch.xar
+./images/on_off_ios5.png
+./images/iphone_startup.png
+# hash: 8426351aa8c59ae750b8725e0c777baa
diff --git a/config.xml b/config.xml
@@ -4,7 +4,7 @@
 	id			= "Web20TouchDemo"
 	version 	= "1.0">
 
-	<name>Web 2.0 Touch Demo</name>
+	<name>W2touch Demo</name>
 
 	<description>
 		A demo application for Web 2.0 Touch framework. You can fork it on github 
@@ -14,8 +14,21 @@
 	<author href="http://web20boom.com"	email="[email protected]">
 		Vitali Malinouski
 	</author>
+
+	<preference name="phonegap-version" value="1.8.1" />
+	<preference name="orientation" value="default" />
+	<preference name="target-device" value="universal" />
+	<preference name="fullscreen" value="false" />
+	<preference name="webviewbounce" value="false" />
+	<preference name="ios-statusbarstyle" value="black-opaque" />'
 
-	<icon src="images/iphone_icon.png" gap:role="default" />
-	<gap:splash src="images/iphone_startup.png" gap:role="default" />
+	<icon src="images/iphone_icon.png" width="57" height="57" />
+	<icon src="images/iphone_icon2.png" gap:platform="ios" width="72" height="72" />
+	<icon src="images/iphone_icon_2x.png" width="114" height="114" />
+
+	<gap:splash src="images/iphone_startup.png" width="320" height="480" />
+	<gap:splash src="images/iphone_startup_2x.png" width="640" height="960" />
+	<gap:splash src="images/iphone_startup_l.png" width="1024" height="768" />
+	<gap:splash src="images/iphone_startup_p.png" width="768" height="1024" />
 
-</widget>
+</widget> 
diff --git a/css/apple.css b/css/apple.css
@@ -71,9 +71,6 @@ div.jsTouch div.toolbar h1{
 /* BLACK BUTTON WITH BLUE OVERLAY */
 
 .button	{
-	position: relative;
-	top: -26px;
-	float: right;
 	color: #fff;
 	text-decoration: none;
 	display: inline-block;
@@ -104,10 +101,10 @@ div.jsTouch div.toolbar h1{
 	-webkit-background-clip: content;
 }
 
-.button.back {
-	float: left;
-	padding-left: 5px;
-	margin-left: 8px;
+.button.back, .button.left {
+	position: absolute;
+	left: 12px;
+	top: 8px;
 }
 
 .back > span.s2 {
@@ -138,17 +135,16 @@ div.jsTouch div.toolbar h1{
 	-webkit-mask-position-y: 0px;
 	-webkit-mask-clip: border;
 	-webkit-box-sizing: border-box;	
-	-webkit-box-shadow: 0px 1px 0px #bbb;
 }	
 
 .back.clicked > span.s2 {
 	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#7AD62B),  to(#56961E));
 }
 
-.button.next {
-	float: right;
-	padding-right: 5px;
-	margin-right: 8px;
+.button.next, .button.right {
+	position: absolute;
+	right: 12px;
+	top: 8px;
 }
 
 .next > span.s2 {
@@ -179,7 +175,6 @@ div.jsTouch div.toolbar h1{
 	-webkit-mask-position-y: 0px;
 	-webkit-mask-clip: border;
 	-webkit-box-sizing: border-box;	
-	-webkit-box-shadow: 0px 1px 0px #bbb;
 }	
 
 .next.clicked > span.s2 {

diff --git a/css/core.css b/css/core.css
@@ -3,6 +3,7 @@ body {
 	padding: 0px;
 	overflow: hidden;
 	//-webkit-user-select: none;
+	box-sizing: border-box;
 }
 .icon {
 	padding: 0px; 
@@ -158,7 +159,8 @@ div.overlay .toolbar > span.arrow {
 }
 
 div.overlay .toolbar .button {
-	top: -43px;
+	border: 1px solid #222;
+	box-shadow: 0px 1px 0px #888;
 }
 
 div.overlay .footer {
@@ -381,33 +383,32 @@ div.jsTouch div.content input {
 }
 
 div.jsTouch div.content span.toggle {
-	width: 94px;
+	width: 70px;
 	height: 27px;
 	display: block;
 	overflow: hidden;
 	float: right;
-	margin-top: -3px;
-	margin-bottom: -3px;
-	-moz-border-radius: 5px;
-	-webkit-border-radius: 5px;
+	margin: 0px -3px;
+	-webkit-border-radius: 20px;
+	-moz-border-radius: 20px;
 }
 
 div.jsTouch div.content span.toggle input[type=checkbox]:checked {
-	margin-left: 0px;
+	margin-left: -2px;
 }
 
 div.jsTouch div.content span.toggle input[type=checkbox] {
-	background: #fff url(../images/on_off.png) 0 0 no-repeat;
+	background: #fff url(../images/on_off_ios5.png) 0 0 no-repeat;
 	height: 28px;
 	margin: 0;
-	margin-left: -55px;
-	width: 150px;
+	margin-left: -48px;
+	width: 120px;
 	-moz-appearance: none;
-	-moz-border-radius: 5px;
+	-moz-border-radius: 20px;
 	-moz-tap-highlight-color: rgba(0,0,0,0);
 	-moz-transition: margin .15s;
 	-webkit-appearance: textarea;
-	-webkit-border-radius: 5px;
+	-webkit-border-radius: 20px;
 	-webkit-tap-highlight-color: rgba(0,0,0,0);
 	-webkit-transition: margin .15s;
 }
diff --git a/css/ipad-dark.css b/css/ipad-dark.css
@@ -67,12 +67,75 @@ div.jsTouch div.toolbar h1{
 	text-align: center;
 }
 
-/* BLACK BUTTON WITH BLUE OVERLAY */
+/* BLACK BUTTON WITH GREEN OVERLAY */
 
-.button	{
-	position: relative;
-	top: -26px;
+/*
+.button {
+	position: absolute;
+	top: 8px;
+	color: #fff;
+	text-decoration: none;
+	display: inline-block;
+	padding: 4px 10px;
+	-webkit-border-radius: 5px;
+	font-family:  Helvetica, Arial, sans-serif;
+	font-size: 13px;
+	font-weight: bold;
+	cursor: pointer;
+	margin: 0 1px;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);	
+	background: -webkit-gradient(linear, left top, left bottom, from(#A6A6A6), to(#B5B5B5), color-stop(.5,#7A7A7A),color-stop(.5,#5C5C5C));
+	border: 1px solid #222222;
+	-webkit-box-shadow: 0px 1px 0px #666666;
+	height: 17px;
+	text-shadow: #444444 1px 1px 1px;
+}
+
+.button.clicked {
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#7AD62B), to(#56961E));
+}
+
+.button:before {
+	content: "";
+	height: 18px;
+	width: 18px;
+	display: block;
+	-webkit-background-clip: content;
+	background: -webkit-gradient(linear, left top, right bottom, from(#A6A6A6), to(#B5B5B5), color-stop(.45,#7A7A7A), color-stop(.45,#5C5C5C));
+	border-bottom: 1px solid #222222;
+	border-left: 1px solid #222222;
+}
+
+.button.clicked:before {
+	background-image: -webkit-gradient(linear, left top, right bottom, from(#7AD62B), to(#56961E));
+}
+
+.button.back {
+	left: 15px;
+}
+
+.button.back:before {
+	float: left;
+	margin-top: -1px;
+	margin-left: -18px;
+	-webkit-transform: rotate(45deg);
+	-webkit-box-shadow: 0px 1px 0px #666666;
+}
+
+.button.next {
+	right: 15px;
+}
+
+.button.next:before {
 	float: right;
+	margin-top: -1px;
+	margin-right: -18px;
+	-webkit-transform: rotate(-135deg);
+	-webkit-box-shadow: -1px 0px 0px #666666;
+}
+*/
+
+.button	{
 	color: #fff;
 	text-decoration: none;
 	display: inline-block;
@@ -104,10 +167,10 @@ div.jsTouch div.toolbar h1{
 	-webkit-background-clip: content;
 }
 
-.button.back {
-	float: left;
-	padding-left: 5px;
-	margin-left: 8px;
+.button.back, .button.left {
+	position: absolute;
+	left: 12px;
+	top: 8px;
 }
 
 .back > span.s2 {
@@ -138,17 +201,16 @@ div.jsTouch div.toolbar h1{
 	-webkit-mask-position-y: 0px;
 	-webkit-mask-clip: border;
 	-webkit-box-sizing: border-box;	
-	-webkit-box-shadow: 0px 1px 0px #bbb;
 }	
 
 .back.clicked > span.s2 {
 	background-image: -webkit-gradient(linear, left top, right bottom, from(#7AD62B),  to(#56961E));
 }
 
-.button.next {
-	float: right;
-	padding-right: 5px;
-	margin-right: 8px;
+.button.next, .button.right {
+	position: absolute;
+	right: 12px;
+	top: 8px;
 }
 
 .next > span.s2 {
@@ -179,7 +241,6 @@ div.jsTouch div.toolbar h1{
 	-webkit-mask-position-y: 0px;
 	-webkit-mask-clip: border;
 	-webkit-box-sizing: border-box;	
-	-webkit-box-shadow: 0px 1px 0px #bbb;
 }	
 
 .next.clicked > span.s2 {