mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-11-17 04:43:18 +00:00
Merge "Change above-the-fold layout - step 3"
This commit is contained in:
jenkins-bot
Gerrit Code Review
commit
d096a73b36
|
|
@ -1,8 +1,12 @@
|
|||
// Height of the area of the metadata bar which is visible without scrolling.
|
||||
@metadatabar-above-fold-height: 82px;
|
||||
@metadatabar-above-fold-height: 86px;
|
||||
|
||||
// Height of the same area in fullscreen mode (which can be slightly less since it has less controls).
|
||||
@metadatabar-above-fold-fullscreen-height: 64px;
|
||||
// adjust for @metadatabar-below-fold-pushup-height wide bottom padding - that area will be overlapped
|
||||
// by the revealed part of the below-the-fold content
|
||||
@metadatabar-above-fold-inner-height: @metadatabar-above-fold-height - @metadatabar-below-fold-pushup-height;
|
||||
|
||||
// Height of the top part of the "below-fold" content which is actually above the fold, as a scrolling affordance
|
||||
@metadatabar-below-fold-pushup-height: 30px;
|
||||
|
||||
// Height of the progress bar
|
||||
@progress-bar-height: 14px;
|
||||
|
|
|
|||
|
|
@ -56,25 +56,21 @@
|
|||
height: auto;
|
||||
color: #333333;
|
||||
background-color: #ffffff;
|
||||
min-height: (@metadatabar-above-fold-height + 1);
|
||||
min-height: (@metadatabar-above-fold-inner-height + 1);
|
||||
z-index: 1005;
|
||||
}
|
||||
|
||||
// above-the-fold part of the metadata panel
|
||||
.mw-mmv-above-fold {
|
||||
width: 100%;
|
||||
height: @metadatabar-above-fold-height;
|
||||
height: @metadatabar-above-fold-inner-height;
|
||||
// min-height is used when the height is changed to auto to display long texts, to make sure the layout
|
||||
// is not messed up wheen the text is short and does not fill the available place. It is also used by
|
||||
// Javascript to get the "default" height.
|
||||
min-height: @metadatabar-above-fold-height;
|
||||
min-height: @metadatabar-above-fold-inner-height;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
.jq-fullscreened & {
|
||||
height: @metadatabar-above-fold-fullscreen-height;
|
||||
min-height: @metadatabar-above-fold-fullscreen-height;
|
||||
}
|
||||
// make sure there is no content in the part which is overlapped by the revealed part of the below-fold content
|
||||
padding-bottom: @metadatabar-below-fold-pushup-height;
|
||||
|
||||
.mw-mmv-untruncated & {
|
||||
height: auto;
|
||||
|
|
|
|||
|
|
@ -1 +1,33 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><path fill="#929497" d="M62.621 17.368c-6.036-6.042-14.072-9.368-22.625-9.368-8.546 0-16.582 3.326-22.632 9.368-6.042 6.043-9.364 14.083-9.364 22.632s3.322 16.589 9.364 22.621c6.05 6.043 14.086 9.379 22.632 9.379 8.553 0 16.589-3.336 22.625-9.379 6.045-6.032 9.379-14.072 9.379-22.621s-3.334-16.589-9.379-22.632zm-12.144 37.75l-13.673-13.651v-23.401h5.145v21.243l12.161 12.168-3.633 3.641z"/></svg>
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
width="80"
|
||||
height="80"
|
||||
viewBox="0 0 80 80"
|
||||
id="svg2">
|
||||
<metadata
|
||||
id="metadata10">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs8" />
|
||||
<path
|
||||
d="M 64.741719,15.24625 C 58.139844,8.637812 49.350469,5 39.995625,5 30.648437,5 21.859062,8.637812 15.241875,15.24625 8.6334375,21.855781 5,30.649531 5,40 5,49.350469 8.6334375,58.144219 15.241875,64.741719 21.859062,71.35125 30.648437,75 39.995625,75 49.350469,75 58.139844,71.35125 64.741719,64.741719 71.353437,58.144219 75,49.350469 75,40 75,30.649531 71.353437,21.855781 64.741719,15.24625 z M 51.459219,56.535313 36.504375,41.604531 V 16.009687 h 5.627344 v 23.234532 l 13.301094,13.30875 -3.973594,3.982344 z"
|
||||
id="path4"
|
||||
style="fill:#929497" />
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 519 B After Width: | Height: | Size: 1.3 KiB |
55
resources/mmv/ui/img/uploader-ltr.svg
Normal file
55
resources/mmv/ui/img/uploader-ltr.svg
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
width="85"
|
||||
height="80"
|
||||
id="svg2">
|
||||
<metadata
|
||||
id="metadata16">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs14" />
|
||||
<g
|
||||
transform="matrix(1.6614596,0,0,1.6614596,-73.590709,-26.97237)"
|
||||
id="g3008">
|
||||
<path
|
||||
d="m 77.735565,53.958696 0,-11.374448 H 70.228429 L 80.692921,32.574733 V 22.110241 H 48.616978 c -4.54978,0 -4.322291,3.867312 -4.322291,4.094801 v 32.303433 h 31.165988 c 4.54978,0 4.777268,-4.549779 4.777268,-4.549779 h -2.502378 z"
|
||||
id="path3"
|
||||
style="fill:#8e9093" />
|
||||
<path
|
||||
d="m 57.034069,32.119755 c 1.364934,0 2.729868,1.137445 2.729868,2.729868 0,1.364934 -1.137445,2.729867 -2.729868,2.729867 -1.364934,0 -2.729867,-1.137444 -2.729867,-2.729867 0.227489,-1.592423 1.364933,-2.729868 2.729867,-2.729868 z"
|
||||
id="path5"
|
||||
style="fill:#ffffff" />
|
||||
<circle
|
||||
cx="444.5"
|
||||
cy="379.5"
|
||||
r="1.2"
|
||||
transform="matrix(2.2748896,0,0,2.2748896,-943.0074,-828.69849)"
|
||||
id="circle7"
|
||||
style="fill:#ffffff" />
|
||||
<path
|
||||
d="m 62.493804,49.863894 c -4.094801,0 -7.962113,-1.364933 -10.237003,-3.639823 -0.682467,-0.682467 -0.682467,-1.592423 0,-2.047401 0.682467,-0.682467 1.592423,-0.682467 2.047401,0 1.819911,1.819912 5.004757,2.729868 8.189602,2.729868 3.184846,0 6.369691,-1.137445 8.189603,-2.729868 0.682467,-0.682467 1.592423,-0.454978 2.047401,0 0.682467,0.682467 0.454978,1.592423 0,2.047401 -2.27489,2.502379 -6.142202,3.639823 -10.237004,3.639823 z"
|
||||
id="path9"
|
||||
style="fill:#ffffff" />
|
||||
<path
|
||||
d="m 81.661879,51.699079 8.619227,0 0,-11.46882 5.171538,0 -9.193844,-8.810768 -9.768459,8.810768 5.171538,0 z"
|
||||
id="Shape_6_"
|
||||
style="fill:#8e9093" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
55
resources/mmv/ui/img/uploader-rtl.svg
Normal file
55
resources/mmv/ui/img/uploader-rtl.svg
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
width="80"
|
||||
height="80"
|
||||
id="svg2">
|
||||
<metadata
|
||||
id="metadata16">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs14" />
|
||||
<g
|
||||
transform="matrix(1.5559847,0,0,1.5559847,-68.918929,-22.720744)"
|
||||
id="g3008">
|
||||
<path
|
||||
d="m 62.009885,53.958696 0,-11.374448 h 7.507136 L 59.052529,32.574733 V 22.110241 h 32.075943 c 4.54978,0 4.322291,3.867312 4.322291,4.094801 V 58.508475 H 64.284775 c -4.54978,0 -4.777268,-4.549779 -4.777268,-4.549779 h 2.502378 z"
|
||||
id="path3"
|
||||
style="fill:#8e9093" />
|
||||
<path
|
||||
d="m 82.711381,32.119755 c -1.364934,0 -2.729868,1.137445 -2.729868,2.729868 0,1.364934 1.137445,2.729867 2.729868,2.729867 1.364934,0 2.729867,-1.137444 2.729867,-2.729867 -0.227489,-1.592423 -1.364933,-2.729868 -2.729867,-2.729868 z"
|
||||
id="path5"
|
||||
style="fill:#ffffff" />
|
||||
<circle
|
||||
cx="444.5"
|
||||
cy="379.5"
|
||||
r="1.2"
|
||||
transform="matrix(-2.2748896,0,0,2.2748896,1082.7528,-828.69849)"
|
||||
id="circle7"
|
||||
style="fill:#ffffff" />
|
||||
<path
|
||||
d="m 77.251646,49.863894 c 4.094801,0 7.962113,-1.364933 10.237003,-3.639823 0.682467,-0.682467 0.682467,-1.592423 0,-2.047401 -0.682467,-0.682467 -1.592423,-0.682467 -2.047401,0 -1.819911,1.819912 -5.004757,2.729868 -8.189602,2.729868 -3.184846,0 -6.369691,-1.137445 -8.189603,-2.729868 -0.682467,-0.682467 -1.592423,-0.454978 -2.047401,0 -0.682467,0.682467 -0.454978,1.592423 0,2.047401 2.27489,2.502379 6.142202,3.639823 10.237004,3.639823 z"
|
||||
id="path9"
|
||||
style="fill:#ffffff" />
|
||||
<path
|
||||
d="m 58.083571,51.699079 -8.619227,0 0,-11.46882 -5.171538,0 9.193844,-8.810768 9.768459,8.810768 -5.171538,0 z"
|
||||
id="Shape_6_"
|
||||
style="fill:#8e9093" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -25,7 +25,9 @@
|
|||
* @extends mw.mmv.ui.Element
|
||||
* @constructor
|
||||
* @param {jQuery} $container The container for the panel (.mw-mmv-post-image).
|
||||
* @param {jQuery} $aboveFold The always-visible part of the metadata panel (.mw-mmv-above-fold).
|
||||
* @param {jQuery} $aboveFold The brighter headline of the metadata panel (.mw-mmv-above-fold).
|
||||
* Called "aboveFold" for historical reasons, but actually a part of the next sibling of the element
|
||||
* is also above the fold (bottom of the screen).
|
||||
* @param {Object} localStorage the localStorage object, for dependency injection
|
||||
* @param {mw.mmv.Config} config A configuration object.
|
||||
*/
|
||||
|
|
@ -154,7 +156,7 @@
|
|||
} )
|
||||
.addClass( 'mw-mmv-title' );
|
||||
|
||||
this.title = new mw.mmv.ui.TruncatableTextField( this.$titlePara, this.$title );
|
||||
this.title = new mw.mmv.ui.TruncatableTextField( this.$titlePara, this.$title, { max: 180, small: 140 } );
|
||||
this.title.setTitle(
|
||||
mw.message( 'multimediaviewer-title-popup-text' ),
|
||||
mw.message( 'multimediaviewer-title-popup-text-more' )
|
||||
|
|
@ -687,7 +689,7 @@
|
|||
this.title.grow();
|
||||
this.creditField.grow();
|
||||
if ( this.aboveFoldIsLargerThanNormal() && !noScroll ) {
|
||||
this.scroller.scrollIntoView( this.$datetimeLi, 500 );
|
||||
this.scroller.scrollIntoView( this.description.$imageDescDiv, 500 );
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -709,7 +711,8 @@
|
|||
* calling revealTruncatedText().
|
||||
*/
|
||||
MPP.aboveFoldIsLargerThanNormal = function () {
|
||||
return this.$aboveFold.height() > parseInt( this.$aboveFold.css( 'min-height' ), 10 );
|
||||
return this.$aboveFold.height() > parseInt( this.$aboveFold.css( 'min-height' ), 10 ) ||
|
||||
this.$credit.height() > parseInt( this.$aboveFold.css( 'padding-bottom' ), 10 );
|
||||
};
|
||||
|
||||
mw.mmv.ui.MetadataPanel = MetadataPanel;
|
||||
|
|
|
|||
|
|
@ -4,9 +4,10 @@
|
|||
@info-box-color: #FFFFFF;
|
||||
@info-box-border-color: #DDDDDD;
|
||||
@info-box-border-shadow-color: #C9C9C9;
|
||||
|
||||
@secondary-text-color: rgb(136, 136, 136);
|
||||
|
||||
@fold-separator-border-width: 1px;
|
||||
|
||||
.mw-mmv-info-box {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
|
|
@ -28,7 +29,12 @@
|
|||
}
|
||||
.mw-mmv-credit {
|
||||
margin: 0;
|
||||
padding: 5px 0;
|
||||
color: #555;
|
||||
padding: 0 0 5px;
|
||||
font-size: 0.85em;
|
||||
&.empty {
|
||||
height: 0.85em;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-mmv-title {
|
||||
|
|
@ -36,16 +42,35 @@
|
|||
max-width: 60%;
|
||||
}
|
||||
|
||||
|
||||
.mw-mmv-image-metadata {
|
||||
width: 100%;
|
||||
background-color: #f5f5f5;
|
||||
position: relative;
|
||||
padding-top: 10px;
|
||||
margin-top: -@metadatabar-below-fold-pushup-height;
|
||||
border-top: @fold-separator-border-width solid #ddd;
|
||||
background-color: #f5f5f5;
|
||||
padding-top: 4px;
|
||||
|
||||
.jq-fullscreened & {
|
||||
// Make sure content fits into the screen. This assumes no paddings.
|
||||
height: @metadatabar-below-fold-pushup-height - @fold-separator-border-width;
|
||||
overflow: hidden;
|
||||
}
|
||||
.jq-fullscreened .mw-mmv-untruncated & {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.jq-fullscreened .mw-mmv-image-metadata {
|
||||
display: none;
|
||||
.mw-mmv-author:before {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
content: ' ';
|
||||
margin-right: 5px;
|
||||
background-size: contain;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(img/user-ltr.svg);
|
||||
}
|
||||
|
||||
.mw-mmv-image-desc-div {
|
||||
|
|
@ -64,7 +89,7 @@
|
|||
}
|
||||
|
||||
@littlefont: 0.85em;
|
||||
@mediumfont: 1em;
|
||||
@mediumfont: 0.95em;
|
||||
|
||||
.mw-mmv-caption,
|
||||
.mw-mmv-image-desc {
|
||||
|
|
@ -107,7 +132,9 @@
|
|||
|
||||
&.mw-mmv-username-li:before {
|
||||
/* @embed */
|
||||
background-image: url(img/user-ltr.svg);
|
||||
background-image: url(img/uploader-ltr.svg);
|
||||
width: 18px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&.mw-mmv-location-li:before {
|
||||
|
|
|
|||
|
|
@ -13,18 +13,7 @@
|
|||
@button-text-color: rgb(136, 136, 136);
|
||||
|
||||
float: right;
|
||||
margin-top: @metadatabar-above-fold-height - ( @button-height + 2 * @button-vertical-padding );
|
||||
.jq-fullscreened & {
|
||||
margin-top: @metadatabar-above-fold-fullscreen-height - ( @button-height + 2 * @button-vertical-padding );
|
||||
}
|
||||
.mw-mmv-untruncated & {
|
||||
margin-top: 0;
|
||||
border: 0;
|
||||
|
||||
.mw-mmv-stripe-button-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
margin-top: @metadatabar-above-fold-inner-height - ( @button-height + 2 * @button-vertical-padding );
|
||||
|
||||
.unselectable;
|
||||
font-size: 1.25em;
|
||||
|
|
@ -56,9 +45,6 @@
|
|||
}
|
||||
&.has-label:before {
|
||||
margin-right: 0.25em;
|
||||
.mw-mmv-untruncated & {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.mw-mmv-description-page-button,
|
||||
|
|
@ -66,7 +52,8 @@
|
|||
&.mw-mmv-description-page-button:visited {
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
margin: 0.5em 1em;
|
||||
padding: 7px 16px;
|
||||
margin: 7px 10px;
|
||||
}
|
||||
|
||||
&.mw-mmv-description-page-button.mw-mmv-repo-button-commons:before {
|
||||
|
|
|
|||
|
|
@ -133,12 +133,12 @@
|
|||
} );
|
||||
|
||||
QUnit.test( 'Fullscreen mode', 8, function ( assert ) {
|
||||
var lightbox = new mw.mmv.LightboxInterface(),
|
||||
var buttonOffset, panelBottom,
|
||||
oldRevealButtonsAndFadeIfNeeded,
|
||||
lightbox = new mw.mmv.LightboxInterface(),
|
||||
viewer = new mw.mmv.MultimediaViewer(),
|
||||
oldFnEnterFullscreen = $.fn.enterFullscreen,
|
||||
oldFnExitFullscreen = $.fn.exitFullscreen,
|
||||
oldRevealButtonsAndFadeIfNeeded,
|
||||
buttonOffset;
|
||||
oldFnExitFullscreen = $.fn.exitFullscreen;
|
||||
|
||||
stubScrollTo();
|
||||
|
||||
|
|
@ -186,12 +186,16 @@
|
|||
|
||||
lightbox.buttons.revealAndFadeIfNeeded = $.noop;
|
||||
|
||||
assert.ok( !lightbox.panel.$imageMetadata.is( ':visible' ), 'Image metadata is hidden' );
|
||||
panelBottom = $('.mw-mmv-post-image').position().top + $('.mw-mmv-post-image').height();
|
||||
|
||||
assert.ok( panelBottom === $(window).height(), 'Image metadata does not extend beyond the viewport' );
|
||||
|
||||
// Exiting fullscreen
|
||||
lightbox.buttons.$fullscreen.click();
|
||||
|
||||
assert.ok( lightbox.panel.$imageMetadata.is( ':visible' ), 'Image metadata is visible' );
|
||||
panelBottom = $('.mw-mmv-post-image').position().top + $('.mw-mmv-post-image').height();
|
||||
|
||||
assert.ok( panelBottom > $(window).height(), 'Image metadata extends beyond the viewport' );
|
||||
assert.ok( !lightbox.isFullscreen, 'Lightbox knows that it\'s not in fullscreen mode' );
|
||||
|
||||
// Unattach lightbox from document
|
||||
|
|
|
|||
Loading…
Reference in a new issue