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?
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
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>.
(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
Tables are weak sauce. Can we just left align the text instead of right align?
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.
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)
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
Created attachment 384424 [details] [diff] [review] v2 Now with RTL support!
Attachment #384424 - Flags: review? → review?(jbalogh)
Comment on attachment 384424 [details] [diff] [review] v2 Nicely done sir.
Attachment #384424 - Flags: review?(jbalogh) → review+
Status: NEW → RESOLVED
Last Resolved: 9 years ago
Resolution: --- → FIXED
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.