mobile demo tweaks

Mottie · Apr 4, 2012 · f6c3edb · f6c3edb
1 parent 403ee62
commit f6c3edb
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 19 deletions.
diff --git a/css/keyboard.css b/css/keyboard.css
@@ -22,7 +22,7 @@
 
 /*** jQuery Mobile definitions ***/
 /* jQuery Mobile styles - need wider buttons because of font size and text-overflow:ellipsis */
-.ui-bar .ui-keyboard-button { width: 3em; }
+.ui-bar .ui-keyboard-button { width: 3em; display: inline-block; }
 .ui-bar .ui-keyboard-widekey { width: 5.5em; }
 .ui-bar .ui-keyboard-space { width: 15em; }
 .ui-bar .ui-keyboard-space span { visibility: hidden; } /* hides the ellipsis */

diff --git a/demo/demo.css b/demo/demo.css
@@ -69,7 +69,7 @@ textarea, input { width: 260px; background: #333; color: #ddd; border: #777 1px
 #info .key { font-weight: 700; color: #59b4d4; }
 .underline { text-decoration: underline; }
 
-#mobile #wrap { height: 500px; }
+#mobile #wrap { height: 200px; }
 #mobile #switcher { max-width: 920px; width: auto; margin: 0 auto; }
 #mobile #switcher .swatch { width: 180px; height: 80px; display: inline-block; margin: 0; }
 .oldie #switcher .ui-body { float: left; clear: none !important; }
@@ -82,8 +82,7 @@ textarea, input { width: 260px; background: #333; color: #ddd; border: #777 1px
 #mobile #switcher .ui-btn-text { position: relative; top: 2px; left: 5px; width: 10px; }
 
 #footer { height: 150px; }
-#footer2 { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 0; font-size: small; margin-bottom: 5px; text-align: center; }
-#footer2 div { margin: 0 auto; width: 650px; }
+#footer2 div { margin: 160px auto; width: 650px; text-align: center; }
 
 /* tooltip (jatt) */
 #tooltip {

diff --git a/mobile.html b/mobile.html
@@ -1,3 +1,4 @@
+
 <!DOCTYPE html>
 <html>
 <head>
@@ -109,13 +110,21 @@
 
 		<h1><a href="https://github.com/Mottie/Keyboard">Virtual Keyboard jQuery Mobile Themes</a></h1>
 		<h4>Until the jQurey Mobile Theme Roller is complete, use the color selections below to change the keyboard</h4>
-
+
+		<div id="wrap"> <!-- wrapper only needed to center the input -->
+
+			<!-- keyboard input -->
+			<label for="keyboard"></label>
+			<input id="keyboard" name="keyboard" type="text">
+
+		</div> <!-- End wrapper -->
+
 		<!-- Once jQuery Mobile Theme Roller is complete, add it here -->
 		<div id="switcher">
 
 			<div class="swatch" data-role="fieldcontain">
 				<fieldset data-role="controlgroup" data-type="horizontal">
-					<legend>Container</legend>
+					<legend>Container<br>(background)</legend>
 					<input type="radio" id="radio-ca" name="radio-c" class="custom" data-theme="a" checked><label for="radio-ca">A</label>
 					<input type="radio" id="radio-cb" name="radio-c" class="custom" data-theme="b"><label for="radio-cb">B</label>
 					<input type="radio" id="radio-cc" name="radio-c" class="custom" data-theme="c"><label for="radio-cc">C</label>
@@ -126,7 +135,7 @@ <h4>Until the jQurey Mobile Theme Roller is complete, use the color selections b
 
 			<div class="swatch" data-role="fieldcontain">
 				<fieldset data-role="controlgroup" data-type="horizontal">
-					<legend>Regular Buttons</legend>
+					<legend>Regular Buttons<br>(non-action)</legend>
 					<input type="radio" id="radio-ra" name="radio-r" class="custom" data-theme="a" checked><label for="radio-ra">A</label>
 					<input type="radio" id="radio-rb" name="radio-r" class="custom" data-theme="b"><label for="radio-rb">B</label>
 					<input type="radio" id="radio-rc" name="radio-r" class="custom" data-theme="c"><label for="radio-rc">C</label>
@@ -137,7 +146,7 @@ <h4>Until the jQurey Mobile Theme Roller is complete, use the color selections b
 
 			<div class="swatch" data-role="fieldcontain">
 				<fieldset data-role="controlgroup" data-type="horizontal">
-					<legend>Hovered Buttons</legend>
+					<legend>Hovered Buttons<br>(all)</legend>
 					<input type="radio" id="radio-ha" name="radio-h" class="custom" data-theme="a"><label for="radio-ha">A</label>
 					<input type="radio" id="radio-hb" name="radio-h" class="custom" data-theme="b"><label for="radio-hb">B</label>
 					<input type="radio" id="radio-hc" name="radio-h" class="custom" data-theme="c" checked><label for="radio-hc">C</label>
@@ -148,7 +157,7 @@ <h4>Until the jQurey Mobile Theme Roller is complete, use the color selections b
 
 			<div class="swatch" data-role="fieldcontain">
 				<fieldset data-role="controlgroup" data-type="horizontal">
-					<legend>Action Buttons</legend>
+					<legend>Action Buttons<br>(Enter)</legend>
 					<input type="radio" id="radio-aa" name="radio-a" class="custom" data-theme="a"><label for="radio-aa">A</label>
 					<input type="radio" id="radio-ab" name="radio-a" class="custom" data-theme="b" checked><label for="radio-ab">B</label>
 					<input type="radio" id="radio-ac" name="radio-a" class="custom" data-theme="c"><label for="radio-ac">C</label>
@@ -159,7 +168,7 @@ <h4>Until the jQurey Mobile Theme Roller is complete, use the color selections b
 
 			<div class="swatch" data-role="fieldcontain">
 				<fieldset data-role="controlgroup" data-type="horizontal">
-					<legend>Active Buttons</legend>
+					<legend>Active Buttons<br>(Shift down)</legend>
 					<input type="radio" id="radio-va" name="radio-v" class="custom" data-theme="a"><label for="radio-va">A</label>
 					<input type="radio" id="radio-vb" name="radio-v" class="custom" data-theme="b"><label for="radio-vb">B</label>
 					<input type="radio" id="radio-vc" name="radio-v" class="custom" data-theme="c"><label for="radio-vc">C</label>
@@ -170,15 +179,6 @@ <h4>Until the jQurey Mobile Theme Roller is complete, use the color selections b
 
 		</div>
 
-		<div id="wrap"> <!-- wrapper only needed to center the input -->
-
-			<!-- keyboard input -->
-			<label for="keyboard"></label>
-			<input id="keyboard" name="keyboard" type="text">
-
-		</div> <!-- End wrapper -->
-
-
 	<div id="footer2">
 		<div>
 		<span class="attn">* Note *</span> The "Active Buttons" setting is limited in that if the swatch letter of the Regular buttons is greater than the swatch letter of the Active Buttons, the theme doesn't apply properly. For example, Regular button swatch B with Active Button swatch A won't work because of the way the css is set up.