The following styles will need to be loaded on the Hindi main page of Wikipedia.
We can either do this via the loading of a special purpose ResourceLoader module or via CSS loaded inside the Minerva skin itself when $wgMinervaApplyKnownTemplateHacks is enabled (Jon is currently investigating both approaches)
The styles
.content-box-primary, .content-box-secondary table { margin: 0!important; } .content-box-primary { border: solid 1px #3366cc !important; border-radius: 2px; table { margin: 0 !important; } tbody { td { background: #eaf3ff !important; padding: 15px !important; } th { background: #36c !important; color: #fff !important; text-align: left !important; border: none !important; padding: 0 20px !important; } } } /* in the news styling */ .content-box-secondary { table { border-radius: 2px; margin: 0 !important; border: solid 1px #00af89 !important; } tbody th { background: #00af89 !important; color: #fff !important; text-align: left !important; border: none !important; padding: 0 20px !important; } }
Implementation
Extend ResourceLoaderWikiModule.php - enable MediaWiki:MobileMainPage.css
Using https://github.com/wikimedia/mediawiki/blob/master/includes/resourceloader/ResourceLoaderSiteModule.php#L28 as inspiration, we can add a ResourceLoader class inside modules and load a specific module only for visits to the Main Page.
PROS: More future proof; no cleanup required; wiki styles and "!important" can live inside a wiki page on Hindi Wikipedia;
CONS: A little more work upfront; Potential if adopted for more hassle when migrating to TemplateStyles.
Acceptance criteria
- The new module is feature flagged
- The new module should be enabled on Hindi Wikipedia
- Styles will load on Hindi Wikipedia main page.
- Styles should not apply on other wikis.
- Styles should not apply in desktop mode (useformat=desktop)
Testing
$wgMFContentProviderClass = 'MobileFrontend\ContentProviders\MwApiContentProvider'; $wgMFMwApiContentProviderBaseUri = "https://hi.wikipedia.org/w/api.php";
Edit: http://localhost:8888/w/index.php/MediaWiki:Mainpage with the value User:Npangarkar_(WMF)/sandbox
Visit: http://localhost:8888/w/index.php/User:Npangarkar_(WMF)/sandbox
Expected:
First infobox is blue
Second inbox is green
Developer notes
Currently:
- MediaWiki:Common.css loads for all desktop pages only and is render blocking.
- MediaWiki:Mobile.css loads for all mobile pages via JavaScript. Is (currently) not render blocking.
- Given we want to load for main page only neither of these pages are ideal.
Sign off steps
- Create a task to clean up this work later
Other possible solutions
- Put them in the skins.minerva.mainPage.styles module inside a hacks.less file.
PROS: Logic already in place to load only on the main page
CONS: Will need a config flag to only load on Hindi Wikipedia; !importants galore; Will need to cleanup after ourselves
