The provided examples do not work. The ambox class seems to trigger javascript only when applied to table elements, not divs. Moreover, a second requirement is to include text inside an element with mbox-text class, though it is not even mentioned here. Finally, mbox-text-div is supposed to ensure everything looks fine with CSS. But then again, I don't see the point of recommending to leave other elements outside of mbox-text-div. Those would still partially appear on mobile in a crappy way which could confuse the reader. Either I have misunderstood something or the examples are obsolete and need an update.
Topic on Talk:Recommendations for mobile friendly articles on Wikimedia wikis/Flow
I think you might be right but that shouldnt be the case.
I'll talk to the team about updating this line of code: https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/resources/skins.minerva.scripts/pageIssues.js#L124
I've submitted a patch to fix this problem. Amboxes do not need to be tables: https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/MinervaNeue/+/488191 Not all amboxes are tables
Thank you. However, it seems we are having delays or something? As you can see here, JS is still working only on tables. I don't understand the reason, given that the patch looks merged.
Sorry for the confusion. We deploy Tuesday through to Thursday. This change should be live on all wikis by Thursday provided everything goes to plan.
I've just checked the result and found out that this selector specifically points to td elements. Without those declarations, icon and learn-more link leak out of the div.
Looks like this can be generalised. What selector should I add?
Would the following address this?:
.client-js .ambox > div {
}
Can you point me to some examples or the Template for which this is not working?
If you can you can also use Extension:TemplateStyles to add the position relative? e.g. scoping to .skin-minerva ? Long term, we'd like to remove these styles in the codebase and rely on definitions within the template so that might be the best solution here.
Sorry, I've been busy and I forgot to reply. Here's the examples. The first one is the expected result generated with a classic table, while the second one shows the issue. At the bottom I've transcluded Template:Tmp/Sandbox which is designed via TemplateStyles as suggested (see it:Template:Tmp/styles.css). Looks good to me. Considering your plans, I suppose we should go ahead with this solution then. EDIT: since I'm going to delete the test page on it.wiki, I've copied the examples here just in case.