Fjalapeno has submitted this change and it was merged.
Change subject: Fix for extra whitespace around small images regression.
......................................................................
Fix for extra whitespace around small images regression.
See the IPA speaker icon on the Obama article.
The issue was the div added around images to allow side-to-side
scrolling of extra-wide images was happening even on images
which were not wider than the screen.
This patch ensures the scrolling div is only added if needed.
T95738
Change-Id: If4570ae47a2f350b547d4b93ec3f62ff58f2d300
---
M Wikipedia/assets/bundle.js
M Wikipedia/assets/styleoverrides.css
M www/js/transforms.js
M www/less/styleoverrides.less
4 files changed, 46 insertions(+), 32 deletions(-)
Approvals:
Fjalapeno: Looks good to me, approved
Bgerstle: Looks good to me, but someone else must approve
jenkins-bot: Verified
diff --git a/Wikipedia/assets/bundle.js b/Wikipedia/assets/bundle.js
index 9f01f88..d029825 100644
--- a/Wikipedia/assets/bundle.js
+++ b/Wikipedia/assets/bundle.js
@@ -584,21 +584,6 @@
}
}
-transformer.register( "addImageOverflowXContainers", function( content ) {
- // Wrap images in a <div style="overflow-x:auto">...</div> so they can
scroll side
- // to side if needed without causing the entire section to scroll side to
side.
- var images = content.querySelectorAll('img');
- for (var i = 0; i < images.length; ++i) {
- var image = images[i];
- var parent = image.parentElement;
- var div = document.createElement( 'div' );
- div.className = 'image_overflow_x_container';
- parent.insertBefore( div, image );
- var oldImage = parent.removeChild( image );
- div.appendChild( oldImage );
- }
-} );
-
// From: http://stackoverflow.com/a/22119674/135557
function findAncestor (el, cls) {
while ((el = el.parentElement) && !el.classList.contains(cls));
@@ -716,4 +701,26 @@
}
} );
+function addImageOverflowXContainer() {
+ var image = this;
+ if (image.width > (window.screen.width * 0.8)){
+ var div = document.createElement( 'div' );
+ div.className = 'image_overflow_x_container';
+ image.parentElement.insertBefore( div, image );
+ var oldImage = image.parentElement.removeChild( image );
+ div.appendChild( oldImage );
+ }
+}
+
+transformer.register( "addImageOverflowXContainers", function( content ) {
+ // Wrap wide images in a <div style="overflow-x:auto">...</div> so they
can scroll
+ // side to side if needed without causing the entire section to scroll
side to side.
+ var images = content.getElementsByTagName('img');
+ for (var i = 0; i < images.length; ++i) {
+ // Load event used so images w/o style or inline width/height
+ // attributes can still have their size determined reliably.
+ images[i].addEventListener('load', addImageOverflowXContainer, false);
+ }
+} );
+
},{"./transformer":6}]},{},[1,2,3,4,5,6,7])
\ No newline at end of file
diff --git a/Wikipedia/assets/styleoverrides.css
b/Wikipedia/assets/styleoverrides.css
index abe7126..2982eb7 100644
--- a/Wikipedia/assets/styleoverrides.css
+++ b/Wikipedia/assets/styleoverrides.css
@@ -1 +1 @@
-a:hover{text-decoration:none
!important}.hatnote{display:none}.content{margin-top:0px}.content_block,.image_overflow_x_container{clear:both;overflow-X:auto}#edit_section_button_0{margin-top:6px}#section_heading_and_content_block_0{margin-top:13px}
\ No newline at end of file
+a:hover{text-decoration:none
!important}.hatnote{display:none}.content{margin-top:0px}.content_block,.image_overflow_x_container{clear:both;overflow-x:auto}#edit_section_button_0{margin-top:6px}#section_heading_and_content_block_0{margin-top:13px}
\ No newline at end of file
diff --git a/www/js/transforms.js b/www/js/transforms.js
index 11e20c9..9de0e91 100644
--- a/www/js/transforms.js
+++ b/www/js/transforms.js
@@ -137,21 +137,6 @@
}
}
-transformer.register( "addImageOverflowXContainers", function( content ) {
- // Wrap images in a <div style="overflow-x:auto">...</div> so they can
scroll side
- // to side if needed without causing the entire section to scroll side to
side.
- var images = content.querySelectorAll('img');
- for (var i = 0; i < images.length; ++i) {
- var image = images[i];
- var parent = image.parentElement;
- var div = document.createElement( 'div' );
- div.className = 'image_overflow_x_container';
- parent.insertBefore( div, image );
- var oldImage = parent.removeChild( image );
- div.appendChild( oldImage );
- }
-} );
-
// From: http://stackoverflow.com/a/22119674/135557
function findAncestor (el, cls) {
while ((el = el.parentElement) && !el.classList.contains(cls));
@@ -268,3 +253,25 @@
}
}
} );
+
+function addImageOverflowXContainer() {
+ var image = this;
+ if (image.width > (window.screen.width * 0.8)){
+ var div = document.createElement( 'div' );
+ div.className = 'image_overflow_x_container';
+ image.parentElement.insertBefore( div, image );
+ var oldImage = image.parentElement.removeChild( image );
+ div.appendChild( oldImage );
+ }
+}
+
+transformer.register( "addImageOverflowXContainers", function( content ) {
+ // Wrap wide images in a <div style="overflow-x:auto">...</div> so they
can scroll
+ // side to side if needed without causing the entire section to scroll
side to side.
+ var images = content.getElementsByTagName('img');
+ for (var i = 0; i < images.length; ++i) {
+ // Load event used so images w/o style or inline width/height
+ // attributes can still have their size determined reliably.
+ images[i].addEventListener('load', addImageOverflowXContainer, false);
+ }
+} );
diff --git a/www/less/styleoverrides.less b/www/less/styleoverrides.less
index 9d45d59..5296598 100644
--- a/www/less/styleoverrides.less
+++ b/www/less/styleoverrides.less
@@ -31,7 +31,7 @@
*/
.content_block, .image_overflow_x_container {
clear:both;
- overflow-X: auto;
+ overflow-x: auto;
}
/* Override top padding on first edit pencil so it roughly aligns with first 2
lines of text. */
--
To view, visit https://gerrit.wikimedia.org/r/203382
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: If4570ae47a2f350b547d4b93ec3f62ff58f2d300
Gerrit-PatchSet: 1
Gerrit-Project: apps/ios/wikipedia
Gerrit-Branch: master
Gerrit-Owner: Mhurd <[email protected]>
Gerrit-Reviewer: BearND <[email protected]>
Gerrit-Reviewer: Bgerstle <[email protected]>
Gerrit-Reviewer: Dr0ptp4kt <[email protected]>
Gerrit-Reviewer: Fjalapeno <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
