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
