codecombat/app/templates/account/profile.jade
2014-06-07 00:33:18 -06:00

456 lines
29 KiB
Text
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

extends /templates/base
block content
if allowedToEditJobProfile
.profile-control-bar
if editing
.progress.profile-completion-progress
.progress-bar.progress-bar-success(style="width: #{100 * progress}%")
.progress-text
a.btn(href="/account/settings")
i.icon-cog
span(data-i18n="account_profile.settings") Settings
if editing
button.btn.btn-success#toggle-editing
i.icon-ok
span(data-i18n="account_profile.done_editing") Done Editing
else
button.btn#toggle-editing
i.icon-cog
span(data-i18n="account_profile.edit_profile") Edit Profile
if profile.active
button.btn.btn-success#toggle-job-profile-active
i.icon-eye-open
span(data-i18n="account_profile.active") Looking for interview offers now
else
button.btn#toggle-job-profile-active
i.icon-eye-close
span(data-i18n="account_profile.inactive") Not looking for offers right now
if profile.active || me.isAdmin()
if !profileApproved
button.btn.btn-success#toggle-job-profile-approved(disabled=!me.isAdmin())
i.icon-eye-open
span(data-i18n='account_profile.approved') Approved
else if me.isAdmin()
button.btn#toggle-job-profile-approved
i.icon-eye-close
span(data-i18n='account_profile.not_approved') Not Approved
if me.isAdmin() && !myProfile
button.btn.edit-settings-button#enter-espionage-mode 007
//if editing && myProfile
// a.sample-profile(href="http://codecombat.com/images/pages/account/profile/sample_profile.png", target="_blank")
// button.btn
// i.icon-user
// span(data-i18n="account_settings.sample_profile") See a sample profile
if profile && allowedToViewJobProfile
div(class="job-profile-container" + (editing ? " editable-profile" : ""))
.job-profile-row
.left-column.full-height-column
.sub-column
#profile-photo-container.editable-section(title="Click to change your photo")
.editable-icon.glyphicon.glyphicon-pencil
img.profile-photo(src=user.getPhotoURL(240, true))
.profile-caption= profile.jobTitle || 'Software Developer'
#links-container.editable-section
.editable-display(title="Click to add social and personal links")
.editable-icon.glyphicon.glyphicon-pencil
if profileLinks && profileLinks.length
ul.links.editable-thinner
each link in profileLinks
if link.link && link.name
li(title=profile.name + " on " + link.name, class=link.icon ? "has-icon" : "")
a(href=link.link)
if link.icon
img(src=link.icon.url, alt=link.icon.name)
else
button.btn.btn-large.btn-inverse.flat-button= link.name
else if editing
h3.edit-label(data-i18n="account_profile.add_links") Add some links
ul.links
li.has-icon
a(href='http://example.com')
img(src='/images/pages/account/profile/icon_github.png', alt='GitHub')
li.has-icon
a(href='http://example.com')
img(src='/images/pages/account/profile/icon_facebook.png', alt='Facebook')
li.has-icon
a(href='http://example.com')
img(src='/images/pages/account/profile/icon_twitter.png', alt='Twitter')
li.has-icon
a(href='http://example.com/')
img(src='/images/pages/account/profile/icon_linkedin.png', alt='LinkedIn')
button.btn.btn-large.btn-inverse.flat-button.edit-example-button(data-i18n="account_profile.example_blog") Blog
button.btn.btn-large.btn-inverse.flat-button.edit-example-button(data-i18n="account_profile.example_personal_site") Personal Site
form.editable-form
.editable-icon.glyphicon.glyphicon-remove
h3(data-i18n="account_profile.links_header") Personal Links
p.help-block(data-i18n="account_profile.links_blurb") Link any other sites or profiles you want to highlight, like your GitHub, your LinkedIn, or your blog.
.editable-array(data-property='links')
for link, index in (profile.links || []).concat({})
.array-item.link-container.well.well-sm
.form-group
label.control-label(data-i18n="account_profile.links_name") Link Name
input.form-control(type='link-name', maxlength='30', data-schemaformat='link-name', name="root[links][#{index}][name]", value=link.name, data-autocomplete="commonLinkNames", data-autocomplete-min-length=0)
if !index
p.help-block
span(data-i18n="account_profile.links_name_help") What are you linking to?
| Ex.: 'Personal Website', 'GitHub'
.form-group
label.control-label(data-i18n="account_profile.links_link") Link URL
input.form-control(type='url', pattern='^(ht|f)tp(s?)://[0-9a-zA-Z]([-.w]*[0-9a-zA-Z])*(:(0-9)*)*(/?)([a-zA-Z0-9-.?,\'/\+&%$#_=]*)?$', data-schemaformat='url', name="root[links][#{index}][link]", value=link.link)
if !index
p.help-block Ex.: "https://github.com/nwinter"
button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save
.editable-section#basic-info-container
- var editableDefaults = editing && profile.city == jobProfileSchema.properties.city.default
div(class="editable-display" + (editableDefaults ? " edit-example-text" : ""), title="Click to edit your basic info")
.editable-icon.glyphicon.glyphicon-pencil
if editableDefaults
h3.edit-label(data-i18n="account_profile.basics_header") Update basic info
div= profile.city + ', ' + profile.country
div= profile.visa
div
span(data-i18n="account_profile.looking_for") Looking for:
| #{profile.lookingFor}
div
span(data-i18n="account_profile.last_updated") Last updated:
| #{moment(profile.updated).fromNow()}
form.editable-form
.editable-icon.glyphicon.glyphicon-remove
.form-group
label.control-label(data-i18n="account_profile.basics_active") Open to Offers
select.form-control(name='root[active]')
option(value='1', selected=profile.active, data-i18n="account_profile.active") Looking for interview offers now
option(value='', selected=!profile.active, data-i18n="account_profile.inactive") Not looking for offers right now
p.help-block(data-i18n="account_profile.basics_active_help") Want interview offers right now?
.form-group
label.control-label(data-i18n="account_profile.basics_job_title") Desired Job Title
input.form-control(type='text', maxlength='50', name='root[jobTitle]', value=profile.jobTitle)
p.help-block
span(data-i18n="account_profile.basics_job_title_help") What role are you looking for?
| Ex.: "Full Stack Engineer", "Front-End Developer", "iOS Developer"
.form-group
label.control-label(data-i18n="account_profile.basics_city") City
input.form-control(type='city', maxlength='100', data-schemaformat='city', name='root[city]', value=profile.city, data-autocomplete="commonCities", data-autocomplete-min-length=1)
p.help-block
span(data-i18n="account_profile.basics_city_help") City you want to work in (or live in now).
| Ex.: "San Francisco", "Lubbock, TX"
.form-group
label.control-label(data-i18n="account_profile.basics_country") Country
input.form-control(type='country', maxlength='100', data-schemaformat='country', name='root[country]', value=profile.country, data-autocomplete="commonCountries", data-autocomplete-min-length=1)
p.help-block
span(data-i18n="account_profile.basics_country_help") Country you want to work in (or live in now).
| Ex.: "USA", "France"
.form-group
label.control-label(data-i18n="account_profile.basics_visa") US Work Status
select.form-control(name='root[visa]')
option(value='Authorized to work in the US', selected=profile.visa == 'Authorized to work in the US') Authorized to work in the US
option(value='Need visa sponsorship', selected=profile.visa == 'Need visa sponsorship') Need visa sponsorship
p.help-block(data-i18n="account_profile.basics_visa_help") Are you authorized to work in the US, or do you need visa sponsorship?
.form-group
label.control-label(data-i18n="account_profile.basics_looking_for") Looking For
select.form-control(name='root[lookingFor]')
option(value='Full-time', selected=profile.lookingFor == "Full-time", data-i18n="account_profile.basics_looking_for_full_time") Full-time
option(value='Part-time', selected=profile.lookingFor == "Part-time", data-i18n="account_profile.basics_looking_for_part_time") Part-time
option(value='Remote', selected=profile.lookingFor == "Remote", data-i18n="account_profile.basics_looking_for_remote") Remote
option(value='Contracting', selected=profile.lookingFor == "Contracting", data-i18n="account_profile.basics_looking_for_contracting") Contracting
option(value='Internship', selected=profile.lookingFor == "Internship", data-i18n="account_profile.basics_looking_for_internship") Internship
p.help-block(data-i18n="account_profile.basics_looking_for_help") What kind of developer position do you want?
button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save
if !editing && !myProfile
button#contact-candidate.btn.btn-large.btn-inverse.flat-button
span(data-i18n="account_profile.contact") Contact
| #{profile.name.split(' ')[0]}
.middle-column.full-height-column
.sub-column
#name-container.editable-section
.editable-display(title="Click to fill in your name")
.editable-icon.glyphicon.glyphicon-pencil
if editing && !profile.name
h3.edit-label(data-i18n="account_profile.name_header") Fill in your name
else if profile.name
h3= profile.name
else
h3(data-i18n="account_profile.name_anonymous") Anonymous Developer
form.editable-form
.editable-icon.glyphicon.glyphicon-remove
.form-group
label.control-label(data-i18n="general.name") Name
input.form-control(type='text', maxlength='100', name='root[name]', value=profile.name)
p.help-block(data-i18n="account_profile.name_help") Name you want employers to see, like 'Nick Winter'.
button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save
#short-description-container.editable-section
.editable-display(title="Click to write your tagline")
.editable-icon.glyphicon.glyphicon-pencil
if editing && (!profile.shortDescription || profile.shortDescription == jobProfileSchema.properties.shortDescription.default)
h3.edit-label(data-i18n="account_profile.short_description_header") Write a short description of yourself
p.edit-example-text(data-i18n="account_profile.short_description_blurb") Add a tagline to help an employer quickly learn more about you.
else if profile.shortDescription
p.editable-thinner= profile.shortDescription
form.editable-form
.editable-icon.glyphicon.glyphicon-remove
.form-group
label.control-label(data-i18n="account_profile.short_description") Tagline
textarea.form-control(rows=3, maxlength='140', name='root[shortDescription]')= profile.shortDescription
p.help-block(data-i18n="account_profile.short_description_help") Who are you, and what are you looking for? 140 characters max.
button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save
#skills-container.editable-section
.editable-display.editable-thinner(title="Click to tag your programming skills")
.editable-icon.glyphicon.glyphicon-pencil
if editing && (!profile.skills || !profile.skills.length || (profile.skills.length == 1 && profile.skills[0] == 'javascript'))
h3.edit-label Tag your programming skills
each skill in ["python", "coffeescript", "node", "ios", "objective-c", "javascript", "app-engine", "mongodb", "web dev", "django", "backbone"]
code.edit-example-tag= skill
span
else
each skill in profile.skills
code= skill
span
form.editable-form
.editable-icon.glyphicon.glyphicon-remove
h3(data-i18n="account_profile.skills_header") Skills
p.help-block
span(data-i18n="account_profile.skills_help") Tag relevant developer skills in order of proficiency.
| Ex.: "objective-c", "mongodb", "rails", "android", "javascript"
.editable-array(data-property='skills')
for skill, index in (profile.skills || []).concat('')
.array-item.skill-array-item
input.form-control(type='skill', maxlength='20', pattern='.{1,}', data-schemaformat='skill', name="root[skills][#{index}]", value=skill, data-autocomplete="commonSkills", data-autocomplete-min-length=1)
button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save
#long-description-container.editable-section
.editable-display(title="Click to start writing your longer description")
.editable-icon.glyphicon.glyphicon-pencil
- var modified = profile.longDescription && profile.longDescription != jobProfileSchema.properties.longDescription.default
if editing && !modified
h3.edit-label(data-i18n="account_profile.long_description_header") Describe your desired position
p.edit-example-text(data-i18n="account_profile.long_description_blurb") Tell employers how awesome you are and what role you want.
else if modified
div.long-description.editable-thinner!= marked(profile.longDescription)
form.editable-form
.editable-icon.glyphicon.glyphicon-remove
.form-group
label.control-label(data-i18n="account_profile.long_description") Self Description
textarea.form-control(rows=20, maxlength='600', data-schemaformat='markdown', name='root[longDescription]')= profile.longDescription
p.help-block(data-i18n="account_profile.long_description_help") Describe yourself to potential employers. Keep it short and to the point. We recommend outlining the position that would most interest you. Tasteful markdown okay; 600 characters max.
button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save
#work-container.editable-section
.editable-display(title="Click to add work experience")
.editable-icon.glyphicon.glyphicon-pencil
if profile.work && profile.work.length
h3.experience-header
img.header-icon(src="/images/pages/account/profile/work.png", alt="")
span(data-i18n="account_profile.work_experience") Work Experience
| - #{profile.experience}
|
span(data-i18n=profile.experience == 1 ? "units.year" : "units.years")
each job in profile.work
if job.role && job.employer
div.experience-entry
div.duration.pull-right= job.duration
| #{job.role} at #{job.employer}
.clearfix
if job.description
div!= marked(job.description)
else if editing
h3.experience-header.edit-label(data-i18n="account_profile.work_header") Chronicle your work history
div.experience-entry.edit-example-text
div.duration.pull-right June, 2012 - present
| UX Designer at Hooli
.clearfix
div Revolutionized CSS, refactored flattening, and designed all the things.
div.experience-entry.edit-example-text
div.duration.pull-right 1999 - 2012
| Software Engineer at Initrode
.clearfix
div Built a P2P streaming TPS report fulfillment system.
form.editable-form
.editable-icon.glyphicon.glyphicon-remove
h3(data-i18n="account_profile.work_experience") Work Experience
.form-group
label.control-label(data-i18n="account_profile.work_years") Years of Experience
input.form-control(type='text', name='root[experience]', value=profile.experience)
p.help-block(data-i18n="account_profile.work_years_help") How many years of professional experience (getting paid) developing software do you have?
p(data-i18n="account_profile.work_blurb") List your relevant work experience, most recent first.
.editable-array(data-property='work')
for job, index in (profile.work || []).concat({})
.array-item.well.well-sm
.form-group
label.control-label(data-i18n="account_profile.work_employer") Employer
input.form-control(type='text', maxlength='100', name="root[work][#{index}][employer]", value=job.employer)
p.help-block(data-i18n="account_profile.work_employer_help") Name of your employer.
.form-group
label.control-label(data-i18n="account_profile.work_role") Job Title
input.form-control(type='text', maxlength='100', name="root[work][#{index}][role]", value=job.role)
p.help-block(data-i18n="account_profile.work_role_help") What was your job title or role?
.form-group
label.control-label(data-i18n="account_profile.work_duration") Duration
input.form-control(type='text', maxlength='100', name="root[work][#{index}][duration]", value=job.duration)
p.help-block
span(data-i18n="account_profile.work_duration_help") When did you hold this gig?
| Ex.: "Feb 2013 - present".
.form-group
label.control-label(data-i18n="account_profile.work_description") Description
textarea.form-control(rows=3, maxlength='140', name="root[work][#{index}][description]")= job.description
p.help-block(data-i18n="account_profile.work_description_help") What did you do there? (140 chars; optional)
button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save
#education-container.editable-section
.editable-display(title="Click to add academic experience")
.editable-icon.glyphicon.glyphicon-pencil
if profile.education && profile.education.length
h3.experience-header
img.header-icon(src="/images/pages/account/profile/education.png", alt="")
span(data-i18n="account_profile.education") Education
each school in profile.education
if school.degree && school.school
div.experience-entry
div.duration.pull-right= school.duration
| #{school.degree} at #{school.school}
.clearfix
if school.description
div!= marked(school.description)
else if editing
h3.experience-header.edit-label(data-i18n="account_profile.education_header") Recount your academic ordeals
div.experience-entry.edit-example-text
div.duration.pull-right 1995 - 1997
| Ph.D. Janitorial Science at MIT
.clearfix
div Anonymously solved problems in algebraic graph theory. Swept floors.
form.editable-form
.editable-icon.glyphicon.glyphicon-remove
h3(data-i18n="accont_profile.education") Education
p(data-i18n="account_profile.education_blurb") List your academic ordeals.
.editable-array(data-property='education')
for school, index in (profile.education || []).concat({})
.array-item.well.well-sm
.form-group
label.control-label(data-i18n="account_profile.education_school") School
input.form-control(type='text', maxlength='100', name="root[education][#{index}][school]", value=school.school)
p.help-block(data-i18n="account_profile.education_school_help") Name of your school.
.form-group
label.control-label(data-i18n="account_profile.education_degree") Degree
input.form-control(type='text', maxlength='100', name="root[education][#{index}][degree]", value=school.degree)
p.help-block
span(data-i18n="account_profile.education_degree_help") What was your degree and field of study?
| Ex.: "Ph.D. Human-Computer Interaction (incomplete)"
.form-group
label.control-label(data-i18n="account_profile.education_duration") Dates
input.form-control(type='text', maxlength='100', name="root[education][#{index}][duration]", value=school.duration)
p.help-block
span(data-i18n="account_profile.education_duration_help") When?
| Ex.: "Aug 2004 - May 2008".
.form-group
label.control-label(data-i18n="account_profile.education_description") Description
textarea.form-control(rows=3, maxlength='140', name="root[education][#{index}][description]")= school.description
p.help-block(data-i18n="account_profile.education_description_help") Highlight anything about this educational experience. (140 chars; optional)
button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save
if user.get('jobProfileNotes') || me.isAdmin()
div(class="our-notes-section" + (editing ? " deemphasized" : ""))
h3.experience-header(data-i18n="account_profile.our_notes") Our Notes
- var notes = user.get('jobProfileNotes') || '';
if me.isAdmin()
textarea#job-profile-notes!= notes
button.btn.btn-primary#save-notes-button(data-i18n="common.save") Save
else
div!= marked(notes)
.right-column.full-height-column
.sub-column
#projects-container.editable-section
.editable-display(title="Click to add your projects")
.editable-icon.glyphicon.glyphicon-pencil
if profile.projects && profile.projects.length
h3(data-i18n="account_profile.projects") Projects
ul.projects
each project in profile.projects
if project.name
li
if project.link && project.link.length && project.link != 'http://example.com'
a(href=project.link)
if project.picture
.project-image(style="background-image: url('/file/" + project.picture + "')")
p= project.name
div!= marked(project.description)
else if editing
h3.edit-label(data-i18n="account_profile.projects_header") Add 3 projects
ul.projects
li.edit-example-text
.project-image(style="background-image: url('/images/pages/account/profile/sample_project.png')")
p Cog.js
div JS microlibrary to animate fixie bike cogs on ecommerce sites that sell bike hardware.
li.edit-example-text
.project-image(style="background-image: url('/images/pages/account/profile/sample_project.png')")
p Combjoy
div Ember.js project that schedules hair stylists to ride in Ubers with you to comb your hair on your way to work.
li.edit-example-text
.project-image(style="background-image: url('/images/pages/account/profile/sample_project.png')")
p Bass Drop
div Insert a few lines of JS into your site and get a "Drop the bass!" button for your website. Plays techno.
form.editable-form
.editable-icon.glyphicon.glyphicon-remove
h3(data-i18n="account_profile.projects_header_2") Projects (Top 3)
p(data-i18n="account_profile.projects_blurb") Highlight your projects to amaze employers.
for index in [0, 1, 2]
- var project = (profile.projects || [])[index] || {};
.array-item.well.well-sm
.form-group
label.control-label(data-i18n="account_profile.projects_name") Project Name
input.form-control(type='text', maxlength='100', name="root[projects][#{index}][name]", value=project.name)
p.help-block(data-i18n="account_profile.projects_name_help") What was the project called?
.form-group
label.control-label(data-i18n="account_profile.projects_description") Description
textarea.form-control(rows=6, maxlength='400', data-schemaformat='markdown', name="root[projects][#{index}][description]")= project.description
p.help-block(data-i18n="account_profile.projects_description_help") Briefly describe the project.
.form-group
label.control-label(data-i18n="account_profile.projects_picture") Picture
.project-image(style="background-image: url('" + (src=project.picture ? "/file/" + project.picture : "/images/pages/account/profile/sample_project.png") + "')")
input(type="hidden", name="root[projects][#{index}][picture]", value=project.picture)
p.help-block(data-i18n="account_profile.projects_picture_help") Upload a 230x115px or larger image showing off the project.
.form-group
label.control-label(data-i18n="account_profile.projects_link") Link
input.form-control(type='url', pattern='^(ht|f)tp(s?)://[0-9a-zA-Z]([-.w]*[0-9a-zA-Z])*(:(0-9)*)*(/?)([a-zA-Z0-9-.?,\'/\+&%$#_=]*)?$', data-schemaformat='url', name="root[projects][#{index}][link]", value=project.link)
p.help-block(data-i18n="account_profile.projects_link_help") Link to the project.
button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save
else if allowedToViewJobProfile
.public-profile-container
h2(data-i18n="common.loading") Loading...
else
.public-profile-container
h2
span(data-i18n="account_profile.profile_for_prefix") Profile for
span= user.get('name') || "Anonymous Wizard"
span(data-i18n="account_profile.profile_for_suffix")
img.profile-photo(src=user.getPhotoURL(256))
p To see a private user profile, you may need to log in.