494464 - [preview] Add-on counter should be better aligned

Status: VERIFIED FIXED

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

Description

[u279076]

Currently, the counter at the top right of the preview page right-aligns each line.  I suggest that the numbers be right aligned and the text be left aligned.  As a basis for comparison, it is a lot more pleasing to see numbers aligned on the right.  In addition, misaligned numbers makes me feel like the numbers are not the most important part of the message.  In reality, are the numbers not more important than the words here?

Comment 1

[u279076]

Attachment: Screenshot: AMO Counter [preview]

Comment 2

[u279076]

Attachment: Screenshot: AMO Counter [mockup]

Here is a sample mockup of what I was trying to explain.  It's not perfect, but it illustrates the concept.

Comment 3

[Nick Nguyen [:osunick]]

Agree with the suggestion- not a blocker but an enh to be sure

Comment 4

[Nick Nguyen [:osunick]]

Wil,

Is this something we could fit in?  Seeing it live, getting the alignment done this way would help with the apparent polish of the site if it's a quickie.  If not, we should punt.

Comment 5

[Fred Wenzel [:wenzel]]

Ryan: Do you know how well display: inline-block; is supported across browsers?

If it won't break even in the ones who don't offer it, we could do a:

display: inline-block;
min-width: 150px; /* or so */
text-align: left;

on the stats <span>.

Comment 6

[Ryan Doherty (:rdoherty)]

(In reply to comment #5)
> Ryan: Do you know how well display: inline-block; is supported across browsers?
> 
> If it won't break even in the ones who don't offer it, we could do a:
> 
> display: inline-block;
> min-width: 150px; /* or so */
> text-align: left;
> 
> on the stats <span>.

This kind of 'perfect' grid is only possible with a table. (Due to l10n changing the width of the text). The above code would work for en-US, but break for other locales.

Re-working it into a table might be beyond 5.0.6.

Comment 7

[Wil Clouser [:clouserw]]

Moving P3s to 5.0.7 for priority reevaluation in the next milestone.

Comment 8

[Wil Clouser [:clouserw]]

Tables are weak sauce.  Can we just left align the text instead of right align?

Comment 9

[Ryan Doherty (:rdoherty)]

Attachment: Left aligned text

We could left align the text, but then the numbers won't align properly. (see screenshot)

Comment 10

[Wil Clouser [:clouserw]]

Looks fine to me, but I don't have a problem with what it looks like now, so...

Comment 11

[Jeff Balogh (:jbalogh)]

Maybe we can use display:table to provoke some serious flamewars?  It works in modern browsers: http://www.quirksmode.org/css/display.html#table.

Comment 12

[Ryan Doherty (:rdoherty)]

Attachment: v1

Fixed layout with display:table. Giving review to Jeff as he suggested it :)

Comment 13

[Jeff Balogh (:jbalogh)]

Comment on attachment 384173 [details] [diff] [review]
v1

This is hot, but it's not working for RTL.  `.stats strong, .stats span` show up as display:block instead of display:table-cell in the computed style according to firebug.  But display:table-cell is the only display rule when looking at the declared style.  I don't know what's going on there, and I couldn't figure out a fix.

Comment 14

[Wil Clouser [:clouserw]]

CCing Ehsan for suggestions on comment #13

Comment 15

[Ryan Doherty (:rdoherty)]

Attachment: v2

Now with RTL support!

Comment 16

[Jeff Balogh (:jbalogh)]

Comment on attachment 384424 [details] [diff] [review]
v2

Nicely done sir.

Comment 17

[Ryan Doherty (:rdoherty)]

r28234

Comment 18

[(no longer active)]

Sorry I got to this too late, but it looks great in RTL mode.  Thanks Ryan!

Comment 19

[raymond [:retornam] (inactive)]

verified fixed on https://preview.addons.mozilla.org/en-US/firefox/