1054032 - .syntaxbox missing bottom margin

Status: RESOLVED FIXED

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

Description

[C Tidd]

What did you do?
================
Visit a JavaScript reference page on MDN  (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array are two affected pages).

What happened?
==============
The element of class syntaxbox under the heading "Syntax" should has no bottom margin. This causes it to run together with the element below it.

This behavior is inconsistent with similar boxes on the page and appears erroneous.

What should have happened?
==========================
The element should have a 24px bottom margin.

Is there anything else we should know?
======================================

Comment 1

[C Tidd]

Attachment: screenshot.png

Comment 2

[C Tidd]

Pending confirmation that this can/should be fixed, I'd be happy to contribute a patch. I'm having trouble locating the appropriate area of the source directory structure, but I'll keep looking around. Meanwhile, if someone provides a tip as to the right direction, that would be greatly appreciated. (I've never contributed before.) Thanks!

Comment 3

[C Tidd]

Never mind, I seem to have located the contribution information (https://github.com/mozilla/kuma/blob/master/CONTRIBUTING.md). I should have a chance to sit down and approach this later tonight.

Comment 4

[David Walsh :davidwalsh]

I think this is where a change is needed:  https://github.com/mozilla/kuma/blob/master/media/redesign/stylus/wiki-syntax.styl#L44

Thank you for your willingness to dive in and help!

Comment 5

[C Tidd]

Thanks, David.

It looks like changing the line you linked to 24px will resolve the issue most directly, so this is what I'll go for. (I considered the possibility of removing it, but that takes the margin down to 14px, which is out of sync with related boxes in the wiki. Somewhere, pre.syntaxbox is getting its margin set to 1em, which is taking priority over other rules.)

After looking more deeply at a couple pages, it appears .cssprop also has some spacing issues: it's missing 14px top and bottom padding (see https://developer.mozilla.org/en-US/docs/Web/CSS/animation).

I'm putting together a patch for both issues.

Comment 6

[Florian Scholz (Open Web Docs)]

Have things discussed here been fixed in bug 1069432?

Comment 7

[Stephanie Hobson [:shobson]]

The syntax box issue was fixed but not the .cssprop one.

Comment 8

[zeus]

For cssprop
====== Variable or Fixed Value ======

ok, I found the .cssprop location. I we create a variable $ inside vars.styl, or jsut make a change directly in the wiki-customcss.styl with a direct value ?

====== ? ======

Comment 9

[zeus]

Merged Fix ----

1:23 PM <github> [kuma] zeusintuivo opened pull request #2817: fix bug 1054032 - commit message (master...new-issue-1054032) https://github.com/mozilla/kuma/pull/2817

======
All is well — The Travis CI build passed · Details
This pull request can be automatically merged by project collaborators.

Only those with write access to this repository can merge pull requests.

Comment 10

[zeus]

Added left padding:

https://github.com/mozilla/kuma/pull/2817/files

Comment 11

[zeus]

I filed another amend

Comment 12

[zeus]

Canceled the other pull request
and made a new one 

https://github.com/mozilla/kuma/pull/2836

Comment 13

[MDN Team (:mdn-dev)]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/f015d43baa2f6c7fe2c114f769f1d5acd48e7c43
fix bug 1054032 - Add left padding to 40px

https://github.com/mozilla/kuma/commit/a0b38977305506029ba47c64c485fa27c7bfef7f
Merge pull request #2872 from openjck/bug-1054032-cssprop

fix bug 1054032 - Add left padding to 40px