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

Merge branch 'staging' into bonfire-tests

Browse Source
This commit is contained in:
Quincy Larson
2015-09-14 14:56:06 -07:00
parent 952b5e8e70 f659141746
commit d66dbc3879
8 changed files with 38 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
bower.json
View File

@ -26,6 +26,7 @@
"moment": "~2.10.2",
"angular-bootstrap": "~0.13.0",
"ramda": "~0.13.0",
"jshint": "~2.7.0"
"jshint": "~2.7.0",
"lightbox2": "~2.8.1"
}
}

8
client/less/main.less
View File

@ -212,6 +212,10 @@ ul {
font-size: 24px;
}
.map-p {
font-size: 20px;
}
.large-li {
font-size: 24px;
}
@ -282,6 +286,10 @@ ul {
margin-bottom: -6px;
}
.lb-container {
padding: 0px;
}
.btn-social {
width: 250px;
margin: auto;

8
seed/challenges/bootstrap.json
View File

@ -347,7 +347,7 @@
"description": [
"Normally, your <code>button</code> elements are only as wide as the text that they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.",
"This image illustrates the difference between <code>inline</code> elements and <code>block-level</code> elements:",
"<img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'>",
"<a href=\"http://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" title=\"Click to enlarge\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'></a>",
"Note that these buttons still need the <code>btn</code> class.",
"Add Bootstrap's <code>btn-block</code> class to your Bootstrap button."
],
@ -700,7 +700,7 @@
"description": [
"Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.",
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
"<a href=\"http://i.imgur.com/FaYuui8.png\" target=\"_blank\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
"<a href=\"http://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" title=\"Click to enlarge\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
"Note that in this illustration, the <code>col-md-*</code> class is being used. Here, <code>md</code> means medium, and <code>*</code> is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
"In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.",
"Put the <code>Like</code>, <code>Info</code> and <code>Delete</code> buttons side-by-side by nesting all three of them within one <code>&#60;div class=\"row\"&#62;</code> element, then each of them within a <code>&#60;div class=\"col-xs-4\"&#62;</code> element.",
@ -895,7 +895,7 @@
"description": [
"You can use spans to create inline elements. Remember when we used the <code>btn-block</code> class to make the button fill the entire row?",
"This image illustrates the difference between <code>inline</code> elements and <code>block-level</code> elements:",
"<img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'>",
"<a href=\"http://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" title=\"Click to enlarge\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'></a>",
"By using the <code>span</code> element, you can put several elements together, and even style different parts of the same element differently.",
"Nest the word \"love\" in your \"Things cats love\" element below within a <code>span</code> element. Then give that <code>span</code> the class <code>text-danger</code> to make the text red.",
"Here's how you would do this with the \"Top 3 things cats hate\" element: <code>&#60;p&#62;Top 3 things cats &#60;span class = \"text-danger\"&#62;hate&#60;/span&#62;&#60;/p&#62;</code>"
@ -984,7 +984,7 @@
"We will make a simple heading for our Cat Photo App by putting them in the same row.",
"Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.",
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
"<a href=\"http://i.imgur.com/FaYuui8.png\" target=\"_blank\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
"<a href=\"http://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" title=\"Click to enlarge\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
"Note that in this illustration, the <code>col-md-*</code> class is being used. Here, <code>md</code> means medium, and <code>*</code> is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
"In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.",
"Nest your first image and your <code>h2</code> element within a single <code>&#60;div class=\"row\"&#62;</code> element. Nest your <code>h2</code> text within a <code>&#60;div class=\"col-xs-8\"&#62;</code> and your image in a <code>&#60;div class=\"col-xs-4\"&#62;</code> so that they are on the same line.",

7
seed/challenges/html5-and-css.json
View File

@ -866,7 +866,8 @@
"description": [
"CSS borders have properties like <code>style</code>, <code>color</code> and <code>width</code>.",
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <code>&#60;style&#62; .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } &#60;/style&#62;</code>.",
"Create a class called <code>thick-green-border</code> that puts a 10-pixel-wide green border with a style of <code>solid</code> around an HTML element, and apply that class to your cat photo. You can apply multiple classes to elements by separating them with a space within the <code>class</code> attribute. For example, <code>&lt;element class=\"class1 class2\"&gt;&lt;/element&gt;</code>"
"Create a class called <code>thick-green-border</code> that puts a 10-pixel-wide green border with a style of <code>solid</code> around an HTML element, and apply that class to your cat photo.",
"Remember that you can apply multiple classes to an element by separating each class with a space within its <code>class</code> attribute. For example: <code>&lt;img class=\"class1 class2\"&gt;</code>"
],
"tests": [
"assert($(\"img\").hasClass(\"smaller-image\"), 'Your <code>img</code> element should have the class <code>smaller-image</code>.')",
@ -1060,7 +1061,7 @@
"description": [
"<code>a</code> elements, also known as <code>anchor</code> elements, are used to link to content outside of the current page.",
"Here's a diagram of an <code>a</code> element. In this case, the <code>a</code> element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.",
"<img class=\"img-responsive\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"http://i.imgur.com/hviuZwe.png\">",
"<a href=\"http://i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"http://i.imgur.com/hviuZwe.png\"></a>",
"Here's an example: <code>&#60;p&#62;Here's a &#60;a href=\"http://freecodecamp.com\"&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>.",
"Create an <code>a</code> element that links to <code>http://freecatphotoapp.com</code> and has \"cat photos\" as its <code>anchor text</code>."
],
@ -1130,7 +1131,7 @@
"difficulty": 1.23,
"description": [
"Again, here's a diagram of an <code>a</code> element for your reference:",
"<img class=\"img-responsive\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"http://i.imgur.com/hviuZwe.png\">",
"<a href=\"http://i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"http://i.imgur.com/hviuZwe.png\"></a>",
"Here's an example: <code>&#60;p&#62;Here's a &#60;a href=\"http://freecodecamp.com\"&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>.",
"<code>Nesting</code> just means putting one element inside of another element.",
"Now nest your existing <code>a</code> element within a new <code>p</code> element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link, and the rest of the text is rest is plain text."

2
seed/challenges/jquery.json
View File

@ -58,7 +58,7 @@
"This is important because without your <code>document ready function</code>, your code may run before your HTML is rendered, which would cause bugs.",
"Now let's write our first jQuery statement. All jQuery functions start with a <code>$</code>, usually referred to as a <code>dollar sign operator</code>, or simply as <code>bling</code>.",
"jQuery often selects an HTML element with a <code>selector</code>, then does something to that element.",
"For example, let's make all of your <code>button</code> elements bounce. Just add this code inside your <code>document ready function</code>: <code>$(\"button\").addClass(\"animated bounce\")</code>.",
"For example, let's make all of your <code>button</code> elements bounce. Just add this code inside your document ready function: <code>$(\"button\").addClass(\"animated bounce\")</code>.",
"Note that we've already included both the jQuery library and the Animate.css library in your code editor. So you are using jQuery to apply the Animate.css <code>bounce</code> class to your <code>button</code> elements."
],
"tests": [

40
server/views/challengeMap/show.jade
View File

@ -1,11 +1,5 @@
extends ../layout
block content
.panel
h3.text-center Your friends won't hear about our open source community unless you tell them.
.row
.col-xs-12.col-sm-10.col-sm-offset-1.col-md-8.col-md-offset-2
a.btn.btn-lg.btn-primary.btn-block(href="https://www.facebook.com/sharer/sharer.php?u=http://freecodecamp.com" target='_blank') Share our open source community on Facebook
.spacer
.panel.panel-info
.panel-heading.text-center
h1 Challenge Map
@ -15,7 +9,7 @@ block content
audio(autoplay src='https://s3.amazonaws.com/freecodecamp/t-rex-roar.mp3')
else
img.img-responsive.img-center.border-radius-5(src='https://s3.amazonaws.com/freecodecamp/wide-social-banner.png')
.col-xs-12.col-md-10.col-md-offset-1
.col-xs-12.col-md-8.col-md-offset-2
h2.text-center
span.text-primary #{camperCount} &thinsp;
| campers have joined our community
@ -23,7 +17,7 @@ block content
| since we launched &thinsp;
span.text-primary #{daysRunning} &thinsp;
| days ago.
.spacer
a.btn.btn-lg.signup-btn.btn-block(href="https://www.facebook.com/sharer/sharer.php?u=http://freecodecamp.com" target='_blank') Share our open source community on Facebook and help us grow.
.row
.col-xs-12.col-sm-8.col-sm-offset-2
h3 800 Hours of Practice:
@ -32,22 +26,22 @@ block content
.row
if (user)
if (challengeBlock.completed === 100)
.hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center.large-p.negative-10
.hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center.map-p.negative-10
.col-xs-12.col-sm-9.col-md-10
li.large-p.faded.negative-10
li.map-p.faded.negative-10
a(href='#' + challengeBlock.dashedName)= challengeBlock.name
else
.hidden-xs.col-sm-3.col-md-2
.progress.progress-bar-padding.text-center.thin-progress-bar
.progress-bar(role='progressbar', aria-valuenow=(challengeBlock.completed), aria-valuemin='0', aria-valuemax='100', style='width: ' + challengeBlock.completed + '%;')
.col-xs-12.col-sm-9.col-md-10
li.large-p.negative-10
li.map-p.negative-10
a(href='#' + challengeBlock.dashedName)= challengeBlock.name
else
.hidden-xs.col-sm-3.col-md-2
span.negative-10
.col-xs-12.col-sm-9.col-md-10
li.large-p.negative-10
li.map-p.negative-10
a(href='#' + challengeBlock.dashedName)= challengeBlock.name
.row
@ -57,21 +51,21 @@ block content
| :
ol
.row
.hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.large-p.negative-10
.hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.map-p.negative-10
.col-xs-12.col-sm-9.col-md-10
li.large-p.negative-10 100-hour Nonprofit Project
li.map-p.negative-10 100-hour Nonprofit Project
.row
.hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.large-p.negative-10
.hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.map-p.negative-10
.col-xs-12.col-sm-9.col-md-10
li.large-p.negative-10 200-hour Nonprofit Project #1
li.map-p.negative-10 200-hour Nonprofit Project #1
.row
.hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.large-p.negative-10
.hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.map-p.negative-10
.col-xs-12.col-sm-9.col-md-10
li.large-p.negative-10 200-hour Nonprofit Project #2
li.map-p.negative-10 200-hour Nonprofit Project #2
.row
.hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.large-p.negative-10
.hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.map-p.negative-10
.col-xs-12.col-sm-9.col-md-10
li.large-p.negative-10 300-hour Nonprofit Project
li.map-p.negative-10 300-hour Nonprofit Project
hr
for challengeBlock in blocks
@ -88,9 +82,9 @@ block content
for challenge in challengeBlock.challenges
if challenge.completed
.row
.hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center.large-p.negative-10
.hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center.map-p.negative-10
.col-xs-12.col-sm-9.col-md-10
li.faded.large-p.negative-10
li.faded.map-p.negative-10
a(href="/challenges/#{challenge.dashedName}")
span.capitalize= challenge.type + ': '
span= challenge.title
@ -102,7 +96,7 @@ block content
.hidden-xs.col-sm-3.col-md-2
span.negative-10
.col-xs-12.col-sm-9.col-md-10
li.large-p.negative-10
li.map-p.negative-10
a(href="/challenges/#{challenge.dashedName}")
span.capitalize= challenge.type + ': '
span= challenge.title

1
server/views/partials/scripts.jade
View File

@ -28,6 +28,7 @@ script.
script(src=rev('/js', 'main.js'))
script(src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js")
script(src="/bower_components/ramda/dist/ramda.min.js")
script(src='/bower_components/lightbox2/dist/js/lightbox.min.js')
script.
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

1
server/views/partials/stylesheets.jade
View File

@ -1,4 +1,5 @@
link(rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato:400|Inconsolata")
link(rel="stylesheet" type="text/css" href="/bower_components/cal-heatmap/cal-heatmap.css")
link(rel='stylesheet', href='/bower_components/font-awesome/css/font-awesome.min.css')
link(rel='stylesheet', href='/bower_components/lightbox2/dist/css/lightbox.css')
link(rel='stylesheet', href=rev('/css', 'main.css'))