Added preview link to page

Author: bigtimebuddy

src/jade/preview-client.jade

@@ -1,3 +1,4 @@
+block variables
 doctype html
 html
 	head
@@ -11,8 +12,9 @@ html
 			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")
-	body
+	body(class=bodyClass)
 		#frame.loading.show-title.show-controls
+			block frame
 			#pausedScreen
 				.container
 					h2 Game is Paused.

src/jade/preview.jade

@@ -1,10 +1,16 @@
 extends preview-client
 
+block variables
+	- bodyClass="internal"
+
 block head
 	include partials/shared
 	link(href='assets/css/preview.css', rel='stylesheet')
 	script(src='assets/js/preview.js')
 
+block frame
+	#browserLink
+
 block controls
 	button#refreshButton.btn.btn-primary.main(data-toggle='tooltip', title='Reload')
 		span.glyphicon.glyphicon-refresh

src/js/preview/Preview.js

@@ -32,6 +32,7 @@
 		 */
 		this.container = new PreviewContainer();
 
+		$("#browserLink").text("http://" + this.server.address + ":" + this.server.port);
 		$("#refreshButton").click(this.refresh.bind(this));
 		$("#devToolsButton").click(this.toggleDevTools.bind(this));
 
@@ -69,8 +70,6 @@
 			this.container.remoteChannel.val(this.server.title);
 			this.container.connectLoggingService();
 		}
-
-		console.log("Open location " + this.location);
 		this.container.open(this.location);
 		this.container.once('closed', this.open.bind(this));
 	};

src/less/preview/Preview.less

@@ -111,15 +111,26 @@ body {
 	}
 }
 
+#browserLink {
+	position:absolute;
+	padding:4px 0;
+	bottom:0;
+	z-index:3;
+	width:100%;
+	text-align: center;
+	color: #555;
+	.user-select(initial);
+	background:#000;
+}
+
 #frame {
 	position:fixed;
 	z-index:1;
 	width:100%;
 	height:100%;
-	background:#222;
 	top:0;
 	left:0;
-
+	background: #222;
 	&.show-controls {
 		.controls { 
 			display:block;
@@ -138,6 +149,14 @@ body {
 		}
 	}
 	.controls {
+		.internal & {
+			.btn.main {
+				width: percentage(1/8);
+				&.drop-handle {
+					width: percentage(1/16);
+				}
+			}
+		}
 		display:none;
 		position:absolute;
 		top:0;
@@ -154,7 +173,7 @@ body {
 			display:inline-block;
 			height:100%;
 			font-size:24px;
-			width: percentage(1/8);
+			width: percentage(1/6);
 			-webkit-box-sizing: border-box;
 			box-sizing: border-box;
 			border-left: 1px solid rgba(0,0,0, 0.6);
@@ -167,7 +186,7 @@ body {
 				margin-left:0;
 				padding:0 7px;
 				border-left: 1px solid rgba(0,0,0, 0.1);
-				width: percentage(1/16);
+				width: percentage(1/12);
 				.arrow-down {
 					width: 0; 
 					height: 0; 
@@ -219,6 +238,9 @@ body {
 	position: absolute;
 	top:0;
 	bottom:0;
+	.internal & {
+		bottom:25px;
+	}
 	right:0;
 	left:0;
 	z-index:0;