Merge pull request #1183 from benmcmahon100/patch-6

Combined UI Fixes

public/js/main_0.0.3.js

@@ -349,6 +349,48 @@ $(document).ready(function() {
       });
   };
 
+    //fakeiphone positioning hotfix
+    if($('.iphone-position').html() !==undefined || $('.iphone').html() !== undefined){
+        var startIphonePosition = parseInt($('.iphone-position').css('top').replace('px', ''));
+        var startIphone = parseInt($('.iphone').css('top').replace('px', ''));
+        $(window).on('scroll', function(){
+            if((($('.courseware-height').height() + $('.courseware-height').offset().top)-$(window).scrollTop()-$('.iphone-position').height()) <= 0){
+                $('.iphone-position').css('top', startIphonePosition+(($('.courseware-height').height() + $('.courseware-height').offset().top)-$(window).scrollTop()-$('.iphone-position').height()));
+                $('.iphone').css('top', startIphonePosition+(($('.courseware-height').height() + $('.courseware-height').offset().top)-$(window).scrollTop()-$('.iphone-position').height())+120);
+            }
+            else{
+                $('.iphone-position').css('top', startIphonePosition);
+                $('.iphone').css('top', startIphone);
+            }
+        });
+    }
+
+    if($('.scroll-locker') != undefined){
+        function lockTop(initOff){
+            $(window).scroll(function() {
+                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', '75%').css('overflow-y', 'auto').css('overflow-x', 'hidden');
+                        $('.well').css('margin-right', '6px');
+                    }
+                    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', '75%').css('overflow-y', 'auto').css('overflow-x', 'hidden');
+                        $('.well').css('margin-right', '6px');
+                    }
+                }
+                else {
+                    $('.scroll-locker').css('position', 'inherit').css('top', 'inherit').css('width', '100%').css('max-height', '').css('overflow-y', 'auto').css('overflow-x', 'hidden');
+                    $('.well').css('margin-right', '');
+                }
+            });
+        }
+        var initOff = ($('.scroll-locker').offset().top - $(window).scrollTop());
+        lockTop(initOff);
+        $(window).on('resize', function(){
+            lockTop(initOff);
+        });
+    }
+
   $('#comment-button').on('click', commentSubmitButtonHandler);
 });
 

server/views/coursewares/showBonfire.jade

@@ -18,102 +18,103 @@ block content
 
     .row(ng-controller="pairedWithController")
         .col-xs-12.col-sm-12.col-md-4.col-lg-3
-            #testCreatePanel.well
-                h3.text-center.negative-10= name
-                .positive-15.positive-15-bottom
-                    h4.text-center.bonfire-flames Difficulty: 
-                        if (difficulty == "0")
-                            i.ion-ios-flame-outline
-                            i.ion-ios-flame-outline
-                            i.ion-ios-flame-outline
-                            i.ion-ios-flame-outline
-                            i.ion-ios-flame-outline
-                        if (difficulty == "1")
-                            i.ion-ios-flame
-                            i.ion-ios-flame-outline
-                            i.ion-ios-flame-outline
-                            i.ion-ios-flame-outline
-                            i.ion-ios-flame-outline
-                        if (difficulty == "2")
-                            i.ion-ios-flame
-                            i.ion-ios-flame
-                            i.ion-ios-flame-outline
-                            i.ion-ios-flame-outline
-                            i.ion-ios-flame-outline
-                        if (difficulty == "3")
-                            i.ion-ios-flame
-                            i.ion-ios-flame
-                            i.ion-ios-flame
-                            i.ion-ios-flame-outline
-                            i.ion-ios-flame-outline
-                        if (difficulty == "4")
-                            i.ion-ios-flame
-                            i.ion-ios-flame
-                            i.ion-ios-flame
-                            i.ion-ios-flame
-                            i.ion-ios-flame-outline
-                        if (difficulty == "5")
-                            i.ion-ios-flame
-                            i.ion-ios-flame
-                            i.ion-ios-flame
-                            i.ion-ios-flame
-                            i.ion-ios-flame
-                .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
+            .scroll-locker
+                #testCreatePanel.well
+                    h3.text-center.negative-10= name
+                    .positive-15.positive-15-bottom
+                        h4.text-center.bonfire-flames Difficulty: 
+                            if (difficulty == "0")
+                                i.ion-ios-flame-outline
+                                i.ion-ios-flame-outline
+                                i.ion-ios-flame-outline
+                                i.ion-ios-flame-outline
+                                i.ion-ios-flame-outline
+                            if (difficulty == "1")
+                                i.ion-ios-flame
+                                i.ion-ios-flame-outline
+                                i.ion-ios-flame-outline
+                                i.ion-ios-flame-outline
+                                i.ion-ios-flame-outline
+                            if (difficulty == "2")
+                                i.ion-ios-flame
+                                i.ion-ios-flame
+                                i.ion-ios-flame-outline
+                                i.ion-ios-flame-outline
+                                i.ion-ios-flame-outline
+                            if (difficulty == "3")
+                                i.ion-ios-flame
+                                i.ion-ios-flame
+                                i.ion-ios-flame
+                                i.ion-ios-flame-outline
+                                i.ion-ios-flame-outline
+                            if (difficulty == "4")
+                                i.ion-ios-flame
+                                i.ion-ios-flame
+                                i.ion-ios-flame
+                                i.ion-ios-flame
+                                i.ion-ios-flame-outline
+                            if (difficulty == "5")
+                                i.ion-ios-flame
+                                i.ion-ios-flame
+                                i.ion-ios-flame
+                                i.ion-ios-flame
+                                i.ion-ios-flame
+                    .row
                         .col-xs-12
