494088 - Restyling of My Accounts page

Status: VERIFIED FIXED

(addons.mozilla.org Graveyard :: Public Pages, defect, P3)

Description

[Chris Howse [:chowse]]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.0.10) Gecko/2009042315 Firefox/3.0.10
Build Identifier: 

The (semi-) public My Accounts page needs to be updated to reflect ClearLeft's new design.

Reproducible: Always

Comment 1

[Chris Howse [:chowse]]

Proposed visual designs for My Account page, more inline w/ ClearLeft's redesign. Updated layout and controls, including (optional) translation support:

http://people.mozilla.com/~chowse/drop/my_account/v1/

Comments welcome. Low-fi versions w/ content coming shortly.

Comment 2

[Wil Clouser [:clouserw]]

They look nice - I'll have more comments (particularly about how they work) once the versions with content come out.

Comment 3

[Chris Howse [:chowse]]

Lo-fi versions w/ content are now available:

http://people.mozilla.com/~chowse/drop/my_account/v1/

Working on the registration and login pages now. Feedback on the posted wireframes would be appreciated.

Comment 4

[Chris Howse [:chowse]]

Hi-fi version of registration and login pages:

http://people.mozilla.com/~chowse/drop/my_account/v1/HiFid_Register.png
http://people.mozilla.com/~chowse/drop/my_account/v1/HiFid_Login.png
http://people.mozilla.com/~chowse/drop/my_account/v1/HiFid_Login_Alt.png

Comment 5

[Chris Howse [:chowse]]

Attachment: Patch for updated login page

First attempt to patch AMO. Updates the Log In page to match this mockup:

http://people.mozilla.com/~chowse/drop/my_account/v1/HiFid_Login_Alt.png

No icons for the moment (updating CSS sprites sucks :p)

Comment 6

[Jeff Balogh (:jbalogh)]

Comment on attachment 379995 [details] [diff] [review]
Patch for updated login page

>Index: site/app/webroot/css/amo2009/main.css
>===================================================================
>--- site/app/webroot/css/amo2009/main.css	(revision 26370)
>+++ site/app/webroot/css/amo2009/main.css	(working copy)
>@@ -855,7 +855,8 @@
> a:hover.prominent,
> a:focus.prominent,
> a:active.prominent,
>-button.prominent {
>+button.prominent,
>+input[type=submit].prominent {

Can we make the input on this page a button instead, for consistency?

>Index: site/app/webroot/css/forms.css
>===================================================================
>--- site/app/webroot/css/forms.css	(revision 26370)
>+++ site/app/webroot/css/forms.css	(working copy)

CSS that goes with the redesign should go under css/amo2009, probably in main-mozilla.css

>@@ -61,4 +61,21 @@
>     float: right;
> }
> 
>+
>  
>+.amo-form-login .amo-label-large {
>+    width: 9em;
>+    padding-right: 1em;
>+    border-bottom: none;
>+    float: left;
>+	clear:left;
>+	text-align: right;

Weird whitespace there.

>+}
>+
>+.amo-form-login .amo-remember {
>+	margin-left: 10em;
>+}
>+
>+.amo-form-login .amo-submit {
>+	margin-left: 7.5em;
>+}

Can you r? rdoherty on the next iteration for this CSS stuff?

       
>Index: site/app/views/users/login.thtml
>===================================================================
>--- site/app/views/users/login.thtml	(revision 26370)
>+++ site/app/views/users/login.thtml	(working copy)
>@@ -45,6 +45,9 @@
> <div class="primary" role="main">
>     <?=$this->renderElement('amo2009/search')?>
>     
>+	<?=$this->renderElement('amo2009/breadcrumbs')?>
>+	<h2><?=___('user_login_header', 'Log In')?></h2>
>+	  
> <?php
>     //banner warning messages for display
>     if(isset($_GET['m'])) {
>@@ -67,7 +70,7 @@
>         echo $this->renderElement('notification', array('type' => 'error', 'description' => _('error_username_or_pw_wrong')));
> ?>
> <p></p>
>-<form action="<?=$html->entities($html->url())?>" method="post" class="amo-form highlight">
>+<form action="<?=$html->entities($html->url())?>" method="post" class="primary amo-form amo-form-login">

I like having the highlight on this form.  The boxy look gives the form some structure.

>     <?=$html->hiddenSession() ?>       
>     <div>
>         <? 
>@@ -90,7 +93,7 @@
>         <label for="LoginRemember"><?=___('user_form_remember_me')?></label>
>     </div>
>     <div class="container">
>-        <?=$html->submit(_('user_form_submit_login'), array('class'=>'amo-submit')); ?>
>+        <?=$html->submit(_('user_form_submit_login'), array('class'=>'amo-submit prominent')); ?>
>     </div>
> </form>
> <script type="text/javascript" charset="utf-8">
>@@ -98,8 +101,14 @@
>     $(document).ready(function() { $('#LoginEmail').focus(); });
> </script>
> 
>-<ul>
>-    <li><?= $html->link(_('user_login_register_link'), '/users/register'); ?></li>
>-    <li><?= $html->link(_('user_pwreset_link'), '/users/pwreset',null,null,false); ?></li>
>-</ul>
>+<div class="secondary">
>+	<div class="article">

Do we have white boxes like that anywhere else?  It looked odd to me.

You have a lot of indentation there.

>+		<h4><?=___('user_login_problems', 'Login Problems?')?></h4>
>+		<ul class="xoxo">
>+		    <li><?= $html->link(___('user_login_no_account', 'I don\'t have an account.'), '/users/register'); ?></li>

I'd use double quotes instead of escaping single quotes, otherwise that will mess up poboy.  It's not a very smart tool.

>+		    <li><?= $html->link(___('user_login_forgot_password', 'I forgot my password.'), '/users/pwreset',null,null,false); ?></li>

Do you need the extra parameters on the end?

>+		</ul>
>+	</div>
>+</div>
>+
> </div><!-- /.primary -->

Comment 7

[Wil Clouser [:clouserw]]

These pages have the style already, just need further tweaking on the form prettiness.  Moving out of 5.0.6.

Comment 8

[Nick Nguyen [:osunick]]

chris- can you respond to jeff's comments?

Comment 9

[Chris Howse [:chowse]]

Comment on attachment 379995 [details] [diff] [review]
Patch for updated login page

Fixed in bug 495550

Comment 10

[Nick Nguyen [:osunick]]

Pushing to 5.1 in the hopes that CHowse can get to it when he's back contractin'

Comment 11

[Dave Garrett]

What's left in this bug?

Comment 12

[Wil Clouser [:clouserw]]

(In reply to comment #11)
> What's left in this bug?

http://people.mozilla.com/~chowse/drop/my_account/v1/HiFid_Register.png is the only thing that doesn't look like it's live, but that's not this bug, closing. Thanks.

Comment 13

[Stephen Donner [:stephend] Not actively reading bugmail]

Verified FIXED on https://preview.addons.mozilla.org/en-US/firefox/users/edit; also, since this landed in 5.1, changing milestone from 5.2 -> 5.1.