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
```
.page-Main_Page {
.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 [[ https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/tree/master/includes/modules | 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
1) 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