' )
- .addClass( 'mw-mmv-controls' );
-
this.$closeButton = $( '
' )
.text( ' ' )
.addClass( 'mw-mmv-close' )
@@ -261,22 +257,6 @@
}
} );
- this.setupFullscreenButton();
-
- this.$controlBar.append(
- this.$closeButton,
- this.$fullscreenButton
- );
-
- this.$preDiv.append( this.$controlBar );
-
- this.addElementsToDiv( this.$preDiv, toAdd );
- };
-
- /**
- * Sets up the fullscreen button
- */
- LIP.setupFullscreenButton = function () {
// If the browser doesn't support fullscreen mode, hide the fullscreen button
if ( $.support.fullscreen ) {
this.$fullscreenButton.show();
@@ -285,22 +265,6 @@
}
};
- /**
- * Setup for DOM elements which come before the main image
- * @param {Array.} toAdd
- */
- LIP.setupPostDiv = function ( toAdd ) {
- this.addElementsToDiv( this.$postDiv, toAdd );
- };
-
- LIP.addElementsToDiv = function ( $div, toAdd ) {
- var i;
-
- for ( i = 0; i < toAdd.length; i++ ) {
- $div.append( toAdd[i] );
- }
- };
-
/**
* Handle a fullscreen change event.
* @param {jQuery.Event} e The fullscreen change event.
diff --git a/resources/mmv/mmv.lightboxinterface.less b/resources/mmv/mmv.lightboxinterface.less
index bbfa70b9a..d4d07fbb2 100644
--- a/resources/mmv/mmv.lightboxinterface.less
+++ b/resources/mmv/mmv.lightboxinterface.less
@@ -1,26 +1,38 @@
+@import "mmv.globals";
@import "mmv.mixins";
+@bottom-height: (@metadatabar-top-content-height + @metadatabar-drag-height);
+@metadata-background: rgb(251, 251, 251);
+
.mw-mmv-wrapper {
- position: fixed;
top: 0px;
left: 0px;
right: 0px;
- bottom: 0px;
z-index: 1001;
+ position: absolute;
+ bottom: auto;
}
.mw-mmv-main {
width: 100%;
- height: 100%;
+ height: auto;
position: relative;
+
+ .jq-fullscreened {
+ background-color: black;
+ }
+}
+
+.mw-mmv-image-wrapper,
+.mw-mmv-controls {
+ top: 0px;
+ bottom: @bottom-height;
}
.mw-mmv-image-wrapper {
- position: absolute;
- top: 50px;
+ position: fixed;
left: 0px;
right: 0px;
- bottom: 0px;
}
.mw-mmv-image-inner-wrapper {
@@ -34,21 +46,72 @@
top: 0px;
height: 32px;
width: 100%;
+ z-index: 1;
}
.mw-mmv-post-image {
position: absolute;
- bottom: 0px;
- height: 32px;
width: 100%;
+ bottom: auto;
+ height: auto;
+ color: #333333;
+ background-color: @metadata-background;
+ min-height: (@bottom-height + 1);
+ opacity: 0;
+ z-index: 2;
}
.mw-mmv-controls {
- height: 32px;
width: 100%;
- border-bottom: 1px solid #7d7c81;
+ height: auto;
+ border-bottom: 1px solid #cccccc;
+}
+
+/* Fullscreen styles */
+
+.cursor-hidden {
+ cursor: none;
}
.mw-mmv-main.jq-fullscreened {
background-color: black;
+}
+
+.jq-fullscreened {
+ .mw-mmv-image-wrapper,
+ .mw-mmv-post-image,
+ .mw-mmv-controls {
+ 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;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
}
\ No newline at end of file
diff --git a/tests/qunit/mmv/mmv.lightboxinterface.test.js b/tests/qunit/mmv/mmv.lightboxinterface.test.js
index 2a8bd5019..6d7ce675b 100644
--- a/tests/qunit/mmv/mmv.lightboxinterface.test.js
+++ b/tests/qunit/mmv/mmv.lightboxinterface.test.js
@@ -85,15 +85,15 @@
lightbox.attach( '#qunit-fixture' );
$.support.fullscreen = false;
- lightbox.setupFullscreenButton();
+ lightbox.setupCanvasButtons();
- assert.ok( !lightbox.$fullscreenButton.is(':visible'),
+ assert.strictEqual( lightbox.$fullscreenButton.css( 'display' ), 'none',
'Fullscreen button is hidden when fullscreen mode is unavailable' );
$.support.fullscreen = true;
- lightbox.setupFullscreenButton();
+ lightbox.setupCanvasButtons();
- assert.ok( lightbox.$fullscreenButton.is(':visible'),
+ assert.strictEqual( lightbox.$fullscreenButton.css( 'display' ), 'block',
'Fullscreen button is visible when fullscreen mode is available' );
// Entering fullscreen