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 {
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;
}

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/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
@ -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.