Restyling of My Accounts page

VERIFIED FIXED in 5.1

Status

addons.mozilla.org Graveyard
Public Pages
P3
normal
VERIFIED FIXED
9 years ago
2 years ago

People

(Reporter: chowse, Assigned: chowse)

Tracking

unspecified
Dependency tree / graph

Details

(URL)

Attachments

(1 obsolete attachment)

(Assignee)

Description

9 years ago
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
(Assignee)

Comment 1

9 years ago
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.
They look nice - I'll have more comments (particularly about how they work) once the versions with content come out.
Status: UNCONFIRMED → NEW
Ever confirmed: true
(Assignee)

Comment 3

9 years ago
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.
(Assignee)

Comment 4

9 years ago
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
(Assignee)

Comment 5

9 years ago
Created attachment 379995 [details] [diff] [review]
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)
Attachment #379995 - Flags: review?(jbalogh)
Assignee: nobody → chowse
Target Milestone: --- → 5.0.6

Updated

9 years ago
Attachment #379995 - Flags: review?(jbalogh) → review-
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 -->

Updated

9 years ago
Blocks: 495070
(Assignee)

Updated

9 years ago
Depends on: 495550, 495552
These pages have the style already, just need further tweaking on the form prettiness.  Moving out of 5.0.6.
Target Milestone: 5.0.6 → 5.0.7
Priority: -- → P3
Target Milestone: 5.0.7 → 5.0.8
chris- can you respond to jeff's comments?
(Assignee)

Comment 9

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

Fixed in bug 495550
Attachment #379995 - Attachment is obsolete: true
(Assignee)

Updated

9 years ago
Target Milestone: 5.0.8 → 5.0.9
Pushing to 5.1 in the hopes that CHowse can get to it when he's back contractin'
Target Milestone: 5.0.9 → 5.1
Target Milestone: 5.1 → 5.2

Comment 11

8 years ago
What's left in this bug?
(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.
Status: NEW → RESOLVED
Last Resolved: 8 years ago
Resolution: --- → FIXED
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.
Status: RESOLVED → VERIFIED
Target Milestone: 5.2 → 5.1
Product: addons.mozilla.org → addons.mozilla.org Graveyard
You need to log in before you can comment on or make changes to this bug.