More sane layout model, sizing for iOS8

Author: scottgarner

css/main.scss

@@ -5,6 +5,7 @@
 
 $light-color: #FcFcFf;
 $mid-color: #efefef;
+$dim-color: #cfcfcf;
 
 $primary-color: #4D7E9E;
 $primary-color-dark: darken($primary-color, 20%);
@@ -263,7 +264,7 @@ div#lessonNavContainer {
 	height: 100%;
 
 	min-width: 1024px;
-	min-height: 492px;
+	min-height: 704px;
 }
 
 #interface.videoMode div#canvasContainer, #interface.videoMode div#editorContainer {
@@ -411,6 +412,7 @@ div#footer {
 	width: 100%;
 	min-width: 1024px;
 	background: $light-color;
+	border-top: 1px solid $dim-color;
 }
 
 div#transport {
@@ -426,6 +428,7 @@ div#transport #track {
 	background: $mid-color;
 	height: 8px;
 	width: 100%;
+	outline: 1px solid $dim-color;
 }
 
 div#transport #progress {
@@ -465,6 +468,7 @@ div.hint h2, div.hint p {
 div#editorContainer { 
 	display: none;
 	position: absolute;
+	overflow: hidden;
 	top: 238px;
 	left: 0px;
 	padding: 8px;

js/editor.js

@@ -448,9 +448,7 @@ var helloEditor = {
   refreshUI: function () {
 
     var viewportWidth = $("#interface").innerWidth(),
-      viewportHeight = $("#interface").innerHeight() - $("#header").height() - $("#footer").height(),
-      minVideoWidth = 320,
-      maxVideoWidth = viewportWidth / 2,
+      viewportHeight = $("#interface").innerHeight(),
       videoWidth,
       videoHeight;
 
@@ -482,15 +480,10 @@ var helloEditor = {
       helloEditor.confirmExit = true;
 
       $("#interface").removeClass("videoMode");
-      //console.log("Editor Mode");
 
-      if (viewportWidth - viewportHeight < minVideoWidth) {
-        videoWidth = minVideoWidth;
-      } else if (viewportWidth - viewportHeight > maxVideoWidth) {
-        videoWidth = maxVideoWidth;
-      } else {
-        videoWidth = viewportWidth - viewportHeight;
-      }
+      videoWidth = viewportWidth - 500;
+
+      if (videoWidth > viewportWidth / 2) { videoWidth = viewportWidth / 2; }
 
       videoHeight = videoWidth / 16 * 9;
 
@@ -499,21 +492,21 @@ var helloEditor = {
 
       $("#videoContainer")
         .css({
-          width: videoWidth,
+          width: videoWidth - 8,
           height: videoHeight,
           left: 8,
-          top: 8 + $("#header").height(),
+          top: $("#header").height() + 8,
           marginTop: 0,
           marginLeft: 0
         })
         .show();
 
       $("#editorContainer")
         .css({
-          width: videoWidth,
-          height: viewportHeight - videoHeight - 32,
-          top: videoHeight + 20 + $("#header").height(),
-          left: 8
+          top: $("#header").height() + 8 + 8 + videoHeight,
+          left: 8,          
+          width: videoWidth -8,
+          height: viewportHeight - $("#header").height() - 8 - 8 - videoHeight - 8 - $("#footer").height()
         });
 
       $("#editor").height($("#editorContainer").height() - $("#editorCommands").height() - 8);