From 0c799ec02f2874d21302a06f77e5627c4898a9ca Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Sun, 7 Jun 2015 21:49:14 -0700 Subject: [PATCH] make bonfire view look like html view --- public/css/main.less | 8 +- seed_data/challenges/basic-bonfires.json | 3 +- .../challenges/future-jquery-ajax-json.json | 4 +- views/coursewares/showBonfire.jade | 123 +++++++++--------- views/coursewares/showHTML.jade | 81 ++++++------ 5 files changed, 105 insertions(+), 114 deletions(-) diff --git a/public/css/main.less b/public/css/main.less index 172368c69e..5fd00056d7 100644 --- a/public/css/main.less +++ b/public/css/main.less @@ -201,12 +201,12 @@ ul { .responsive-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .responsive-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } -.positive-5 { - margin-top: 5px; +.positive-10 { + margin-top: 10px; } -.positive-10 { - padding-top: 10px; +.positive-15-bottom { + margin-bottom: 15px; } .positive-15 { diff --git a/seed_data/challenges/basic-bonfires.json b/seed_data/challenges/basic-bonfires.json index d067eed8e3..186bd5c7b3 100644 --- a/seed_data/challenges/basic-bonfires.json +++ b/seed_data/challenges/basic-bonfires.json @@ -43,9 +43,8 @@ "name": "Bonfire: Meet Bonfire", "difficulty": "0", "description": [ - "Click the button below for further instructions.", "Your goal is to fix the failing test.", - "First, run all the tests by clicking \"Run code\" or by pressing Control + Enter", + "First, run all the tests by clicking \"Run code\" or by pressing Control + Enter.", "The failing test is in red. Fix the code so that all tests pass. Then you can move on to the next Bonfire.", "Make this function return true no matter what." ], diff --git a/seed_data/challenges/future-jquery-ajax-json.json b/seed_data/challenges/future-jquery-ajax-json.json index 16fb6d6e09..87d261721a 100644 --- a/seed_data/challenges/future-jquery-ajax-json.json +++ b/seed_data/challenges/future-jquery-ajax-json.json @@ -239,7 +239,7 @@ ], "tests": [ "assert(!editor.match(/nce\\'\\)\\;/g) && !editor.match(/ke\\'\\)\\;/g), 'Delete your img element selector statement and your \".btn\" selector statement.')", - "assert(editor.match(/css.*,.*background-color.*red.\\);/g), 'Select the element with the id of \"cat-photo-form\" give it the background color of red.')" + "assert(editor.match(/css.*,.*background-color.*gray.\\);/g), 'Select the element with the id of \"cat-photo-form\" give it the background color of gray.')" ], "challengeSeed": [ "fccss", @@ -292,7 +292,7 @@ "challengeSeed": [ "fccss", " $(document).ready(function() {", - " $('#cat-photo-form').css('background-color', 'red');", + " $('#cat-photo-form').css('background-color', 'gray');", " });", "fcces", "
", diff --git a/views/coursewares/showBonfire.jade b/views/coursewares/showBonfire.jade index 4270e5975a..005ed1f1b7 100644 --- a/views/coursewares/showBonfire.jade +++ b/views/coursewares/showBonfire.jade @@ -17,11 +17,11 @@ block content script(type='text/javascript', src='/js/lib/coursewares/sandbox.js') .row(ng-controller="pairedWithController") - .col-xs-12.col-sm-12.col-md-4.bonfire-top - #testCreatePanel - h1#bonfire-name.text-center= name - h2.text-center - .bonfire-flames Difficulty:  + .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 @@ -58,67 +58,61 @@ block content i.ion-ios-flame i.ion-ios-flame i.ion-ios-flame - .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 - #MDN-links - p Here are some helpful links: - for link, index in MDNlinks - ul: li: a(href=""+link, target="_blank") !{MDNkeys[index]} - #less-info.btn.btn-primary.btn-block.btn-primary-ghost - span.ion-arrow-up-b - | Less information + .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 - .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 - #submitButton.btn.btn-primary.btn-big.btn-block Run code (ctrl + enter) - if (user && user.sentSlackInvite) - .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 + 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) + + if (user && user.sentSlackInvite) .button-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 started = Math.floor(Date.now()); - var challengeType = !{JSON.stringify(challengeType)}; - var _ = R; - var dashed = !{JSON.stringify(dashedName)}; + .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 + .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 @@ -140,7 +134,6 @@ block content a.animated.fadeIn.btn.btn-lg.btn-primary.btn-block#next-courseware-button(name='_csrf', value=_csrf) Go to my next challenge (ctrl + enter) - if (user.progressTimestamps.length > 2) a.animated.fadeIn.btn.btn-lg.btn-block.btn-twitter(target="_blank", href="https://twitter.com/intent/tweet?text=I%20just%20#{verb}%20%40FreeCodeCamp%20#{name}&url=http%3A%2F%2Ffreecodecamp.com/challenges/#{dashedName}&hashtags=LearnToCode, JavaScript") i.fa.fa-twitter   diff --git a/views/coursewares/showHTML.jade b/views/coursewares/showHTML.jade index 88e8ed7f72..2ebc64d0dd 100644 --- a/views/coursewares/showHTML.jade +++ b/views/coursewares/showHTML.jade @@ -20,49 +20,48 @@ block content script(src='/js/lib/codemirror/mode/htmlmixed/htmlmixed.js') script(src='/js/lib/codemirror/addon/emmet/emmet.js') .row.courseware-height - .vertical-scroll - .col-xs-12.col-sm-12.col-md-3.col-lg-3 - .well - .row - .col-xs-12 - h4.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) + .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) - if (user.sentSlackInvite) - .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 - .button-spacer + if (user.sentSlackInvite) + .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 + .button-spacer + script. + var userLoggedIn = true; + else + a.btn.signup-btn.btn-block.btn-block.negative-15(href='/login') Sign in so you can save your progress script. - var userLoggedIn = true; - else - 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()); + 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