Better mobile support for preview client

Matt Karl · Matt Karl · commit 01e5c132b5c5 · 2015-08-26T17:09:25.000-04:00
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
 	"name": "SpringRollStudio",
-	"version": "0.2.12",
+	"version": "0.2.13",
 	"private": true,
 	"dependencies": {
 		"jqueryui": "*",
diff --git a/deploy/package.json b/deploy/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "SpringRollStudio",
 	"description": "Application for SpringRoll projects",
-	"version": "0.2.12",
+	"version": "0.2.13",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/SpringRoll/SpringRollStudio"
diff --git a/installer/win32.nsi b/installer/win32.nsi
@@ -4,7 +4,7 @@
 # These three must be integers
 !define VERSIONMAJOR 0
 !define VERSIONMINOR 2
-!define VERSIONBUILD 12
+!define VERSIONBUILD 13
 # These will be displayed by the "Click here for support information" link in "Add/Remove Programs"
 # It is possible to use "mailto:" links in here to open the email client
 !define HELPURL "https://github.com/SpringRoll/SpringRollStudio/issues"
diff --git a/installer/win64.nsi b/installer/win64.nsi
@@ -4,7 +4,7 @@
 # These three must be integers
 !define VERSIONMAJOR 0
 !define VERSIONMINOR 2
-!define VERSIONBUILD 12
+!define VERSIONBUILD 13
 # These will be displayed by the "Click here for support information" link in "Add/Remove Programs"
 # It is possible to use "mailto:" links in here to open the email client
 !define HELPURL "https://github.com/SpringRoll/SpringRollStudio/issues"
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "SpringRollStudio",
 	"private": true,
-	"version": "0.2.12",
+	"version": "0.2.13",
 	"dependencies": {
 		"grunt": "^0.4.5",
 		"grunt-appdmg": "^0.3.1",
diff --git a/project.json b/project.json
@@ -1,6 +1,6 @@
 {
 	"name": "SpringRollStudio",
-	"version": "0.2.12",
+	"version": "0.2.13",
 	"main": [
 		"components/node-webkit-app/src/utils/UpdateChecker.js",
 		"components/node-webkit-app/src/utils/Browser.js",
diff --git a/src/jade/preview-client.jade b/src/jade/preview-client.jade
@@ -5,13 +5,16 @@ html
 		meta(charset='utf-8')
 		title Preview
 		include partials/libraries
+		meta(name="apple-mobile-web-app-capable" content="yes")
+		meta(name="apple-touch-fullscreen" content="yes")
 		
 		block head
 
 			link(href='assets/css/shared.css', rel='stylesheet')
 			link(href='assets/css/preview.css', rel='stylesheet')
 			script(src='assets/js/preview-client.js')
-			meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0")
+			meta(name="viewport" content="minimal-ui, width=device-width, initial-scale=1.0, maximum-scale=1.0")
+				
 	body(class=bodyClass)
 		#frame.loading.show-title.show-controls
 			block frame
@@ -23,9 +26,9 @@ html
 						|  Resume
 			#appTitle Loading...
 			.controls.text-right
-				button#helpButton.btn.btn-primary.main.disabled(data-toggle='tooltip', title='Play Help')
+				button#helpButton.btn.btn-primary.main.disabled(data-placement='bottom', data-toggle='tooltip', title='Play Help')
 					span.icon.icon-help
-				button#soundButton.btn.btn-primary.main.muted.disabled(data-toggle='tooltip', title='Toggle All Sounds')
+				button#soundButton.btn.btn-primary.main.muted.disabled(data-placement='bottom', data-toggle='tooltip', title='Toggle All Sounds')
 					span.icon.icon-sound.on
 					span.icon.icon-sound-off.off
 				button#soundToggle.btn.btn-primary.main.drop-handle.disabled(data-toggle-div='#soundContexts')
@@ -51,7 +54,7 @@ html
 							span.icon.icon-vo-off.off
 							span.label.on Voice-Over On
 							span.label.off Voice-Over Off						
-				button#captionsButton.btn.btn-primary.main.muted.disabled(data-toggle='tooltip', title='Toggle Captions')
+				button#captionsButton.btn.btn-primary.main.muted.disabled(data-placement='bottom', data-toggle='tooltip', title='Toggle Captions')
 					span.icon.icon-captions.on
 					span.icon.icon-captions-off.off
 				button#captionsToggle.btn.btn-primary.main.drop-handle.disabled(data-toggle-div='#captionsStyles')
@@ -63,12 +66,12 @@ html
 						| Captions Style
 					.form-group
 						label.col-xs-4.control-label Align
-						.col-xs-8: select.form-control(name='align')
+						.col-xs-8: select.pause-on-focus.form-control(name='align')
 							option(value='top', selected='') Top
 							option(value='bottom') Bottom
 					.form-group
 						label.col-xs-4.control-label Text Color
-						.col-xs-8: select.form-control(name='color')
+						.col-xs-8: select.pause-on-focus.form-control(name='color')
 							option(value='white', selected='') White
 							option(value='white-semi') White (50%)
 							option(value='black') Black
@@ -81,7 +84,7 @@ html
 							option(value='blue-semi') Blue (50%)
 					.form-group
 						label.col-xs-4.control-label Background Color
-						.col-xs-8: select.form-control(name='background')
+						.col-xs-8: select.pause-on-focus.form-control(name='background')
 							option(value='none') [None]
 							option(value='white') White
 							option(value='white-semi') White (50%)
@@ -95,23 +98,23 @@ html
 							option(value='blue-semi') Blue (50%)
 					.form-group
 						label.col-xs-4.control-label Edge Style
-						.col-xs-8: select.form-control(name='edge')
+						.col-xs-8: select.pause-on-focus.form-control(name='edge')
 							option(value='none', selected='') [None]
 							option(value='raise') Beveled Up
 							option(value='depress') Beveled Down
 							option(value='uniform') Stroke
 							option(value='drop') Drop Shadow
 					.form-group
 						label.col-xs-4.control-label Size
-						.col-xs-8: select.form-control(name='size')
+						.col-xs-8: select.pause-on-focus.form-control(name='size')
 							option(value='xs') Extra Small
 							option(value='sm') Small
 							option(value='md', selected='') Medium
 							option(value='lg') Large
 							option(value='xl') Extra Large
 					.form-group
 						label.col-xs-4.control-label Font
-						.col-xs-8: select.form-control(name='font')
+						.col-xs-8: select.pause-on-focus.form-control(name='font')
 							option(value='arial', selected='') Arial
 							option(value='arial-black') Arial Black
 							option(value='comic-sans') Comic Sans MS
@@ -125,7 +128,7 @@ html
 							option(value='times') Times New Roman
 							option(value='trebuchet') Trebuchet MS
 							option(value='verdana') Verdana						
-				button#settingsButton.btn.btn-primary.main.disabled(data-toggle-div='#settings', data-toggle='tooltip', title='Logging Service')
+				button#settingsButton.btn.btn-primary.main.disabled(data-toggle-div='#settings', data-placement='bottom', data-toggle='tooltip', title='Logging Service')
 					span.icon.icon-gear
 				form#settings.drop-down.form.form-horizontal
 					.form-group.form-title
@@ -134,15 +137,15 @@ html
 						| Logging Service
 					.form-group
 						label.col-xs-4.control-label Host or IP
-						.col-xs-8: input.form-control#remoteHost(type='text', name='remoteHost')
+						.col-xs-8: input.pause-on-focus.form-control#remoteHost(type='text', name='remoteHost')
 					.form-group
 						label.col-xs-4.control-label Channel Name
-						.col-xs-8: input.form-control#remoteChannel(type='text', name='remoteChannel')
+						.col-xs-8: input.pause-on-focus.form-control#remoteChannel(type='text', name='remoteChannel')
 					.form-group.text-center
 						.col-xs-8.col-xs-offset-4
 							button#remoteConnect.btn.btn-primary.btn-block.disabled(data-toggle-div='#settings')
 								| Connect
-				button#pauseButton.btn.btn-primary.main.unpaused.disabled(data-toggle='tooltip', title='Play/Pause')
+				button#pauseButton.btn.btn-primary.main.unpaused.disabled(data-placement='bottom', data-toggle='tooltip', title='Play/Pause')
 					span.icon.icon-pause.on
 					span.icon.icon-play.off
 
diff --git a/src/jade/preview.jade b/src/jade/preview.jade
@@ -12,7 +12,7 @@ block frame
 	#browserLink
 
 block controls
-	button#refreshButton.btn.btn-primary.main(data-toggle='tooltip', title='Reload')
+	button#refreshButton.btn.btn-primary.main(data-placement='bottom', data-toggle='tooltip', title='Reload')
 		span.glyphicon.glyphicon-refresh
-	button#devToolsButton.btn.btn-primary.main(data-toggle='tooltip', title='Toggle Console')
+	button#devToolsButton.btn.btn-primary.main(data-placement='bottom', data-toggle='tooltip', title='Toggle Console')
 		span.glyphicon.glyphicon-list
diff --git a/src/js/preview/PreviewContainer.js b/src/js/preview/PreviewContainer.js
@@ -147,9 +147,7 @@
 		if (!Features.touch)
 		{
 			// Turn on the tooltips
-			$('[data-toggle="tooltip"]').tooltip({
-				placement: 'bottom'
-			});
+			$('[data-toggle="tooltip"]').tooltip();
 		}
 
 		// Turn off the tool tip for the help button initially
@@ -242,9 +240,7 @@
 		var helpButton = this.helpButton;
 		if (enabled)
 		{
-			helpButton.tooltip({
-				placement: 'bottom'
-			});
+			helpButton.tooltip();
 		}
 		else
 		{
diff --git a/src/less/preview/Preview.less b/src/less/preview/Preview.less
@@ -2,7 +2,6 @@
 @import 'preview-mixins';
 
 @uiHeight: 40px;
-@uiHeightSmall: 80px;
 @smBreak: 500px;
 
 * {
@@ -62,11 +61,27 @@ body {
 		}
 	}
 	@media screen and (max-width: @smBreak) {
-		width:100%;
-		margin-left:0;
+		.scrollDropDowns();
+	}
+	.touch & {
+		.scrollDropDowns();
 	}
 }
 
+.scrollDropDowns()
+{
+	width:100%;
+	margin-left:0;
+	position:fixed;
+	top:@uiHeight;
+	bottom:0;
+	left:0;
+	right:0;
+	overflow: auto;
+	overflow-x: hidden;
+	-webkit-overflow-scrolling: touch;
+}
+
 #pausedScreen {
 	z-index: 2;
 	position: fixed;
@@ -137,15 +152,9 @@ body {
 		}
 		#pausedScreen {
 			top:@uiHeight;
-			@media screen and (max-width: @smBreak) {
-				top:@uiHeightSmall;
-			}
 		}
 		.appWrapper {
 			top:@uiHeight;
-			@media screen and (max-width: @smBreak) {
-				top:@uiHeightSmall;
-			}
 		}
 	}
 	.controls {
@@ -216,7 +225,6 @@ body {
 		.paused .on,
 		.muted .on { display:none !important }
 		@media screen and (max-width: @smBreak) {
-			top:@uiHeight;
 			width:100%;
 		}
 	}
@@ -232,6 +240,9 @@ body {
 	.show-title & {
 		display:block;
 	}
+	@media screen and (max-width: @smBreak) {
+		display:none !important;
+	}
 }
 
 .appWrapper {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "SpringRollStudio",`
`3`		`- "version": "0.2.12",`
	`3`	`+ "version": "0.2.13",`
`4`	`4`	`"private": true,`
`5`	`5`	`"dependencies": {`
`6`	`6`	`"jqueryui": "*",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "SpringRollStudio",`
`3`	`3`	`"description": "Application for SpringRoll projects",`
`4`		`- "version": "0.2.12",`
	`4`	`+ "version": "0.2.13",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`
`7`	`7`	`"url": "https://github.com/SpringRoll/SpringRollStudio"`
Original file line number	Diff line number	Diff line change
`@@ -147,9 +147,7 @@`
`147`	`147`	`if (!Features.touch)`
`148`	`148`	`{`
`149`	`149`	`// Turn on the tooltips`
`150`		`- $('[data-toggle="tooltip"]').tooltip({`
`151`		`- placement: 'bottom'`
`152`		`- });`
	`150`	`+ $('[data-toggle="tooltip"]').tooltip();`
`153`	`151`	`}`
`154`	`152`
`155`	`153`	`// Turn off the tool tip for the help button initially`
`@@ -242,9 +240,7 @@`
`242`	`240`	`var helpButton = this.helpButton;`
`243`	`241`	`if (enabled)`
`244`	`242`	`{`
`245`		`- helpButton.tooltip({`
`246`		`- placement: 'bottom'`
`247`		`- });`
	`243`	`+ helpButton.tooltip();`
`248`	`244`	`}`
`249`	`245`	`else`
`250`	`246`	`{`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,6 @@`
`2`	`2`	`@import 'preview-mixins';`
`3`	`3`
`4`	`4`	`@uiHeight: 40px;`
`5`		`-@uiHeightSmall: 80px;`
`6`	`5`	`@smBreak: 500px;`
`7`	`6`
`8`	`7`	`* {`
`@@ -62,11 +61,27 @@ body {`
`62`	`61`	`}`
`63`	`62`	`}`
`64`	`63`	`@media screen and (max-width: @smBreak) {`
`65`		`- width:100%;`
`66`		`- margin-left:0;`
	`64`	`+ .scrollDropDowns();`
	`65`	`+ }`
	`66`	`+ .touch & {`
	`67`	`+ .scrollDropDowns();`
`67`	`68`	`}`
`68`	`69`	`}`
`69`	`70`
	`71`	`+.scrollDropDowns()`
	`72`	`+{`
	`73`	`+ width:100%;`
	`74`	`+ margin-left:0;`
	`75`	`+ position:fixed;`
	`76`	`+ top:@uiHeight;`
	`77`	`+ bottom:0;`
	`78`	`+ left:0;`
	`79`	`+ right:0;`
	`80`	`+ overflow: auto;`
	`81`	`+ overflow-x: hidden;`
	`82`	`+ -webkit-overflow-scrolling: touch;`
	`83`	`+}`
	`84`	`+`
`70`	`85`	`#pausedScreen {`
`71`	`86`	`z-index: 2;`
`72`	`87`	`position: fixed;`
`@@ -137,15 +152,9 @@ body {`
`137`	`152`	`}`
`138`	`153`	`#pausedScreen {`
`139`	`154`	`top:@uiHeight;`
`140`		`- @media screen and (max-width: @smBreak) {`
`141`		`- top:@uiHeightSmall;`
`142`		`- }`
`143`	`155`	`}`
`144`	`156`	`.appWrapper {`
`145`	`157`	`top:@uiHeight;`
`146`		`- @media screen and (max-width: @smBreak) {`
`147`		`- top:@uiHeightSmall;`
`148`		`- }`
`149`	`158`	`}`
`150`	`159`	`}`
`151`	`160`	`.controls {`
`@@ -216,7 +225,6 @@ body {`
`216`	`225`	`.paused .on,`
`217`	`226`	`.muted .on { display:none !important }`
`218`	`227`	`@media screen and (max-width: @smBreak) {`
`219`		`- top:@uiHeight;`
`220`	`228`	`width:100%;`
`221`	`229`	`}`
`222`	`230`	`}`
`@@ -232,6 +240,9 @@ body {`
`232`	`240`	`.show-title & {`
`233`	`241`	`display:block;`
`234`	`242`	`}`
	`243`	`+ @media screen and (max-width: @smBreak) {`
	`244`	`+ display:none !important;`
	`245`	`+ }`
`235`	`246`	`}`
`236`	`247`
`237`	`248`	`.appWrapper {`