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

Media queries everywhere to size iframe correctly

Browse Source
This commit is contained in:
Nathan Leniz
2015-02-04 02:29:38 -05:00
parent d5231fc43f
commit e55a85a18c
3 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
public/css/main.less
View File

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

2
public/js/lib/coursewares/coursewaresFramework.js
View File

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

13
views/coursewares/show.jade
View File

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