From 44028f722b9fd61ee491260c5e3ae24f9d0d773f Mon Sep 17 00:00:00 2001
From: Prateek Saxena <prtksxna@gmail.com>
Date: Mon, 24 Feb 2014 10:39:03 +0530
Subject: [PATCH] Limit image size for portrait popups

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

Change-Id: I4980e6d6e024515710abc1912ffcf99b71297e9e
---
 resources/ext.popups.core.js   | 20 +++++++++++++-------
 resources/ext.popups.core.less | 28 +++++++++++++---------------
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/resources/ext.popups.core.js b/resources/ext.popups.core.js
index 93b2b7b5a..69c67560f 100644
--- a/resources/ext.popups.core.js
+++ b/resources/ext.popups.core.js
@@ -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 + ')' );
 				}
 			}
 
diff --git a/resources/ext.popups.core.less b/resources/ext.popups.core.less
index 69a2b1fac..1d34f93d7 100644
--- a/resources/ext.popups.core.less
+++ b/resources/ext.popups.core.less
@@ -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 {