[preview] Add-on counter should be better aligned

VERIFIED FIXED in 5.0.7

Status

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

People

(Reporter: ashughes, Assigned: rdoherty)

Tracking

unspecified
5.0.7

Details

(URL)

Attachments

(4 attachments, 1 obsolete attachment)

(Reporter)

Description

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

Comment 1

9 years ago
Created attachment 379221 [details]
Screenshot: AMO Counter [preview]
(Reporter)

Comment 2

9 years ago
Created attachment 379222 [details]
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.
Agree with the suggestion- not a blocker but an enh to be sure
Target Milestone: --- → 5.0.6
Priority: -- → P3
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.
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>.
(Assignee)

Comment 6

9 years ago
(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.
Moving P3s to 5.0.7 for priority reevaluation in the next milestone.
Target Milestone: 5.0.6 → 5.0.7

Updated

9 years ago
Assignee: nobody → rdoherty
Tables are weak sauce.  Can we just left align the text instead of right align?
(Assignee)

Comment 9

9 years ago
Created attachment 381887 [details]
Left aligned text

We could left align the text, but then the numbers won't align properly. (see screenshot)
Looks fine to me, but I don't have a problem with what it looks like now, so...
Maybe we can use display:table to provoke some serious flamewars?  It works in modern browsers: http://www.quirksmode.org/css/display.html#table.
(Assignee)

Comment 12

9 years ago
Created attachment 384173 [details] [diff] [review]
v1

Fixed layout with display:table. Giving review to Jeff as he suggested it :)
Attachment #384173 - Flags: review?(jbalogh)

Updated

9 years ago
Attachment #384173 - Flags: review?(jbalogh) → review+
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.
CCing Ehsan for suggestions on comment #13
(Assignee)

Comment 15

9 years ago
Created attachment 384424 [details] [diff] [review]
v2

Now with RTL support!
Attachment #384173 - Attachment is obsolete: true
Attachment #384424 - Flags: review?
(Assignee)

Updated

9 years ago
Attachment #384424 - Flags: review? → review?(jbalogh)
Comment on attachment 384424 [details] [diff] [review]
v2

Nicely done sir.
Attachment #384424 - Flags: review?(jbalogh) → review+
(Assignee)

Comment 17

9 years ago
r28234
Status: NEW → RESOLVED
Last Resolved: 9 years ago
Resolution: --- → FIXED

Comment 18

9 years ago
Sorry I got to this too late, but it looks great in RTL mode.  Thanks Ryan!
verified fixed on https://preview.addons.mozilla.org/en-US/firefox/
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.