Suggested improvements to profile pages.

app/locale/en.coffee

@@ -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"

app/styles/account/profile.sass

@@ -4,34 +4,43 @@
   $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
-      i
-        margin-right: 5px
-
-    .sample-profile
-      position: absolute
-      right: 5px
-  
     .profile-completion-progress
       width: 100%
-      display: inline-block
       height: 33px
       margin-bottom: 0
       border-radius: 0
-      background-color: $sideBackground
+      background-color: darken($sideBackground, 15%)
   
       .progress-bar
         line-height: 33px
         font-size: 16px
-        text-overflow: ellipsis
-        overflow: hidden
-        white-space: nowrap
+
+      .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
+      
+    .sample-profile
+      position: absolute
+      right: 5px
   
   .main-content-area
     padding: 0
@@ -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
 

app/templates/account/profile.jade

@@ -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,24 +26,22 @@ 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
-          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 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 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.

app/views/account/profile_view.coffee

@@ -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}%"
-    text = ""
-    t = $.i18n.t
-    if next and progress > 40
+    if next
+      text = ""
+      t = $.i18n.t
       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
-    if highlightNext and next?.container and not (next.container in @highlightedContainers)
-      @onEditSection target: next.container
-      @highlightedContainers.push next.container
-      $('#page-container').scrollTop 0
+      bar.parent().show().find('.progress-text').text text
+      if highlightNext and next?.container and not (next.container in @highlightedContainers)
+        @highlightedContainers.push next.container
+        @$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'}