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);
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();
});
});
}
}

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

@ -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
| &nbsp; 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
| &nbsp; Reset
label.btn.btn-success#trigger-help-modal
i.fa.fa-medkit
| &nbsp; Help
label.btn.btn-success#trigger-issue-modal
i.fa.fa-bug
| &nbsp; 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
| &nbsp; 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
| &nbsp; Reset
label.btn.btn-success#trigger-help-modal
i.fa.fa-medkit
| &nbsp; Help
label.btn.btn-success#trigger-issue-modal
i.fa.fa-bug
| &nbsp; 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

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

@ -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
| &nbsp; Run code (ctrl + enter)
.button-spacer
.btn-group.input-group.btn-group-justified
label.btn.btn-success#trigger-reset-modal
i.fa.fa-refresh
| &nbsp; Reset
label.btn.btn-success#trigger-help-modal
i.fa.fa-medkit
| &nbsp; Help
label.btn.btn-success#trigger-issue-modal
i.fa.fa-bug
| &nbsp; 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
| &nbsp; Run code (ctrl + enter)
.button-spacer
.btn-group.input-group.btn-group-justified
label.btn.btn-success#trigger-reset-modal
i.fa.fa-refresh
| &nbsp; Reset
label.btn.btn-success#trigger-help-modal
i.fa.fa-medkit
| &nbsp; Help
label.btn.btn-success#trigger-issue-modal
i.fa.fa-bug
| &nbsp; 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