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

make bonfire view look like html view

Browse Source
This commit is contained in:
Quincy Larson
2015-06-07 21:49:14 -07:00
parent 662c17de90
commit 0c799ec02f
5 changed files with 105 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
public/css/main.less
View File

@ -201,12 +201,12 @@ ul {
.responsive-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .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%; } .responsive-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.positive-5 { .positive-10 {
margin-top: 5px; margin-top: 10px;
} }
.positive-10 { .positive-15-bottom {
padding-top: 10px; margin-bottom: 15px;
} }
.positive-15 { .positive-15 {

3
seed_data/challenges/basic-bonfires.json
View File

@ -43,9 +43,8 @@
"name": "Bonfire: Meet Bonfire", "name": "Bonfire: Meet Bonfire",
"difficulty": "0", "difficulty": "0",
"description": [ "description": [
"Click the button below for further instructions.",
"Your goal is to fix the failing test.", "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.", "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." "Make this function return true no matter what."
], ],

4
seed_data/challenges/future-jquery-ajax-json.json
View File

@ -239,7 +239,7 @@
], ],
"tests": [ "tests": [
"assert(!editor.match(/nce\\'\\)\\;/g) && !editor.match(/ke\\'\\)\\;/g), 'Delete your <code>img</code> element selector statement and your \".btn\" selector statement.')", "assert(!editor.match(/nce\\'\\)\\;/g) && !editor.match(/ke\\'\\)\\;/g), 'Delete your <code>img</code> element selector statement and your \".btn\" selector statement.')",
"assert(editor.match(/css.*,.*background-color.*red.\\);/g), 'Select the element with the <code>id</code> of \"cat-photo-form\" give it the background color of red.')" "assert(editor.match(/css.*,.*background-color.*gray.\\);/g), 'Select the element with the <code>id</code> of \"cat-photo-form\" give it the background color of gray.')"
], ],
"challengeSeed": [ "challengeSeed": [
"fccss", "fccss",
@ -292,7 +292,7 @@
"challengeSeed": [ "challengeSeed": [
"fccss", "fccss",
" $(document).ready(function() {", " $(document).ready(function() {",
" $('#cat-photo-form').css('background-color', 'red');", " $('#cat-photo-form').css('background-color', 'gray');",
" });", " });",
"fcces", "fcces",
"<br>", "<br>",

123
views/coursewares/showBonfire.jade
View File

@ -17,11 +17,11 @@ block content
script(type='text/javascript', src='/js/lib/coursewares/sandbox.js') script(type='text/javascript', src='/js/lib/coursewares/sandbox.js')
.row(ng-controller="pairedWithController") .row(ng-controller="pairedWithController")
.col-xs-12.col-sm-12.col-md-4.bonfire-top .col-xs-12.col-sm-12.col-md-4.col-lg-3
#testCreatePanel #testCreatePanel.well
h1#bonfire-name.text-center= name h3.text-center.negative-10= name
h2.text-center .positive-15.positive-15-bottom
.bonfire-flames Difficulty:&thinsp; h4.text-center.bonfire-flames Difficulty:&thinsp;
if (difficulty == "0") if (difficulty == "0")
i.ion-ios-flame-outline i.ion-ios-flame-outline
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 i.ion-ios-flame
i.ion-ios-flame i.ion-ios-flame
.well .row
.row .col-xs-12
.col-xs-12 .bonfire-instructions
.bonfire-instructions for sentence in details
p.wrappable= brief p.wrappable.negative-10!= sentence
#brief-instructions .negative-bottom-margin-30
#more-info.btn.btn-primary.btn-block.btn-primary-ghost #MDN-links
span.ion-arrow-down-b p.negative-10 Here are some helpful links:
| More information for link, index in MDNlinks
#long-instructions.row.hide .negative-10
.col-xs-12 ul: li: a(href=""+link, target="_blank") !{MDNkeys[index]}
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
if (user) if (user)
form.form-horizontal(novalidate='novalidate', name='completedWithForm') form.form-horizontal(novalidate='novalidate', name='completedWithForm')
.form-group.text-center .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 // extra field to distract password tools like lastpass from injecting css into our username field
input.form-control(ng-show="false") 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") 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") .col-xs-12(ng-cloak, ng-show="completedWithForm.$error.exists && !completedWithForm.existingUser.$pristine && existingUser.length > 0")
alert(type='danger') alert(type='danger')
span.ion-close-circled span.ion-close-circled
| Username not found | Username not found
#submitButton.btn.btn-primary.btn-big.btn-block Run code (ctrl + enter) label.negative-10.btn.btn-primary.btn-block#submitButton
if (user && user.sentSlackInvite) i.fa.fa-play
.button-spacer | &nbsp; Run code (ctrl + enter)
.btn-group.input-group.btn-group-justified
label.btn.btn-success#trigger-help-modal if (user && user.sentSlackInvite)
i.fa.fa-medkit
| &nbsp; Help
label.btn.btn-success#trigger-pair-modal
i.fa.fa-user-plus
| &nbsp; Pair
label.btn.btn-success#trigger-issue-modal
i.fa.fa-bug
| &nbsp; Bug
.button-spacer .button-spacer
form.code .btn-group.input-group.btn-group-justified
.form-group.codeMirrorView label.btn.btn-success#trigger-help-modal
textarea#codeOutput(style='display: none;') i.fa.fa-medkit
br | &nbsp; Help
#testSuite label.btn.btn-success#trigger-pair-modal
br i.fa.fa-user-plus
script(type="text/javascript"). | &nbsp; Pair
var tests = !{JSON.stringify(tests)}; label.btn.btn-success#trigger-issue-modal
var challengeSeed = !{JSON.stringify(challengeSeed)}; i.fa.fa-bug
var challenge_Id = !{JSON.stringify(challengeId)}; | &nbsp; Bug
var challenge_Name = !{JSON.stringify(name)}; .button-spacer
var started = Math.floor(Date.now()); form.code
var challengeType = !{JSON.stringify(challengeType)}; .form-group.codeMirrorView
var _ = R; textarea#codeOutput(style='display: none;')
var dashed = !{JSON.stringify(dashedName)}; 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
#mainEditorPanel #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) 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) 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") 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 &thinsp; i.fa.fa-twitter &thinsp;

81
views/coursewares/showHTML.jade
View File

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