make bonfire view look like html view

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

View File

@ -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 {

View File

@ -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."
],

View File

@ -239,7 +239,7 @@
],
"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(/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": [
"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",
"<br>",

View File

@ -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:&thinsp;
.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:&thinsp;
if (difficulty == "0")
i.ion-ios-flame-outline
i.ion-ios-flame-outline
@ -58,30 +58,21 @@ 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
p.wrappable.negative-10!= sentence
.negative-bottom-margin-30
#MDN-links
p Here are some helpful 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]}
#less-info.btn.btn-primary.btn-block.btn-primary-ghost
span.ion-arrow-up-b
| Less information
if (user)
form.form-horizontal(novalidate='novalidate', name='completedWithForm')
.form-group.text-center
.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")
@ -90,7 +81,10 @@ block content
alert(type='danger')
span.ion-close-circled
| Username not found
#submitButton.btn.btn-primary.btn-big.btn-block Run code (ctrl + enter)
label.negative-10.btn.btn-primary.btn-block#submitButton
i.fa.fa-play
| &nbsp; Run code (ctrl + enter)
if (user && user.sentSlackInvite)
.button-spacer
.btn-group.input-group.btn-group-justified
@ -108,7 +102,7 @@ block content
.form-group.codeMirrorView
textarea#codeOutput(style='display: none;')
br
#testSuite
#testSuite.negative-10
br
script(type="text/javascript").
var tests = !{JSON.stringify(tests)};
@ -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 &thinsp;

View File

@ -20,12 +20,11 @@ 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
h3.text-center.negative-10= name
.bonfire-instructions
for sentence in details
p.wrappable.negative-10!= sentence