511053 - We have pretty icons we're not using

Status: RESOLVED FIXED

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

Description

[Wil Clouser [:clouserw]]

Attachment: make prettier

jbalogh pointed out that our mockups looked prettier than what we have now:

http://people.mozilla.com/~jscott/bandwagon/clearleft/v11/Add-on-view-With_Contributions.png

and I got sidetracked and wrote a patch.

Comment 1

[Wil Clouser [:clouserw]]

Attachment: old and busted

Comment 2

[Wil Clouser [:clouserw]]

Attachment: new hotness

Comment 3

[Dave Garrett]

I think the puzzle piece icons are getting the tops cut off in the screenshot.

Comment 4

[Jeff Balogh (:jbalogh)]

Comment on attachment 395001 [details] [diff] [review]
make prettier

Can you also do collection icons for the recently viewed list in views/elements/amo2009/recently_viewed.html?

Design nits:
1. Headings need to be tighter with their content
2. "Tags" has the wrong font because it's inside a class=item
3. For an addon like 966 which only has categories in a class=highlight (no meet-the-dev or other-addons), I'm bothered by the text in highlight boxes having a larger left margin than the rest of the text down the sidebar.  But I'm getting used to it the more I look, and it's like that in the mocks so I might just have to deal.

>diff --git a/site/app/views/addons/display.thtml b/site/app/views/addons/display.thtml
>-              echo $html->link(sprintf(___('See All %1$s Add-ons'),$category['Translation']['name']['string']), '/browse/' . "type:" . $category['Category']['addontype_id'] . '/' . "cat:" . $category['Category']['id'] . $_sort_opt , array('class'=>'more-info')) . "\n";
>+              echo '<li>'.$html->link(sprintf(___('See All %1$s Add-ons'),$category['Translation']['name']['string']), '/browse/' . "type:" . $category['Category']['addontype_id'] . '/' . "cat:" . $category['Category']['id'] . $_sort_opt , array('class'=>'more-info')) . "</li>\n";

Could you make that a little less readable please? ;)


>diff --git a/site/app/webroot/css/amo2009/main-mozilla.css b/site/app/webroot/css/amo2009/main-mozilla.css
>+
>+.addon-otheraddons li .addonitem {
>+	padding-left: 20px;
>+	background-image: url(../../img/amo2009/icons/icons.png);
>+	background-repeat: no-repeat;
>+	background-position: 0px -201px;

As Dave pointed out, the tops of the icons are clipped.  Setting this at -200 works.

Comment 5

[Wil Clouser [:clouserw]]

Attachment: more pretty

(In reply to comment #4)
> (From update of attachment 395001 [details] [diff] [review])
> Can you also do collection icons for the recently viewed list in
> views/elements/amo2009/recently_viewed.html?
Done.
 
> Design nits:
> 1. Headings need to be tighter with their content
> 2. "Tags" has the wrong font because it's inside a class=item
> 3. For an addon like 966 which only has categories in a class=highlight (no
> meet-the-dev or other-addons), I'm bothered by the text in highlight boxes
> having a larger left margin than the rest of the text down the sidebar.  But
> I'm getting used to it the more I look, and it's like that in the mocks so I
> might just have to deal.
Done.
 
> >diff --git a/site/app/views/addons/display.thtml b/site/app/views/addons/display.thtml
> >-              echo $html->link(sprintf(___('See All %1$s Add-ons'),$category['Translation']['name']['string']), '/browse/' . "type:" . $category['Category']['addontype_id'] . '/' . "cat:" . $category['Category']['id'] . $_sort_opt , array('class'=>'more-info')) . "\n";
> >+              echo '<li>'.$html->link(sprintf(___('See All %1$s Add-ons'),$category['Translation']['name']['string']), '/browse/' . "type:" . $category['Category']['addontype_id'] . '/' . "cat:" . $category['Category']['id'] . $_sort_opt , array('class'=>'more-info')) . "</li>\n";
> 
> Could you make that a little less readable please? ;)

All I did was wrap it in <li>'s.  So...no. 
 
> >diff --git a/site/app/webroot/css/amo2009/main-mozilla.css b/site/app/webroot/css/amo2009/main-mozilla.css
> >+
> >+.addon-otheraddons li .addonitem {
> >+	padding-left: 20px;
> >+	background-image: url(../../img/amo2009/icons/icons.png);
> >+	background-repeat: no-repeat;
> >+	background-position: 0px -201px;
> 
> As Dave pointed out, the tops of the icons are clipped.  Setting this at -200
> works.
Linux is weird.  Fixed and it looks fine on os x.

Comment 6

[Jeff Balogh (:jbalogh)]

Comment on attachment 395405 [details] [diff] [review]
more pretty

That's nice.

>+<div class="clearboth">
>+<h3 class="compact-bottom"><?=___('Tags', 'tags_header_tags_title')?></h3>

We have a class called clearboth??  OMG RYAN WE HAVE A CLASS CALLED clearboth.

That's against the rules, and as it turns out, unnecessary here.

Comment 7

[Wil Clouser [:clouserw]]

Why you hatin' on my clearboth class?  Also, I put this in r49680 and you can review it tomorrow.

Comment 8

[Dave Garrett]

I'm seeing the bottoms cut off now. (Firefox 3.5 on Linux)

Comment 9

[Ryan Doherty (:rdoherty)]

(In reply to comment #6)
> (From update of attachment 395405 [details] [diff] [review])
> >+<div class="clearboth">
> >+<h3 class="compact-bottom"><?=___('Tags', 'tags_header_tags_title')?></h3>
> 

This violation has been noted.

Comment 10

[Wil Clouser [:clouserw]]

(In reply to comment #8)
> I'm seeing the bottoms cut off now. (Firefox 3.5 on Linux)

My linux box sees them cut off (which is why the original patch was moved a pixel) but it looks fine on my OS X box.  I have no idea what that means.

Comment 11

[Dave Garrett]

(In reply to comment #10)
> (In reply to comment #8)
> > I'm seeing the bottoms cut off now. (Firefox 3.5 on Linux)
> 
> My linux box sees them cut off (which is why the original patch was moved a
> pixel) but it looks fine on my OS X box.  I have no idea what that means.

Probably due to differences in fonts used?

Comment 12

[Wil Clouser [:clouserw]]

Sounds reasonable.  QA can let us know how common it is and if any front end designers have fixes, let me know. :)