Adapt UI to mobile screens

EricssonResearch · Oct 13, 2014 · 8bb5ebc · 8bb5ebc
1 parent 3577b9b
commit 8bb5ebc
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 5 deletions.
diff --git a/server/client/main.css b/server/client/main.css
@@ -20,6 +20,7 @@ h2 {
 	margin-top: 0.1em;
 	font-size: 1.8em;
 }
+
 header {
 	background-color:rgba(255,255,255,0.5);
 	padding-top: 5px;
@@ -45,9 +46,6 @@ footer {
 	margin-top: 3em;
 	width: 100%;
 	height: 30px;
-	position: absolute;
-	bottom: 0;
-	left: 0;
 }
 input {
 	font-size: 1.3em;
@@ -93,6 +91,7 @@ video {
 	background-size: 100%;
 	height: 50px;
 	width: 79px;
+	cursor: pointer;
 }
 #settings-container {
 	float: left;
@@ -139,3 +138,87 @@ video {
 	background-image: -ms-linear-gradient(top, #cdcdcd, #b3b3b3);
 	background-image: -o-linear-gradient(top, #cdcdcd, #b3b3b3);
 }
+
+/* iPad */
+@media screen and (max-width : 768px) {
+	h2 {
+		margin-top: 0.3em;
+		font-size: 1.8em;
+		width: 400px;
+	}
+	#self_view {
+		margin-bottom: 0.8em;
+		margin: 0.4em 0em;
+		-webkit-transform: rotate(90deg);
+		-moz-transform: rotate(90deg);
+    	transform: rotate(90deg);
+	}
+}
+/* iPhone 6 Plus */
+@media screen and (max-width : 414px) {
+	h2 {
+		margin-top: 0.3em;
+		font-size: 1.2em;
+		width: 260px;
+	}
+
+	input[type="text"] {
+		width: 120px;
+	}
+
+	section {
+		margin: 0em;
+		padding: 0em;
+		min-height: 500px;
+		height: 100%;
+	}
+
+	#self_view {
+		margin-bottom: 0.8em;
+		margin: 0.4em 0em;
+		-webkit-transform: rotate(90deg);
+		-moz-transform: rotate(90deg);
+    	transform: rotate(90deg);
+	}
+
+	#remote_view {
+		width: 320px;
+		height: 280px;
+	}
+}
+/* iPhone =< 5s */
+@media screen and (max-width : 320px) {
+	h2 {
+		margin-top: -0.3em;
+		font-size: 1.1em;
+		width: 200px;
+	}
+
+	input[type="text"] {
+		width: 100px;
+	}
+
+	section {
+		margin: 0em;
+		padding: 0em;
+		min-height: 600px;
+		height: 100%;
+	}
+
+	#self_view {
+		width: 160px;
+		height: 120px;
+		margin: 0.4em 0em;
+		-webkit-transform: rotate(90deg);
+		-moz-transform: rotate(90deg);
+    	transform: rotate(90deg);
+	}
+	#remote_view {
+		width: 320px;
+		height: 280px;
+	}
+
+	#share-container {
+		display: none;
+	}
+}
diff --git a/server/client/main.js b/server/client/main.js
@@ -74,6 +74,10 @@ window.onload = function () {
         }, logError);
     };
 
+    document.getElementById("owr-logo").onclick = function() {
+        window.location.assign("http://www.openwebrtc.io");
+    };
+
     var hash = location.hash.substr(1);
     if (hash) {
         document.getElementById("session_txt").value = hash;

diff --git a/server/client/webrtc_example.html b/server/client/webrtc_example.html
@@ -2,7 +2,7 @@
 <html>
     <head>
         <title>OpenWebRTC Demo</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
         <link rel="stylesheet" type="text/css" href="main.css">
         <script src="signaling_channel.js"></script>
         <script src="main.js"></script>
@@ -18,7 +18,7 @@ <h2>Simple WebRTC Example</h2>
             <div id="settings-container">
                 Session id <input type="text" id="session_txt" value="test" size="10">
                 <input class="btn" type="button" id="join_but" value="Join" disabled>
-                <input class="btn" type="button" id="call_but" value="Initiate Call" disabled><br>
+                <input class="btn" type="button" id="call_but" value="Call" disabled><br>
                 <input type="checkbox" id="audio_cb">Audio<br>
                 <input type="checkbox" id="video_cb" checked>Video
                 <div id="share-container">