Page MenuHomePhabricator

Menu footer links displaced
Closed, ResolvedPublic

Description

Visit https://en.wikipedia.org/wiki/The_Beatles?useskin=minervaneue
Click the hamburger menu icon (three lines) in the top left.

The about and disclaimers link are misaligned.

Screen Shot 2017-08-17 at 9.30.44 AM.png (601×686 px, 54 KB)

Expected:
They should appear as they do in mobile:
Visit https://en.m.wikipedia.org/wiki/The_Beatles?useskin=minerva

Event Timeline

Can't reproduce it on Firefox 54 and Chrome 59.

Sure? I can replicate it in both those browsers incognito window :/!

Alright, you were correct. It was my bad. I just opened the same link twice. Apologies for the same.
Well, this ::after pseudo-element is causing the trouble. The ::after pseudo-element is not used here.

Jdlrobson claimed this task.
Jdlrobson added a subscriber: Wassan.anmol.

Thanks for debugging @Wassan.anmol ! It was a rule in MediaWiki:Common.css
Have corrected it here: https://en.wikipedia.org/wiki/MediaWiki:Minerva.css

Hey, enwiki is not the only wiki that exists.

It would be good to also add something like

.footer-info.hlist li:after {
	content: none;	
}

.footer-info is the list where enwiki has "Text is available under the Creative Commons Attribution-ShareAlike License...". In ruwiki, there's more than one item in that list, and it's also not improbable possibility for other wikis.

And one more .hlist-related issue in MinervaNeue: conflict with local .hlist (present on enwiki, ruwiki at least).

image.png (141×1 px, 23 KB)

As you can see on the screenshot, list separators are misplaced to the right. And they should be bullets (•), not bold interpuncts (·) in MinervaNeue. Adding .hlist to the selector to increase specificity helps, as well as adding font-weight: normal;.

.hlist.hlist-separated li:after {
	content: '•';
	font-weight: normal;
	...
}
.hlist.hlist-separated :last-child:after {
	content: '';
}

As this rule overwrites what I suggested in the previous comment, that one should be updated too:

.footer-info.hlist.hlist-separated li:after {
	content: none;	
}

Unfortunately, I'm a total dummy in submitting patches.

Change 382882 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Avoid clashes with MediaWiki:Common.css for hlist rules

https://gerrit.wikimedia.org/r/382882

Change 382882 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Avoid clashes with MediaWiki:Common.css for hlist rules

https://gerrit.wikimedia.org/r/382882

@Jdlrobson That's cool, but without font-weight: normal !important;, the bullet will be bold in enwiki, where bold interpuncts are used by default.

Sigh. Ideally these hacks wouldn't be needed. They shouldn't be in MediaWiki:Common.css if they are not compatible with Minerva.css. These hacks sadden me :*(

The bold doesn't seem to have any effect for me...

Appears to be platform specific. Not seeing this on iOS. Let's not add further hacks inside Minerva. Instead I've addressed this with an update to MediaWiki:Common styles.