| Aklapper | |
| Oct 14 2019, 10:05 AM |
| F30877360: en.m.wikipedia.org_wiki_Beatrice_Eli_debug=true(iPhone 6_7_8).png | |
| Oct 23 2019, 11:03 PM |
| F30763921: Screen Shot 2019-10-16 at 9.48.28 AM.png | |
| Oct 16 2019, 1:49 PM |
| F30721593: Screenshot 2019-10-15 at 17.21.17.png | |
| Oct 15 2019, 3:23 PM |
| F30721154: en.m.wikipedia.org_wiki_Beatrice_Eli.png | |
| Oct 15 2019, 2:13 PM |
| F30721153: en.m.wikipedia.org_wiki_Beatrice_Eli(iPhone 6_7_8).png | |
| Oct 15 2019, 2:13 PM |
| F30676923: Screenshot from 2019-10-14 17-00-21.png | |
| Oct 14 2019, 10:05 AM |
skinStyles/mediawiki.hlist/minerva.less currently defines:
.hlist-separated {
li:after {
// Make sure we override any site styles
content: '•' !important;
padding-left: 8px;
font-size: 1em;
line-height: 1;
}
:last-child:after {
content: none !important;
}
}Which looks pretty stupid on e.g. https://en.m.wikipedia.org/wiki/Beatrice_Eli?debug=true :
just noting that en.wp uses:
.hlist dd:after, .hlist li:after {
content: " · ";
font-weight: bold;
}Not sure why minerva uses something else.
Great catch @Aklapper
I agree that we should add padding on the right to balance it out. I think using padding: 0 6px; looks good.
| mobile | desktop |
 |  |
See the longstanding bug https://phabricator.wikimedia.org/T169315
The use of hlist and Minerva is pretty complicated and we need a strategy for dealing with it..
These bullet points are provided by editors in https://en.m.wikipedia.org/wiki/MediaWiki:Mobile.css via the rule:
.mw-parser-output .hlist li:after, .mw-parser-output .hlist dd:after
Was this taken into account during estimation? (I don't see any analysis on this task)
The rule for .hlist-separated is provided by Minerva only so it's strange to see editors using it here.. it was probably intended
Another reason the en.wp method is better than forcing whitespace with padding, is because using actual spaces causes the screenreader to see a word break between the element content and the content of the ::after element.
For instance, VoiceOver now sees and reads the Minerva styled content as: "Indie popalternative dancefolkalternative", which is clearly incorrect.
Resetting story points per Slack conversation.
What is the goal of this task @alexhollender - what do we want this to look like? Do we want to remove the dots or simply align them properly?
I see numerous issues:
skinStyles/mediawiki.hlist/minerva.less is using !important
MediaWiki:Mobile.css styles are inconsistent with Minerva.
The template https://en.m.wikipedia.org/wiki/Template:Hlist is being used to add "dots" between links as a result of the "hlist-separated"
If we want to keep the dots, we should update skinStyles/mediawiki.hlist/minerva.less to work for parser content output and cleanup Mobile.css
See T235416#5575280 for what we want this to look like. Currently the dots are not horizontally centered between the two words:
Okay. That's fixed via this edit: https://en.m.wikipedia.org/wiki/Special:MobileDiff/921585262
There is a visible flash due to the margin in .mw-parser-output .hlist ul,
so adding a rule for
.mw-parser-output .hlist ul { margin-left: 0; }would finish this task up IMO.
Sorry that I misled you in the initial comment. Tried to use Firefox' development tools and usedebug=true to track down the location, but I obviously failed. :-/
