improvements to portfolios and heatmaps

This commit is contained in:
Quincy Larson
2015-05-03 00:34:46 -07:00
parent 6d015212e4
commit 451e3c75f2
4 changed files with 92 additions and 83 deletions

View File

@ -999,8 +999,9 @@ hr {
border-bottom: dashed 1px @brand-success; border-bottom: dashed 1px @brand-success;
} }
#cal-heatmap { .d3-centered {
width: 361px; width: 771px;
margin: 0 auto;
} }
.cal-heatmap-container { .cal-heatmap-container {

View File

@ -10,7 +10,7 @@ block content
.row.text-center .row.text-center
.col-xs-12.col-sm-10.col-sm-offset-1 .col-xs-12.col-sm-10.col-sm-offset-1
a.btn.btn-big.btn-primary.btn-block(href="/account") Update my portfolio page or manage my account a.btn.btn-big.btn-primary.btn-block(href="/account") Update my portfolio page or manage my account
.spacer .button-spacer
.col-xs-12.col-sm-10.col-sm-offset-1 .col-xs-12.col-sm-10.col-sm-offset-1
a.btn.btn-big.btn-success.btn-block(href="/signout") Sign out of Free Code Camp a.btn.btn-big.btn-success.btn-block(href="/signout") Sign out of Free Code Camp
.spacer .spacer
@ -98,65 +98,73 @@ block content
i.fa.icon-beaker i.fa.icon-beaker
| Try it out | Try it out
.hidden-xs.col-sm-12
script(src="//d3js.org/d3.v3.min.js")
script(src="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js")
#cal-heatmap.img-center
script.
$(document).ready(function() {
setTimeout(function() {
var cal = new CalHeatMap();
var calendar = !{JSON.stringify(calender)};
cal.init({
itemSelector: "#cal-heatmap",
domain: "month",
subDomain: "day",
data: calendar,
cellSize: 15,
align: 'center',
cellRadius: 3,
cellPadding: 2,
tooltip: true,
range: 4,
start: new Date().setDate(new Date().getDate() - 90),
legendColors: ["#cccccc", "#215f1e"],
legend: [1, 2, 3]
});
}, 300);
});
.row
.hidden-xs.col-sm-12.text-center
.row.text-primary
h4.col-sm-6.text-right Longest Streak: #{longestStreak}
h4.col-sm-6.text-left Current Streak: #{currentStreak}
- if (challenges.length > 0) .spacer
.col-sm-12 .hidden-xs.hidden-sm.col-md-12
table.table.table-striped script(src="//d3js.org/d3.v3.min.js")
thead script(src="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js")
tr #cal-heatmap.d3-centered
th.col-xs-4 Challenge script.
th.col-xs-2 Completed $(document).ready(function() {
th.col-xs-6 Link setTimeout(function() {
for challenge in challenges var cal = new CalHeatMap();
tr var calendar = !{JSON.stringify(calender)};
td.col-xs-4= challenge.name cal.init({
td.col-xs-2= moment(challenge.completedDate, 'x').format("MMM DD, YYYY") itemSelector: "#cal-heatmap",
td.col-xs-6 domain: "month",
a(href=challenge.solution) View my solution subDomain: "x_day",
domainGutter: 10,
data: calendar,
cellSize: 15,
align: 'center',
cellRadius: 3,
cellPadding: 2,
tooltip: true,
range: 6,
start: new Date().setDate(new Date().getDate() - 150),
legendColors: ["#cccccc", "#215f1e"],
legend: [1, 2, 3],
label: {
position: "top"
}
});
}, 300);
});
.row
.hidden-xs.col-sm-12.text-center
.row.text-primary
h4.col-sm-6.text-right Longest Streak: #{longestStreak}
h4.col-sm-6.text-left Current Streak: #{currentStreak}
br - if (challenges.length > 0)
- if (bonfires.length > 0) .col-sm-12
.col-sm-12 table.table.table-striped
table.table.table-striped thead
thead tr
tr th.col-xs-4 Challenge
th.col-xs-4 Bonfire th.col-xs-2 Completed
th.col-xs-2 Completed th.col-xs-6 Link
th.col-xs-6 Solution for challenge in challenges
for bonfire in bonfires tr
tr td.col-xs-4
td.col-xs-4= bonfire.name a(href='/challenges/' + challenge.name)= challenge.name
td.col-xs-2= moment(bonfire.completedDate, 'x').format("MMM DD, YYYY") td.col-xs-2= moment(challenge.completedDate, 'x').format("MMM DD, YYYY")
td.col-xs-6= bonfire.solution td.col-xs-6
br a(href=challenge.solution) View my solution
br
- if (bonfires.length > 0)
.col-sm-12
table.table.table-striped
thead
tr
th.col-xs-4 Bonfire
th.col-xs-2 Completed
th.col-xs-6 Solution
for bonfire in bonfires
tr
td.col-xs-4
a(href='/bonfires/'+ bonfire.name)= bonfire.name
td.col-xs-2= moment(bonfire.completedDate, 'x').format("MMM DD, YYYY")
td.col-xs-6= bonfire.solution
br

View File

@ -7,7 +7,7 @@ block content
.row .row
.col-xs-12.col-sm-12.col-md-3 .col-xs-12.col-sm-12.col-md-3
h3.nowrap Get Connected h3.nowrap Get Connected
img.img-responsive.landing-icon.img-center(src= 'https://s3.amazonaws.com/freecodecamp/landingIcons_connect.svg.gz', alt='Get great references and connections for your resume or CV to help you get a job') img.img-responsive.landing-icon.img-center(src= 'https://s3.amazonaws.com/freecodecamp/landingIcons_connect.svg.gz', alt='Get great references and connections for your reto help you get a job')
p.landing-p Join a community of busy, motivated professionals. p.landing-p Join a community of busy, motivated professionals.
.col-xs-12.col-sm-12.col-md-3 .col-xs-12.col-sm-12.col-md-3
h3.nowrap Learn JavaScript h3.nowrap Learn JavaScript
@ -78,15 +78,15 @@ block content
h2 Why you should join our community right now: h2 Why you should join our community right now:
h3.col-xs-offset-0.col-sm-offset-1 h3.col-xs-offset-0.col-sm-offset-1
ul.text-left ul.text-left
li.ion-code   We're thousands of professionals, all learning to code together li.ion-code   We're thousands of professionals. We all learn to code together.
li.ion-code   We're building projects for dozens of nonprofits li.ion-code   We're building projects for dozens of nonprofits.
li.ion-code   Our community is 100% free and open source li.ion-code   Our community is 100% free and open source.
li.ion-code   You'll learn Full Stack JavaScript and become a Software Engineer li.ion-code   You'll learn Full Stack JavaScript and become a Software Engineer.
li.ion-code   You'll work through our focused, interactive courses and tutorials li.ion-code   You'll work through our focused, interactive courses and tutorials.
li.ion-code   You'll learn to code at your own pace, in your browser or on your phone li.ion-code   You'll learn to code at your own pace, in your browser or on your phone.
li.ion-code   You'll become qualified for thousands of jobs currently going unfilled li.ion-code   You'll become qualified for thousands of jobs currently going unfilled.
li.ion-code   You can get help in real time from our community chat rooms li.ion-code   You can get help in real time from our community chat rooms.
li.ion-code   We all share one common goal: to boost our careers with code li.ion-code   We all share one common goal: to boost our careers with code.
.big-break .big-break
.row .row
.col-xs-12.col-sm-8.col-sm-offset-2 .col-xs-12.col-sm-8.col-sm-offset-2

View File

@ -26,14 +26,18 @@ h3.row
.col-xs-12 .col-xs-12
h4= description h4= description
.negative-5 .negative-5
a#reply-to-main-post.btn.btn-no-shadow.btn-primary.btn-xs.btn-primary-ghost Reply if !user
|  ·   a#upvote.btn.signup-btn.btn-xs(href='/signin') Sign in to reply or upvote
if !hasUserVoted
a#upvote.btn.btn-no-shadow.btn-primary.btn-xs.btn-primary-ghost Upvote
|  ·  |  · 
else else
a#upvote.btn.disabled.btn-no-shadow.btn-primary.btn-xs.btn-primary-ghost Upvoted! a#reply-to-main-post.btn.btn-no-shadow.btn-primary.btn-xs.btn-primary-ghost Reply
|  ·  |  ·  
if !hasUserVoted
a#upvote.btn.btn-no-shadow.btn-primary.btn-xs.btn-primary-ghost Upvote
|  · 
else
a#upvote.btn.disabled.btn-no-shadow.btn-primary.btn-xs.btn-primary-ghost Upvoted!
|  · 
span#storyRank= rank + (rank > 1 ? " points" : " point") span#storyRank= rank + (rank > 1 ? " points" : " point")
|  ·  |  · 
span Posted #{timeAgo} span Posted #{timeAgo}
@ -56,10 +60,6 @@ script.
$('#image-display').removeClass('hidden-element') $('#image-display').removeClass('hidden-element')
} }
$('#reply-to-main-post').on('click', function() { $('#reply-to-main-post').on('click', function() {
if (!isLoggedIn) {
window.location.href = '/signin';
return;
}
$('#initial-comment-submit').removeClass('hidden-element'); $('#initial-comment-submit').removeClass('hidden-element');
$(this).unbind('click'); $(this).unbind('click');
$('.comment-to-comment-formgroup').empty(); $('.comment-to-comment-formgroup').empty();