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

Merge pull request #109 from FreeCodeCamp/ux-improvements

Browse Source 
Ux improvements
This commit is contained in:
Quincy Larson
2015-02-19 18:14:44 -08:00
parent 34e54f7cae 85f6c6eb4d
commit efacacff79
12 changed files with 164 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app.js
View File

@@ -208,6 +208,7 @@ app.use(
app.get('/', homeController.index); app.get('/', homeController.index);
app.get('/privacy', resourcesController.privacy); app.get('/privacy', resourcesController.privacy);
app.get('/jquery-exercises', resourcesController.jqueryExercises); app.get('/jquery-exercises', resourcesController.jqueryExercises);
app.get('/chat', resourcesController.chat);
app.get('/live-pair-programming', resourcesController.livePairProgramming); app.get('/live-pair-programming', resourcesController.livePairProgramming);
app.get('/install-screenhero', resourcesController.installScreenHero); app.get('/install-screenhero', resourcesController.installScreenHero);
app.get('/javascript-in-your-inbox', resourcesController.javaScriptInYourInbox); app.get('/javascript-in-your-inbox', resourcesController.javaScriptInYourInbox);

29
controllers/resources.js
View File

@@ -55,6 +55,12 @@ module.exports = {
}); });
}, },
chat: function chat(req, res) {
res.render('resources/chat', {
title: "Enter Free Code Camp's Chat Rooms"
});
},
nonprofitProjectInstructions: function nonprofitProjectInstructions(req, res) { nonprofitProjectInstructions: function nonprofitProjectInstructions(req, res) {
res.render('resources/nonprofit-project-instructions', { res.render('resources/nonprofit-project-instructions', {
title: 'Nonprofit Project Instructions' title: 'Nonprofit Project Instructions'
@@ -142,29 +148,22 @@ module.exports = {
var timeDiff = Math.abs(date2.getTime() - date1.getTime()); var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var daysRunning = Math.ceil(timeDiff / (1000 * 3600 * 24)); var daysRunning = Math.ceil(timeDiff / (1000 * 3600 * 24));
var announcements = resources.announcements; var announcements = resources.announcements;
User.count({'points': {'$gt': 2}}, function (err, c3) { User.count({}, function (err, c3) {
if (err) { if (err) {
debug('User err: ', err); debug('User err: ', err);
next(err); next(err);
} }
User.count({'points': {'$gt': 9}}, function (err, c10) { User.count({'points': {'$gt': 53}}, function (err, all) {
if (err) { if (err) {
debug('User err: ', err); debug('User err: ', err);
next(err); next(err);
} }
User.count({'points': {'$gt': 53}}, function (err, all) { res.render('resources/learn-to-code', {
if (err) { title: 'About Free Code Camp and Our Team of Volunteers',
debug('User err: ', err); daysRunning: daysRunning,
next(err); c3: c3,
} all: all,
res.render('resources/learn-to-code', { announcements: announcements
title: 'About Free Code Camp and Our Team of Volunteers',
daysRunning: daysRunning,
c3: c3,
c10: c10,
all: all,
announcements: announcements
});
}); });
}); });
}); });

9
public/css/main.less
View File

@@ -700,8 +700,13 @@ iframe.iphone {
line-height: 150%; line-height: 150%;
} }
.github-button-container { .github-and-twitter-button-text {
padding-top: 5px; padding-top: 10px;
}
.gitter-imbed {
height: 100%;
margin-bottom: 50px;
} }
//uncomment this to see the dimensions of all elements outlined in red //uncomment this to see the dimensions of all elements outlined in red

94
views/account/account.jade
View File

@@ -2,8 +2,8 @@ extends ../layout
block content block content
script. script.
var challengeName = 'Account View' var challengeName = 'Account View'
.panel.panel-primary.min-height-1000(ng-controller="profileValidationController") .panel.panel-info.min-height-1000(ng-controller="profileValidationController")
.panel-heading.text-center Update your profile here: .panel-heading.text-center Update your portfolio here:
.panel-body .panel-body
.container.text-center .container.text-center
form.form-horizontal(action='/account/profile', method='POST', novalidate='novalidate', name='profileForm' ng-show="asyncComplete") form.form-horizontal(action='/account/profile', method='POST', novalidate='novalidate', name='profileForm' ng-show="asyncComplete")
@@ -268,75 +268,65 @@ block content
span.ion-edit span.ion-edit
| Update my Portfolio | Update my Portfolio
br br
.panel.panel-primary
.panel-heading.text-center Actions
.panel-body
.col-xs-12
if (user.profile.username)
a.btn.btn-lg.btn-block.btn-info.btn-link-social(href='/#{user.profile.username}') Check out my Public Profile
a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='/challenges') Take me to my current challenge
a.btn.btn-lg.btn-block.btn-warning.btn-link-social(href='/logout') Sign out
br
- if (!user.google || !user.facebook || /*!user.github ||*/ !user.linkedin || !user.twitter) - if (!user.google || !user.facebook || /*!user.github ||*/ !user.linkedin || !user.twitter)
.panel.panel-primary .panel.panel-info
.panel-heading.text-center Link other services to your account: .panel-heading.text-center Manage your account here:
.panel-body .panel-body
- if (!user.google) - if (!user.google)
.col-xs-12 .col-xs-12
a.btn.btn-lg.btn-block.btn-google-plus.btn-link-social(href='/auth/google') a.btn.btn-lg.btn-block.btn-google-plus.btn-link-social(href='/auth/google')
i.fa.fa-google-plus i.fa.fa-google-plus
| Link Google with your account | Link Google with my account
- if (!user.facebook) - if (!user.facebook)
.col-xs-12 .col-xs-12
a.btn.btn-lg.btn-block.btn-facebook.btn-link-social(href='/auth/facebook') a.btn.btn-lg.btn-block.btn-facebook.btn-link-social(href='/auth/facebook')
i.fa.fa-facebook i.fa.fa-facebook
| Link Facebook with your account | Link Facebook with my account
//- if (!user.github) //- if (!user.github)
// .col-xs-12 // .col-xs-12
// a.btn.btn-lg.btn-block.btn-github.btn-link-social(href='/auth/github') // a.btn.btn-lg.btn-block.btn-github.btn-link-social(href='/auth/github')
// i.fa.fa-github // i.fa.fa-github
// | Link GitHub with your account // | Link GitHub with my account
- if (!user.linkedin) - if (!user.linkedin)
.col-xs-12 .col-xs-12
a.btn.btn-lg.btn-block.btn-linkedin.btn-link-social(href='/auth/linkedin') a.btn.btn-lg.btn-block.btn-linkedin.btn-link-social(href='/auth/linkedin')
i.fa.fa-linkedin i.fa.fa-linkedin
| Link LinkedIn with your account | Link LinkedIn with my account
- if (!user.twitter) - if (!user.twitter)
.col-xs-12 .col-xs-12
a.btn.btn-lg.btn-block.btn-twitter.btn-link-social(href='/auth/twitter') a.btn.btn-lg.btn-block.btn-twitter.btn-link-social(href='/auth/twitter')
i.fa.fa-twitter i.fa.fa-twitter
| Link Twitter with your account | Link Twitter with my account
.col-xs-12
.panel.panel-danger a.btn.btn-lg.btn-block.btn-warning.btn-link-social(href='/logout')
.panel-heading.text-center Danger Zone: span.ion-android-exit
.panel-body | Sign me out of Free Code Camp
.col-xs-12.text-center .col-xs-12
button.btn.btn-danger.btn-small.confirm-deletion a.btn.btn-lg.btn-block.btn-danger.confirm-deletion.btn-link-social
span.ion-trash-b span.ion-trash-b
| I want to delete my account | Delete my Free Code Camp account
br script.
br $('.confirm-deletion').on("click", function() {
script. $('#modal-dialog').modal('show');
$('.confirm-deletion').on("click", function() { });
$('#modal-dialog').modal('show'); #modal-dialog.modal.animated.wobble
}); .modal-dialog
#modal-dialog.modal.animated.wobble .modal-content
.modal-dialog .modal-header
.modal-content a.close(href='#', data-dismiss='modal', aria-hidden='true') ×
.modal-header h3 Are you really leaving us?
a.close(href='#', data-dismiss='modal', aria-hidden='true') × .modal-body
h3 Are you really leaving us? p Pro Tip: If you tweet feedback to 
.modal-body a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") @FreeCodeCamp
p Pro Tip: If you tweet feedback to  | , we'll act quickly on it!
a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") @FreeCodeCamp .modal-footer
| , we'll act quickly on it! a.btn.btn-success.btn-block(href='#', data-dismiss='modal', aria-hidden='true')
.modal-footer span.ion-happy
a.btn.btn-success.btn-block(href='#', data-dismiss='modal', aria-hidden='true') | Nevermind, I'll stick around
span.ion-happy br
| Nevermind, I'll stick around form(action='/account/delete', method='POST')
br input(type='hidden', name='_csrf', value=_csrf)
form(action='/account/delete', method='POST') button.btn.btn-danger.btn-block(type='submit')
input(type='hidden', name='_csrf', value=_csrf) span.ion-trash-b
button.btn.btn-danger.btn-block(type='submit') | Yes, Delete my account
span.ion-trash-b
| Yes, Delete my account

10
views/account/show.jade
View File

@@ -1,10 +1,15 @@
extends ../layout extends ../layout
block content block content
.col-xs-12.col-sm-12.col-md-12 .col-xs-12.col-sm-12.col-md-12
.panel.panel-primary .panel.panel-info
.panel-heading.text-center .panel-heading.text-center
h1 #{username}'s portfolio h1 #{username}'s portfolio
.panel-body .panel-body
if (user && user.profile.username === username)
.col-xs-12
.text-center
a.btn.btn-big.btn-primary(href="/account") Update my public portfolio
br
.row .row
.col-xs-12 .col-xs-12
.col-xs-12.col-sm-12.col-md-5 .col-xs-12.col-sm-12.col-md-5
@@ -35,9 +40,6 @@ block content
h3.flat-top.bolded.wrappable= location h3.flat-top.bolded.wrappable= location
h4.flat-top.wrappable= bio h4.flat-top.wrappable= bio
.col-xs-12.col-sm-12.col-md-3.text-center .col-xs-12.col-sm-12.col-md-3.text-center
if (user && user.profile.username === username)
a.btn.btn-warning(href="/account") Edit my Profile
.background-svg.img-center .background-svg.img-center
.points-on-top .points-on-top
= "[ " + points + " ]" = "[ " + points + " ]"

6
views/account/signin.jade
View File

@@ -14,9 +14,9 @@ block content
a.btn.btn-lg.btn-block.btn-linkedin.btn-social(href='/auth/linkedin') a.btn.btn-lg.btn-block.btn-linkedin.btn-social(href='/auth/linkedin')
i.fa.fa-linkedin i.fa.fa-linkedin
| Sign in with LinkedIn | Sign in with LinkedIn
//a.btn.btn-lg.btn-block.btn-twitter.btn-social(href='/auth/twitter') a.btn.btn-lg.btn-block.btn-twitter.btn-social(href='/auth/twitter')
// i.fa.fa-twitter i.fa.fa-twitter
// | Sign in with Twitter | Sign in with Twitter
br br
p p
a(href="/email-signup") Or sign up using your email address here. a(href="/email-signup") Or sign up using your email address here.

10
views/partials/faq.jade
View File

@@ -36,23 +36,23 @@
table.table table.table
thead thead
th Time budgeted th Time budgeted
th Hours per week th.hidden-xs Hours per week
th Weeks to complete th Weeks to complete
tr.info tr.info
td Weekends td Weekends
td 10 hours/week td.hidden-xs 10 hours/week
td 100 weeks (2 years) td 100 weeks (2 years)
tr.success tr.success
td Nights and Weekends td Nights and Weekends
td 20 hours/week td.hidden-xs 20 hours/week
td 50 weeks (1 year) td 50 weeks (1 year)
tr.warning tr.warning
td Full time td Full time
td 40 hours/week td.hidden-xs 40 hours/week
td 25 weeks (6 months) td 25 weeks (6 months)
tr.danger tr.danger
td Traditional Bootcamp Pacing td Traditional Bootcamp Pacing
td 80 hours/week td.hidden-xs 80 hours/week
td 12 weeks (3 months) td 12 weeks (3 months)
h2 Why does Free Code Camp use JavaScript instead of Ruby or Python? h2 Why does Free Code Camp use JavaScript instead of Ruby or Python?
ul ul

2
views/partials/github.jade
View File

@@ -7,7 +7,7 @@ script.
}).done( }).done(
function(data) { function(data) {
var github = document.createElement('div'); var github = document.createElement('div');
$(github).html('<div class="row"><div class="col-xs-6 text-right">Open Issues:</div><div class="col-xs-6 text-left">' + data.issues + ' <a href="https://github.com/freecodecamp/freecodecamp/issues">(create one)</a></div></div><div class="row"><div class="col-xs-6 text-right">Open Pull Requests:</div><div class="col-xs-6 text-left">' + data.pulls + ' <a href="https://github.com/freecodecamp/freecodecamp/pulls">(create one)</a></div></div>').prependTo($('#github')) $(github).html('<div class="row"><div class="col-xs-6 text-right">Open GitHub Issues:</div><div class="col-xs-6 text-left">' + data.issues + ' <a href="https://github.com/freecodecamp/freecodecamp/issues">(create one)</a></div></div><div class="row"><div class="col-xs-6 text-right">Open Pull Requests:</div><div class="col-xs-6 text-left">' + data.pulls + ' <a href="https://github.com/freecodecamp/freecodecamp/pulls">(create one)</a></div></div>').prependTo($('#github'))
} }
); );
})(); })();

