codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2024-11-30 10:56:53 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Suggested improvements to profile pages.

Browse source
This commit is contained in:
Nick Winter 2014-06-07 00:31:19 -06:00
parent f0cdf6b2e2
commit 67b10474e8
5 changed files with 124 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/assets/images/pages/account/profile/sample_project.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

26
app/locale/en.coffee
View file

@ -193,8 +193,9 @@
view_profile: "View Your Profile"
account_profile:
edit_settings: "Edit Settings"
done_editing_settings: "Done Editing"
settings: "Settings"
edit_profile: "Edit Profile"
done_editing: "Done Editing"
profile_for_prefix: "Profile for "
profile_for_suffix: ""
approved: "Approved"
@ -209,17 +210,17 @@
next_city: "city?"
next_country: "pick your country."
next_name: "name?"
next_short_description: "summarize yourself at a glance."
next_long_description: "describe the work you're looking for."
next_short_description: "write a short description."
next_long_description: "describe your desired position."
next_skills: "list at least five skills."
next_work: "list your work experience."
next_work: "chronicle your work history."
next_education: "recount your educational ordeals."
next_projects: "show off up to three projects you've worked on."
next_links: "add any personal or social links."
next_photo: "add an optional professional photo."
next_active: "mark yourself open to offers to show up in searches."
example_blog: "Your Blog"
example_github: "Your GitHub"
example_blog: "Blog"
example_personal_site: "Personal Site"
links_header: "Personal Links"
links_blurb: "Link any other sites or profiles you want to highlight, like your GitHub, your LinkedIn, or your blog."
links_name: "Link Name"
@ -247,15 +248,14 @@
name_anonymous: "Anonymous Developer"
name_help: "Name you want employers to see, like 'Nick Winter'."
short_description_header: "Write a short description of yourself"
short_description_blurb: "Add a blurb here that will show, at a glance, whether you might be just the developer that an employer is looking for."
short_description: "Short Description"
short_description_blurb: "Add a tagline to help an employer quickly learn more about you."
short_description: "Tagline"
short_description_help: "Who are you, and what are you looking for? 140 characters max."
skills_header: "Skills"
skills_help: "Tag relevant developer skills in order of proficiency."
long_description_header: "Detail your desired position"
long_description_blurb_1: "Write a little longer section here to describe the role you would like to pursue next."
long_description_blurb_2: "Talk about how awesome you are and why it would be a good idea to hire you."
long_description: "Description"
long_description_header: "Describe your desired position"
long_description_blurb: "Tell employers how awesome you are and what role you want."
long_description: "Self Description"
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."
work_experience: "Work Experience"
work_header: "Chronicle your work history"

54
app/styles/account/profile.sass
View file

@ -4,13 +4,37 @@
$sideBackground: rgb(220, 220, 220)
.profile-control-bar
background-color: rgb(78, 78, 78)
background-color: $sideBackground
width: 100%
text-align: center
max-height: 70px
button
margin: 2px
.profile-completion-progress
width: 100%
height: 33px
margin-bottom: 0
border-radius: 0
background-color: darken($sideBackground, 15%)
.progress-bar
line-height: 33px
font-size: 16px
.progress-text
position: absolute
width: 100%
text-align: center
line-height: 33px
font-size: 16px
color: white
text-shadow: 0px 1px 0px black
button, a.btn
margin: 10px 2px 10px 2px
&:disabled
border-radius: 0
opacity: 1
i
margin-right: 5px
@ -18,21 +42,6 @@
position: absolute
right: 5px
.profile-completion-progress
width: 100%
display: inline-block
height: 33px
margin-bottom: 0
border-radius: 0
background-color: $sideBackground
.progress-bar
line-height: 33px
font-size: 16px
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
.main-content-area
padding: 0
background-color: white
@ -246,9 +255,10 @@
.editable-section
position: relative
transition: box-shadow 0.5s easeInOutQuad
min-height: 30px
&.just-saved
box-shadow: 0px 0px 80px 0px #080
box-shadow: 0px 0px 20px 0px #080
z-index: 1
.editable-form
@ -293,6 +303,7 @@
.edit-label
color: $blue
font-weight: 300
.edit-example-button
background-color: transparentize($blue, 0.25)
@ -303,6 +314,9 @@
code.edit-example-tag
color: $blue
.emphasized
outline: 1px solid $green
.editable-section.deemphasized:not(.just-saved), .our-notes-section.deemphasized
opacity: 0.5

98
app/templates/account/profile.jade
View file

