Revised scroll-locker layout. iPhone preview causing some styling issues that will require th dynamic resizing of the preview to fix which may impact the quality of the display
parent
2b654ecd83
commit
7910f0ae2c
|
@ -310,13 +310,6 @@ $(document).ready(function() {
|
|||
};
|
||||
|
||||
$('#story-submit').on('click', storySubmitButtonHandler);
|
||||
|
||||
if($('.editorScrollDiv').html() !== 'undefined'){
|
||||
function truncateEditor(){$('.editorScrollDiv').css("height",$(window).height()-($('.navbar').height()+$('.footer').height()+100) + "px");}
|
||||
truncateEditor();
|
||||
$(window).resize(function(){truncateEditor();});
|
||||
}
|
||||
|
||||
//fakeiphone positioning hotfix
|
||||
if($('.iphone-position').html() !==undefined || $('.iphone').html() !== undefined){
|
||||
var startIphonePosition = parseInt($('.iphone-position').css('top').replace('px', ''));
|
||||
|
@ -333,34 +326,39 @@ $(document).ready(function() {
|
|||
});
|
||||
}
|
||||
if($('.scroll-locker').html() != undefined){
|
||||
function lockTop(initOff){
|
||||
if ($(window).width() >= 992) {
|
||||
if ((($('.scroll-locker').offset().top - $(window).scrollTop()) + $('.scroll-locker').height()) >= ($('.fcc-footer').offset().top - $(window).scrollTop())) {
|
||||
$('.scroll-locker').css('position', 'fixed').css('top', initOff).css('width', $($('.scroll-locker').parent()).width()).css('max-height', '85%').css('overflow-y', 'auto').css('overflow-x', 'hidden');
|
||||
$('.well').css('margin-right', '6px');
|
||||
function lockTop(){
|
||||
if ($(window).width() >= 990) {
|
||||
if($('.editorScrollDiv').html() !== 'undefined'){
|
||||
var magiVal = $(window).height()-($('.navbar').height()+$('.footer').height());
|
||||
if(magiVal < 0){
|
||||
magiVal = 0;
|
||||
}
|
||||
else {
|
||||
$('.scroll-locker').css('position', 'fixed').css('bottom', $('.fcc-footer') - (($('.scroll-locker').offset().top - $(window).scrollTop()) + $('.scroll-locker').height()) - ($('.fcc-footer').offset().top - $(window).scrollTop())).css('width', $($('.scroll-locker').parent()).width()).css('max-height', '85%').css('overflow-y', 'auto').css('overflow-x', 'hidden');
|
||||
$('.well').css('margin-right', '6px');
|
||||
magiVal = $(window).height()-($('.navbar').height()+$('.footer').height());
|
||||
if(magiVal < 0){
|
||||
magiVal = 0;
|
||||
}
|
||||
$('.editorScrollDiv').css("height", (magiVal-85) + "px");
|
||||
}
|
||||
else {
|
||||
$('.scroll-locker').css('position', 'inherit').css('top', 'inherit').css('width', '100%').css('max-height', '85%').css('overflow-y', 'auto').css('overflow-x', 'hidden');
|
||||
$('.well').css('margin-right', '');
|
||||
magiVal = $(window).height()-($('.navbar').height()+$('.footer').height());
|
||||
if(magiVal < 0){
|
||||
magiVal = 0;
|
||||
}
|
||||
$('.scroll-locker').css("min-height", $('.editorScrollDiv').height()).css("height",magiVal-85);
|
||||
}
|
||||
else {
|
||||
$('.editorScrollDiv').css("max-height", 500 + "px");
|
||||
$('.scroll-locker').css('position', 'inherit').css('top', 'inherit').css('width', '100%').css('max-height', '85%').css('overflow-y', 'auto').css('overflow-x', 'hidden');
|
||||
}
|
||||
}
|
||||
var $scrollLocker = $('.scroll-locker');
|
||||
if ($scrollLocker.offset()) {
|
||||
var initOff = $scrollLocker.offset().top - $(window).scrollTop();
|
||||
lockTop(initOff);
|
||||
$(window).on('resize', function(){
|
||||
lockTop(initOff);
|
||||
});
|
||||
$(window).scroll(function() {
|
||||
lockTop(initOff);
|
||||
});
|
||||
if ($('.scroll-locker').offset()){
|
||||
$(document).ready(function(){
|
||||
lockTop(initOff);
|
||||
lockTop();
|
||||
$(window).on('resize', function(){
|
||||
lockTop();
|
||||
});
|
||||
$(window).scroll(function() {
|
||||
lockTop();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -22,48 +22,49 @@ block content
|
|||
.row.courseware-height
|
||||
.col-xs-12.col-sm-12.col-md-3.col-lg-3
|
||||
.scroll-locker
|
||||
.well
|
||||
.row
|
||||
.col-xs-12
|
||||
h3.text-center.negative-10= name
|
||||
.bonfire-instructions
|
||||
for sentence in details
|
||||
p.wrappable.negative-10!= sentence
|
||||
.negative-bottom-margin-30
|
||||
if (user)
|
||||
label.btn.btn-primary.btn-block.negative-10#next-courseware-button
|
||||
.ion-checkmark-circled
|
||||
| Go to my next challenge (ctrl + enter)
|
||||
.button-spacer
|
||||
.btn-group.input-group.btn-group-justified
|
||||
label.btn.btn-success#trigger-reset-modal
|
||||
i.fa.fa-refresh
|
||||
| Reset
|
||||
label.btn.btn-success#trigger-help-modal
|
||||
i.fa.fa-medkit
|
||||
| Help
|
||||
label.btn.btn-success#trigger-issue-modal
|
||||
i.fa.fa-bug
|
||||
| Bug
|
||||
script.
|
||||
var userLoggedIn = true;
|
||||
else
|
||||
.button-spacer
|
||||
a.btn.signup-btn.btn-block.btn-block.negative-15(href='/login') Sign in so you can save your progress
|
||||
.innerMarginFix(style = "width: 99%;")
|
||||
.well
|
||||
.row
|
||||
.col-xs-12
|
||||
h3.text-center.negative-10= name
|
||||
.bonfire-instructions
|
||||
for sentence in details
|
||||
p.wrappable.negative-10!= sentence
|
||||
.negative-bottom-margin-30
|
||||
if (user)
|
||||
label.btn.btn-primary.btn-block.negative-10#next-courseware-button
|
||||
.ion-checkmark-circled
|
||||
| Go to my next challenge (ctrl + enter)
|
||||
.button-spacer
|
||||
.btn-group.input-group.btn-group-justified
|
||||
label.btn.btn-success#trigger-reset-modal
|
||||
i.fa.fa-refresh
|
||||
| Reset
|
||||
label.btn.btn-success#trigger-help-modal
|
||||
i.fa.fa-medkit
|
||||
| Help
|
||||
label.btn.btn-success#trigger-issue-modal
|
||||
i.fa.fa-bug
|
||||
| Bug
|
||||
script.
|
||||
var userLoggedIn = false;
|
||||
.button-spacer
|
||||
ul#testSuite.list-group
|
||||
br
|
||||
script(type="text/javascript").
|
||||
$('#next-courseware-button').attr('disabled', 'disabled');
|
||||
var tests = !{JSON.stringify(tests)};
|
||||
var challengeSeed = !{JSON.stringify(challengeSeed)};
|
||||
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());
|
||||
var userLoggedIn = true;
|
||||
else
|
||||
.button-spacer
|
||||
a.btn.signup-btn.btn-block.btn-block.negative-15(href='/login') Sign in so you can save your progress
|
||||
script.
|
||||
var userLoggedIn = false;
|
||||
.button-spacer
|
||||
ul#testSuite.list-group
|
||||
br
|
||||
script(type="text/javascript").
|
||||
$('#next-courseware-button').attr('disabled', 'disabled');
|
||||
var tests = !{JSON.stringify(tests)};
|
||||
var challengeSeed = !{JSON.stringify(challengeSeed)};
|
||||
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
|
||||
.editorScrollDiv(style = "overflow-y: auto; overflow-x: hidden;")
|
||||
#mainEditorPanel
|
||||
|
|
|
@ -17,54 +17,55 @@ block content
|
|||
.row(ng-controller="pairedWithController")
|
||||
.col-xs-12.col-sm-12.col-md-4.col-lg-3
|
||||
.scroll-locker
|
||||
#testCreatePanel.well
|
||||
h3.text-center.negative-10= name
|
||||
.row
|
||||
.col-xs-12
|
||||
.bonfire-instructions
|
||||
for sentence in details
|
||||
p.wrappable.negative-10!= sentence
|
||||
.negative-bottom-margin-30
|
||||
#MDN-links
|
||||
p.negative-10 Here are some helpful links:
|
||||
for link, index in MDNlinks
|
||||
.negative-10
|
||||
ul: li: a(href="" + link, target="_blank") !{MDNkeys[index]}
|
||||
if (user)
|
||||
form.form-horizontal(novalidate='novalidate', name='completedWithForm')
|
||||
.form-group.text-center.negative-10
|
||||
.innerMarginFix(style = "width: 99%;")
|
||||
#testCreatePanel.well
|
||||
h3.text-center.negative-10= name
|
||||
.row
|
||||
.col-xs-12
|
||||
// extra field to distract password tools like lastpass from injecting css into our username field
|
||||
label.negative-10.btn.btn-primary.btn-block#submitButton
|
||||
i.fa.fa-play
|
||||
| Run code (ctrl + enter)
|
||||
.button-spacer
|
||||
.btn-group.input-group.btn-group-justified
|
||||
label.btn.btn-success#trigger-reset-modal
|
||||
i.fa.fa-refresh
|
||||
| Reset
|
||||
label.btn.btn-success#trigger-help-modal
|
||||
i.fa.fa-medkit
|
||||
| Help
|
||||
label.btn.btn-success#trigger-issue-modal
|
||||
i.fa.fa-bug
|
||||
| Bug
|
||||
.button-spacer
|
||||
form.code
|
||||
.form-group.codeMirrorView
|
||||
textarea#codeOutput(style='display: none;')
|
||||
br
|
||||
#testSuite.negative-10
|
||||
br
|
||||
script(type="text/javascript").
|
||||
var tests = !{JSON.stringify(tests)};
|
||||
var challengeSeed = !{JSON.stringify(challengeSeed)};
|
||||
var challenge_Id = !{JSON.stringify(challengeId)};
|
||||
var challenge_Name = !{JSON.stringify(name)};
|
||||
var started = Math.floor(Date.now());
|
||||
var challengeType = !{JSON.stringify(challengeType)};
|
||||
var _ = R;
|
||||
var dashed = !{JSON.stringify(dashedName)};
|
||||
.bonfire-instructions
|
||||
for sentence in details
|
||||
p.wrappable.negative-10!= sentence
|
||||
.negative-bottom-margin-30
|
||||
#MDN-links
|
||||
p.negative-10 Here are some helpful links:
|
||||
for link, index in MDNlinks
|
||||
.negative-10
|
||||
ul: li: a(href="" + link, target="_blank") !{MDNkeys[index]}
|
||||
if (user)
|
||||
form.form-horizontal(novalidate='novalidate', name='completedWithForm')
|
||||
.form-group.text-center.negative-10
|
||||
.col-xs-12
|
||||
// extra field to distract password tools like lastpass from injecting css into our username field
|
||||
label.negative-10.btn.btn-primary.btn-block#submitButton
|
||||
i.fa.fa-play
|
||||
| Run code (ctrl + enter)
|
||||
.button-spacer
|
||||
.btn-group.input-group.btn-group-justified
|
||||
label.btn.btn-success#trigger-reset-modal
|
||||
i.fa.fa-refresh
|
||||
| Reset
|
||||
label.btn.btn-success#trigger-help-modal
|
||||
i.fa.fa-medkit
|
||||
| Help
|
||||
label.btn.btn-success#trigger-issue-modal
|
||||
i.fa.fa-bug
|
||||
| Bug
|
||||
.button-spacer
|
||||
form.code
|
||||
.form-group.codeMirrorView
|
||||
textarea#codeOutput(style='display: none;')
|
||||
br
|
||||
#testSuite.negative-10
|
||||
br
|
||||
script(type="text/javascript").
|
||||
var tests = !{JSON.stringify(tests)};
|
||||
var challengeSeed = !{JSON.stringify(challengeSeed)};
|
||||
var challenge_Id = !{JSON.stringify(challengeId)};
|
||||
var challenge_Name = !{JSON.stringify(name)};
|
||||
var started = Math.floor(Date.now());
|
||||
var challengeType = !{JSON.stringify(challengeType)};
|
||||
var _ = R;
|
||||
var dashed = !{JSON.stringify(dashedName)};
|
||||
.col-xs-12.col-sm-12.col-md-8
|
||||
.editorScrollDiv(style = "overflow-y: auto; overflow-x: hidden;")
|
||||
#mainEditorPanel
|
||||
|
|
Loading…
Reference in New Issue