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

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

Browse Source
This commit is contained in:
benmcmahon100
2015-08-13 01:20:12 +01:00
parent 2b654ecd83
commit 7910f0ae2c
3 changed files with 117 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
public/js/main_0.0.3.js
View File

@ -310,13 +310,6 @@ $(document).ready(function() {
}; };
$('#story-submit').on('click', storySubmitButtonHandler); $('#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 //fakeiphone positioning hotfix
if($('.iphone-position').html() !==undefined || $('.iphone').html() !== undefined){ if($('.iphone-position').html() !==undefined || $('.iphone').html() !== undefined){
var startIphonePosition = parseInt($('.iphone-position').css('top').replace('px', '')); var startIphonePosition = parseInt($('.iphone-position').css('top').replace('px', ''));
@ -333,34 +326,39 @@ $(document).ready(function() {
}); });
} }
if($('.scroll-locker').html() != undefined){ if($('.scroll-locker').html() != undefined){
function lockTop(initOff){ function lockTop(){
if ($(window).width() >= 992) { if ($(window).width() >= 990) {
if ((($('.scroll-locker').offset().top - $(window).scrollTop()) + $('.scroll-locker').height()) >= ($('.fcc-footer').offset().top - $(window).scrollTop())) { if($('.editorScrollDiv').html() !== 'undefined'){
$('.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'); var magiVal = $(window).height()-($('.navbar').height()+$('.footer').height());
$('.well').css('margin-right', '6px'); if(magiVal < 0){
magiVal = 0;
} }
else { magiVal = $(window).height()-($('.navbar').height()+$('.footer').height());
$('.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'); if(magiVal < 0){
$('.well').css('margin-right', '6px'); magiVal = 0;
} }
$('.editorScrollDiv').css("height", (magiVal-85) + "px");
} }
else { magiVal = $(window).height()-($('.navbar').height()+$('.footer').height());
$('.scroll-locker').css('position', 'inherit').css('top', 'inherit').css('width', '100%').css('max-height', '85%').css('overflow-y', 'auto').css('overflow-x', 'hidden'); if(magiVal < 0){
$('.well').css('margin-right', ''); 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 ($('.scroll-locker').offset()){
if ($scrollLocker.offset()) {
var initOff = $scrollLocker.offset().top - $(window).scrollTop();
lockTop(initOff);
$(window).on('resize', function(){
lockTop(initOff);
});
$(window).scroll(function() {
lockTop(initOff);
});
$(document).ready(function(){ $(document).ready(function(){
lockTop(initOff); lockTop();
$(window).on('resize', function(){
lockTop();
});
$(window).scroll(function() {
lockTop();
});
}); });
} }
} }

83
server/views/coursewares/showHTML.jade
View File

@ -22,48 +22,49 @@ block content
.row.courseware-height .row.courseware-height
.col-xs-12.col-sm-12.col-md-3.col-lg-3 .col-xs-12.col-sm-12.col-md-3.col-lg-3
.scroll-locker .scroll-locker
.well .innerMarginFix(style = "width: 99%;")
.row .well
.col-xs-12 .row
h3.text-center.negative-10= name .col-xs-12
.bonfire-instructions h3.text-center.negative-10= name
for sentence in details .bonfire-instructions
p.wrappable.negative-10!= sentence for sentence in details
.negative-bottom-margin-30 p.wrappable.negative-10!= sentence
if (user) .negative-bottom-margin-30
label.btn.btn-primary.btn-block.negative-10#next-courseware-button if (user)
.ion-checkmark-circled label.btn.btn-primary.btn-block.negative-10#next-courseware-button
| &nbsp; Go to my next challenge (ctrl + enter) .ion-checkmark-circled
.button-spacer | &nbsp; Go to my next challenge (ctrl + enter)
.btn-group.input-group.btn-group-justified .button-spacer
label.btn.btn-success#trigger-reset-modal .btn-group.input-group.btn-group-justified
i.fa.fa-refresh label.btn.btn-success#trigger-reset-modal
| &nbsp; Reset i.fa.fa-refresh
label.btn.btn-success#trigger-help-modal | &nbsp; Reset
i.fa.fa-medkit label.btn.btn-success#trigger-help-modal
| &nbsp; Help i.fa.fa-medkit
label.btn.btn-success#trigger-issue-modal | &nbsp; Help
i.fa.fa-bug label.btn.btn-success#trigger-issue-modal
| &nbsp; Bug i.fa.fa-bug
script. | &nbsp; Bug
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. script.
var userLoggedIn = false; var userLoggedIn = true;
.button-spacer else
ul#testSuite.list-group .button-spacer
br a.btn.signup-btn.btn-block.btn-block.negative-15(href='/login') Sign in so you can save your progress
script(type="text/javascript"). script.
$('#next-courseware-button').attr('disabled', 'disabled'); var userLoggedIn = false;
var tests = !{JSON.stringify(tests)}; .button-spacer
var challengeSeed = !{JSON.stringify(challengeSeed)}; ul#testSuite.list-group
var challenge_Id = !{JSON.stringify(challengeId)}; br
var challenge_Name = !{JSON.stringify(name)}; script(type="text/javascript").
var prodOrDev = !{JSON.stringify(environment)}; $('#next-courseware-button').attr('disabled', 'disabled');
var challengeType = !{JSON.stringify(challengeType)}; var tests = !{JSON.stringify(tests)};
var started = Math.floor(Date.now()); 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 .col-xs-12.col-sm-12.col-md-5.col-lg-6
.editorScrollDiv(style = "overflow-y: auto; overflow-x: hidden;") .editorScrollDiv(style = "overflow-y: auto; overflow-x: hidden;")
#mainEditorPanel #mainEditorPanel

95
server/views/coursewares/showJS.jade
View File

@ -17,54 +17,55 @@ block content
.row(ng-controller="pairedWithController") .row(ng-controller="pairedWithController")
.col-xs-12.col-sm-12.col-md-4.col-lg-3 .col-xs-12.col-sm-12.col-md-4.col-lg-3
.scroll-locker .scroll-locker
#testCreatePanel.well .innerMarginFix(style = "width: 99%;")
h3.text-center.negative-10= name #testCreatePanel.well
.row h3.text-center.negative-10= name
.col-xs-12 .row
.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 .col-xs-12
// extra field to distract password tools like lastpass from injecting css into our username field .bonfire-instructions
label.negative-10.btn.btn-primary.btn-block#submitButton for sentence in details
i.fa.fa-play p.wrappable.negative-10!= sentence
| &nbsp; Run code (ctrl + enter) .negative-bottom-margin-30
.button-spacer #MDN-links
.btn-group.input-group.btn-group-justified p.negative-10 Here are some helpful links:
label.btn.btn-success#trigger-reset-modal for link, index in MDNlinks
i.fa.fa-refresh .negative-10
| &nbsp; Reset ul: li: a(href="" + link, target="_blank") !{MDNkeys[index]}
label.btn.btn-success#trigger-help-modal if (user)
i.fa.fa-medkit form.form-horizontal(novalidate='novalidate', name='completedWithForm')
| &nbsp; Help .form-group.text-center.negative-10
label.btn.btn-success#trigger-issue-modal .col-xs-12
i.fa.fa-bug // extra field to distract password tools like lastpass from injecting css into our username field
| &nbsp; Bug label.negative-10.btn.btn-primary.btn-block#submitButton
.button-spacer i.fa.fa-play
form.code | &nbsp; Run code (ctrl + enter)
.form-group.codeMirrorView .button-spacer
textarea#codeOutput(style='display: none;') .btn-group.input-group.btn-group-justified
br label.btn.btn-success#trigger-reset-modal
#testSuite.negative-10 i.fa.fa-refresh
br | &nbsp; Reset
script(type="text/javascript"). label.btn.btn-success#trigger-help-modal
var tests = !{JSON.stringify(tests)}; i.fa.fa-medkit
var challengeSeed = !{JSON.stringify(challengeSeed)}; | &nbsp; Help
var challenge_Id = !{JSON.stringify(challengeId)}; label.btn.btn-success#trigger-issue-modal
var challenge_Name = !{JSON.stringify(name)}; i.fa.fa-bug
var started = Math.floor(Date.now()); | &nbsp; Bug
var challengeType = !{JSON.stringify(challengeType)}; .button-spacer
var _ = R; form.code
var dashed = !{JSON.stringify(dashedName)}; .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 .col-xs-12.col-sm-12.col-md-8
.editorScrollDiv(style = "overflow-y: auto; overflow-x: hidden;") .editorScrollDiv(style = "overflow-y: auto; overflow-x: hidden;")
#mainEditorPanel #mainEditorPanel