@ -3,14 +3,21 @@ 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_settings") Done Editing
span(data-i18n="account_profile.done_editing") Done Editing
else
button.btn#toggle-editing
i.icon-cog
span(data-i18n="account_profile.edit_settings") Edit Settings
span(data-i18n="account_profile.edit_profile") Edit Profile
if profile.active
button.btn.btn-success#toggle-job-profile-active
i.icon-eye-open
@ -19,8 +26,9 @@ block content
button.btn#toggle-job-profile-active
i.icon-eye-close
span(data-i18n="account_profile.inactive") Not looking for offers right now
if profileApproved
button.btn.btn-success#toggle-job-profile-approved
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()
@ -29,14 +37,11 @@ block content
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 editing
.progress.profile-completion-progress
.progress-bar.progress-bar-success(style="width: #{100 * progress}%")
//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" : ""))
@ -63,8 +68,21 @@ block content
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
button.btn.btn-large.btn-inverse.flat-button.edit-example-button(data-i18n="account_profile.example_blog") Your Blog
button.btn.btn-large.btn-inverse.flat-button.edit-example-button(data-i18n="account_profile.example_githu") Your GitHub
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
@ -145,7 +163,7 @@ block content
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
if !editing && !myProfile
button#contact-candidate.btn.btn-large.btn-inverse.flat-button
span(data-i18n="account_profile.contact") Contact
| #{profile.name.split(' ')[0]}
@ -172,11 +190,11 @@ block content
#short-description-container.editable-section
.editable-display(title="Click to write your short description")
.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 blurb here that will show, at a glance, whether you might be just the developer that an employer is looking for.
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
@ -184,7 +202,7 @@ block content
form.editable-form
.editable-icon.glyphicon.glyphicon-remove
.form-group
label.control-label(data-i18n="account_profile.short_description") Short Description
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
@ -219,17 +237,17 @@ block content
#long-description-container.editable-section
.editable-display(title="Click to start writing your longer description")
.editable-icon.glyphicon.glyphicon-pencil
if editing && (!profile.longDescription || profile.longDescription == jobProfileSchema.properties.longDescription.default)
h3.edit-label(data-i18n="account_profile.long_description_header") Detail your desired position
p.edit-example-text(data-i18n="account_profile.long_description_blurb_1") Write a little longer section here to describe the role you would like to pursue next.
p.edit-example-text(data-i18n="account_profile.long_description_blurb_2") Talk about how awesome you are and why it would be a good idea to hire you.
else if profile.longDescription
- 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") Description
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
@ -265,14 +283,14 @@ block content
div.duration.pull-right 1999 - 2012
| Software Engineer at Initrode
.clearfix
div Architected a peer-to-peer streaming automatic TPS report fulfillment system.
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]')
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')
@ -321,7 +339,7 @@ block content
div.duration.pull-right 1995 - 1997
| Ph.D. Janitorial Science at MIT
.clearfix
div Anonymously solved difficult problems in algebraic graph theory. Swept the floors.
div Anonymously solved problems in algebraic graph theory. Swept floors.
form.editable-form
.editable-icon.glyphicon.glyphicon-remove
@ -384,17 +402,17 @@ block content
h3.edit-label(data-i18n="account_profile.projects_header") Add 3 projects
ul.projects
li.edit-example-text
.project-image(style="background-image: url('/file/db/user/52a57252a89409700d0000d9/godzilla_babies.jpg')")
p HTML5 Godzilla Babies
div I orchestrated a combat between a young Godzilla and nine thousand young human baby infants, filmed for fun and profit, using Shadow DOM.
.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/level/hud_center.png')")
p Node.js Framework Framework
div Yo dawg, I heard you like web frameworks, so I made a web framework framework...
.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/level/popover_background.png')")
p Unfinished 2.5D MMORPGFPS
div A real-time multiplayer game engine with cross-platform streaming shader support and hand-drawn characters.
.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
@ -413,7 +431,7 @@ block content
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/jquery.minicolors.png") + "')")
.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
@ -430,11 +448,9 @@ block content
.public-profile-container
h2
span(data-i18n="account_profile.profile_for_prefix") Profile for
span= user.get('name')
span= user.get('name') || "Anonymous Wizard"
span(data-i18n="account_profile.profile_for_suffix")
img.profile-photo(src=user.getPhotoURL(256))
h2 TODO
p Public user profiles are not ready yet. If you are seeing this, we probably have a bug leading to a broken link.
p To see a private user profile, you may need to log in.

29
app/views/account/profile_view.coffee
View file

