Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/161364
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, 28 insertions(+), 21 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/64/161364/1
diff --git a/less/content/hacks.less b/less/content/hacks.less
index 4cdebd7..b51af37 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/2) {
+ // Center images than might be less than the screen width
+ // Image will appeared 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..dfbf3ac 100644
--- a/less/content/main.less
+++ b/less/content/main.less
@@ -251,8 +251,13 @@
//
// Styleguide 1.4.
ul.gallery {
+ list-style: none;
+ max-width: 100%;
+
.gallerybox {
- display: inline-block;
+ display: block;
+ float: left;
+ max-width: 100%;
.thumb {
img {
@@ -261,6 +266,14 @@
}
}
+ > div {
+ max-width: 100%;
+
+ > .thumb {
+ max-width: 100%;
+ }
+ }
+
.gallerytext {
overflow: hidden;
padding: 2px 4px;
--
To view, visit https://gerrit.wikimedia.org/r/161364
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I6b56a0f6f041aa629c01c3f858862b747808c483
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
