Fullscreen improvements

- fix sizing error so that the image actually fits the screen
- hide some stuff that didn't work properly in fullscreen anyway
  (commons/survey buttons just exited fullscreen, reuse menu
  did not fade with the metadata panel, view terms link didn't do
  anything)
- move metadata scroller CSS rules into metadata scroller LESS file
- disable invite animation which broke the opacity transition
- move opacity transition to the main metadata panel element;
  remove background-color transition which is pointless since there
  is an opacity transition

Change-Id: Ib26160cc6431ea007dab8441c634d0faf9ee1d0a

resources/mmv/mmv.lightboxinterface.less

@@ -83,29 +83,16 @@
 		bottom: 0px;
 	}
 
-	.mw-mmv-drag-affordance {
-		display: none;
-	}
-
 	.mw-mmv-post-image,
 	.mw-mmv-controls {
 		@fullscreen-padding: 10px;
 		padding: (@fullscreen-padding / 2) 0;
 		height: (@metadatabar-top-content-height + @fullscreen-padding);
-		background-color: rgba(251, 251, 251, 0);
-		transition: background-color 0.25s;
 		min-height: 0;
-
-		&:hover {
-			background-color: @metadata-background;
-		}
 	}
 
 	.mw-mmv-post-image {
 		position: fixed;
-	}
-
-	.mw-mmv-controls {
 		.opacity(0);
 		transition: opacity 0.25s;
 

resources/mmv/ui/mmv.ui.canvas.js

@@ -287,12 +287,13 @@
 	C.getLightboxImageWidths = function ( image ) {
 		var thumb = image.thumbnail,
 			$window = $( window ),
+			$aboveFold = $( '.mw-mmv-controls' ),
+			isFullscreened = !!$aboveFold.closest( '.jq-fullscreened' ).length,
+			// Don't rely on this.$imageWrapper's sizing because it's fragile.
+			// Depending on what the wrapper contains, its size can be 0 on some browsers.
+			// Therefore, we calculate the available space manually
 			availableWidth = $window.width(),
-			availableHeight = $window.height() - $( '.mw-mmv-controls' ).height();
-
-		// For the above don't rely on this.$imageWrapper's sizing anymore because it's fragile
-		// Depending on what the wrapper contains, its size can be 0 on some browsers.
-		// Therefore, we calculate the available space manually
+			availableHeight =  $window.height() - ( isFullscreened ? 0 : $aboveFold.height() );
 
 		return this.thumbnailWidthCalculator.calculateWidths(
 			availableWidth, availableHeight, thumb.width, thumb.height );

resources/mmv/ui/mmv.ui.metadataPanel.less

@@ -253,6 +253,10 @@
 
 .mw-mmv-permission-link {
 	cursor: pointer;
+
+	.jq-fullscreened & {
+		display: none;
+	}
 }
 
 .mw-mmv-optout-link.pending {

resources/mmv/ui/mmv.ui.metadataPanelScroller.less

@@ -7,6 +7,10 @@
 	&.invite {
 		.animation( mw-mmv-invite-animation 1s ease 0s 1 normal forwards );
 	}
+
+	.jq-fullscreened & {
+		.animation(none);
+	}
 }
 
 .mw-mmv-appear-animation() {
@@ -69,6 +73,10 @@
 	width: 100%;
 	height: @metadatabar-drag-height;
 	cursor: pointer;
+
+	.jq-fullscreened & {
+		display: none;
+	}
 }
 
 .mw-mmv-drag-icon {