codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2025-04-14 05:55:00 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

More flourishes for inline profile editor.

Browse source
This commit is contained in:
Nick Winter 2014-06-01 11:45:01 -07:00
parent 400fddc294
commit d19b6760da
3 changed files with 41 additions and 58 deletions
app
styles/account
profile.sass
templates/account
profile.jade
views/account
profile_view.coffee

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

@ -29,9 +29,6 @@
line-height: 33px
font-size: 16px
.approved, .not-approved
display: none
.main-content-area
padding: 0
background-color: white

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

@ -21,13 +21,16 @@ 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 me.isAdmin() && user.get('jobProfile')
button.btn.edit-settings-button#toggle-job-profile-approved
i.icon-cog
span(data-i18n='account_profile.approved').approved Approved
span(data-i18n='account_profile.not_approved').not-approved Not Approved
if !myProfile
button.btn.edit-settings-button#enter-espionage-mode 007
if profileApproved
button.btn.btn-success#toggle-job-profile-approved
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
@ -50,7 +53,7 @@ block content
.links-container.editable-section
.editable-display(title="Click to add social and personal links")
.editable-icon.glyphicon.glyphicon-pencil
if profileLinks.length
if profileLinks && profileLinks.length
ul.links.editable-thinner
each link in profileLinks
if link.link && link.name
@ -70,7 +73,7 @@ block content
h3 Personal Links
p.help-block 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({})
for link, index in (profile.links || []).concat({})
.array-item.link-container.well.well-sm
.form-group
label.control-label Link Name
@ -84,7 +87,7 @@ block content
p.help-block Ex.: "https://github.com/nwinter"
button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save
.basic-info-container.editable-section
.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
@ -181,7 +184,7 @@ block content
.skills-container.editable-section
.editable-display.editable-thinner(title="Click to tag your programming skills")
.editable-icon.glyphicon.glyphicon-pencil
if editing && !profile.skills.length || (profile.skills.length == 1 && profile.skills[0] == 'javascript')
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
@ -198,7 +201,7 @@ block content
| 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('')
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][0]', value=skill)
button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save
@ -226,7 +229,7 @@ block content
.work-container.editable-section
.editable-display(title="Click to add work experience")
.editable-icon.glyphicon.glyphicon-pencil
if profile.work.length
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
@ -256,8 +259,7 @@ block content
form.editable-form
.editable-icon.glyphicon.glyphicon-remove
h3
span Work Experience
h3 Work Experience
.form-group
label.control-label Years of Experience
input.form-control(type='text', name='root[experience]')
@ -265,7 +267,7 @@ block content
| How many years of professional experience (getting paid) developing software do you have?
p List your relevant work experience, most recent first.
.editable-array(data-property='work')
for job, index in profile.work.concat({})
for job, index in (profile.work || []).concat({})
.array-item.well.well-sm
.form-group
label.control-label Employer
@ -289,7 +291,7 @@ block content
.education-container.editable-section
.editable-display(title="Click to add academic experience")
.editable-icon.glyphicon.glyphicon-pencil
if profile.education.length
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
@ -312,14 +314,10 @@ block content
form.editable-form
.editable-icon.glyphicon.glyphicon-remove
h3
span Education
.btn-group(style='margin-left: 10px;')
button.btn.btn-default.json-editor-btn-collapse(title='Collapse', style='display: none;')
i.glyphicon.glyphicon-chevron-down
h3 Education
p List your academic ordeals.
.editable-array(data-property='education')
for school, index in profile.education.concat({})
for school, index in (profile.education || []).concat({})
.array-item.well.well-sm
.form-group
label.control-label School
@ -356,7 +354,7 @@ block content
.projects-container.editable-section
.editable-display(title="Click to add your projects")
.editable-icon.glyphicon.glyphicon-pencil
if profile.projects.length
if profile.projects && profile.projects.length
h3(data-i18n="account_profile.projects") Projects
ul.projects
each project in profile.projects
@ -389,7 +387,7 @@ block content
h3 Projects (Top 3)
p Highlight your projects to amaze employers.
for index in [0, 1, 2]
- var project = profile.projects[index] || {};
- var project = (profile.projects || [])[index] || {};
.array-item.well.well-sm
.form-group
label.control-label Project Name

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

