wikimedia/mediawiki-extensions-Popups
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups synced 2024-11-23 23:24:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use div with background-image for landscape

Browse source 
This is to prevent the layout from breaking on landspace popups

Change-Id: Ia9d051b4f060d549a4a188ca42fb70a97eed23ab
This commit is contained in:
Prateek Saxena 2014-02-17 16:27:05 +05:30
parent 21b41f78eb
commit 2899d34a70
2 changed files with 28 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
resources/ext.popups.core.js
View file

@ -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;

16
resources/ext.popups.core.less
View file

@ -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{