From e55a85a18c8029e97b7605fd8bc6d09f9b8d7408 Mon Sep 17 00:00:00 2001
From: Nathan Leniz <terakilobyte@gmail.com>
Date: Wed, 4 Feb 2015 02:29:38 -0500
Subject: [PATCH] Media queries everywhere to size iframe correctly

---
 public/css/main.less                            | 17 ++++++++++++-----
 .../js/lib/coursewares/coursewaresFramework.js  |  2 +-
 views/coursewares/show.jade                     | 13 ++++++++-----
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/public/css/main.less b/public/css/main.less
index e471b976c9..15e5746484 100644
--- a/public/css/main.less
+++ b/public/css/main.less
@@ -649,12 +649,19 @@ div.CodeMirror-scroll {
 }
 
 iframe.iphone {
-  width: 280px;
-  height: 500px;
-  position: absolute;
-  top: 70px;
-  right: 25px;
   border: none;
+  @media(min-width: 992px) {
+    width: 280px;
+    height: 500px;
+    position: absolute;
+    top: 70px;
+    right: 25px;
+  }
+  @media(max-width: 991px) {
+    width: 100%;
+    border-radius: 5px;
+    
+  }
 }
 
 // To adjust right margin, negative values bring the image closer to the edge of the screen
diff --git a/public/js/lib/coursewares/coursewaresFramework.js b/public/js/lib/coursewares/coursewaresFramework.js
index 8245475dce..526d025241 100644
--- a/public/js/lib/coursewares/coursewaresFramework.js
+++ b/public/js/lib/coursewares/coursewaresFramework.js
@@ -30,7 +30,7 @@ var libraryIncludes = "<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3
 "<script src='//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js'></script>" +
 "<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/>" +
 "<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/>" +
-"<style>body { padding: 0px 3px 0px 3px; }</style>"
+"<style>body { padding: 0px 3px 0px 3px; }</style>";
 
 var delay;
 // Initialize CodeMirror editor with a nice html5 canvas demo.
diff --git a/views/coursewares/show.jade b/views/coursewares/show.jade
index 9c8890e432..7f9868f508 100644
--- a/views/coursewares/show.jade
+++ b/views/coursewares/show.jade
@@ -18,7 +18,7 @@ block content
     script(src='/js/lib/codemirror/mode/css/css.js')
     script(src='/js/lib/codemirror/mode/htmlmixed/htmlmixed.js')
     .row.courseware-height
-        .col-xs-12.col-sm-12.col-md-3
+        .col-xs-12.col-sm-12.col-md-3.col-lg-3
             .well
                 .row
                     .col-xs-12
@@ -52,17 +52,20 @@ block content
                 var challengeSeed = !{JSON.stringify(challengeSeed)};
                 var passedCoursewareHash = !{JSON.stringify(coursewareHash)};
                 var bonfireName = 'Testing Courseware';
-        .col-xs-12.col-sm-12.col-md-6
+        .col-xs-12.col-sm-12.col-md-5.col-lg-6
             #mainEditorPanel
                 form.code
                     .form-group.codeMirrorView
                         textarea#codeEditor(autofocus=true)
                 script(src='/js/lib/coursewares/coursewaresFramework.js')
                     #complete-bonfire-dialog.modal(tabindex='-1')
-        .col-xs-12.col-sm-12.col-md-3
-            img.iphone-position(src="https://s3.amazonaws.com/freecodecamp/iphone6-frame.png")
+        .col-md-4.col-lg-3
+            .hidden-xs.hidden-sm
+                img.iphone-position(src="https://s3.amazonaws.com/freecodecamp/iphone6-frame.png")
             iframe.iphone#preview
-
+    //
+        .visible-xs-block.visible-sm-block.text-center
+            iframe.no-phone#preview
     //
         //.modal-dialog.animated.zoomIn.fast-animation
         //    .modal-content