Page MenuHomePhabricator

Gallery in an article displays too much white space above the img's caption
Closed, ResolvedPublic

Description

Below are two examples of Gallery in articles seen here:
https://he.m.wikipedia.org/wiki/%D7%AA%D7%9C_%D7%90%D7%91%D7%99%D7%91-%D7%99%D7%A4%D7%95#.D7.94.D7.9E.D7.AA.D7.90.D7.A8_.D7.94.D7.A2.D7.99.D7.A8.D7.95.D7.A0.D7.99

. There is too much white space between the img itself and img's caption

This impacts mobile web and apps.
Per Vibha, for Mobile apps we need just to eliminate the extra white space.


It seems an inline style on a div is being added to create this margin "margin:49.5px auto;" that should be eliminated or at least made Vector specific.

Event Timeline

Etonkovidova raised the priority of this task from to Needs Triage.
Etonkovidova updated the task description. (Show Details)
Etonkovidova added a subscriber: Etonkovidova.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 16 2015, 10:22 PM

Do you mean build 4.1.0? We haven't released 4.1.1 yet. If you intended to reference build 4.1.0, please update this and other tickets' descriptions (e.g. T96201)

Deskana triaged this task as Normal priority.Apr 20 2015, 9:41 PM
Deskana added a subscriber: Deskana.
KLans_WMF set Security to None.Apr 20 2015, 9:41 PM
KLans_WMF moved this task from Needs Triage to Bug Backlog on the Wikipedia-iOS-App-Backlog board.
KLans_WMF removed a subscriber: Deskana.

@Vibhabamba Should we have the gray background that desktop has?

KLans_WMF raised the priority of this task from Normal to High.Apr 27 2015, 9:47 PM

@bearND - Thanks for checking. No grey background or bounding boxes are required. The desktop treatment is quite dated. if we fix the whitespace, it will look just fine.

BTW, the examples are from the Hebrew version of the Tel Aviv article, in the section titled המתאר העירוני.

I took a quick look at the DOM.
This element is responsible for the extra white space:
<div style="margin:40px auto;">

Mholloway moved this task from To Do to Doing on the Mobile-App-Sprint-56-Android board.

This is fixed on Android by my changes in T94646.

Mholloway added a comment.EditedMay 15 2015, 2:13 PM

Since T94646 is effectively an epic and no more than 50%* likely to be merged this sprint I'm moving this task back to "doing" for a separate fix.

*A made-up probability.

Mholloway added a comment.EditedMay 15 2015, 3:11 PM

This can be fixed with 2 additional lines of CSS which are generated by a subset of the changes already merged to the .less files in the MobileApp extension (https://gerrit.wikimedia.org/r/#/c/209588/) to accommodate the ongoing work on T94646.

So, like I said, it's an easy fix, but there are a couple of different ways of going about it in the .less files that generate this code:

(Edited directly for demonstration purposes only!)

diff --git a/wikipedia/assets/styles.css b/wikipedia/assets/styles.css
index 2c0a96f..aaef129 100644
--- a/wikipedia/assets/styles.css
+++ b/wikipedia/assets/styles.css
@@ -208,6 +208,10 @@ ul.gallery .gallerybox > div {
 }
 ul.gallery .gallerybox > div > .thumb {
   max-width: 100%;
+  margin: 0 auto;
+}
+ul.gallery .gallerybox > div > .thumb > div {
+  margin: 0 auto !important;
 }
 ul.gallery .gallerybox .gallerytext {
   overflow: hidden;

Is there someone specific from mobile web, an apps liaison, who we can generally turn to for comment on these kinds of design fixes and whether, say, it's a general fix that should go into MobileFrontend, whether it should live in MobileApps, or whether there are unintended consequences of prospective changes? If not, should there be?

Dbrant added subscribers: phuedx, Jdlrobson, Dbrant.

So, once again, it looks like this is another task that might have made more sense to be handled by MobileFrontend to begin with, especially since it's just a few lines of CSS that would apply equally to mobile web and apps.
@Jdlrobson @phuedx Would you mind evaluating this CSS change, and see it we can get it into MobileFrontend?

Jdlrobson moved this task from 2017-18 Q3 to 2015-16 Q4 on the Readers-Web-Backlog board.

Isn't this the same as T78174 ?
This really shouldn't be something fixed in apps first... but I've told you that before right?

Looking closely no it's a different bug and also impacts mobile web - https://he.m.wikipedia.org/wiki/%D7%AA%D7%9C_%D7%90%D7%91%D7%99%D7%91-%D7%99%D7%A4%D7%95#.D7.94.D7.9E.D7.AA.D7.90.D7.A8_.D7.94.D7.A2.D7.99.D7.A8.D7.95.D7.A0.D7.99 - so please let us fix it in the web first not the app... this hasn't been reported before.

I happily leave it in your hands.

Jdlrobson renamed this task from 4.1.1(85) Gallery in an article displays too much white space above the img's caption to Gallery in an article displays too much white space above the img's caption.May 18 2015, 8:09 PM
Jdlrobson updated the task description. (Show Details)

@KHammerstein can you confirm the same should be done for mobile web?

Mholloway removed Mholloway as the assignee of this task.May 18 2015, 8:12 PM

Any sense of priority of this @JKatzWMF ? Should we be getting this fixed asap?

@Jdlrobson Yes same should be done for mobile web

@KHammerstein sure but I want some idea from Jon Katz about how quick we need to have this fixed by... are we aiming for next Android release? When it is that?

@KHammerstein @Jdlrobson @phuedx Sorry for the late response. I think sam with Kaity can and should prioritize this for mobile web.

Jdlrobson lowered the priority of this task from High to Normal.Aug 12 2015, 6:28 PM
Jdlrobson added a project: MobileFrontend.
Jdlrobson removed a project: Readers-Web-Backlog.

Is this still an issue? I can't replicate.

Using the link in the task description, I can't replicate the bug either.

@bmansurov I see that there is more whitespace on mobile than on desktop version...this is a very low priority to me. Couldn't replicate on apps.

Jdlrobson closed this task as Resolved.Nov 30 2015, 8:45 PM
Jdlrobson claimed this task.

Someone should raise a more specific bug to avoid confusion if there is still some kind of problem otherwise this will just sit in the realms of phabricator and help no one.