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.

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

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 17 2017, 2:33 PM

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

Jdlrobson updated the task description. (Show Details)Aug 17 2017, 9:05 PM

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 updated the task description. (Show Details)Aug 18 2017, 3:33 PM
Jdlrobson closed this task as Resolved.Aug 18 2017, 3:36 PM
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).


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

Jdlrobson moved this task from Inbox to Done on the User-Jdlrobson board.Oct 6 2017, 10:59 PM

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...

Why not? https://en.wikipedia.org/wiki/Life%20(disambiguation)?useskin=minervaneue
Without font-weight: normal !important;


With font-weight: normal !important;

Jdlrobson closed this task as Resolved.Oct 10 2017, 7:01 PM

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.