fix the html mobile view to have taller iframe

This commit is contained in:
Quincy Larson
2015-06-03 15:50:28 -07:00
parent aa0ba45bf2
commit d6e09ad1e5
2 changed files with 53 additions and 52 deletions

View File

@ -773,7 +773,7 @@ iframe.iphone {
width: 100%; width: 100%;
border-radius: 5px; border-radius: 5px;
overflow-y: visible; overflow-y: visible;
height: 500px;
} }
} }
@ -1092,7 +1092,6 @@ hr {
.iframe-scroll { .iframe-scroll {
position: fixed !important; position: fixed !important;
margin-top: 75px; margin-top: 75px;
z-index: 9999;
} }
} }
@media only screen and (max-width: 992px) { @media only screen and (max-width: 992px) {

View File

@ -19,58 +19,59 @@ block content
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.courseware-height .row.courseware-height
.col-xs-12.col-sm-12.col-md-3.col-lg-3 .vertical-scroll
.well .col-xs-12.col-sm-12.col-md-3.col-lg-3
.row .well
.col-xs-12 .row
h2.text-center= name .col-xs-12
.bonfire-instructions h2.text-center= name
p.wrappable!= brief .bonfire-instructions
#brief-instructions p.wrappable!= brief
#more-info.btn.btn-primary.btn-block.btn-primary-ghost #brief-instructions
span.ion-arrow-down-b #more-info.btn.btn-primary.btn-block.btn-primary-ghost
| More information span.ion-arrow-down-b
#long-instructions.row.hide | More information
.col-xs-12 #long-instructions.row.hide
for sentence in details .col-xs-12
p.wrappable!= sentence for sentence in details
#less-info.btn.btn-primary.btn-block.btn-primary-ghost p.wrappable!= sentence
span.ion-arrow-up-b #less-info.btn.btn-primary.btn-block.btn-primary-ghost
| Less information span.ion-arrow-up-b
br | Less information
if (user)
a.btn.btn-primary.btn-big.btn-block#next-courseware-button
| Go to my next challenge
br br
| (ctrl + enter) if (user)
if (user.sentSlackInvite) a.btn.btn-primary.btn-big.btn-block#next-courseware-button
.button-spacer | Go to my next challenge
.btn-group.input-group.btn-group-justified br
label.btn.btn-success#trigger-help-modal | (ctrl + enter)
i.fa.fa-medkit if (user.sentSlackInvite)
|   Help .button-spacer
label.btn.btn-success#trigger-issue-modal .btn-group.input-group.btn-group-justified
i.fa.fa-bug label.btn.btn-success#trigger-help-modal
|   Bug i.fa.fa-medkit
.button-spacer |   Help
script. label.btn.btn-success#trigger-issue-modal
var userLoggedIn = true; i.fa.fa-bug
else |   Bug
a.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress .button-spacer
script. script.
var userLoggedIn = false; var userLoggedIn = true;
.button-spacer else
ul#testSuite.list-group a.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress
br script.
script(type="text/javascript"). var userLoggedIn = false;
$('#next-courseware-button').attr('disabled', 'disabled'); .button-spacer
var tests = !{JSON.stringify(tests)}; ul#testSuite.list-group
var challengeSeed = !{JSON.stringify(challengeSeed)}; br
var challenge_Id = !{JSON.stringify(challengeId)}; script(type="text/javascript").
var challenge_Name = !{JSON.stringify(name)}; $('#next-courseware-button').attr('disabled', 'disabled');
var prodOrDev = !{JSON.stringify(environment)}; var tests = !{JSON.stringify(tests)};
var challengeType = !{JSON.stringify(challengeType)}; var challengeSeed = !{JSON.stringify(challengeSeed)};
var started = Math.floor(Date.now()); var challenge_Id = !{JSON.stringify(challengeId)};
var challenge_Name = !{JSON.stringify(name)};
var prodOrDev = !{JSON.stringify(environment)};
var challengeType = !{JSON.stringify(challengeType)};
var started = Math.floor(Date.now());
.col-xs-12.col-sm-12.col-md-5.col-lg-6 .col-xs-12.col-sm-12.col-md-5.col-lg-6
#mainEditorPanel #mainEditorPanel
form.code form.code
@ -80,6 +81,7 @@ block content
.hidden-xs.hidden-sm .hidden-xs.hidden-sm
img.iphone-position.iframe-scroll(src="https://s3.amazonaws.com/freecodecamp/iphone6-frame.png") img.iphone-position.iframe-scroll(src="https://s3.amazonaws.com/freecodecamp/iphone6-frame.png")
iframe.iphone.iframe-scroll#preview iframe.iphone.iframe-scroll#preview
.spacer
#complete-courseware-dialog.modal(tabindex='-1') #complete-courseware-dialog.modal(tabindex='-1')
.modal-dialog.animated.zoomIn.fast-animation .modal-dialog.animated.zoomIn.fast-animation
.modal-content .modal-content