Closed Bug 490906 Opened 15 years ago Closed 15 years ago

Implement new AMO front page designs from clear left

Categories

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

defect

Tracking

(Not tracked)

VERIFIED FIXED

People

(Reporter: clouserw, Assigned: lorchard)

References

()

Details

(Whiteboard: ->rdoherty)

Attachments

(6 files)

Clearleft made cool new designs.  They have the HTML/images/etc and we'll need to integrate into the current site.  Once designs are delivered, bug transfers to rdoherty.
Designs (css+html) are incoming from clearleft this friday.

Front page spec is here: http://docs.google.com/Doc?id=dds6vwb4_22c7z627f7&hl=en

The collection promo box is not a part of this bug.
Whiteboard: ->rdoherty
Assignee: nat → lorchard
Keywords: 4xp
Priority: -- → P1
Top right of screen should only have total downloads and latest update pings (not unique users)
This is an in-progress patch to show how to start working with the layout in bug 490889
(In reply to comment #3)
> Top right of screen should only have total downloads and latest update pings
> (not unique users)

I talked to Nick about this.

Total downloads comes from: select sum(count) from download_counts

Update pings is going to get new text but it will be a sum of update_counts from the day before.  That means it'll go up and down as we hit weekends and such.

Personally, I don't think people are going to care about the difference between the two when glancing at the header but nick says!
Hey - it'd be a good idea to pre-calc these values instead of running that query.  I'd prefer not to do that on the live database.  Doesn't feel like up-to-the-second results are important, so no reason to store these in a separate stats table that contains higher-level stats.
* no reason to NOT store...
Blocks: 492998
Text in header should be:

add-ons downloaded
add-ons in use
Tossing out an r? for :clouserw, but not sure if someone else might have more time to check this out.

This patch should cover all the bits on the new AMO 2009 home page, introducing teaser and popular collections as well as the recommended / popular / just added / updated addon browser.

A few notes:

* I re-used the categorized Fashion Your Firefox collection to populate the teaser section, since it seemed to mostly correspond to the mockup.  But, eventually, I think this should be reworked to use proper individual collections managed by an admin user.  This will also enable the links from each teaser section to list more addons, since the individual categories of FYF don't have separate category pages.

* To ease DB load on reads, I tweaked the collections model to update subscriber counts on write (eg. add/remove).  I didn't see code doing that anywhere else.  This could probably be done in a cron task - but I'm not sure how to work up a query to update counts for just the collections whose subscriptions have changed since I don't think the collection modified time gets touched.
Attachment #378234 - Flags: review?(clouserw)
Comment on attachment 378234 [details] [diff] [review]
implementation of AMO 2009 front page from clearleft

I'm r+ing because I think this is all just minor design stuff and I imagine more will come up as we go.  Let's get a version on trunk though.  Feedback to be addressed before code freeze:

- We talked about this online a bit but the promo box wasn't a part of this bug.  Since it's in the patch hopefully rdoherty can use it.  All of the L10n strings should be removed though as they are in bug 490667.

- You pulled in L10n from one of mccammos's patches.  It's better if you can just add the L10n you changed to the .po instead of running the whole script (makes merging easier and patches shorter too)

- Our front page is huge now.  What do you think of making the tabs for "Browse Add-ons" use ajax off the API to load data only when someone clicks on them?

- There should be a subscribe link at the bottom left of the "Browse Add-ons" box

- The "RECOMMENDED" text is crowding the download buttons (see screenshot).  The mockups show more space around that label.

- "Themes/Search Plugins/Dictionaries" are supposed to be at the bottom of the categories list

- The promobox is really tall.  One of the add-on summaries is pushing it down I think but it makes it look way too big when that add-on summary isn't visible (see screenshot)

- "Copyright" is bolded at the bottom but the whole sentence should be in bold.

- in an RTL language the promobox should scroll RTL.  Clearleft should provide a way to do that

- "Collections" and "New" overlap in an RTL layout (see screenshot)

- The main search button has no arrow in an RTL layout so it's just a green box.

- The promobox should move to the bottom of the page after I've loaded the page 5 times

- The log in link should be built dynamically so it's not hardcoded to /users/login/

- The promobox shouldn't appear when I'm logged in

- (for bug 491581): The promobox should be automatically scrolling

- Does anyone else think the buttons look...not pretty?  I feel like I'm getting yelled at.  Here are just a few that showed up on the front page while I was testing; see screenshot.
Attachment #378234 - Flags: review?(clouserw) → review+
Attached image promobox —
Attached image recommended —
Attached image fighting labels —
Attached image ugly buttons —
Oh, one more thing I didn't add to the list.  The "Change Application" menu should have application icons in it.

Judging from http://mozilla-dev.clearleft.com/home_RTL.php the RTL issues are something clearleft needs to fix so I'll let them know.
Committed patch as r25902 (and r25904, r25907).

(In reply to comment #10)
> (From update of attachment 378234 [details] [diff] [review])
> I'm r+ing because I think this is all just minor design stuff and I imagine
> more will come up as we go.  Let's get a version on trunk though.  Feedback to
> be addressed before code freeze:

Are these all concerns I should be fixing, or are some clearleft bugs?

> - We talked about this online a bit but the promo box wasn't a part of this
> bug.  Since it's in the patch hopefully rdoherty can use it.  All of the L10n
> strings should be removed though as they are in bug 490667.

Just checked in the patch... should I revert those changes to the messages.po?

> - You pulled in L10n from one of mccammos's patches.  It's better if you can
> just add the L10n you changed to the .po instead of running the whole script
> (makes merging easier and patches shorter too)

Same as above - checked in now, should I revert?

> - Our front page is huge now.  What do you think of making the tabs for "Browse
> Add-ons" use ajax off the API to load data only when someone clicks on them?

Might be worth filing a bug for enhancement, but doubt it's something I can get done before code freeze.

> - There should be a subscribe link at the bottom left of the "Browse Add-ons"
> box

They're there, just had empty link text - quick fix in r25904.

> - The "RECOMMENDED" text is crowding the download buttons (see screenshot). 
> The mockups show more space around that label.

What browser is that?  It's not happening for me in Fx2/3 or Safari on Mac OS X.  And what mockups are you looking at?

> - "Themes/Search Plugins/Dictionaries" are supposed to be at the bottom of the
> categories list

I just used the order from amo->getNavCategories() - should I hardcode these as exceptions?

> - The promobox is really tall.  One of the add-on summaries is pushing it down
> I think but it makes it look way too big when that add-on summary isn't visible
> (see screenshot)

That looks about as tall as it is on the clearleft portfolio page... But, I just tried tweaking column width and truncation in r25907.

> - "Copyright" is bolded at the bottom but the whole sentence should be in bold.
 
Fixed in r25907.

> - in an RTL language the promobox should scroll RTL.  Clearleft should provide
> a way to do that

Is clearleft watching this - or do they need a bug filed?

> - The main search button has no arrow in an RTL layout so it's just a green
> box.

Clearleft bug?
 
> - The promobox should move to the bottom of the page after I've loaded the page
> 5 times

Will work on that. That seems kind of random - was there a spec/bug somewhere for that? (don't want to miss further requirements)

> - The log in link should be built dynamically so it's not hardcoded to
> /users/login/

I build it with $html->login_url() copied from the original layout - how else should it be built?

> - The promobox shouldn't appear when I'm logged in

Will work on that. That seems kind of random - was there a spec/bug somewhere for that? (don't want to miss further requirements)

> - (for bug 491581): The promobox should be automatically scrolling

Clearleft bug?

> - Does anyone else think the buttons look...not pretty?  I feel like I'm
> getting yelled at.  Here are just a few that showed up on the front page while
> I was testing; see screenshot.

Clearleft bug?  How else should they look?
Nick says that at this point we should fix any bugs that are considered "Clearleft bugs".
(In reply to comment #10)

> - "Themes/Search Plugins/Dictionaries" are supposed to be at the bottom of the
> categories list

Just looked at what getNavCategories() is doing...  Themes, search tools, dictionaries, *and* plugins are all types with category == 0.  Should all 4 of these be at the bottom after a separator, or should plugins be an exception?
> (In reply to comment #10)
> > (From update of attachment 378234 [details] [diff] [review] [details])
> > I'm r+ing because I think this is all just minor design stuff and I imagine
> > more will come up as we go.  Let's get a version on trunk though.  Feedback to
> > be addressed before code freeze:
> 
> Are these all concerns I should be fixing, or are some clearleft bugs?
Sounds like clearleft isn't going to fix some of them.  We can deal with them individually.

> > - We talked about this online a bit but the promo box wasn't a part of this
> > bug.  Since it's in the patch hopefully rdoherty can use it.  All of the L10n
> > strings should be removed though as they are in bug 490667.
> 
> Just checked in the patch... should I revert those changes to the messages.po?
No need to revert since they are still in the code.  As long as they don't get merged out to localizers they'll be gone soon.

> > - You pulled in L10n from one of mccammos's patches.  It's better if you can
> > just add the L10n you changed to the .po instead of running the whole script
> > (makes merging easier and patches shorter too)
> Same as above - checked in now, should I revert?
No need to revert, just keep in mind for next time.

> > - Our front page is huge now.  What do you think of making the tabs for "Browse
> > Add-ons" use ajax off the API to load data only when someone clicks on them?
> 
> Might be worth filing a bug for enhancement, but doubt it's something I can get
> done before code freeze.
Bug 493814

> > - The "RECOMMENDED" text is crowding the download buttons (see screenshot). 
> > The mockups show more space around that label.
> What browser is that?  It's not happening for me in Fx2/3 or Safari on Mac OS
> X.  And what mockups are you looking at?
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.1b5pre) Gecko/20090504 Shiretoko/3.5b5pre
Mockups are either http://mozilla-dev.clearleft.com/home.php or http://people.mozilla.com/~jscott/bandwagon/clearleft/v7/Home%20%28Intro%29%20v7.png (use the first one)

> > - The promobox is really tall.  One of the add-on summaries is pushing it down
> > I think but it makes it look way too big when that add-on summary isn't visible
> > (see screenshot)
> 
> That looks about as tall as it is on the clearleft portfolio page... But, I
> just tried tweaking column width and truncation in r25907.

Thanks, I'll have another look once it lands.  It looked substantially taller to me.

> > - in an RTL language the promobox should scroll RTL.  Clearleft should provide
> > a way to do that
> 
> Is clearleft watching this - or do they need a bug filed?
> 
> > - The main search button has no arrow in an RTL layout so it's just a green
> > box.
> 
> Clearleft bug?
Both of these are a part of bug 493757 assigned to Natalie until I hear otherwise.

> > - The promobox should move to the bottom of the page after I've loaded the page
> > 5 times
> 
> Will work on that. That seems kind of random - was there a spec/bug somewhere
> for that? (don't want to miss further requirements)
It's part of 1.8 on http://docs.google.com/Doc?id=dds6vwb4_15cq79x5gc&hl=en

> > - The log in link should be built dynamically so it's not hardcoded to
> > /users/login/
> 
> I build it with $html->login_url() copied from the original layout - how else
> should it be built?
Seems like that would work, but it was broken on my dev copy.  I can investigate further if you need me to.

> > - The promobox shouldn't appear when I'm logged in
> 
> Will work on that. That seems kind of random - was there a spec/bug somewhere
> for that? (don't want to miss further requirements)
It's in 1.6 of http://docs.google.com/Doc?id=dds6vwb4_22c7z627f7&hl=en (refered to as "tour")

> > - (for bug 491581): The promobox should be automatically scrolling
> Clearleft bug?
Yes, except it sounds like we have to finish what they started.

> > - Does anyone else think the buttons look...not pretty?  I feel like I'm
> > getting yelled at.  Here are just a few that showed up on the front page while
> > I was testing; see screenshot.
> Clearleft bug?  How else should they look?
It's just my opinion.  I was wondering what others thought.
(In reply to comment #18)
> (In reply to comment #10)
> 
> > - "Themes/Search Plugins/Dictionaries" are supposed to be at the bottom of the
> > categories list
> 
> Just looked at what getNavCategories() is doing...  Themes, search tools,
> dictionaries, *and* plugins are all types with category == 0.  Should all 4 of
> these be at the bottom after a separator, or should plugins be an exception?

I think they should all be separate but Nick may want to weigh in.
*In the clearleft dev's site,the buttons in the homepage (for featured add-ons in different categories) are aligned but not in our site.

*In our site the "Like these? Find more ... add-ons in the <collection_link>"  is missing.Is this by design?

*The link at the bottom to view more Recommended/popular etc addons reads-
-clearleft-"See More Popular Add-ons"
-preview-"View all popular add-ons"

*For logged in users,welcome message at the top of the page says
-Clearleft message-Welcome back,<user_name>
-preview-Welcome,<user_name>

*"Create a firefox add-on" section is missing in our site

*We do not differentiate 

    -Themes
    -Search Plugins
    -Dictionaries
in the category list,but they do(which i like)

*Advanced search tab is called "Advanced options by clearleft and "Advanced" by us.

*The heading "categories" is click-able in preview(just refreshes the page) but not in clearleft's version.

*Our search field is populated with "search for add-ons" but not in clearleft's version.

*<number_of_reviews> link is click-able in our website but not in clearleft's version.
Also,the font color of listed collections/collection authors is different in
our site and clearleft's site(clearleft uses darker/royal blue)
(In reply to comment #19)

> It's part of 1.8 on http://docs.google.com/Doc?id=dds6vwb4_15cq79x5gc&hl=en

> It's in 1.6 of http://docs.google.com/Doc?id=dds6vwb4_22c7z627f7&hl=en (refered
> to as "tour")

I don't have access to either of those Google Docs.

> > > - The log in link should be built dynamically so it's not hardcoded to
> > > /users/login/
> > 
> > I build it with $html->login_url() copied from the original layout - how else
> > should it be built?
> Seems like that would work, but it was broken on my dev copy.  I can
> investigate further if you need me to.

Sure...  It works for me, so I can't tell what might be wrong with it.

> > > - "Themes/Search Plugins/Dictionaries" are supposed to be at the bottom of the
> > > categories list
> > 
> > Just looked at what getNavCategories() is doing...  Themes, search tools,
> > dictionaries, *and* plugins are all types with category == 0.  Should all 4 of
> > these be at the bottom after a separator, or should plugins be an exception?
> 
> I think they should all be separate but Nick may want to weigh in.

I separated them per the Clearleft HTML in r25910.  Wouldn't be too hard to take out the exception for plugins, though, if plugins should move to the lower section.
(In reply to comment #20)
> *In the clearleft dev's site,the buttons in the homepage (for featured add-ons
> in different categories) are aligned but not in our site.

I can't tell what you mean here - a screenshot might help.

> *In our site the "Like these? Find more ... add-ons in the <collection_link>" 
> is missing.Is this by design?

These are missing because there are no pages to link to until bug 490667 and bug 491581 are resolved.

> *The link at the bottom to view more Recommended/popular etc addons reads-
> -clearleft-"See More Popular Add-ons"
> -preview-"View all popular add-ons"

I reused localized strings from the original layout wherever possible, so the wording may differ in spots.  I didn't want us to have to get the entire site retranslated where there were close enough matches.

> *For logged in users,welcome message at the top of the page says
> -Clearleft message-Welcome back,<user_name>
> -preview-Welcome,<user_name>

Same as above - reused localized strings.

> *"Create a firefox add-on" section is missing in our site

The code is there, but I don't have any content for it - there's no developer center yet, as far as I know.

> *We do not differentiate 
> 
>     -Themes
>     -Search Plugins
>     -Dictionaries
> in the category list,but they do(which i like)

This should be fixed in r25910, and looks like it's on preview now.

> *Advanced search tab is called "Advanced options by clearleft and "Advanced" by
> us.

Same as above - reused localized strings.

> *The heading "categories" is click-able in preview(just refreshes the page) but
> not in clearleft's version.

Will fix this in my next checkin.

> *Our search field is populated with "search for add-ons" but not in clearleft's
> version.

This got copied over from the original layout - if it's a problem, I can delete it and the javascript supporting it.

> *<number_of_reviews> link is click-able in our website but not in clearleft's
> version.

Another carry over from the original layout.  Can disable it if we don't want the feature.
(In reply to comment #21)
> Also,the font color of listed collections/collection authors is different in
> our site and clearleft's site(clearleft uses darker/royal blue)

I think this is the difference between the visited / unvisited link colors.  All links appear "visited" on the Clearleft site because they all point to the current page.  The links on preview point to real authors, most of which you've probably not visited.

If you click one of the authors on preview, then revisit the home page, I think the color will change.
> > > - (for bug 491581): The promobox should be automatically scrolling
> > Clearleft bug?
> Yes, except it sounds like we have to finish what they started.
This is now bug 493829 and assigned to clearleft.
(In reply to comment #22)
> (In reply to comment #19)
> 
> > It's part of 1.8 on http://docs.google.com/Doc?id=dds6vwb4_15cq79x5gc&hl=en
> 
> > It's in 1.6 of http://docs.google.com/Doc?id=dds6vwb4_22c7z627f7&hl=en (refered
> > to as "tour")
> 
> I don't have access to either of those Google Docs.
lochard@moz is added to both
I support reusing strings!</bumpersticker>
(In reply to comment #26)
> > I don't have access to either of those Google Docs.
> lochard@moz is added to both

Huh.  I don't think I have a lorchard@mozilla.com login for google docs - just l.m.orchard@gmail.com
Checked in updates from clearleft in r25916.  This also makes the category header on the home page no longer clickable
> > > > - The log in link should be built dynamically so it's not hardcoded to
> > > > /users/login/
> > > 
> > > I build it with $html->login_url() copied from the original layout - how else
> > > should it be built?
> > Seems like that would work, but it was broken on my dev copy.  I can
> > investigate further if you need me to.
> 
> Sure...  It works for me, so I can't tell what might be wrong with it.

The old code ran it through $html->link() instead of just sprintf()
(re comment 22)

Button alignment in our site: http://screencast.com/t/sLLLP6ke8


Button alignment in clearleft's site: http://screencast.com/t/K7SKtth2p
(In reply to comment #31)
> (re comment 22)
> 
> Button alignment in our site: http://screencast.com/t/sLLLP6ke8
> Button alignment in clearleft's site: http://screencast.com/t/K7SKtth2p

Oh - you mean the vertical alignment of the addon install buttons.  That's because all the descriptions on the clearleft mockup site are the same vertical height.  I don't think we'll be able to maintain that because our real descriptions come in all variety of heights regardless of attempts to truncate.

In fact, I think if you resize your browser width, the vertical alignment will change even on the clearleft mockup site.
I'm going to call this bug closed for now.  I'm not actively doing anything further to the home page - and as far as I can tell, the remaining work is all in other bugs.  

ie:  bug 492997 (category menu counts), bug 492998 (top-of-page stats), bug 491581 (collections teaser promo)
Status: NEW → RESOLVED
Closed: 15 years ago
Resolution: --- → FIXED
Verified FIXED -- it's in, and we'll file new bugs for any issues we might see.
Status: RESOLVED → VERIFIED
Product: addons.mozilla.org → addons.mozilla.org Graveyard
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: