The mobile presentation layer for production wikimedia projects has quite a few moving parts
# [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/43a821496787e1690cace145bd097632c5705346 | Core ]] generates much of the markup for most pages
# [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/MinervaNeue/+/3109d9aa8fe82ed69c999a7999bb44f160838653/ | MinervaNeue skin ]] provides a responsive interface with limited features
# [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/MobileFrontend/ | MobileFrontend extension ]] provides mobile device detection to automatically switch to the MinervaNeue skin for mobile users. It also provides additional functionality for making mobile-specific experiences
Changing the mobile experience may require modifying all 3 code bases, so I've been experimenting with how to modify each, using Special:Preferences as my starting point, since it is of particular interest to us per {T309288}
- [[ https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/803952 | 803952 ]] load custom css on Special:Preferences page in the minerva theme.
- [[ https://gerrit.wikimedia.org/r/c/mediawiki/core/+/806293 | 806293 ]] Add custom JS to Special:Preferences in core. This one replaces the tab panel layout with a booklet layout based on `mw.config.get('skin') === 'minerva'`.
Combined, these two changes will replace the Special:Preferences tab panel with a booklet after page load for the minerva skin only. Click the image below to see it in action
{F35272064}
- [[ https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/803991 | 803991 (WIP) ]]
create custom Mobile Preferences page by extending Special:Preferences. This allows us to creating our own OOUI form class so that we can avoid tab panels all together.