1137652 - Add padding for current page in quick links

Status: RESOLVED FIXED

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

Description

[Florian Scholz (Open Web Docs)]

What did you do?
================
1. Go to https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/animationName
2. See that the current page "AnimationEvent.animationName" has no link in QL, but is wrapped in <em>. It makes no sense to link to the current page, so we decided to use <em> instead.

What happened?
==============
Because it is not a link, padding-left: 20px is not applied like it is for links.

What should have happened?
==========================
The same padding is needed in order to not to overlap with the icons.

See screenshots.

Is there anything else we should know?
======================================
https://github.com/mozilla/kuma/blob/master/media/redesign/stylus/components/wiki/quick-links.styl#L39

Tried this selector in devtools instead and it looks good...

.quick-links li.toggleable a,  .quick-links li.toggleable em, .quick-links .title, #quick-links-toggle {

Comment 1

[Florian Scholz (Open Web Docs)]

Attachment: ql-current-no-padding.png

Comment 2

[Florian Scholz (Open Web Docs)]

Attachment: ql-current-with-padding.png

Comment 3

[MDN Team (:mdn-dev)]

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

https://github.com/mozilla/kuma/commit/21a244ea496c237cce2f4ece139cb081d3969856
Fix Bug 1137652:  Add padding for current page in quick links

I had a heck of a time testing this one, the macro that generates the quick-links has changed since the last database dump and I was getting timeouts once I updated the templates.

1) get everything up and running with the new style sheet compiled and being served (so, a hard refresh).
2) find/create a page with a left sidebar (maybe https://developer-local.allizom.org/en-US/docs/Web/API/AnimationEvent but don't do your hard refresh on this page or you lose the sidebar)
3) copy the HTML for #quick-links as generated on prod on https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/pseudoElement
4) using dev tools paste the #quick-links HTML in.

https://github.com/mozilla/kuma/commit/3504e0de4f60202f1f1154b1fd7e2ee3806854ee
Merge pull request #3102 from stephaniehobson/bug-1137652-quick-links-current-item

Fix Bug 1137652:  Add padding for current page in quick links