freeCodeCamp/server/views/account/show.jade

173 lines
9.7 KiB
Plaintext

extends ../layout
block content
script(src="/bower_components/cal-heatmap/cal-heatmap.min.js")
script.
var challengeName = 'Profile View';
.panel.panel-info
.panel-heading.text-center
h1 #{username}'s portfolio
.panel-body
if (user && user.username === username)
.row.text-center
.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
.button-spacer
.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
.spacer
.row
.col-xs-12
.col-xs-12.col-sm-12.col-md-5
if picture
img.img-center.img-responsive.public-profile-img(src=picture)
else
img.img-center.img-responsive.public-profile-img(src='https://s3.amazonaws.com/freecodecamp/camper-image-placeholder.png')
h1.text-center.negative-5.profile-social-icons
if (twitterHandle)
a.fa.fa-twitter-square.text-primary(title="@#{username}'s Twitter Profile", href="http://twitter.com/#{twitterHandle}", target='_blank')
if (githubProfile)
a.fa.fa-github-square.text-primary(title="@#{username}'s GitHub Profile", href=githubProfile, target='_blank')
if (codepenProfile)
a.ion-social-codepen.text-primary(title="@#{username}'s CodePen Profile", href=codepenProfile, target='_blank')
if (linkedinProfile)
a.fa.fa-linkedin-square.text-primary(title="@#{username}'s LinkedIn Profile", href=linkedinProfile, target='_blank')
if (facebookProfile)
a.fa.fa-facebook-square.text-primary(title="@#{username}'s Facebook Profile", href=facebookProfile, target='_blank')
.visible-md.visible-lg
.col-xs-12.col-sm-12.col-md-4.text-justify
h1.flat-top.wrappable= name
h3.flat-top.bolded.wrappable= location
h4.flat-top.wrappable= bio
.visible-xs.visible-sm
.col-xs-12.col-sm-12.col-md-4.text-center
h1.flat-top.wrappable= name
h3.flat-top.bolded.wrappable= location
h4.flat-top.wrappable= bio
.col-xs-12.col-sm-12.col-md-3.text-center
.background-svg.img-center
.points-on-top
= "[ " + (progressTimestamps.length) + " ]"
.row
.col-xs-12
if (website1Title && website1Link && website1Image)
.row
.col-xs-12.col-md-5
img.img-center.img-responsive.portfolio-image(src=website1Image, alt="@#{username}'s #{website1Title}")
.col-xs-12.col-md-7
h3.text-center.wrappable.flat-top= website1Title
a.btn.btn-lg.btn-block.btn-info(href=website1Link, target='_blank')
i.fa.icon-beaker
| Try it out
br
if (website1Title && website1Link && !website1Image)
.col-xs-12.col-md-12
h3.text-center.wrappable.flat-top= website1Title
a.btn.btn-lg.btn-block.btn-info(href=website1Link, target='_blank')
i.fa.icon-beaker
| Try it out
br
if (website2Title && website2Link && website2Image)
.row
.col-xs-12.col-md-5
img.img-responsive.portfolio-image.img-center(src=website2Image, alt="@#{username}'s #{website2Title}")
.col-xs-12.col-md-7
h3.text-center.wrappable.flat-top= website2Title
a.btn.btn-lg.btn-block.btn-info(href=website2Link, target='_blank')
i.fa.icon-beaker
| Try it out
br
if (website2Title && website2Link && !website2Image)
.col-xs-12.col-md-12
h3.text-center.wrappable.flat-top= website2Title
a.btn.btn-lg.btn-block.btn-info(href=website2Link, target='_blank')
i.fa.icon-beaker
| Try it out
br
if (website3Title && website3Link && website3Image)
.row
.col-xs-12.col-md-5
img.img-responsive.portfolio-image.img-center(src=website3Image, alt="@#{username}'s #{website1Title}")
.col-xs-12.col-md-7
h3.text-center.wrappable.flat-top= website3Title
a.btn.btn-lg.btn-block.btn-info(href=website3Link, target='_blank')
i.fa.icon-beaker
| Try it out
if (website3Title && website3Link && !website3Image)
.col-xs-12.col-md-12
h3.text-center.wrappable.flat-top= website3Title
a.btn.btn-lg.btn-block.btn-info(href=website3Link, target='_blank')
i.fa.icon-beaker
| Try it out
.spacer
.hidden-xs.hidden-sm.col-md-12
#cal-heatmap.d3-centered
script.
$(document).ready(function () {
setTimeout(function () {
var cal = new CalHeatMap();
var calendar = !{JSON.stringify(calender)};
cal.init({
itemSelector: "#cal-heatmap",
domain: "month",
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}
if (challenges.length > 0)
.col-sm-12
table.table.table-striped
thead
tr
th.col-xs-4 Challenge
th.col-xs-2 Completed
th.col-xs-6 Link
for challenge in challenges
tr
td.col-xs-4
a(href='/challenges/' + challenge.name, target='_blank')= challenge.name
td.col-xs-2= moment(challenge.completedDate, 'x').format("MMM DD, YYYY")
td.col-xs-6
a(href=challenge.solution, target='_blank') 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='/challenges/' + bonfire.name, target='_blank')= bonfire.name
td.col-xs-2= moment(bonfire.completedDate, 'x').format("MMM DD, YYYY")
td.col-xs-6
pre.wrappable= bonfire.solution
br