codecombat/app/templates/account/profile.jade

457 lines
29 KiB
Text
Raw Normal View History

2014-01-03 13:32:13 -05:00
extends /templates/base
block content
if allowedToEditJobProfile
2014-04-09 16:14:52 -04:00
.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
2014-01-03 13:32:13 -05:00
if profile && allowedToViewJobProfile
div(class="job-profile-container" + (editing ? " editable-profile" : ""))
2014-04-09 16:14:52 -04:00
.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]}
2014-04-09 16:14:52 -04:00
.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)
2014-04-09 16:14:52 -04:00
.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
2014-05-07 16:56:10 -04:00
else if allowedToViewJobProfile
.public-profile-container
h2(data-i18n="common.loading") Loading...
2014-05-07 16:56:10 -04:00
2014-01-03 13:32:13 -05:00
else
.public-profile-container
h2
2014-04-07 18:21:05 -04:00
span(data-i18n="account_profile.profile_for_prefix") Profile for
span= user.get('name') || "Anonymous Wizard"
2014-04-07 18:21:05 -04:00
span(data-i18n="account_profile.profile_for_suffix")
2014-01-27 14:45:24 -05:00
img.profile-photo(src=user.getPhotoURL(256))
p To see a private user profile, you may need to log in.