Page MenuHomePhabricator

Add margin or white border below page issue banners
Closed, ResolvedPublic1 Estimated Story Points

Assigned To
Authored By
Aug 22 2018, 6:33 PM



When page issue banners stack (either on top of other page issue banners, or on top of other hatnotes - disambiguation/redirect/etc.) it becomes difficult to distinguish them from other elements/banners.

example of page issue banner blending into hatnote below itexample of stacked page issues blending into each other
reading-web-staging.wmflabs.org_w_index.php_title=Houdini_(software)&mobileaction=toggle_view_mobile(iPhone 6_7_8).png (1×750 px, 172 KB)
reading-web-staging.wmflabs.org_wiki_Cell_Cycle(iPhone 6_7_8) (2).png (1×750 px, 157 KB)


Can we add either a 1px margin, or a 1px white border, to .ambox?

with border/marginwith border/margin
reading-web-staging.wmflabs.org_wiki_Houdini_(software)(iPhone 6_7_8).png (1×750 px, 171 KB)
reading-web-staging.wmflabs.org_wiki_Cell_Cycle(iPhone 6_7_8) (1).png (1×750 px, 157 KB)

Developer notes

We'll want to target the top of any sibling elements, being careful to not apply the rules inside the page issues overlay or any issues collapsed inside a multiple issues template:

.mw-parser-output >.ambox + .ambox {
    border-top: solid 1px @var;

QA instructions

Event Timeline

ovasileva triaged this task as Medium priority.Aug 28 2018, 11:21 AM
ovasileva moved this task from Triaged but Future to Upcoming on the Readers-Web-Backlog board.

Change 456379 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@master] Add bottom border to page issues

Change 456379 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Add bottom margin to page issues

Verified that there is now 1px white border between each of the grey banners. Checked on Chrome and Safari on both desktop and Mobile. Looks good to me.

Screen Shot 2018-09-07 at 3.47.59 PM.png (370×1 px, 74 KB)

Screen Shot 2018-09-07 at 3.58.45 PM.png (425×1 px, 97 KB)

ovasileva added a subscriber: ovasileva.

Looks good!