From 3abac70998a4e2a300c12cee5e4b7037fc26877e Mon Sep 17 00:00:00 2001
From: Nathan Leniz <terakilobyte@gmail.com>
Date: Wed, 4 Feb 2015 01:50:14 -0500
Subject: [PATCH] Absolute positioning of iphone frame and rendering view

---
 public/css/main.less        | 18 +++++++++++++++++-
 views/coursewares/show.jade | 31 +++++++++++++++----------------
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/public/css/main.less b/public/css/main.less
index 76a7467b82..e471b976c9 100644
--- a/public/css/main.less
+++ b/public/css/main.less
@@ -649,8 +649,24 @@ div.CodeMirror-scroll {
 }
 
 iframe.iphone {
-  width: 401px;
+  width: 280px;
+  height: 500px;
   position: absolute;
+  top: 70px;
+  right: 25px;
+  border: none;
+}
+
+// To adjust right margin, negative values bring the image closer to the edge of the screen
+.iphone-position {
+  position: absolute;
+  top: -50px;
+  right: -205px;
+  z-index: -1;
+}
+
+.courseware-height {
+  min-height: 650px;
 }
 
 
diff --git a/views/coursewares/show.jade b/views/coursewares/show.jade
index 4c768f7b17..9c8890e432 100644
--- a/views/coursewares/show.jade
+++ b/views/coursewares/show.jade
@@ -17,7 +17,7 @@ block content
     script(src='/js/lib/codemirror/mode/xml/xml.js')
     script(src='/js/lib/codemirror/mode/css/css.js')
     script(src='/js/lib/codemirror/mode/htmlmixed/htmlmixed.js')
-    .row
+    .row.courseware-height
         .col-xs-12.col-sm-12.col-md-3
             .well
                 .row
@@ -32,12 +32,12 @@ block content
                                         | More information
                             #long-instructions.row.hide
                                 .col-xs-12
-                            for sentence in details
-                                p!= sentence
-                                .text-center
-                                    button#less-info.btn.btn-info
-                                        span.ion-help-circled
-                                        | Less information
+                                    for sentence in details
+                                        p!= sentence
+                                    .text-center
+                                        button#less-info.btn.btn-info
+                                            span.ion-help-circled
+                                            | Less information
             div.hidden
                 #submitButton.btn.btn-primary.btn-big.btn-block Run code (ctrl + enter)
                 br
@@ -52,17 +52,18 @@ block content
                 var challengeSeed = !{JSON.stringify(challengeSeed)};
                 var passedCoursewareHash = !{JSON.stringify(coursewareHash)};
                 var bonfireName = 'Testing Courseware';
-        .col-xs-12.col-sm-12.col-md-5
+        .col-xs-12.col-sm-12.col-md-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-4
+        .col-xs-12.col-sm-12.col-md-3
+            img.iphone-position(src="https://s3.amazonaws.com/freecodecamp/iphone6-frame.png")
             iframe.iphone#preview
 
-
+    //
         //.modal-dialog.animated.zoomIn.fast-animation
         //    .modal-content
         //        .modal-header.challenge-list-header= compliment
@@ -96,11 +97,9 @@ block content
         //            a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
         //        .modal-body
         //            include ../partials/bonfires
-
-    //img(src="https://s3.amazonaws.com/freecodecamp/iphone6-frame.png")
-    //script(src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js")
-    //script(src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js")
-    //style(src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css")
-    script.
+        //
+        //script(src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js")
+        //script(src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js")
+        //style(src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css")
 
                                                                      
\ No newline at end of file