Prtksxna has uploaded a new change for review. https://gerrit.wikimedia.org/r/113925
Change subject: Use div with background-image for landscape ...................................................................... Use div with background-image for landscape This is to prevent the layout from breaking on landspace popups Change-Id: Ia9d051b4f060d549a4a188ca42fb70a97eed23ab --- M resources/ext.popups.core.js M resources/ext.popups.core.less 2 files changed, 28 insertions(+), 6 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Popups refs/changes/25/113925/1 diff --git a/resources/ext.popups.core.js b/resources/ext.popups.core.js index 66475cf..bdbf3df 100644 --- a/resources/ext.popups.core.js +++ b/resources/ext.popups.core.js @@ -81,10 +81,20 @@ return $( '<span>' ); } - var $thumbnail = $( '<img>' ) - .attr( 'src', thumbnail.source ) - .removeClass( 'mwe-popups-is-tall mwe-popups-is-not-tall' ) - .addClass( tall ? 'mwe-popups-is-tall' : 'mwe-popups-is-not-tall' ); + var $thumbnail; + + if ( tall ) { + // This is to mask and center the image within a given size + $thumbnail = $( '<div>' ) + .removeClass( 'mwe-popups-is-tall mwe-popups-is-not-tall' ) + .addClass( 'mwe-popups-is-tall' ) + .css( 'background-image', 'url(' + thumbnail.source + ')'); + } else { + $thumbnail = $( '<img>' ) + .attr( 'src', thumbnail.source ) + .removeClass( 'mwe-popups-is-tall mwe-popups-is-not-tall' ) + .addClass( 'mwe-popups-is-not-tall' ); + } return $thumbnail; diff --git a/resources/ext.popups.core.less b/resources/ext.popups.core.less index 7706d0b..84c53f6 100644 --- a/resources/ext.popups.core.less +++ b/resources/ext.popups.core.less @@ -29,10 +29,22 @@ padding-bottom: 3.84em; } - > img.mwe-popups-is-tall{ + > div.mwe-popups-is-tall{ float: right; height: 250px; - padding-left: 1.28em; + width: 200px; + padding: 0; + background-size: cover; + background-repeat: no-repeat; + overflow: hidden; + + img { + min-height: 100%; + min-width: 100%; + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + opacity: 0 + } } > img.mwe-popups-is-not-tall{ -- To view, visit https://gerrit.wikimedia.org/r/113925 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ia9d051b4f060d549a4a188ca42fb70a97eed23ab Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/Popups Gerrit-Branch: master Gerrit-Owner: Prtksxna <psax...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits