Change Details

== Background Minerva has various styles inside resources/skins.minerva.base.styles/content/hacks.less for thumbnails that should be generalized and moved to core. The benefit of having these styles in core is that they will apply to Vector 2022 when acting as a responsive skin. == User story As a reader using a responsive skin I want thumbnails to be responsive to my device. == Design - Add mockups and design requirements == Acceptance criteria [] Rules for disabling floating on`.content table` for mobile devices should be moved to ResourceLoader/SkinModule. [] Rules for `.content .thumb .thumbinner` should be moved to ResourceLoader/SkinModule. [] To allow easy roll back in case of a problem it is okay to initially duplicate the rules in Minerva and core for at least one deploy but either before completing this task or as a sign off step we must plan to remove the Minerva styles. == QA The behaviour on https://en.wikipedia.beta.wmflabs.org/wiki/T360388 should match mobile in particular: * Tables floated to the left or right should become centered and limited to the screen size at low resolutions * T38030: The stadiums should remain side by side on resize for both Vector 2022 and Minerva: https://en.m.wikipedia.org/w/index.php?title=Los_Angeles_Lakers&oldid=1213240629#Home_arenas * The same behaviour should be exhibited for "Shaquille O'Neal (left), and Kobe Bryant (right), helped the Lakers win three straight NBA titles. Though they played well together on the court, the pair had an acrimonious relationship at times in the locker room.[175][176]" T148505#2782062

== Background Minerva has various styles inside resources/skins.minerva.base.styles/content/hacks.less for thumbnails that should be generalized and moved to core. The benefit of having these styles in core is that they will apply to Vector 2022 when acting as a responsive skin. == User story As a reader using a responsive skin I want thumbnails to be responsive to my device. == Acceptance criteria [] Rules for disabling floating on`.content table` for mobile devices should be moved to ResourceLoader/SkinModule content.tables. e.g. move from [[ https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/resources/skins.minerva.base.styles/content/hacks.less#L122C1-L141C2 | here ]] to [[ https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.skinning/content.tables.less | here ]]. DO NOT MOVE the .infobox rule. Include the !important disabling stylelint rules if necessary. [] Rules for `.content .thumb .thumbinner` should be moved to ResourceLoader/SkinModule content.thumbnails feature. e.g. move from [[ https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/resources/skins.minerva.base.styles/content/hacks.less#L122C1-L141C2 | here ]] to [[https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.skinning/content.thumbnails-common.less | here]]. [] To allow easy roll back in case of a problem it is okay to initially duplicate the rules in Minerva and core for at least one deploy but either before completing this task or as a sign off step we must plan to remove the Minerva styles. == QA The behaviour on https://en.wikipedia.beta.wmflabs.org/wiki/T360388 should match mobile in particular: * Tables floated to the left or right should become centered and limited to the screen size at low resolutions * T38030: The stadiums should remain side by side on resize for both Vector 2022 and Minerva: https://en.m.wikipedia.org/w/index.php?title=Los_Angeles_Lakers&oldid=1213240629#Home_arenas * The same behaviour should be exhibited for "Shaquille O'Neal (left), and Kobe Bryant (right), helped the Lakers win three straight NBA titles. Though they played well together on the court, the pair had an acrimonious relationship at times in the locker room.[175][176]" T148505#2782062

== Background Minerva has various styles inside resources/skins.minerva.base.styles/content/hacks.less for thumbnails that should be generalized and moved to core. The benefit of having these styles in core is that they will apply to Vector 2022 when acting as a responsive skin. == User story As a reader using a responsive skin I want thumbnails to be responsive to my device. == Design - Add mockups and design requirements == Acceptance criteria [] Rules for disabling floating on`.content table` for mobile devices should be moved to ResourceLoader/SkinModule content.tables. e.g. move from [[ https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/resources/skins.minerva.base.styles/content/hacks.less#L122C1-L141C2 | here ]] to [[ https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.skinning/content.tables.less | here ]]. DO NOT MOVE the .infobox rule. Include the !important disabling stylelint rules if necessary. [] Rules for `.content .thumb .thumbinner` should be moved to ResourceLoader/SkinModule content.thumbnails feature. e.g. move from [[ https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/resources/skins.minerva.base.styles/content/hacks.less#L122C1-L141C2 | here ]] to [[https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.skinning/content.thumbnails-common.less | here]]. [] To allow easy roll back in case of a problem it is okay to initially duplicate the rules in Minerva and core for at least one deploy but either before completing this task or as a sign off step we must plan to remove the Minerva styles. == QA The behaviour on https://en.wikipedia.beta.wmflabs.org/wiki/T360388 should match mobile in particular: * Tables floated to the left or right should become centered and limited to the screen size at low resolutions * T38030: The stadiums should remain side by side on resize for both Vector 2022 and Minerva: https://en.m.wikipedia.org/w/index.php?title=Los_Angeles_Lakers&oldid=1213240629#Home_arenas * The same behaviour should be exhibited for "Shaquille O'Neal (left), and Kobe Bryant (right), helped the Lakers win three straight NBA titles. Though they played well together on the court, the pair had an acrimonious relationship at times in the locker room.[175][176]" T148505#2782062