mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-11-24 08:13:38 +00:00
Fixed positioning for the image
Fix, so we can work on animating the metadata div next. Bug: 58431 Change-Id: Ic62711f657daaa36bb82e32e98a0abee421864fc
This commit is contained in:
Mark Holmquist
parent
85a0474997
commit
c17be3b124
|
|
@ -5,33 +5,38 @@
|
|||
background-color: white;
|
||||
}
|
||||
|
||||
.mlb-image-wrapper {
|
||||
.mlb-wrapper {
|
||||
position: absolute;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.mlb-main {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.mlb-image-wrapper,
|
||||
.mw-mlb-controls {
|
||||
top: 0px;
|
||||
bottom: 82px;
|
||||
}
|
||||
|
||||
.mlb-controls {
|
||||
height: auto;
|
||||
.mlb-image-wrapper {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.mlb-post-image {
|
||||
position: absolute;
|
||||
bottom: auto;
|
||||
height: auto;
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
|
||||
.mw-mlb-controls-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.mlb-controls {
|
||||
height: auto;
|
||||
background-color: #e4e2e1;
|
||||
}
|
||||
|
||||
.mw-mlb-controls {
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
z-index: 1003;
|
||||
}
|
||||
|
||||
body.mobile .mw-mlb-controls,
|
||||
|
|
@ -40,7 +45,6 @@ body.mobile .mw-mlb-controls,
|
|||
}
|
||||
|
||||
.mw-mlb-controls div {
|
||||
position: static;
|
||||
border: none;
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -83,6 +87,10 @@ body.mobile .mw-mlb-controls,
|
|||
}
|
||||
|
||||
.mlb-close {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
left: auto;
|
||||
/* @embed */
|
||||
background-image: url(img/mw-close.svg);
|
||||
transition: opacity 0.25s;
|
||||
|
|
@ -92,6 +100,7 @@ body.mobile .mw-mlb-controls,
|
|||
.mlb-close,
|
||||
.mw-mlb-next-image,
|
||||
.mw-mlb-prev-image {
|
||||
position: fixed;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
|
@ -102,6 +111,13 @@ body.mobile .mw-mlb-controls,
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.mlb-close,
|
||||
.mw-mlb-next-image,
|
||||
.mw-mlb-prev-image {
|
||||
border: none;
|
||||
z-index: 1003;
|
||||
}
|
||||
|
||||
.mlb-fullscreen-div .mlb-fullscreen {
|
||||
/* @embed */
|
||||
background-image: url(img/mw-defullscreen-ltr.svg);
|
||||
|
|
@ -271,17 +287,20 @@ body.mobile .mw-mlb-controls,
|
|||
}
|
||||
|
||||
body.mw-mlb-lightbox-open {
|
||||
/** Stop the article from scrolling in the background */
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
body.mw-mlb-lightbox-open .mlb-main {
|
||||
overflow-y: auto;
|
||||
body.mw-mlb-lightbox-open #mw-page-base,
|
||||
body.mw-mlb-lightbox-open #mw-head-base,
|
||||
body.mw-mlb-lightbox-open #mw-navigation,
|
||||
body.mw-mlb-lightbox-open #mw-footer,
|
||||
body.mw-mlb-lightbox-open #content {
|
||||
/** Stop the article from scrolling in the background */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mw-mlb-next-image,
|
||||
.mw-mlb-prev-image {
|
||||
position: absolute;
|
||||
top: -999px;
|
||||
width: 80px;
|
||||
height: 120px;
|
||||
|
|
|
|||
|
|
@ -364,13 +364,13 @@
|
|||
|
||||
function fadeIn() {
|
||||
isOnImage = true;
|
||||
ui.$mwControls.fadeIn( 100 );
|
||||
ui.$image.one( 'click', fadeOut );
|
||||
ui.$closeButton.fadeIn( 100 );
|
||||
ui.$imageDiv.one( 'click', fadeOut );
|
||||
}
|
||||
|
||||
function fadeOut() {
|
||||
ui.$mwControls.fadeOut( 100 );
|
||||
ui.$image.one( 'click', fadeIn );
|
||||
ui.$closeButton.fadeOut( 100 );
|
||||
ui.$imageDiv.one( 'click', fadeIn );
|
||||
}
|
||||
|
||||
function fadeOutDelayed() {
|
||||
|
|
@ -395,7 +395,7 @@
|
|||
}, 500 );
|
||||
}
|
||||
|
||||
ui.$mwControls
|
||||
ui.$closeButton
|
||||
.fadeIn( 100 )
|
||||
.delay( 500 )
|
||||
.fadeOut( 100 );
|
||||
|
|
|
|||
|
|
@ -105,14 +105,14 @@
|
|||
};
|
||||
|
||||
LIP.initializeInterface = function () {
|
||||
this.$postDiv.css( 'top', ( $( window ).height() - 64 ) + 'px' );
|
||||
this.$postDiv.css( 'top', ( $( window ).height() - 96 ) + 'px' );
|
||||
|
||||
this.initializeHeader();
|
||||
this.initializeNavigation();
|
||||
this.initializeButtons();
|
||||
this.initializeImage();
|
||||
this.initializeImageMetadata();
|
||||
this.initializeAboutLinks();
|
||||
this.initializeNavigation();
|
||||
};
|
||||
|
||||
LIP.initializeHeader = function () {
|
||||
|
|
@ -187,17 +187,15 @@
|
|||
};
|
||||
|
||||
LIP.initializeButtons = function () {
|
||||
this.$mwControls = $( '<div>' )
|
||||
.addClass( 'mw-mlb-controls' )
|
||||
// Note we aren't adding the fullscreen button here.
|
||||
// Fullscreen causes some funky issues with UI redraws,
|
||||
// and we aren't sure why, but it's not really necessary
|
||||
// with the new interface anyway - it's basically fullscreen
|
||||
// already!
|
||||
.append(
|
||||
this.$closeButton
|
||||
)
|
||||
.appendTo( this.$main );
|
||||
// Note we aren't adding the fullscreen button here.
|
||||
// Fullscreen causes some funky issues with UI redraws,
|
||||
// and we aren't sure why, but it's not really necessary
|
||||
// with the new interface anyway - it's basically fullscreen
|
||||
// already!
|
||||
this.$closeButton.add(
|
||||
this.$nextButton,
|
||||
this.$prevButton
|
||||
).appendTo( this.$imageWrapper );
|
||||
};
|
||||
|
||||
LIP.initializeImage = function () {
|
||||
|
|
@ -455,16 +453,14 @@
|
|||
.html( ' ' )
|
||||
.click( function () {
|
||||
mw.mediaViewer.nextImage();
|
||||
} )
|
||||
.appendTo( this.$main );
|
||||
} );
|
||||
|
||||
this.$prevButton = $( '<div>' )
|
||||
.addClass( 'mw-mlb-prev-image disabled' )
|
||||
.html( ' ' )
|
||||
.click( function () {
|
||||
mw.mediaViewer.prevImage();
|
||||
} )
|
||||
.appendTo( this.$main );
|
||||
} );
|
||||
};
|
||||
|
||||
LIP.toggleMetadata = function () {
|
||||
|
|
|
|||
Loading…
Reference in a new issue