The mobile presentation layer for production wikimedia projects has quite a few moving parts
- Core generates much of the markup for most pages
- MinervaNeue skin provides a responsive interface with limited features
- 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: Investigate feasibility of styling Special:Preferences sections as menu items instead of scrollable tabs on mobile web [8hr]
JS/CSS only
- 803952 load custom css on Special:Preferences page in the minerva theme.
- 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
WIP
- 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.