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

refactor map view and make buttons and text bigger

Browse Source
This commit is contained in:
Quincy Larson
2016-01-14 23:06:06 -08:00
committed by Berkeley Martinez
parent 3105dda128
commit 1e5f3dc61c
16 changed files with 166 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/less/lib/bootstrap/variables.less
View File

@ -14,7 +14,7 @@
@gray-light: lighten(@gray-base, 46.7%); // #777
@gray-lighter: lighten(@gray-base, 93.5%); // #eee
@brand-primary: #009901;
@brand-primary: forestgreen;
@brand-success: #457e86;
@brand-info: #2b414f;
@brand-warning: #f0ad4e;

24
client/less/main.less
View File

@ -6,7 +6,6 @@
html,body,div,span,a,li,td,th {
font-family: 'Lato', sans-serif;
font-weight: 300;
}
bold {
@ -246,7 +245,7 @@ ul {
}
.text-success {
color: @brand-success;
color: @brand-primary;
}
.fast-animation {
@ -328,6 +327,18 @@ ul {
background-color: @brand-primary;
}
a {
font-weight: bold;
}
p {
font-size: 20px;
}
.map-aside-body p {
line-height: 1.8;
}
.navbar-nav > li > a {
color: @body-bg;
&:hover {
@ -375,6 +386,7 @@ ul {
.btn-big {
font-size: 30px;
border-radius: 6px;
}
.big-text-field {
@ -382,6 +394,10 @@ ul {
height: 57px;
}
h4 {
font-size: 26px;
}
.btn-responsive {
@media (max-width: 768px) {
font-size: 15px;
@ -995,10 +1011,6 @@ code {
shape-rendering: crispEdges;
}
#submitButton {
font: normal normal normal 14px/1 FontAwesome !important;
}
#testSuite > div >.row {
margin: 0!important;
}

8
server/boot/challenge.js
View File

@ -433,7 +433,7 @@ module.exports = function(app) {
Observable.combineLatest(
firstChallenge$,
lastChallenge$,
lastChallenge$
)
.flatMap(([firstChallenge, { id: lastChallengeId } ]) => {
// no id supplied, load first challenge
@ -623,10 +623,10 @@ module.exports = function(app) {
getSuperBlocks$(challenge$, getCompletedChallengeIds(user))
.subscribe(
superBlocks => {
const view = showAside ? 'map/showAside' : 'map/show';
res.render(view, {
res.render('map/show', {
superBlocks,
title: 'A Map to Learn to Code and Become a Software Engineer'
title: 'A Map to Learn to Code and Become a Software Engineer',
showAside
});
},
next

109
server/views/account/show.jade
View File

@ -177,63 +177,56 @@ block content
a(href='/challenges/' + challenge.name + '?solution=' + encodeURIComponent(encodeFcc(challenge.solution)), target='_blank')= challenge.name
else
a(href='/challenges/' + challenge.name)= challenge.name
if (user && user.username === username)
.panel.panel-info
.panel-heading.text-center Manage your account
.panel-body
if (user && user.username === username)
h1.text-center Manage your account
hr
.col-xs-12
a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='/logout')
| Sign me out of Free Code Camp
.col-xs-12
a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='mailto:team@freecodecamp.com')
| Email us at team@freecodecamp.com
if (!user.isLocked)
.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
a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='/toggle-lockdown-mode')
| Hide all my solutions from other people
br
| (this will disable your certificates)
else
.col-xs-12
a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='mailto:team@freecodecamp.com')
span.ion-email
| Email us at team@freecodecamp.com
if (!user.isLocked)
.col-xs-12
a.btn.btn-lg.btn-block.btn-info.btn-link-social(href='/toggle-lockdown-mode')
span.ion-locked
| Hide all my solutions from other people
br
| (this will disable your certificates)
else
.col-xs-12
a.btn.btn-lg.btn-block.btn-info.btn-link-social(href='/toggle-lockdown-mode')
span.ion-unlocked
| Let other people see all my solutions
br
| (this will enable your certificates)
.col-xs-12
a.btn.btn-lg.btn-block.btn-success.btn-link-social(href='/commit')
span.ion-edit
| Edit my pledge
.col-xs-12
a.btn.btn-lg.btn-block.btn-danger.btn-link-social.confirm-deletion
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 You don't really want to delete your account, do you?
.modal-body
p This will really delete all your data, including all your progress, news stories and brownie points.
p We won't be able to recover any of it for you later, even if you change your mind.
p If there's something we could do better, send us an email instead and we'll do our best:  
a(href="mailto:team@freecodecamp.com") team@freecodecamp.com
| .
.modal-footer
a.btn.btn-success.btn-block(href='#', data-dismiss='modal', aria-hidden='true')
span.ion-happy
| Nevermind, I don't want to delete all of my progress
.spacer
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
| I am 100% sure I want to delete my account and all of my progress
a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='/toggle-lockdown-mode')
| Let other people see all my solutions
br
| (this will enable your certificates)
.col-xs-12
a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='/commit')
| Edit my pledge
.col-xs-12
a.btn.btn-lg.btn-block.btn-danger.btn-link-social.confirm-deletion
| 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 You don't really want to delete your account, do you?
.modal-body
p This will really delete all your data, including all your progress, news stories and brownie points.
p We won't be able to recover any of it for you later, even if you change your mind.
p If there's something we could do better, send us an email instead and we'll do our best:  
a(href="mailto:team@freecodecamp.com") team@freecodecamp.com
| .
.modal-footer
a.btn.btn-success.btn-block(href='#', data-dismiss='modal', aria-hidden='true')
| Nevermind, I don't want to delete all of my progress
.spacer
form(action='/account/delete', method='POST')
input(type='hidden', name='_csrf', value=_csrf)
button.btn.btn-danger.btn-block(type='submit')
| I am 100% sure I want to delete my account and all of my progress
>>>>>>> refactor map view and make buttons and text bigger

6
server/views/challenges/showBonfire.jade
View File

@ -31,18 +31,14 @@ block content
.button-spacer
if (user)
label.negative-10.btn.btn-primary.btn-block.btn-lg#submitButton
i.fa.fa-play
|   Run tests (ctrl + enter)
| Run tests (ctrl + enter)
.button-spacer
.btn-group.input-group.btn-group-justified
label.btn.btn-primary.btn-primary-ghost#trigger-reset-modal
i.fa.fa-refresh
|   Reset
label.btn.btn-primary.btn-primary-ghost#challenge-help-btn
i.fa.fa-medkit
|   Help
label.btn.btn-primary.btn-primary-ghost#trigger-issue-modal
i.fa.fa-bug
|   Bug
if (!user)
.button-spacer

25
server/views/challenges/showHTML.jade
View File

@ -10,34 +10,25 @@ block content
.innerMarginFix(style = "width: 99%;")
.row
.col-xs-12
h3.text-center.negative-10= name
h3.text-center= name
if (isCompleted)
|  
i.ion-checkmark-circled.text-primary(title="Completed")
hr
.bonfire-instructions
for sentence in description
p.wrappable.negative-10!= sentence
p.wrappable!= sentence
.negative-bottom-margin-30
.button-spacer
label.negative-10.btn.btn-primary.btn-lg.btn-block#submitButton
i.fa.fa-play
|   Run tests (ctrl + enter)
.btn-big.btn.btn-primary.btn-block#submitButton
| Run tests (ctrl + enter)
.button-spacer
.btn-group.input-group.btn-group-justified
label.btn.btn-primary.btn-primary-ghost#trigger-reset-modal
i.fa.fa-refresh
|   Reset
label.btn.btn-primary.btn-primary-ghost.btn-lg#trigger-reset-modal Reset
label.btn.btn-primary.btn-primary-ghost.hidden-sm.hidden-md.hidden-lg
a(href='//gitter.im/freecodecamp/help')
i.fa.fa-medkit
|   Help
label.btn.btn-primary.btn-primary-ghost.hidden-xs#challenge-help-btn
i.fa.fa-medkit
|   Help
label.btn.btn-primary.btn-primary-ghost#trigger-issue-modal
i.fa.fa-bug
|   Bug
a(href='//gitter.im/freecodecamp/help') Help
label.btn.btn-primary.btn-primary-ghost.hidden-xs.btn-lg#challenge-help-btn Help
label.btn.btn-primary.btn-primary-ghost.btn-lg#trigger-issue-modal Bug
script.
var userLoggedIn = true;
if (!user)

29
server/views/challenges/showJS.jade
View File

@ -9,7 +9,7 @@ block content
.scroll-locker(id = "scroll-locker")
.innerMarginFix(style = "width: 99%;")
#testCreatePanel
h3.text-center.negative-10= name
h3.text-center= name
if (isCompleted)
|  
i.ion-checkmark-circled.text-primary(title="Completed")
@ -21,34 +21,25 @@ block content
if (/blockquote|h4|table/.test(sentence))
!=sentence
else
p.wrappable.negative-10!= sentence
p.wrappable!= sentence
if (MDNlinks.length)
.negative-bottom-margin-30
#MDN-links
p.negative-10 Here are some helpful links:
p Here are some helpful links:
for link, index in MDNlinks
.negative-10
ul: li: a(href="" + link, target="_blank") !{MDNkeys[index]}
ul: li: a(href="" + link, target="_blank") !{MDNkeys[index]}
.button-spacer
if (user)
form.form-horizontal(novalidate='novalidate', name='completedWithForm')
.form-group.text-center.negative-10
.form-group.text-center
.col-xs-12
// extra field to distract password tools like lastpass from injecting css into our username field
label.negative-10.btn.btn-primary.btn-lg.btn-block#submitButton
i.fa.fa-play
|   Run tests (ctrl + enter)
label.btn.btn-primary.btn-big.btn-block#submitButton Run tests (ctrl + enter)
.button-spacer
.btn-group.input-group.btn-group-justified
label.btn.btn-success#trigger-reset-modal
i.fa.fa-refresh
|   Reset
label.btn.btn-success#challenge-help-btn
i.fa.fa-medkit
|   Help
label.btn.btn-success#trigger-issue-modal
i.fa.fa-bug
|   Bug
label.btn.btn-primary.btn-lg#trigger-reset-modal Reset
label.btn.btn-primary.btn-lg#challenge-help-btn Help
label.btn.btn-primary.btn-lg#trigger-issue-modal Bug
if (!user)
.button-spacer
a.btn.signup-btn.btn-block.btn-block(href='/login') Sign in so you can save your progress
@ -59,7 +50,7 @@ block content
.form-group.codeMirrorView
textarea#codeOutput(style='display: none;')
br
#testSuite.negative-10
#testSuite
br
.col-md-8.col-lg-9
.editorScrollDiv(style = "overflow-y: auto; overflow-x: hidden;")

1
server/views/challenges/showStep.jade
View File

@ -22,6 +22,7 @@ block content
else
.btn.btn-primary.col-sm-5.col-xs-12.challenge-step-btn-next(id='#{index}' class=step[3] && !isCompleted ? 'disabled' : '') Go to my next step
.clearfix
.spacer
#challenge-step-modal.modal(tabindex='-1')
.modal-dialog.animated.fadeIn.fast-animation
.modal-content

0
server/views/challenges/showVideo.html Normal file
View File

8
server/views/challenges/showVideo.jade
View File

@ -24,12 +24,8 @@ block content
var userLoggedIn = true;
.button-spacer
.btn-group.input-group.btn-group-justified
.btn.btn-success.btn-big#challenge-help-btn
i.fa.fa-medkit
|   Get help
.btn.btn-success.btn-big#trigger-issue-modal
i.fa.fa-bug
|   Report a bug
.btn.btn-success.btn-big#challenge-help-btn Get help
.btn.btn-success.btn-big#trigger-issue-modal Report a bug
if (!user)
.button-spacer
a.btn.btn-big.signup-btn.btn-block(href='/login') Sign in so you can save your progress

0
server/views/challenges/showZiplineOrBasejump.html Normal file
View File

8
server/views/challenges/showZiplineOrBasejump.jade
View File

@ -24,12 +24,8 @@ block content
a.btn.btn-big.btn-primary.btn-block(href='/challenges/next-challenge?id=' + id) Go to my next challenge (ctrl + enter)
.button-spacer
.btn-group.input-group.btn-group-justified
.btn.btn-primary.btn-primary-ghost.btn-big#challenge-help-btn
i.fa.fa-medkit
|   Help
.btn.btn-primary.btn-primary-ghost.btn-big#trigger-issue-modal
i.fa.fa-bug
|   Bug
.btn.btn-primary.btn-primary-ghost.btn-big#challenge-help-btn Help
.btn.btn-primary.btn-primary-ghost.btn-big#trigger-issue-modal Bug
if (!user)
.button-spacer
a.btn.btn-big.signup-btn.btn-block(href='/login') Sign in so you can save your progress

8
server/views/layout-map-aside.jade
View File

@ -1,8 +0,0 @@
doctype html
html(lang='en')
head
include partials/meta
include partials/stylesheets
body.map-aside-body
include partials/scripts
block content

17
server/views/layout-wide.jade
View File

@ -3,9 +3,14 @@ html(lang='en')
head
include partials/meta
include partials/stylesheets
body.no-top-and-bottom-margins.full-screen-body-background
include partials/scripts
include partials/navbar
include partials/flash
block content
include partials/footer
if showAside
body.map-aside-body
include partials/scripts
block content
else
body.no-top-and-bottom-margins.full-screen-body-background
include partials/scripts
include partials/navbar
include partials/flash
block content
include partials/footer

198
server/views/map/show.jade
View File

@ -1,153 +1,69 @@
extends ../layout-wide
block content
.row
.col-xs-12.col-md-6.col-md-offset-3
ul
for superBlock in superBlocks
h2= superBlock.name
for challengeBlock in superBlock.blocks
.row
if (user)
.col-xs-11.col-sm-8.col-md-9
li.map-p.negative-10
|   
a(href='#' + challengeBlock.dashedName)= challengeBlock.name
if challengeBlock.markNew
span.text-info.small    
strong
em NEW
if challengeBlock.isComingSoon
span.text-info.small    
strong
em Coming Soon
else
.hidden-xs.col-sm-3.col-md-2
.col-xs-10.col-sm-8.col-md-9
span.map-p.negative-10
a(href='#' + challengeBlock.dashedName)= challengeBlock.name
if challengeBlock.markNew
span.text-info.small    
strong
em NEW
if challengeBlock.isComingSoon
span.text-info.small    
strong
em Coming Soon
h2 Full Stack Development Certification
.row
.col-xs-12.col-sm-9.col-md-10
li.map-p.negative-10
|   
span.ion-locked.padded-ionic-icon
| Greenfield Nonprofit Project 1
.col-xs-12.col-sm-9.col-md-10
li.map-p.negative-10
|   
span.ion-locked.padded-ionic-icon
| Greenfield Nonprofit Project 2
.col-xs-12.col-sm-9.col-md-10
li.map-p.negative-10
|   
span.ion-locked.padded-ionic-icon
| Legacy Nonprofit Project 1
.col-xs-12.col-sm-9.col-md-10
li.map-p.negative-10
|   
span.ion-locked.padded-ionic-icon
| Legacy Nonprofit Project 2
.col-xs-12.col-sm-9.col-md-10
li.map-p.negative-10
|   
span.ion-locked.padded-ionic-icon
| Claim your Full Stack Development Certification
h2 Coding Interview Preparation
.row
.col-xs-12.col-sm-9.col-md-10
li.map-p.negative-10
|   
span.ion-locked.padded-ionic-icon
| Whiteboard Coding Interview Training
.col-xs-12.col-sm-9.col-md-10
li.map-p.negative-10
|   
span.ion-locked.padded-ionic-icon
| Critical Thinking Interview Training
.col-xs-12.col-sm-9.col-md-10
li.map-p.negative-10
|   
span.ion-locked.padded-ionic-icon
| Mock Interview 1
.col-xs-12.col-sm-9.col-md-10
li.map-p.negative-10
|   
span.ion-locked.padded-ionic-icon
| Mock Interview 2
.col-xs-12.col-sm-9.col-md-10
li.map-p.negative-10
|   
span.ion-locked.padded-ionic-icon
| Mock Interview 3
hr
.row
.col-xs-12.col-md-6.col-md-offset-3
for superBlock, index in superBlocks
if index > 0
.row
h2.text-center #{superBlock.name}
.text-center.small Requires completion of the below challenges marked with a *
hr
for challengeBlock in superBlock.blocks
.row
a(href='#' name=challengeBlock.dashedName)
.spacer.negative-55
.row
h4.bold #{challengeBlock.name} (#{challengeBlock.time})
h3.bold #{challengeBlock.name} (#{challengeBlock.time})
for challenge in challengeBlock.challenges
.col-xs-12.col-sm-9.col-md-10
if challenge.completed
p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")  
a(href="/challenges/#{challenge.dashedName}" target='_parent')
= challenge.title
span.sr-only= " Complete"
else if challenge.isRequired
p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")  
a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
span= challenge.title
span.sr-only= " Incomplete"
if challenge.markNew
span.text-success.small    
strong
em New
if challengeBlock.isComingSoon
span.text-success.small    
strong
em Coming Soon
span.text-primary    
strong *
else
p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")  
a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
span= challenge.title
span.sr-only= " Incomplete"
if challenge.markNew
span.text-success.small    
strong
em New
if challengeBlock.isComingSoon
span.text-success.small    
strong
em Coming Soon
.row
h2.text-center Full Stack Development Certification
hr
p.ion-locked.padded-ionic-icon.negative-15   Greenfield Nonprofit Project 1
p.ion-locked.padded-ionic-icon.negative-15   Greenfield Nonprofit Project 2
p.ion-locked.padded-ionic-icon.negative-15   Legacy Nonprofit Project 1
p.ion-locked.padded-ionic-icon.negative-15   Legacy Nonprofit Project 2
p.ion-locked.padded-ionic-icon.negative-15   Claim your Full Stack Development Certification
.col-xs-12.col-sm-9.col-md-10
if challenge.completed
p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")  
a(href="/challenges/#{challenge.dashedName}")
= challenge.title
span.sr-only= " Complete"
else if (challenge.type === "bonfire")
p.ion-asterisk.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")  
a(name="#{challenge.dashedName}" href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
span= challenge.title
span.sr-only= " Incomplete"
if challenge.markNew
span.text-success.small    
strong
em New
if challengeBlock.isComingSoon
span.text-success.small    
strong
em Coming Soon
else
p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")  
a(name="#{challenge.dashedName}" href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
span= challenge.title
span.sr-only= " Incomplete"
if challenge.markNew
span.text-success.small    
strong
em New
if challengeBlock.isComingSoon
span.text-success.small    
strong
em Coming Soon
if (index < superBlocks.length)
hr
script.
var username = !{JSON.stringify(user && user.username || '')};
var lastCompleted = !{JSON.stringify(lastCompleted || false)}
$(document).ready(function () {
if (!localStorage || !localStorage.hideRedditNotice) {
$("#map-notice").removeClass("hidden");
}
$("#hide-map-notice-button").on("click", function(e) {
e.preventDefault();
$("#map-notice").addClass('animated fadeOut');
setTimeout(function() {
$("#map-notice").hide();
}, 1000);
localStorage.hideRedditNotice = "true";
});
});
.row
h2.text-center Coding Interview Preparation
hr
p.ion-locked.padded-ionic-icon.negative-15 &nbsp; Whiteboard Coding Interview Training
p.ion-locked.padded-ionic-icon.negative-15 &nbsp; Critical Thinking Interview Training
p.ion-locked.padded-ionic-icon.negative-15 &nbsp; Mock Interview 1
p.ion-locked.padded-ionic-icon.negative-15 &nbsp; Mock Interview 2
p.ion-locked.padded-ionic-icon.negative-15 &nbsp; Mock Interview 3
.spacer

47
server/views/map/showAside.jade
View File

@ -1,47 +0,0 @@
extends ../layout-map-aside
block content
.row
.col-xs-12.col-md-6.col-md-offset-3
for superBlock, index in superBlocks
for challengeBlock in superBlock.blocks
.row
a(href='#' name=challengeBlock.dashedName)
.spacer.negative-55
.row
h4.bold #{challengeBlock.name} (#{challengeBlock.time})
for challenge in challengeBlock.challenges
.col-xs-12.col-sm-9.col-md-10
if challenge.completed
p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}") &nbsp;
a(href="/challenges/#{challenge.dashedName}" target='_parent')
= challenge.title
span.sr-only= " Complete"
else if (challenge.type === "bonfire")
p.ion-asterisk.padded-ionic-icon.negative-15(name="#{challenge.dashedName}") &nbsp;
a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
span= challenge.title
span.sr-only= " Incomplete"
if challenge.markNew
span.text-success.small &thinsp; &thinsp;
strong
em New
if challengeBlock.isComingSoon
span.text-success.small &thinsp; &thinsp;
strong
em Coming Soon
else
p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}") &nbsp;
a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
span= challenge.title
span.sr-only= " Incomplete"
if challenge.markNew
span.text-success.small &thinsp; &thinsp;
strong
em New
if challengeBlock.isComingSoon
span.text-success.small &thinsp; &thinsp;
strong
em Coming Soon
if (index < superBlocks.length)
hr