933228 - Inline flag are way too big with the redesign

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Design, defect)

Description

[Jeremie Patonnier :Jeremie]

Attachment: big-badges.png

As you can see in the attach screenshot, the inline flags ("readonly", "DOM Level 3") are very big and break the line spacing rhythm.

Comment 1

[Jeremie Patonnier :Jeremie]

Attachment: Possible solution

I suggest to get rid of the fat border to use a nicer padding (2px 5px) to be more in line with the line spacing.

Comment 2

[David Walsh :davidwalsh]

How about setting the border-width to 2px instead?  I think that looks great.

Comment 3

[Māris Fogels [:mars] (please needinfo)]

Jeremie, did you see this when viewing the redesigned MDN pages, or on the 
regular site?

Do you have a link to the page that originally displayed the problem?  It would 
make testing the fix much easier.

Comment 4

[Jeremie Patonnier :Jeremie]

(In reply to David Walsh :davidwalsh from comment #2)
> How about setting the border-width to 2px instead?  I think that looks great.

Yes, that's a possible solution.

(In reply to Māris Fogels [:mars] from comment #3)
> Jeremie, did you see this when viewing the redesigned MDN pages, or on the 
> regular site?

I thought the bug title was obvious, it's with the redesign :)

> Do you have a link to the page that originally displayed the problem?

Absolutely, my mistake: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

Comment 5

[Māris Fogels [:mars] (please needinfo)]

(In reply to Jeremie Patonnier :Jeremie from comment #4)
> (In reply to Māris Fogels [:mars] from comment #3)
> > Jeremie, did you see this when viewing the redesigned MDN pages, or on the 
> > regular site?
> 
> I thought the bug title was obvious, it's with the redesign :)
> 

Ah, the red headers in the screenshot threw me.  I usually look for redesign bugs that block bug 910513 - we even have a link that automatically files them as blockers: http://mzl.la/mdn-redesign-feedback.

> > Do you have a link to the page that originally displayed the problem?
> 
> Absolutely, my mistake:
> https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

Thanks!

Comment 6

[Jean-Yves Perrier [:teoli]]

I think here we would like to have the badges have the same look as the small badges in the spec table (that is a border only to the right [and likely left in rtl]).

David, can you provide us with a class or update the customCSS with that?

Comment 7

[David Walsh :davidwalsh]

I made the font smaller and crunched the border.  Let me know if you like that.  Otherwise I can do as Jean-Yves last asked and make it look like the table badges.

Comment 8

[Jeremie Patonnier :Jeremie]

(In reply to David Walsh :davidwalsh from comment #7)
> I made the font smaller and crunched the border.  Let me know if you like
> that.  Otherwise I can do as Jean-Yves last asked and make it look like the
> table badges.

I like the idea to have something coherent between spec table and inline flag.
It worth asking Sean about this.

Comment 9

[David Walsh :davidwalsh]

Updated on prod with rounded solution proposed above.  Let me know if you'd like adjustments.

Comment 10

[Sean Martell]

Solution looks good to me! *brushes hands*