@ -41,6 +41,7 @@ module.exports = class ProfileView extends View
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.profileApproved = @user.get 'jobProfileApproved'
context.progress = @progress ? @updateProgress()
@editing ?= context.progress < 0.8
context.editing = @editing
@ -59,18 +60,12 @@ module.exports = class ProfileView extends View
afterRender: ->
super()
@updateProfileApproval() if me.isAdmin()
unless @user.get('jobProfile')?.projects?.length or @editing
@$el.find('.right-column').hide()
@$el.find('.middle-column').addClass('double-column')
unless @editing
@$el.find('.editable-display').attr('title', '')
@progress = @updateProgress()
updateProfileApproval: ->
approved = @user.get 'jobProfileApproved'
@$el.find('.approved').toggle Boolean(approved)
@$el.find('.not-approved').toggle not approved
_.defer => @progress = @updateProgress()
toggleEditing: ->
@editing = not @editing
@ -79,8 +74,8 @@ module.exports = class ProfileView extends View
toggleJobProfileApproved: ->
approved = not @user.get 'jobProfileApproved'
@user.set 'jobProfileApproved', approved
@user.save()
@updateProfileApproval()
res = @user.save {jobProfileApproved: approved}, {patch: true}
res.success (model, response, options) => @render()
toggleJobProfileActive: ->
active = not @user.get('jobProfile').active
@ -101,7 +96,7 @@ module.exports = class ProfileView extends View
onJobProfileNotesChanged: (e) =>
notes = @$el.find("#job-profile-notes").val()
@user.set 'jobProfileNotes', notes
@user.save()
@user.save {jobProfileNotes: notes}, {patch: true}
iconForLink: (link) ->
icons = [
@ -184,7 +179,6 @@ module.exports = class ProfileView extends View
form = $(e.target).closest('form')
isEmpty = @arrayItemIsEmpty
section.find('.array-item').each ->
console.log "removing", @ if isEmpty @
$(@).remove() if isEmpty @
resetOnce = false # We have to clear out arrays if we're going to redo them
serialized = form.serializeArray()
@ -195,14 +189,12 @@ module.exports = class ProfileView extends View
value = @extractFieldValue keyChain[0], field.value
parent = jobProfile
for key, i in keyChain
console.log key, i
rootPropertiesSeen[key] = true unless i
break if i is keyChain.length - 1
child = parent[key]
if _.isArray(child) and not resetOnce
child = parent[key] = []
resetOnce = true
console.log " resetting"
else unless child?
child = parent[key] = {}
parent = child
@ -272,10 +264,8 @@ module.exports = class ProfileView extends View
text = "#{progress}% complete. Next: #{next}"
else if next and progress > 30
text = "#{progress}%. Next: #{next}"
else if next and progress > 20
else if next and progress > 11
text = "#{progress}%: #{next}"
else if progress > 11
text = "#{progress}% complete."
else if progress > 3
text = "#{progress}%"
bar.text text
@ -283,24 +273,22 @@ module.exports = class ProfileView extends View
completed / totalWeight
getProgressMetrics: ->
return @progressMetrics if @progressMetrics
schema = me.schema().properties.jobProfile
jobProfile = @user.get('jobProfile')
jobProfile = @user.get('jobProfile') ? {}
exists = (field) -> -> jobProfile[field]
modified = (field) -> -> jobProfile[field] and jobProfile[field] isnt schema.properties[field].default
listStarted = (field, subfields) -> -> jobProfile[field]?.length and _.every subfields, (subfield) -> jobProfile[field][0][subfield]
@progressMetrics = [
{name: "job title?", weight: 0, fn: exists 'jobTitle'}
{name: "choose your city.", weight: 1, fn: modified 'city'}
{name: "pick your country.", weight: 0, fn: exists 'country'}
{name: "provide your name.", weight: 1, fn: modified 'name'}
{name: "summarize yourself at a glance.", weight: 2, fn: modified 'shortDescription'}
{name: "list at least five skills.", weight: 2, fn: -> jobProfile.skills.length >= 5}
{name: "describe the work you're looking for.", weight: 3, fn: modified 'longDescription'}
{name: "list your work experience.", weight: 3, fn: listStarted 'work', ['role', 'employer']}
{name: "recount your educational ordeals.", weight: 3, fn: listStarted 'education', ['degree', 'school']}
{name: "show off up to three projects you've worked on.", weight: 3, fn: listStarted 'projects', ['name']}
{name: "add any personal or social links.", weight: 2, fn: listStarted 'links', ['link', 'name']}
{name: "add an optional professional photo.", weight: 2, fn: modified 'photoURL'}
{name: "city?", weight: 1, container: 'basic-info-container', fn: modified 'city'}
{name: "pick your country.", weight: 0, container: 'basic-info-container', fn: exists 'country'}
{name: "provide your name.", weight: 1, container: 'name-container', fn: modified 'name'}
{name: "summarize yourself at a glance.", weight: 2, container: 'short-description-container', fn: modified 'shortDescription'}
{name: "list at least five skills.", weight: 2, container: 'skills-container', fn: -> jobProfile.skills?.length >= 5}
{name: "describe the work you're looking for.", weight: 3, container: 'long-description-container', fn: modified 'longDescription'}
{name: "list your work experience.", weight: 3, container: 'work-container', fn: listStarted 'work', ['role', 'employer']}
{name: "recount your educational ordeals.", weight: 3, container: 'education-container', fn: listStarted 'education', ['degree', 'school']}
{name: "show off up to three projects you've worked on.", weight: 3, container: 'projects-container', fn: listStarted 'projects', ['name']}
{name: "add any personal or social links.", weight: 2, container: 'links-container', fn: listStarted 'links', ['link', 'name']}
{name: "add an optional professional photo.", weight: 2, container: 'profile-photo-container', fn: modified 'photoURL'}
{name: "mark yourself open to offers to show up in searches.", weight: 1, fn: modified 'active'}
]