-                            // extra field to distract password tools like lastpass from injecting css into our username field
-                            input.form-control(ng-show="false")
-                            input.form-control#completed-with(name="existingUser", placeholder="Your pair's username if pairing", existing-username='', ng-model="existingUser")
-                        .col-xs-12(ng-cloak, ng-show="completedWithForm.$error.exists && !completedWithForm.existingUser.$pristine && existingUser.length > 0")
-                            alert(type='danger')
-                                span.ion-close-circled
-                                | Username not found
-            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-pair-modal
-                    i.fa.fa-user-plus
-                        |   Pair
-                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
+                                input.form-control(ng-show="false")
+                                input.form-control#completed-with(name="existingUser", placeholder="Your pair's username if pairing", existing-username='', ng-model="existingUser")
+                            .col-xs-12(ng-cloak, ng-show="completedWithForm.$error.exists && !completedWithForm.existingUser.$pristine && existingUser.length > 0")
+                                alert(type='danger')
+                                    span.ion-close-circled
+                                    | Username not found
+                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-pair-modal
+                        i.fa.fa-user-plus
+                            |   Pair
+                    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
             #mainEditorPanel

server/views/coursewares/showHTML.jade

@@ -21,45 +21,46 @@ block content
     script(src='/js/lib/codemirror/addon/emmet/emmet.js')
     .row.courseware-height
         .col-xs-12.col-sm-12.col-md-3.col-lg-3
-            .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-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
+            .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-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
             #mainEditorPanel
                 form.code

server/views/coursewares/showJS.jade

@@ -16,50 +16,51 @@ block content
     script(src='/js/lib/coursewares/sandbox.js')
     .row
         .col-xs-12.col-sm-12.col-md-4.bonfire-top
-            #testCreatePanel
-                h1.text-center= name
-                .well
-                    .row
-                        .col-xs-12
-                            .bonfire-instructions
-                                p.wrappable= brief
-                                #brief-instructions
-                                    #more-info.btn.btn-primary.btn-block.btn-primary-ghost
-                                        span.ion-arrow-down-b
-                                        | More information
-                                #long-instructions.row.hide
-                                    .col-xs-12
-                                        for sentence in details
-                                            p.wrappable!= sentence
-                                        #less-info.btn.btn-primary.btn-block.btn-primary-ghost
-                                            span.ion-arrow-up-b
-                                            | Less information
-                #submitButton.btn.btn-primary.btn-big.btn-block Run code (ctrl + enter)
-                .button-spacer
-                .btn-group.input-group.btn-group-justified
-                    label.btn.btn-success#trigger-help-modal
-                        i.fa.fa-medkit
-                            |   Help
-                    label.btn.btn-success#trigger-pair-modal
-                        i.fa.fa-user-plus
-                            |   Pair
-                    label.btn.btn-success#trigger-issue-modal
-                        i.fa.fa-bug
-                            |   Bug
-                    .spacer
-                form.code
-                    .form-group.codeMirrorView
-                        textarea#codeOutput(style='display: none;')
-                br
-                #testSuite
-                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 challengeType = !{JSON.stringify(challengeType)};
-                    var started = Math.floor(Date.now());
+            .scroll-locker
+                #testCreatePanel
+                    h1.text-center= name
+                    .well
+                        .row
+                            .col-xs-12
+                                .bonfire-instructions
+                                    p.wrappable= brief
+                                    #brief-instructions
+                                        #more-info.btn.btn-primary.btn-block.btn-primary-ghost
+                                            span.ion-arrow-down-b
+                                            | More information
+                                    #long-instructions.row.hide
+                                        .col-xs-12
+                                            for sentence in details
+                                                p.wrappable!= sentence
+                                            #less-info.btn.btn-primary.btn-block.btn-primary-ghost
+                                                span.ion-arrow-up-b
+                                                | Less information
+                    #submitButton.btn.btn-primary.btn-big.btn-block Run code (ctrl + enter)
+                    .button-spacer
+                    .btn-group.input-group.btn-group-justified
+                        label.btn.btn-success#trigger-help-modal
+                            i.fa.fa-medkit
+                                |   Help
+                        label.btn.btn-success#trigger-pair-modal
+                            i.fa.fa-user-plus
+                                |   Pair
+                        label.btn.btn-success#trigger-issue-modal
+                            i.fa.fa-bug
+                                |   Bug
+                        .spacer
+                    form.code
+                        .form-group.codeMirrorView
+                            textarea#codeOutput(style='display: none;')
+                    br
+                    #testSuite
+                    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 challengeType = !{JSON.stringify(challengeType)};
+                        var started = Math.floor(Date.now());
 
         .col-xs-12.col-sm-12.col-md-8
             #mainEditorPanel