gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Absolute positioning of iphone frame and rendering view

Browse Source
This commit is contained in:
Nathan Leniz
2015-02-04 01:50:14 -05:00
parent 5ce1eb18db
commit 3abac70998
2 changed files with 32 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
public/css/main.less
View File

@ -649,8 +649,24 @@ div.CodeMirror-scroll {
} }
iframe.iphone { iframe.iphone {
width: 401px; width: 280px;
height: 500px;
position: absolute; 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;
} }

13
views/coursewares/show.jade
View File

@ -17,7 +17,7 @@ block content
script(src='/js/lib/codemirror/mode/xml/xml.js') script(src='/js/lib/codemirror/mode/xml/xml.js')
script(src='/js/lib/codemirror/mode/css/css.js') script(src='/js/lib/codemirror/mode/css/css.js')
script(src='/js/lib/codemirror/mode/htmlmixed/htmlmixed.js') script(src='/js/lib/codemirror/mode/htmlmixed/htmlmixed.js')
.row .row.courseware-height
.col-xs-12.col-sm-12.col-md-3 .col-xs-12.col-sm-12.col-md-3
.well .well
.row .row
@ -52,17 +52,18 @@ block content
var challengeSeed = !{JSON.stringify(challengeSeed)}; var challengeSeed = !{JSON.stringify(challengeSeed)};
var passedCoursewareHash = !{JSON.stringify(coursewareHash)}; var passedCoursewareHash = !{JSON.stringify(coursewareHash)};
var bonfireName = 'Testing Courseware'; var bonfireName = 'Testing Courseware';
.col-xs-12.col-sm-12.col-md-5 .col-xs-12.col-sm-12.col-md-6
#mainEditorPanel #mainEditorPanel
form.code form.code
.form-group.codeMirrorView .form-group.codeMirrorView
textarea#codeEditor(autofocus=true) textarea#codeEditor(autofocus=true)
script(src='/js/lib/coursewares/coursewaresFramework.js') script(src='/js/lib/coursewares/coursewaresFramework.js')
#complete-bonfire-dialog.modal(tabindex='-1') #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 iframe.iphone#preview
//
//.modal-dialog.animated.zoomIn.fast-animation //.modal-dialog.animated.zoomIn.fast-animation
// .modal-content // .modal-content
// .modal-header.challenge-list-header= compliment // .modal-header.challenge-list-header= compliment
@ -96,11 +97,9 @@ block content
// a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') × // a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
// .modal-body // .modal-body
// include ../partials/bonfires // 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="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") //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") //style(src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css")
script.