From 7910f0ae2c75ec5dbf665e86f68c8ad20a2c62dc Mon Sep 17 00:00:00 2001 From: benmcmahon100 Date: Thu, 13 Aug 2015 01:20:12 +0100 Subject: [PATCH] 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 --- public/js/main_0.0.3.js | 56 ++++++++------- server/views/coursewares/showHTML.jade | 83 +++++++++++----------- server/views/coursewares/showJS.jade | 95 +++++++++++++------------- 3 files changed, 117 insertions(+), 117 deletions(-) diff --git a/public/js/main_0.0.3.js b/public/js/main_0.0.3.js index 29d8709065f..3d9f80acde7 100644 --- a/public/js/main_0.0.3.js +++ b/public/js/main_0.0.3.js @@ -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(); + }); }); } } diff --git a/server/views/coursewares/showHTML.jade b/server/views/coursewares/showHTML.jade index 4beb71096d5..9b703804a0d 100644 --- a/server/views/coursewares/showHTML.jade +++ b/server/views/coursewares/showHTML.jade @@ -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 diff --git a/server/views/coursewares/showJS.jade b/server/views/coursewares/showJS.jade index 32987b638aa..367d1ba9b5e 100644 --- a/server/views/coursewares/showJS.jade +++ b/server/views/coursewares/showJS.jade @@ -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