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('/privacy', resourcesController.privacy);
app.get('/jquery-exercises', resourcesController.jqueryExercises);
app.get('/chat', resourcesController.chat);
app.get('/live-pair-programming', resourcesController.livePairProgramming);
app.get('/install-screenhero', resourcesController.installScreenHero);
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) {
res.render('resources/nonprofit-project-instructions', {
title: 'Nonprofit Project Instructions'
@@ -142,29 +148,22 @@ module.exports = {
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var daysRunning = Math.ceil(timeDiff / (1000 * 3600 * 24));
var announcements = resources.announcements;
User.count({'points': {'$gt': 2}}, function (err, c3) {
User.count({}, function (err, c3) {
if (err) {
debug('User err: ', err);
next(err);
}
User.count({'points': {'$gt': 9}}, function (err, c10) {
User.count({'points': {'$gt': 53}}, function (err, all) {
if (err) {
debug('User err: ', err);
next(err);
}
User.count({'points': {'$gt': 53}}, function (err, all) {
if (err) {
debug('User err: ', err);
next(err);
}
res.render('resources/learn-to-code', {
title: 'About Free Code Camp and Our Team of Volunteers',
daysRunning: daysRunning,
c3: c3,
c10: c10,
all: all,
announcements: announcements
});
res.render('resources/learn-to-code', {
title: 'About Free Code Camp and Our Team of Volunteers',
daysRunning: daysRunning,
c3: c3,
all: all,
announcements: announcements
});
});
});

9
public/css/main.less
View File

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

10
views/account/show.jade
View File

@@ -1,10 +1,15 @@
extends ../layout
block content
.col-xs-12.col-sm-12.col-md-12
.panel.panel-primary
.panel.panel-info
.panel-heading.text-center
h1 #{username}'s portfolio
.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
.col-xs-12
.col-xs-12.col-sm-12.col-md-5
@@ -35,9 +40,6 @@ block content
h3.flat-top.bolded.wrappable= location
h4.flat-top.wrappable= bio
.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
.points-on-top
= "[ " + 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')
i.fa.fa-linkedin
| Sign in with LinkedIn
//a.btn.btn-lg.btn-block.btn-twitter.btn-social(href='/auth/twitter')
// i.fa.fa-twitter
// | Sign in with Twitter
a.btn.btn-lg.btn-block.btn-twitter.btn-social(href='/auth/twitter')
i.fa.fa-twitter
| Sign in with Twitter
br
p
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
thead
th Time budgeted
th Hours per week
th.hidden-xs Hours per week
th Weeks to complete
tr.info
td Weekends
td 10 hours/week
td.hidden-xs 10 hours/week
td 100 weeks (2 years)
tr.success
td Nights and Weekends
td 20 hours/week
td.hidden-xs 20 hours/week
td 50 weeks (1 year)
tr.warning
td Full time
td 40 hours/week
td.hidden-xs 40 hours/week
td 25 weeks (6 months)
tr.danger
td Traditional Bootcamp Pacing
td 80 hours/week
td.hidden-xs 80 hours/week
td 12 weeks (3 months)
h2 Why does Free Code Camp use JavaScript instead of Ruby or Python?
ul

2
views/partials/github.jade
View File

@@ -7,7 +7,7 @@ script.
}).done(
function(data) {
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')
.collapse.navbar-collapse
ul.nav.navbar-nav.navbar-right.hamburger-dropdown
- if (!cc)
li
a(href='/challenges/0') Challenges
- else
li
a(href='/challenges') Challenges
- 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
a(href='/challenges') Challenges
li
a(href='/chat') Chat
li
a(href='http://forum.freecodecamp.com' target='_blank') Forum
li
a(href='/bonfires') Bonfires
if !user
@@ -34,7 +22,10 @@
a.btn.signup-btn.signup-btn-nav(href='/login') Sign in
else
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
if user.profile.picture
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
a.btn.btn-cta.signup-btn.next-challenge-button(href="/challenges") Take me to my next challenge
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.
var challengeName = 'Learn to code'
.row
.col-xs-12.col-sm-12.col-md-6
.panel.panel-info
.panel-heading.landing-panel-heading.text-center Announcements
.panel-heading.landing-panel-heading.text-center News
.panel-body
.landing-panel-body.text-center
for announcement in announcements
@@ -19,22 +54,7 @@ block content
a(href=announcement[1])= announcement[0]
else
= 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
.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
script.
!function (d, s, id) {
@@ -46,13 +66,21 @@ block content
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
.text-center
html.
<a class="twitter-follow-button"
href="https://twitter.com/freecodecamp"
data-show-count="true"
data-lang="en">
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>
h3
.col-xs-12 Follow us on Twitter here:
.col-xs-12.github-and-twitter-button-text
html.
<a class="twitter-follow-button"
href="https://twitter.com/freecodecamp"
data-show-count="true"
data-lang="en">
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
.col-xs-12.col-sm-12.col-md-6
include ../partials/faq