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

Limit image size for portrait popups

Browse source 
Also position the image in the center (along the y axis)

Change-Id: I4980e6d6e024515710abc1912ffcf99b71297e9e
This commit is contained in:
Prateek Saxena 2014-02-24 10:39:03 +05:30 committed by Yuvipanda
parent 31c7f560c6
commit 44028f722b
2 changed files with 26 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,6 +17,12 @@
cache = {},
curRequest, // Current API request
api = new mw.Api(),
SIZES = {
landscapeImage: {
h: 200, // Max height
w: 300 // Exact Width
}
},
$svg, $box; // defined at the end of the file
/**
@ -122,7 +128,7 @@
'xlink:href': thumbnail.source,
'clip-path': 'url(#mwe-popups-mask)',
x: 0,
y: 0,
y: ( thumbnail.height > SIZES.landscapeImage.h) ? ( ( thumbnail.height - SIZES.landscapeImage.h ) / -2 ) : thumbnail.height,
width: thumbnail.width,
height: thumbnail.height
} );
@ -130,15 +136,15 @@
$thumbnail = $( '<svg>' )
.attr( {
xmlns: 'http://www.w3.org/2000/svg',
viewBox: '0 0 ' + thumbnail.width + ' ' + thumbnail.height,
width: thumbnail.width,
height: thumbnail.height
viewBox: '0 0 ' + SIZES.landscapeImage.w + ' ' + ( thumbnail.height > SIZES.landscapeImage.h ) ? SIZES.landscapeImage.h : thumbnail.height,
width: SIZES.landscapeImage.w,
height: ( thumbnail.height > SIZES.landscapeImage.h ) ? SIZES.landscapeImage.h : thumbnail.height
} )
.append( $thumbnail );
} else {
$thumbnail = $( '<img>' )
.attr( 'src', thumbnail.source )
.addClass( 'mwe-popups-is-not-tall' );
$thumbnail = $( '<div>' )
.addClass( 'mwe-popups-is-not-tall' )
.css( 'background-image', 'url(' + thumbnail.source + ')' );
}
}

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

@ -43,7 +43,7 @@
}
}
> div.mwe-popups-is-tall{
> div.mwe-popups-is-tall {
float: right;
height: 250px;
width: 200px;
@ -51,22 +51,20 @@
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{
> div.mwe-popups-is-not-tall {
float: right;
height: 200px;
width: 300px;
float: initial;
padding: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
> div.mwe-popups-timestamp-older, div.mwe-popups-timestamp-recent{
> div.mwe-popups-timestamp-older, div.mwe-popups-timestamp-recent {
padding: 16px;
margin: 0;
font-size: 0.85em;
@ -74,11 +72,11 @@
bottom: 0;
}
> div.mwe-popups-timestamp-older{
> div.mwe-popups-timestamp-older {
color: #555;
}
> div.mwe-popups-timestamp-recent{
> div.mwe-popups-timestamp-recent {
color: #00af89;
}
}
@ -94,7 +92,7 @@
}
}
&.mwe-popups-is-not-tall{
&.mwe-popups-is-not-tall {
width: 300px;
.mwe-popups-extract {