jenkins-bot has submitted this change and it was merged.
Change subject: Optimise galleries on mobile and tablets
......................................................................
Optimise galleries on mobile and tablets
* Remove unnecessary hacks for galleries
* Apply a hack that is mobile specific to improve rendering on browsers
that support media queries and are less than half the tablet viewport width
Bug: 70684
Change-Id: I6b56a0f6f041aa629c01c3f858862b747808c483
---
M less/content/hacks.less
M less/content/main.less
2 files changed, 29 insertions(+), 22 deletions(-)
Approvals:
Kaldari: Looks good to me, approved
jenkins-bot: Verified
diff --git a/less/content/hacks.less b/less/content/hacks.less
index 4cdebd7..dcd6328 100644
--- a/less/content/hacks.less
+++ b/less/content/hacks.less
@@ -27,26 +27,6 @@
}
}
-/* Galleries */
-/* See
https://www.mediawiki.org/wiki/Help:Images#Rendering_a_gallery_of_images */
-
-ul.gallery {
- width: 100% !important;
- max-width: 100% !important;
-
- li.gallerybox {
- width: auto !important;
-
- > div {
- width: auto !important;
-
- > div.thumb {
- width: auto !important;
- }
- }
- }
-}
-
// FIXME: Remove when filetoc is stripped from file pages a la table of
contents (toc)
#filetoc,
// FIXME: remove when SkinMobile::doEditSectionLink present in cached pages
@@ -114,3 +94,17 @@
margin: 0 0 0.8em !important;
width: auto !important;
}
+
+// Hacks to render galleries better on mobile
+@media all and (max-width: @wgMFDeviceWidthTablet) {
+ // Center images that might be less than the screen width.
+ // Image will appear centered and caption will take up full screen.
+ .gallery {
+ .gallerybox {
+ width: 100% !important;
+ div {
+ width: 100% !important;
+ }
+ }
+ }
+}
diff --git a/less/content/main.less b/less/content/main.less
index 749eb1d..78e7fc3 100644
--- a/less/content/main.less
+++ b/less/content/main.less
@@ -251,13 +251,25 @@
//
// Styleguide 1.4.
ul.gallery {
+ list-style: none;
+ max-width: 100%;
+
.gallerybox {
- display: inline-block;
+ display: block;
+ float: left;
+ max-width: 100%;
.thumb {
img {
display: block;
- margin: 0 auto;
+ }
+ }
+
+ > div {
+ max-width: 100%;
+
+ > .thumb {
+ max-width: 100%;
}
}
@@ -265,6 +277,7 @@
overflow: hidden;
padding: 2px 4px;
word-wrap: break-word;
+ font-size: .8em;
}
}
}
--
To view, visit https://gerrit.wikimedia.org/r/161364
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I6b56a0f6f041aa629c01c3f858862b747808c483
Gerrit-PatchSet: 6
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: Awjrichards <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Kaldari <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
