Text and style tweaks

js/BoxPage.js

@@ -42,7 +42,7 @@ var BoxPage = (function (w) {
 		console.log("  _boxData: ",_boxData);
 		
 		_title.text(_boxData.wifiboxid);
-		_intro.text("");
+		setNetworkStatus(NetworkAPI.STATUS.CONNECTED);
 		
 		var drawLink = (_boxData.link)? _boxData.link : boxURL;
 		_page.find("#drawItem a").attr("href",drawLink);
@@ -62,7 +62,7 @@ var BoxPage = (function (w) {
 			//console.log("  networkPanel ",_element[0]," parent: ",_element.parent()[0]);
 			// ToDo: update _currentNetwork when available
 			
-			setNetworkStatus(data.status,data);
+			setNetworkStatus(data.status);
 			
 			/*// Keep checking for updates?
 			switch(data.status) {
@@ -80,9 +80,10 @@ var BoxPage = (function (w) {
 		});
 	}
 	
-	function setNetworkStatus(status,data) {
+	function setNetworkStatus(status) {
-		console.log("setNetworkStatus: ",status,data);
+		console.log("setNetworkStatus: ",status);
 		console.log("  _updateItem: ",_updateItem);
+		var introText = "";
 		if(status === NetworkAPI.STATUS.CONNECTED) { // online
 			console.log("online");
 			_drawItem.find("a").text("Draw");
@@ -93,9 +94,11 @@ var BoxPage = (function (w) {
 			_updateItem.toggleClass("ui-screen-hidden",false);
 			// ToDo: retrieve update information
 			
+			_joinNetworkItem.toggleClass("ui-screen-hidden",true);
+			
 		} else { // offline
 			console.log("offline");
-			_intro.text("Please connect your WiFi-Box to the internet. You can also use it offline but then you aren't able to update.");
+			introText = "Please connect your WiFi-Box to the internet. You can also use it offline, but then you won't be able to update.";
 			
 			_joinNetworkItem.toggleClass("ui-screen-hidden",false);
 			
@@ -110,10 +113,13 @@ var BoxPage = (function (w) {
 			// ToDo: Control
 		}
 		
+		_intro.text(introText);
+		_intro.toggleClass("ui-screen-hidden",(introText === ""));
+		
 		// ToDo: update footer with network info
 		
 		_list.listview('refresh'); // jQuery mobile enhance content
-		_networkStatus = data.status;
+		_networkStatus = status;
 	}
 	
 	// to get to the box data we need the url

js/ConnectingToNetworkPage.js

@@ -79,9 +79,9 @@
 		var actionText = "";
 		switch(data.status) {
 			case NetworkAPI.STATUS.CONNECTING:
-				statusText = "Connecting to network ";
+				statusText = "Connecting to "+_pageData.ssid+"...";
 				//actionText = "Please reconnect yourself to <b>"+_pageData.ssid+"</b>. Once you are connected return to this page.";
-				actionText = "Please reconnect yourself to <b>"+_pageData.ssid+"</b>. Once connected return to this page.";
+				actionText = "Please reconnect yourself to <b>"+_pageData.ssid+"</b>. Once you are connected return to this page.";
 				_actionField.attr("class","notice"); 
 				break;
 			case NetworkAPI.STATUS.CONNECTING_FAILED:
@@ -89,6 +89,11 @@
 				actionText = "Please check password and try again";
 				_actionField.attr("class","error");
 				break;
+			case NetworkAPI.STATUS.CONNECTED:
+				statusText = "Connected to "+_pageData.ssid;
+				actionText = "Please reconnect yourself to <b>"+_pageData.ssid+"</b>. Once you are connected return to this page.";
+				_actionField.attr("class","notice"); 
+				break;
 			default:
 				actionText = "Something went wrong, please try again";
 				_actionField.attr("class","error");

less/styles.less

@@ -1,5 +1,6 @@
-body {
+body.ui-mobile-viewport {
-	
+	margin: 0 auto;
+	max-width: 1024px;
 }
 
 #logo {
@@ -10,39 +11,41 @@ body {
 	margin: 10px 5px 5px 5px;
 	max-width: 200px;
 }
-
+#slogan {
-.ui-content ul {
+	text-align: center;
-	padding: 0 0 0 1em;
-}
-.ui-content ul.ui-listview {
-	padding: 0;
 }
 
+.ui-content {
+	ul {
+		padding: 0 0 0 1em;
+	}
+	ul.ui-listview {
+		padding: 0;
+	}
+	.intro {
+		margin: 0 0 2em 0;
+	}
+	img {
+		max-width: 100%;
+	}
+}
 
 #action {
 	margin: 0 -1em;
 	padding: 1em;
 	color: #fff;
   text-shadow: 0px 1px 0px #999;
-}
+	&.error {
-
-#action.error {
     background: #EB313C;
     text-shadow: 0px 1px 0px #333;
-}
+	}
-#action.warning {
+	&.warning {
     background: #E9A86E;
 }
-#action.notice {
+	&.notice {
-    background: #93CAF4;
+	    background: #93CAF4;
-}
-#action.info {
-    background: #97DD8A;
-}
-
-@media only screen and (min-width: 768px) {
-	body {
-		padding-left: 20em;
-		padding-right: 20em;
 	}
-}
+	&.info {
+	    background: #97DD8A;
+	}
+}

www/index.html

@@ -27,7 +27,10 @@
 
 <div data-role="page" id="boxes">
 	<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
-	<p>makes 3D printing very easy</p>
+	<p id="slogan">makes 3D printing very easy</p>
+	<div data-role="header">
+		<h1>WiFi-Boxes</h1>
+	</div><!-- /header -->
 	<!-- <p>Please select your Doodle3D WiFi-Box to connect or press search to add your box to this list.</p> -->
 	<div role="main" class="ui-content">
 		<ul data-role="listview" id="boxeslist">
@@ -164,7 +167,7 @@
 		<h1>Connecting...</h1>
 	</div><!-- /header -->
 	<div role="main" class="ui-content">
-		<img id="logo" src="img/Connect to home.png">
+		<img src="img/Connect to home.png">
 		<h3 id="status"></h3>
 		<p id="action"></p> 
 	</div><!-- /content -->