Inline flag are way too big with the redesign

RESOLVED FIXED

Status

developer.mozilla.org
Design
RESOLVED FIXED
5 years ago
4 years ago

People

(Reporter: Jeremie, Unassigned)

Tracking

Details

Attachments

(2 attachments)

(Reporter)

Description

5 years ago
Created attachment 825276 [details]
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.
(Reporter)

Comment 1

5 years ago
Created attachment 825277 [details]
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.
How about setting the border-width to 2px instead?  I think that looks great.
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.
Flags: needinfo?(jeremie.patonnier)
(Reporter)

Comment 4

5 years ago
(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
Flags: needinfo?(jeremie.patonnier)
(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!
Blocks: 910513
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?
Flags: needinfo?(dwalsh)
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.
Flags: needinfo?(dwalsh)
Summary: Inline flag are way to big with the redesign → Inline flag are way too big with the redesign
(Reporter)

Comment 8

5 years ago
(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.
Flags: needinfo?(smartell)

Updated

5 years ago
Blocks: 925144
No longer blocks: 910513
Updated on prod with rounded solution proposed above.  Let me know if you'd like adjustments.
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED

Comment 10

4 years ago
Solution looks good to me! *brushes hands*
Flags: needinfo?(smartell)
You need to log in before you can comment on or make changes to this bug.