MarkTraceur has uploaded a new change for review.
https://gerrit.wikimedia.org/r/95081
Change subject: Reorganize UI to be...way sexier.
......................................................................
Reorganize UI to be...way sexier.
There's just no other adjective for this, it is _super_ nice.
There may be refinements later as the designers get things together.
Bug: 56499
Change-Id: I200684a19c190444587f520595186e9ae5afbea6
---
M resources/ext.multimediaViewer/ext.multimediaViewer.css
M resources/ext.multimediaViewer/ext.multimediaViewer.js
M resources/ext.multimediaViewer/img/cc.svg
M resources/ext.multimediaViewer/img/time.svg
M resources/ext.multimediaViewer/img/user.svg
M resources/multilightbox/lightboximage.js
M resources/multilightbox/lightboxinterface.js
M resources/multilightbox/multilightbox.css
8 files changed, 146 insertions(+), 177 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MultimediaViewer
refs/changes/81/95081/1
diff --git a/resources/ext.multimediaViewer/ext.multimediaViewer.css
b/resources/ext.multimediaViewer/ext.multimediaViewer.css
index d28a799..eb9afdc 100644
--- a/resources/ext.multimediaViewer/ext.multimediaViewer.css
+++ b/resources/ext.multimediaViewer/ext.multimediaViewer.css
@@ -1,45 +1,44 @@
-.mw-lightbox-title-div {
+/**
+ * Override multilightbox styles that don't apply to us
+ */
+.mlb-image-wrapper {
+ top: 0px;
+ bottom: 84px;
+}
+
+.mlb-post-image {
+ background-color: #e4e2e1;
+ height: 80px;
+}
+
+.mlb-post-image:hover {
+ height: auto;
+ max-height: 75%;
+ overflow-y: auto;
+}
+
+.mlb-controls {
+ border: none;
+ overflow: hidden;
+ padding-top: 10px;
+ height: 80px;
+}
+
+.mw-lightbox-title-div,
+.mw-lightbox-extra-info-div {
text-align: left;
- padding-left: 10px;
- font-weight: bold;
-
- position: absolute;
- bottom: 0px;
- left: 0px;
- right: 0px;
height: 50px;
+ position: absolute;
+ right: 0px;
+ left: 0px;
+}
- /* FF 3.6+ */
- background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1)
100%);
-
- /* Chrome, Safari 4+ */
- background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1)));
-
- /* Chrome 10+, Safari 5.1+ */
- background: -webkit-linear-gradient(top, rgba(0,0,0,0)
0%,rgba(0,0,0,1) 100%);
-
- /* Opera 11.10+ */
- background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1)
100%);
-
- /* IE10+ */
- background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1)
100%);
-
- /* W3C */
- background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1)
100%);
-
- /* IE 6-9 */
- filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
+.mw-lightbox-title-div {
+ bottom: 0px;
}
.mw-lightbox-extra-info-div {
- height: 50px;
- position: absolute;
bottom: -50px;
- right: 0px;
- left: 0px;
-
- text-align: left;
- padding-left: 10px;
}
.mw-lightbox-extra-info-div a,
@@ -86,39 +85,39 @@
vertical-align: middle;
}
-.mw-mlb-title {
+.mw-mlb-title-para {
margin-bottom: 1px;
margin-top: 0px;
padding: 0px;
- font-weight: bold;
+}
+
+.mw-mlb-title {
font-size: 1.2em;
}
-.mw-mlb-author {
- font-weight: bold;
+.mw-mlb-image-metadata {
+ width: 100%;
+ position: relative;
}
-.mw-mlb-image-metadata {
- margin-top: 30px;
- width: 64%;
- margin: 30px auto;
- position: relative;
+.mw-mlb-image-desc-div {
+ width: 60%;
+ overflow-y: auto;
+}
+
+.mw-mlb-image-links-div {
+ width: 40%;
}
.mw-mlb-image-desc-div,
.mw-mlb-image-links-div {
display: inline-block;
- width: 50%;
- height: 100px;
+ height: 150px;
vertical-align: top;
}
.mw-mlb-image-desc {
color: #6f7073;
-}
-
-.mw-mlb-image-desc-div {
- overflow-y: auto;
}
.mw-mlb-image-links li {
@@ -165,25 +164,17 @@
display: none;
}
-.mw-mlb-license-contain,
+.mw-mlb-license,
.mw-mlb-title-credit {
display: inline-block;
}
-.mw-mlb-license-contain {
- width: 30%;
-}
-
.mw-mlb-title-credit {
- width: 70%;
-}
-
-.mw-mlb-title-contain {
- padding-left: 10px;
+ width: 100%;
}
.mw-mlb-license {
- padding-right: 10px;
+ padding-left: 10px;
}
.mw-mlb-license.empty {
@@ -220,9 +211,16 @@
width: 100%;
}
+.mw-mlb-title-para,
+.mw-mlb-credit,
+.mw-mlb-image-desc,
+.mw-mlb-mmv-about-links {
+ padding-left: 20px;
+}
+
.mw-mlb-mmv-about-links {
font-size: 0.8em;
- padding-top: 20px;
+ padding: 20px;
width: 50%;
}
diff --git a/resources/ext.multimediaViewer/ext.multimediaViewer.js
b/resources/ext.multimediaViewer/ext.multimediaViewer.js
index e9dc86b..e130a9e 100755
--- a/resources/ext.multimediaViewer/ext.multimediaViewer.js
+++ b/resources/ext.multimediaViewer/ext.multimediaViewer.js
@@ -131,7 +131,6 @@
lightboxHooks.register( 'imageResize', function () {
var api = new mw.Api(),
- ratio = this.isFullScreen ? 0.9 : 0.5,
density = $.devicePixelRatio(),
filename = viewer.currentImageFilename,
ui = this;
@@ -142,8 +141,8 @@
titles: filename,
prop: 'imageinfo',
iiprop: 'url',
- iiurlwidth: Math.floor( density * ratio * $(
window ).width() * 1.1 ),
- iiurlheight: Math.floor( density * ratio * $(
window ).height() * 1.1 )
+ iiurlwidth: Math.floor( density *
this.$imageWrapper.width() ),
+ iiurlheight: Math.floor( density *
this.$imageWrapper.height() )
} ).done( function ( data ) {
var imageInfo, innerInfo,
image = new Image();
@@ -436,9 +435,13 @@
};
MMVP.initializeHeader = function () {
+ this.ui.$closeButton.detach();
+ this.ui.$fullscreenButton.detach();
+
this.ui.$titleDiv = $( '<div>' )
.addClass( 'mw-mlb-title-contain' );
+ this.ui.$postDiv.append( this.ui.$controlBar.detach() );
this.ui.$controlBar.append( this.ui.$titleDiv );
this.initializeTitleAndCredit();
@@ -456,10 +459,14 @@
};
MMVP.initializeTitle = function () {
- this.ui.$title = $( '<p>' )
+ this.ui.$title = $( '<span>' )
.addClass( 'mw-mlb-title' );
- this.ui.$titleAndCredit.append( this.ui.$title );
+ this.ui.$titlePara = $( '<p>' )
+ .addClass( 'mw-mlb-title-para' )
+ .append( this.ui.$title );
+
+ this.ui.$titleAndCredit.append( this.ui.$titlePara );
};
MMVP.initializeCredit = function () {
@@ -489,11 +496,7 @@
.addClass( 'empty' )
.prop( 'href', '#' );
- this.ui.$licensePara = $( '<p>' )
- .addClass( 'mw-mlb-license-contain' )
- .append( this.ui.$license );
-
- this.ui.$titleDiv.append( this.ui.$licensePara );
+ this.ui.$titlePara.append( this.ui.$license );
};
@@ -823,7 +826,6 @@
var imageInfo,
filename = fileTitle.getPrefixedText(),
- ratio = this.lightbox.iface.isFullScreen ? 0.9 : 0.5,
density = $.devicePixelRatio(),
apiArgs = {
action: 'query',
@@ -831,8 +833,8 @@
titles: filename,
prop: 'imageinfo',
iiprop: iiprops.join( '|' ),
- iiurlwidth: Math.floor( density * ratio * $(
window ).width() * 1.1 ),
- iiurlheight: Math.floor( density * ratio * $(
window ).height() * 1.1 ),
+ iiurlwidth: Math.floor( density *
this.lightbox.iface.$imageWrapper.width() ),
+ iiurlheight: Math.floor( density *
this.lightbox.iface.$imageWrapper.height() ),
// Short-circuit, don't fallback, to save some
tiny amount of time
iiextmetadatalanguage: mw.config.get(
'wgUserLanguage', false ) || mw.config.get( 'wgContentLanguage', 'en' )
},
diff --git a/resources/ext.multimediaViewer/img/cc.svg
b/resources/ext.multimediaViewer/img/cc.svg
index 80c0747..cdd2d42 100644
--- a/resources/ext.multimediaViewer/img/cc.svg
+++ b/resources/ext.multimediaViewer/img/cc.svg
@@ -1,3 +1,3 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd";>
-<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; width="64px" height="64px"
viewBox="5.5 -3.5 64 64"><circle fill="#FFFFFF" stroke="#939598" cx="37.785"
cy="28.501" r="28.836"/><path
d="M37.441-3.5c8.951,0,16.572,3.125,22.857,9.372c3.008,3.009,5.295,6.448,6.857,10.314c1.561,3.867,2.344,7.971,2.344,12.314c0,4.381-0.773,8.486-2.314,12.313c-1.543,3.828-3.82,7.21-6.828,10.143c-3.123,3.085-6.666,5.448-10.629,7.086c-3.961,1.638-8.057,2.457-12.285,2.457s-8.276-0.808-12.143-2.429c-3.866-1.618-7.333-3.961-10.4-7.027c-3.067-3.066-5.4-6.524-7-10.372S5.5,32.767,5.5,28.5c0-4.229,0.809-8.295,2.428-12.2c1.619-3.905,3.972-7.4,7.057-10.486C21.08-0.394,28.565-3.5,37.441-3.5z
M37.557,2.272c-7.314,0-13.467,2.553-18.458,7.657c-2.515,2.553-4.448,5.419-5.8,8.6c-1.354,3.181-2.029,6.505-2.029,9.972c0,3.429,0.675,6.734,2.029,9.913c1.353,3.183,3.285,6.021,5.8,8.516c2.514,2.496,5.351,4.399,8.515,5.715c3.161,1.314,6.476,1.971,9.943,1.971c3.428,0,6.75-0.665,9.973-1.999c3.219-1.335,6.121-3.257,8.713-5.771c4.99-4.876,7.484-10.99,7.484-18.344c0-3.543-0.648-6.895-1.943-10.057c-1.293-3.162-3.18-5.98-5.654-8.458C50.984,4.844,44.795,2.272,37.557,2.272z
M37.156,23.187l-4.287,2.229c-0.458-0.951-1.019-1.619-1.685-2c-0.667-0.38-1.286-0.571-1.858-0.571c-2.856,0-4.286,1.885-4.286,5.657c0,1.714,0.362,3.084,1.085,4.113c0.724,1.029,1.791,1.544,3.201,1.544c1.867,0,3.181-0.915,3.944-2.743l3.942,2c-0.838,1.563-2,2.791-3.486,3.686c-1.484,0.896-3.123,1.343-4.914,1.343c-2.857,0-5.163-0.875-6.915-2.629c-1.752-1.752-2.628-4.19-2.628-7.313c0-3.048,0.886-5.466,2.657-7.257c1.771-1.79,4.009-2.686,6.715-2.686C32.604,18.558,35.441,20.101,37.156,23.187z
M55.613,23.187l-4.229,2.229c-0.457-0.951-1.02-1.619-1.686-2c-0.668-0.38-1.307-0.571-1.914-0.571c-2.857,0-4.287,1.885-4.287,5.657c0,1.714,0.363,3.084,1.086,4.113c0.723,1.029,1.789,1.544,3.201,1.544c1.865,0,3.18-0.915,3.941-2.743l4,2c-0.875,1.563-2.057,2.791-3.541,3.686c-1.486,0.896-3.105,1.343-4.857,1.343c-2.896,0-5.209-0.875-6.941-2.629c-1.736-1.752-2.602-4.19-2.602-7.313c0-3.048,0.885-5.466,2.658-7.257c1.77-1.79,4.008-2.686,6.713-2.686C51.117,18.558,53.938,20.101,55.613,23.187z"
fill="#939598"/></svg>
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; width="64px" height="64px"
viewBox="5.5 -3.5 64 64"><circle fill="none" stroke="#939598" cx="37.785"
cy="28.501" r="28.836"/><path
d="M37.441-3.5c8.951,0,16.572,3.125,22.857,9.372c3.008,3.009,5.295,6.448,6.857,10.314c1.561,3.867,2.344,7.971,2.344,12.314c0,4.381-0.773,8.486-2.314,12.313c-1.543,3.828-3.82,7.21-6.828,10.143c-3.123,3.085-6.666,5.448-10.629,7.086c-3.961,1.638-8.057,2.457-12.285,2.457s-8.276-0.808-12.143-2.429c-3.866-1.618-7.333-3.961-10.4-7.027c-3.067-3.066-5.4-6.524-7-10.372S5.5,32.767,5.5,28.5c0-4.229,0.809-8.295,2.428-12.2c1.619-3.905,3.972-7.4,7.057-10.486C21.08-0.394,28.565-3.5,37.441-3.5z
M37.557,2.272c-7.314,0-13.467,2.553-18.458,7.657c-2.515,2.553-4.448,5.419-5.8,8.6c-1.354,3.181-2.029,6.505-2.029,9.972c0,3.429,0.675,6.734,2.029,9.913c1.353,3.183,3.285,6.021,5.8,8.516c2.514,2.496,5.351,4.399,8.515,5.715c3.161,1.314,6.476,1.971,9.943,1.971c3.428,0,6.75-0.665,9.973-1.999c3.219-1.335,6.121-3.257,8.713-5.771c4.99-4.876,7.484-10.99,7.484-18.344c0-3.543-0.648-6.895-1.943-10.057c-1.293-3.162-3.18-5.98-5.654-8.458C50.984,4.844,44.795,2.272,37.557,2.272z
M37.156,23.187l-4.287,2.229c-0.458-0.951-1.019-1.619-1.685-2c-0.667-0.38-1.286-0.571-1.858-0.571c-2.856,0-4.286,1.885-4.286,5.657c0,1.714,0.362,3.084,1.085,4.113c0.724,1.029,1.791,1.544,3.201,1.544c1.867,0,3.181-0.915,3.944-2.743l3.942,2c-0.838,1.563-2,2.791-3.486,3.686c-1.484,0.896-3.123,1.343-4.914,1.343c-2.857,0-5.163-0.875-6.915-2.629c-1.752-1.752-2.628-4.19-2.628-7.313c0-3.048,0.886-5.466,2.657-7.257c1.771-1.79,4.009-2.686,6.715-2.686C32.604,18.558,35.441,20.101,37.156,23.187z
M55.613,23.187l-4.229,2.229c-0.457-0.951-1.02-1.619-1.686-2c-0.668-0.38-1.307-0.571-1.914-0.571c-2.857,0-4.287,1.885-4.287,5.657c0,1.714,0.363,3.084,1.086,4.113c0.723,1.029,1.789,1.544,3.201,1.544c1.865,0,3.18-0.915,3.941-2.743l4,2c-0.875,1.563-2.057,2.791-3.541,3.686c-1.486,0.896-3.105,1.343-4.857,1.343c-2.896,0-5.209-0.875-6.941-2.629c-1.736-1.752-2.602-4.19-2.602-7.313c0-3.048,0.885-5.466,2.658-7.257c1.77-1.79,4.008-2.686,6.713-2.686C51.117,18.558,53.938,20.101,55.613,23.187z"
fill="#939598"/></svg>
diff --git a/resources/ext.multimediaViewer/img/time.svg
b/resources/ext.multimediaViewer/img/time.svg
index 12d5bbb..878ba67 100644
--- a/resources/ext.multimediaViewer/img/time.svg
+++ b/resources/ext.multimediaViewer/img/time.svg
@@ -1,18 +1,3 @@
<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
- width="80px" height="80px" viewBox="0 0 80 80" enable-background="new
0 0 80 80" xml:space="preserve">
-<g>
-
- <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse"
x1="326" y1="-301.0742" x2="326" y2="-329.7763" gradientTransform="matrix(1 0 0
-1 -286 -294)">
- <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.95"/>
- <stop offset="0.7874" style="stop-color:#FFFFFF"/>
- </linearGradient>
- <rect fill="url(#SVGID_1_)" width="80" height="80"/>
- <path fill="#929497"
d="M62.621,17.368C56.585,11.326,48.549,8,39.996,8c-8.546,0-16.582,3.326-22.632,9.368
-
C11.322,23.411,8,31.451,8,40s3.322,16.589,9.364,22.621C23.414,68.664,31.45,72,39.996,72c8.553,0,16.589-3.336,22.625-9.379
- C68.666,56.589,72,48.549,72,40S68.666,23.411,62.621,17.368z
M50.477,55.118L36.804,41.467V18.066h5.145v21.243L54.11,51.477
- L50.477,55.118z"/>
-</g>
-</svg>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px" width="80px"
height="80px" viewBox="0 0 80 80" xml:space="preserve"><path fill="#929497"
d="M62.621,17.368C56.585,11.326,48.549,8,39.996,8c-8.546,0-16.582,3.326-22.632,9.368C11.322,23.411,8,31.451,8,40s3.322,16.589,9.364,22.621C23.414,68.664,31.45,72,39.996,72c8.553,0,16.589-3.336,22.625-9.379C68.666,56.589,72,48.549,72,40S68.666,23.411,62.621,17.368z
M50.477,55.118L36.804,41.467V18.066h5.145v21.243L54.11,51.477L50.477,55.118z"/></svg>
diff --git a/resources/ext.multimediaViewer/img/user.svg
b/resources/ext.multimediaViewer/img/user.svg
index f01dae5..7f6e5c2 100644
--- a/resources/ext.multimediaViewer/img/user.svg
+++ b/resources/ext.multimediaViewer/img/user.svg
@@ -1,47 +1,3 @@
<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
- width="80px" height="80px" viewBox="0 0 80 80" enable-background="new
0 0 80 80" xml:space="preserve">
-<g>
- <g>
- <g>
- <defs>
- <rect id="SVGID_1_" width="80" height="80"/>
- </defs>
- <clipPath id="SVGID_2_">
- <use xlink:href="#SVGID_1_"
overflow="visible"/>
- </clipPath>
- <rect clip-path="url(#SVGID_2_)" fill="#FFFFFF"
width="80" height="7.074"/>
- <rect y="7.074" clip-path="url(#SVGID_2_)"
fill="#FFFFFF" width="80" height="22.602"/>
- <rect y="29.676" clip-path="url(#SVGID_2_)"
fill="#FFFFFF" width="80" height="50.324"/>
- </g>
- </g>
- <g>
- <g>
- <path fill="#929497"
d="M16.436,8C8.396,8,8.014,15.667,8,16.049V72c28.596,0,50.623,0,55.562,0c8.039,0,8.422-7.667,8.438-8.049
- V8H16.436z"/>
- </g>
- <g>
- <g>
- <g>
- <path fill="#FFFFFF"
d="M31.202,26.303c2.565,0,4.649,2.086,4.649,4.655c0,2.573-2.084,4.653-4.649,4.653
-
c-2.573,0-4.659-2.08-4.659-4.653C26.542,28.389,28.629,26.303,31.202,26.303z"/>
- </g>
- </g>
- <g>
- <g>
- <circle fill="#FFFFFF" cx="50.476"
cy="30.957" r="4.654"/>
- </g>
- </g>
- </g>
- <g>
- <g>
- <path fill="#FFFFFF"
d="M40.835,57.729c-7.189,0-13.987-2.433-18.186-6.508c-1.057-1.025-1.082-2.714-0.056-3.771
-
c1.025-1.056,2.714-1.082,3.771-0.056c3.226,3.131,8.636,5,14.471,5c5.749,0,11.117-1.83,14.359-4.896
-
c1.068-1.011,2.756-0.966,3.77,0.105c1.012,1.07,0.965,2.758-0.105,3.77C54.588,55.413,48.019,57.729,40.835,57.729z"/>
- </g>
- </g>
- </g>
-</g>
-</svg>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; width="80px" height="80px"><path
fill="#929497"
d="M16.436,8C8.396,8,8.014,15.667,8,16.049V72c28.596,0,50.623,0,55.562,0c8.039,0,8.422-7.667,8.438-8.049V8H16.436z"/><path
fill="#FFFFFF"
d="M31.202,26.303c2.565,0,4.649,2.086,4.649,4.655c0,2.573-2.084,4.653-4.649,4.653c-2.573,0-4.659-2.08-4.659-4.653C26.542,28.389,28.629,26.303,31.202,26.303z"/><circle
fill="#FFFFFF" cx="50.476" cy="30.957" r="4.654"/><path fill="#FFFFFF"
d="M40.835,57.729c-7.189,0-13.987-2.433-18.186-6.508c-1.057-1.025-1.082-2.714-0.056-3.771c1.025-1.056,2.714-1.082,3.771-0.056c3.226,3.131,8.636,5,14.471,5c5.749,0,11.117-1.83,14.359-4.896c1.068-1.011,2.756-0.966,3.77,0.105c1.012,1.07,0.965,2.758-0.105,3.77C54.588,55.413,48.019,57.729,40.835,57.729z"/></svg>
diff --git a/resources/multilightbox/lightboximage.js
b/resources/multilightbox/lightboximage.js
index 7e0a4d0..4b0d7e6 100644
--- a/resources/multilightbox/lightboximage.js
+++ b/resources/multilightbox/lightboximage.js
@@ -26,62 +26,60 @@
return ele;
};
- LIP.autoResize = function ( ele, ratio ) {
+ // Assumes that the parent element's size is the maxmimum size.
+ LIP.autoResize = function ( ele ) {
function updateRatios() {
if ( imgHeight ) {
- imgHeightRatio = imgMaxHeight / imgHeight;
+ imgHeightRatio = parentHeight / imgHeight;
}
if ( imgWidth ) {
- imgWidthRatio = imgMaxWidth / imgWidth;
+ imgWidthRatio = parentWidth / imgWidth;
}
}
var imgWidthRatio, imgHeightRatio,
- multRatio = ratio || 0.5,
- $window = $( window ),
- winWidth = $window.width(),
- winHeight = $window.height(),
$img = $( ele ),
- imgMaxWidth = winWidth * multRatio,
- imgMaxHeight = winHeight * multRatio,
+ $parent = $img.parent(),
+ parentWidth = $parent.width(),
+ parentHeight = $parent.height(),
imgWidth = $img.width(),
imgHeight = $img.height();
- if ( this.globalMaxWidth && imgMaxWidth > this.globalMaxWidth )
{
- imgMaxWidth = this.globalMaxWidth;
+ if ( this.globalMaxWidth && parentWidth > this.globalMaxWidth )
{
+ parentWidth = this.globalMaxWidth;
}
- if ( this.globalMaxHeight && imgMaxHeight >
this.globalMaxHeight ) {
- imgMaxHeight = this.globalMaxHeight;
+ if ( this.globalMaxHeight && parentHeight >
this.globalMaxHeight ) {
+ parentHeight = this.globalMaxHeight;
}
updateRatios();
- if ( imgWidth > imgMaxWidth ) {
+ if ( imgWidth > parentWidth ) {
imgHeight *= imgWidthRatio || 1;
- imgWidth = imgMaxWidth;
+ imgWidth = parentWidth;
updateRatios();
}
- if ( imgHeight > imgMaxHeight ) {
+ if ( imgHeight > parentHeight ) {
imgWidth *= imgHeightRatio || 1;
- imgHeight = imgMaxHeight;
+ imgHeight = parentHeight;
updateRatios();
}
- if ( imgWidth < imgMaxWidth && imgHeight < imgMaxHeight ) {
+ if ( imgWidth < parentWidth && imgHeight < parentHeight ) {
if ( imgWidth === 0 && imgHeight === 0 ) {
// Only set one
- imgWidth = imgMaxWidth;
+ imgWidth = parentWidth;
imgHeight = null;
} else {
if ( imgHeightRatio > imgWidthRatio ) {
imgWidth *= imgHeightRatio;
- imgHeight = imgMaxHeight;
+ imgHeight = parentHeight;
} else {
imgHeight *= imgWidthRatio;
- imgWidth = imgMaxWidth;
+ imgWidth = parentWidth;
}
updateRatios();
}
diff --git a/resources/multilightbox/lightboxinterface.js
b/resources/multilightbox/lightboxinterface.js
index 375cf61..55f3a82 100644
--- a/resources/multilightbox/lightboxinterface.js
+++ b/resources/multilightbox/lightboxinterface.js
@@ -38,6 +38,15 @@
this.$imageDiv = $( '<div>' )
.addClass( 'mlb-image' );
+ // I blame CSS for this
+ this.$innerWrapper = $( '<div>' )
+ .addClass( 'mlb-image-inner-wrapper' )
+ .append( this.$imageDiv );
+
+ this.$imageWrapper = $( '<div>' )
+ .addClass( 'mlb-image-wrapper' )
+ .append( this.$innerWrapper );
+
this.$preDiv = $( '<div>' )
.addClass( 'mlb-pre-image' );
result = lightboxHooks.callAll( 'addToPreDiv', this, addToPre );
@@ -50,7 +59,7 @@
this.$main.append(
this.$preDiv,
- this.$imageDiv,
+ this.$imageWrapper,
this.$postDiv
);
@@ -151,13 +160,13 @@
iface.$imageDiv.append( iface.$image );
image.globalMaxWidth = iface.$image.width();
image.globalMaxHeight = iface.$image.height();
- image.autoResize( ele, iface.isFullScreen ? 0.9
: 0.5 );
+ image.autoResize( ele );
window.addEventListener( 'resize', function () {
var result = lightboxHooks.callAll(
'imageResize', iface );
if ( result !== false ) {
- image.autoResize(
iface.$image.get( 0 ), iface.isFullScreen ? 0.9 : 0.5 );
+ image.autoResize(
iface.$image.get( 0 ) );
}
} );
@@ -178,7 +187,7 @@
this.currentImage.globalMaxWidth = this.$image.width();
this.currentImage.globalMaxHeight = this.$image.height();
- this.currentImage.autoResize( imageEle, this.isFullScreen ? 0.9
: 0.5 );
+ this.currentImage.autoResize( imageEle );
};
LIP.setupPreDiv = function ( buildDefaults, toAdd ) {
diff --git a/resources/multilightbox/multilightbox.css
b/resources/multilightbox/multilightbox.css
index 8b3f073..87efb67 100644
--- a/resources/multilightbox/multilightbox.css
+++ b/resources/multilightbox/multilightbox.css
@@ -18,15 +18,30 @@
}
.mlb-main {
- margin-top: 20px;
- width: 80%;
- margin-right: auto;
- margin-left: auto;
+ width: 100%;
+ height: 100%;
position: relative;
}
-.mlb-image {
+.mlb-image-wrapper {
+ position: absolute;
+ top: 50px;
+ left: 0px;
+ right: 0px;
+ bottom: 50px;
+}
+
+.mlb-image-inner-wrapper {
+ display: table;
width: 100%;
+ height: 100%;
+}
+
+.mlb-image {
+ display: table-cell;
+ width: 100%;
+ height: 100%;
+ vertical-align: middle;
}
.mlb-image img {
@@ -35,14 +50,24 @@
margin-left: auto;
}
+.mlb-pre-image {
+ position: absolute;
+ top: 0px;
+ height: 32px;
+ width: 100%;
+}
+
+.mlb-post-image {
+ position: absolute;
+ bottom: 0px;
+ height: 32px;
+ width: 100%;
+}
+
.mlb-controls {
- margin-right: auto;
- margin-left: auto;
- width: 80%;
- min-height: 32px;
+ height: 32px;
+ width: 100%;
border-bottom: 1px solid #7d7c81;
- margin-bottom: 40px;
- position: relative;
}
.mlb-close {
@@ -51,10 +76,6 @@
width: 32px;
height: 32px;
border-right: 1px solid #7d7c81;
- border-bottom: 1px solid #7d7c81;
- position: absolute;
- bottom: -1px;
- left: -32px;
}
.mlb-fullscreen {
--
To view, visit https://gerrit.wikimedia.org/r/95081
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I200684a19c190444587f520595186e9ae5afbea6
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MultimediaViewer
Gerrit-Branch: master
Gerrit-Owner: MarkTraceur <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
