879052 - Code new Profile pages

Status: VERIFIED FIXED

(Participation Infrastructure :: Phonebook, defect)

Description

[Justin Crawford [:hoosteeno] [:jcrawford]]

We have sketches of the new profile edit/view screens in bug 876928 ready for coding. Please incorporate any feedback added to that bug. Also, please put these changes on the homepageredux branch of Mozillians so they can be launched as part of the homepage redesign.

Comment 1

[Justin Crawford [:hoosteeno] [:jcrawford]]

We'll have two PRs for this:

* New profile views will land in GitHub on Thursday 6/6
* New profile create/update will land in GitHub on Monday 6/10

mozillians-dev.allizom.org will get these changes soon after.

Comment 2

[Julia Elman]

Pull request submitted for profile detail page: https://github.com/mozilla/mozillians/pull/509

Comment 3

[Julia Elman]

Add profile edit changes to above pull request: https://github.com/mozilla/mozillians/pull/509

Comment 4

[Justin Crawford [:hoosteeno] [:jcrawford]]

We'll merge these into the homepageredux branch on 6/11. More info: https://groups.google.com/forum/?fromgroups#!topic/mozilla.dev.community-tools/jw8uBe95dPY

Comment 5

[Justin Crawford [:hoosteeno] [:jcrawford]]

Update: We'll merge on 6/12. Details in this card: https://mozilla.kanbanery.com/projects/23282/board/tasks/1004708

Meanwhile, let's use a calendar popout for the date fields.

Comment 6

[Justin Crawford [:hoosteeno] [:jcrawford]]

Update: we won't use a calendar popout, too hard to localize.

Comment 7

[Julia Elman]

Adding email address field + privacy drop down to profile edit page. See pull request here: https://github.com/mozilla/mozillians/pull/514

Comment 8

[Justin Crawford [:hoosteeno] [:jcrawford]]

The new profile pages are on dev: https://mozillians-dev.allizom.org

Please add your comments to this bug by 2013-06-19.

Comment 9

[Justin Crawford [:hoosteeno] [:jcrawford]]

Feedback:

* We need to add conditional logic for when this page is the register page.
** First, we should change title from "Edit Your Profile" to "Create Your Profile"
** Second, we should put newsletter and privacy optins at the bottom just above save button

Comment 10

[William Reynolds [:williamr]]

(In reply to Justin Crawford [:hoosteeno] from comment #8)
> Please add your comments to this bug by 2013-06-19.

Some small tweaks here. The first three are mainly for better UX. Comments 4 and 5 are blockers since the expected functionality for those two fields isn't quite there yet. Overall these pages look wonderful! 

1. Email address field: Production has this string that doesn't appear in the new Edit Your Profile view - "To change your Personal Email, please [file a bug]." I think it would be helpful to have this line in the new view, although I would slightly modify to a more accurate string - "To change your account email, please file a bug]."

2. Bio input field: This appears as a single line of text for me, although we encourage users to add multiple lines of text for their profile. It would be great for this input field to span multiple lines, similar to how it currently appears on production: https://mozillians.org/user/edit/

3. Accounts fields: GitHub has a nice "<github-username-here>" placeholder that would be great to have for the other account types (eg MDN username, AMO username, SUMO username, Facebook URL, Twitter username, AIM username, Yahoo! username, Google Talk email address, Skype username. I think it would be good to add "Google+" as an account type with a "Google+ URL" placeholder text.

4. Involved with Mozilla date: The years should start with 1998 and increment up to the current year. Right now it shows 1900 - 1999.

5. Languages: the "preferred language" box with a curated list of languages is missing. Justin, do we have a curated list to use? Also, the "other languages you speak" input should use the curated list. It could autocomplete the way it does on production, or it might make sense to have a dropdown with the curated list and the user can click 'Add language' if she wants to add additional languages.

Comment 11

[Julia Elman]

(In reply to Justin Crawford [:hoosteeno] from comment #9)
> Feedback:
> 
> * We need to add conditional logic for when this page is the register page.
> ** First, we should change title from "Edit Your Profile" to "Create Your
> Profile"
> ** Second, we should put newsletter and privacy optins at the bottom just
> above save button

In response to the changing of the title from the first item here, the logic is already in the template to change that text: https://github.com/mozilla/mozillians/blob/homepageredux/apps/phonebook/templates/phonebook/edit_profile.html#L30

Comment 12

[Justin Crawford [:hoosteeno] [:jcrawford]]

The new frontend code for profiles is coded and live in dev:

https://mozillians-dev.allizom.org/en-US/user/edit/

Some minor bug fixes outstanding, new bugs for those please.

Comment 13

[Holly Habstritt Gaal [:Habber]]

Does the icon next to the username look fuzzy to anyone else? It looks like the block is separated from the triangle. It may only appear this way on retina display only. 

http://cl.ly/image/390L382s2y14

Comment 14

[Justin Crawford [:hoosteeno] [:jcrawford]]

I see the block/triangle issue. New bug?

It is slightly fuzzy on retina, but not enough that I noticed it until just now.

Comment 15

[Matt Brandt [:mbrandt]]

(In reply to Justin Crawford [:hoosteeno] from comment #14)
> I see the block/triangle issue. New bug?
> 
> It is slightly fuzzy on retina, but not enough that I noticed it until just
> now.

+1 for a new bug - Holly would you mind filing one? Also please attach screenshots to the bug, that way we have the image /forever/ :-)

Comment 16

[Giorgos Logiotatidis [:giorgos]]

Created a new bug here: bug 895852

Thanks Holly!

Comment 17

[Justin Crawford [:hoosteeno] [:jcrawford]]

Bug 896564 does not block this one; but it does block bug 867267.

Comment 18

[Matt Brandt [:mbrandt]]

Bumping to verified - first iteration of profile pages have been coded and push out. Individual bugs should be filed as we tease out the nuanced needs.