@ -55,8 +55,8 @@ module.exports = class ProfileView extends View
context.profile = jobProfile
context.user = @user
context.myProfile = @user.id is context.me.id
context.allowedToViewJobProfile = me.isAdmin() or "employer" in me.get('permissions') or context.myProfile
context.allowedToEditJobProfile = me.isAdmin() or context.myProfile
context.allowedToViewJobProfile = me.isAdmin() or "employer" in me.get('permissions') or (context.myProfile && !me.get('anonymous'))
context.allowedToEditJobProfile = me.isAdmin() or (context.myProfile && !me.get('anonymous'))
context.profileApproved = @user.get 'jobProfileApproved'
context.progress = @progress ? @updateProgress()
@editing ?= context.progress < 0.8
@ -78,7 +78,7 @@ module.exports = class ProfileView extends View
unless @editing
@$el.find('.editable-display').attr('title', '')
@initializeAutocomplete()
highlightNext = @highlightNext
highlightNext = @highlightNext ? true
justSavedSection = @$el.find('#' + @justSavedSectionID).addClass "just-saved"
_.defer =>
@progress = @updateProgress highlightNext
@ -197,6 +197,7 @@ module.exports = class ProfileView extends View
onSaved uploadingPath
onEditSection: (e) ->
@$el.find('.emphasized').removeClass('emphasized')
section = $(e.target).closest('.editable-section').removeClass 'deemphasized'
section.find('.editable-form').show().find('select, input, textarea').first().focus()
section.find('.editable-display').hide()
@ -297,22 +298,18 @@ module.exports = class ProfileView extends View
progress = Math.round 100 * completed / totalWeight
bar = @$el.find('.profile-completion-progress .progress-bar')
bar.css 'width', "#{progress}%"
if next
text = ""
t = $.i18n.t
if next and progress > 40
text = "#{progress}% #{t 'account_profile.complete'}. #{t 'account_profile.next'}: #{next.name}"
else if next and progress > 30
text = "#{progress}%. #{t 'account_profile.next'}: #{next.name}"
else if next and progress > 11
text = "#{progress}%: #{next.name}"
else if progress > 3
text = "#{progress}%"
bar.text text
bar.parent().toggle Boolean progress
bar.parent().show().find('.progress-text').text text
if highlightNext and next?.container and not (next.container in @highlightedContainers)
@onEditSection target: next.container
@highlightedContainers.push next.container
$('#page-container').scrollTop 0
@$el.find(next.container).addClass 'emphasized'
#@onEditSection target: next.container
#$('#page-container').scrollTop 0
else
bar.parent().hide()
completed / totalWeight
getProgressMetrics: ->
@ -323,8 +320,6 @@ module.exports = class ProfileView extends View
listStarted = (field, subfields) -> -> jobProfile[field]?.length and _.every subfields, (subfield) -> jobProfile[field][0][subfield]
t = $.i18n.t
@progressMetrics = [
{name: t('account_profile.next_city'), weight: 1, container: '#basic-info-container', fn: modified 'city'}
{name: t('account_profile.next_country'), weight: 0, container: '#basic-info-container', fn: exists 'country'}
{name: t('account_profile.next_name'), weight: 1, container: '#name-container', fn: modified 'name'}
{name: t('account_profile.next_short_description'), weight: 2, container: '#short-description-container', fn: modified 'shortDescription'}
{name: t('account_profile.next_skills'), weight: 2, container: '#skills-container', fn: -> jobProfile.skills?.length >= 5}
@ -332,6 +327,8 @@ module.exports = class ProfileView extends View
{name: t('account_profile.next_work'), weight: 3, container: '#work-container', fn: listStarted 'work', ['role', 'employer']}
{name: t('account_profile.next_education'), weight: 3, container: '#education-container', fn: listStarted 'education', ['degree', 'school']}
{name: t('account_profile.next_projects'), weight: 3, container: '#projects-container', fn: listStarted 'projects', ['name']}
{name: t('account_profile.next_city'), weight: 1, container: '#basic-info-container', fn: modified 'city'}
{name: t('account_profile.next_country'), weight: 0, container: '#basic-info-container', fn: exists 'country'}
{name: t('account_profile.next_links'), weight: 2, container: '#links-container', fn: listStarted 'links', ['link', 'name']}
{name: t('account_profile.next_photo'), weight: 2, container: '#profile-photo-container', fn: modified 'photoURL'}
{name: t('account_profile.next_active'), weight: 1, fn: modified 'active'}