29
views/partials/navbar.jade
View File

@@ -8,24 +8,12 @@
img.img-responsive.nav-logo(src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg', alt='learn to code javascript at Free Code Camp logo') img.img-responsive.nav-logo(src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg', alt='learn to code javascript at Free Code Camp logo')
.collapse.navbar-collapse .collapse.navbar-collapse
ul.nav.navbar-nav.navbar-right.hamburger-dropdown ul.nav.navbar-nav.navbar-right.hamburger-dropdown
- if (!cc) li
li a(href='/challenges') Challenges
a(href='/challenges/0') Challenges li
- else a(href='/chat') Chat
li li
a(href='/challenges') Challenges a(href='http://forum.freecodecamp.com' target='_blank') Forum
- if (!cc || (cc && cc[1] < 1))
li
a(href='/challenges/1') Chat
- else
li
a(href='http://chat.freecodecamp.com' target='_blank') Chat
- if (!cc || (cc && cc[2] < 1))
li
a(href='/challenges/2') Forum
- else
li
a(href='http://forum.freecodecamp.com' target='_blank') Forum
li li
a(href='/bonfires') Bonfires a(href='/bonfires') Bonfires
if !user if !user
@@ -34,7 +22,10 @@
a.btn.signup-btn.signup-btn-nav(href='/login') Sign in a.btn.signup-btn.signup-btn-nav(href='/login') Sign in
else else
li li
a(href='/account') [&nbsp;#{user.points}&nbsp;] if (user.profile.username)
a(href='/' + user.profile.username) [&nbsp;#{user.points}&nbsp;]
else
a(href='/account') [&nbsp;#{user.points}&nbsp;]
.hidden-xs .hidden-xs
if user.profile.picture if user.profile.picture
if (user.profile.username) if (user.profile.username)

26
views/partials/stats.jade
View File

@@ -1,26 +0,0 @@
h2.stats-text
.row
.col-xs-6.text-right Days since we launched:
.col-xs-6.text-left= daysRunning
.row
.col-xs-6.text-right Nonprofit Projects:
.col-xs-6.text-left
include ../partials/trello
include ../partials/github
.row
.col-xs-6.text-right Campers with at least...
.col-xs-4
.row
.col-xs-6.text-right 3 Points:
.col-xs-6.text-left= c3
.row
.col-xs-6.text-right 10 Points:
.col-xs-6.text-left= c10
.row
.col-xs-6.text-right All 54 Points:
.col-xs-6.text-left= all
.row
.col-xs-6.text-right Star our project here:
.col-xs-6.text-left.github-button-container
html.
<iframe src="http://ghbtns.com/github-btn.html?user=freecodecamp&repo=freecodecamp&type=watch&count=true&size=large" height="30" width="170" frameborder="0" scrolling="0" style="width:170px; height: 30px;" allowTransparency="true"></iframe>

22
views/resources/chat.jade Normal file
View File

@@ -0,0 +1,22 @@
extends ../layout-wide
block content
h3
ol.col-md-offset-2
li Create a GitHub Account&nbsp;
a(href="http://github.com/join", target='_blank') here
| .
li Download the chat room app on &nbsp;
a(href="https://update.gitter.im/osx/latest") Windows
| ,&nbsp;
a(href="https://update.gitter.im/win/latest") Mac
| ,&nbsp;
a(href="http://appstore.com/gitter") iPhone
| ,&nbsp; or &nbsp;
a(href="https://play.google.com/store/apps/details?id=im.gitter.gitter&hl=en_GB") Android
| &nbsp;, or go &nbsp;
a(href="http://chat.freecodecamp.com") here
| .
li Keep the chat room open while you code so that you can meet friends and ask for help.
.col-xs-12
.embed-responsive.embed-responsive-16by9.gitter-imbed
iframe(src='http://www.gitter.im/freecodecamp/freecodecamp', frameborder='0', scrolling='no')

78
views/resources/learn-to-code.jade
View File

@@ -5,12 +5,47 @@ block content
.text-center .text-center
a.btn.btn-cta.signup-btn.next-challenge-button(href="/challenges") Take me to my next challenge a.btn.btn-cta.signup-btn.next-challenge-button(href="/challenges") Take me to my next challenge
br br
.row
.col-xs-12.col-sm-12.col-md-4
.panel.panel-info
.panel-heading.landing-panel-heading.text-center Get Connected
.panel-body
img.img-responsive.img-center(src="https://s3.amazonaws.com/freecodecamp/about-chatroom.jpg")
h3
.row
.col-xs-9.text-right Campers doing challenges:
.col-xs-3.text-left= c3
.row
.col-xs-9.text-right Campers coding for nonprofits:
.col-xs-3.text-left= all
.col-xs-12.col-sm-12.col-md-4
.panel.panel-info
.panel-heading.landing-panel-heading.text-center Learn JavaScript
.panel-body
img.img-responsive.img-center(src="https://s3.amazonaws.com/freecodecamp/about-github.jpg")
h3
include ../partials/github
.col-xs-12.col-sm-12.col-md-4
.panel.panel-info
.panel-heading.landing-panel-heading.text-center Help Nonprofits
.panel-body
img.img-responsive.img-center(src="https://s3.amazonaws.com/freecodecamp/about-trello.jpg")
h3
.row
.col-xs-6.text-right Days since we launched:
.col-xs-6.text-left= daysRunning
.row
.col-xs-6.text-right Nonprofit Projects:
.col-xs-6.text-left
include ../partials/trello
br
script. script.
var challengeName = 'Learn to code' var challengeName = 'Learn to code'
.row .row
.col-xs-12.col-sm-12.col-md-6 .col-xs-12.col-sm-12.col-md-6
.panel.panel-info .panel.panel-info
.panel-heading.landing-panel-heading.text-center Announcements .panel-heading.landing-panel-heading.text-center News
.panel-body .panel-body
.landing-panel-body.text-center .landing-panel-body.text-center
for announcement in announcements for announcement in announcements
@@ -19,22 +54,7 @@ block content
a(href=announcement[1])= announcement[0] a(href=announcement[1])= announcement[0]
else else
= announcement[0] = announcement[0]
include ../partials/faq
.col-xs-12.col-sm-12.col-md-6
.panel.panel-info
.panel-heading.landing-panel-heading.text-center Statistics
.panel-body
.landing-panel-body
include ../partials/stats
.panel.panel-info
.panel-heading.landing-panel-heading.text-center Blog
.panel-body
.landing-panel-body.text-center
include ../partials/blogger include ../partials/blogger
.panel.panel-info
.panel-heading.landing-panel-heading.text-center Tweets
.panel-body
.landing-panel-body.text-center
a.twitter-timeline(data-dnt='true', href='https://twitter.com/FreeCodeCamp', data-widget-id='560847186548621312') Tweets by @FreeCodeCamp a.twitter-timeline(data-dnt='true', href='https://twitter.com/FreeCodeCamp', data-widget-id='560847186548621312') Tweets by @FreeCodeCamp
script. script.
!function (d, s, id) { !function (d, s, id) {
@@ -46,13 +66,21 @@ block content
fjs.parentNode.insertBefore(js, fjs); fjs.parentNode.insertBefore(js, fjs);
} }
}(document, "script", "twitter-wjs"); }(document, "script", "twitter-wjs");
.text-center h3
html. .col-xs-12 Follow us on Twitter here:
<a class="twitter-follow-button" .col-xs-12.github-and-twitter-button-text
href="https://twitter.com/freecodecamp" html.
data-show-count="true" <a class="twitter-follow-button"
data-lang="en"> href="https://twitter.com/freecodecamp"
Follow @FreeCodeCamp data-show-count="true"
</a> data-lang="en">
<script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));</script> Follow @FreeCodeCamp
</a>
<script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));</script>
.col-xs-12.github-and-twitter-button-text Star us on GitHub here:
.col-xs-12.github-and-twitter-button-text
html.
<iframe src="http://ghbtns.com/github-btn.html?user=freecodecamp&repo=freecodecamp&type=watch&count=true&size=large" height="30" width="170" frameborder="0" scrolling="0" style="width:170px; height: 30px;" allowTransparency="true"></iframe>
include ../partials/about include ../partials/about
.col-xs-12.col-sm-12.col-md-6
include ../partials/faq