Page MenuHomePhabricator

Avoid gradient fading on Page Previews, if there is only one line of text in the text summary
Closed, ResolvedPublic1 Estimated Story Points

Description

Problem

Page previews apply gradient fading to text summary even if the summary is one single line.

Previews 001.jpg (446×687 px, 130 KB)

Previews 002.jpg (418×653 px, 97 KB)

Fix

if the text summary is one single line, it means the sentence ends there. there sholdn't be any fading needed

CSS fix

  • Apply min-height to page previews.
  • min height should be 40px
.mwe-popups.mwe-popups-is-not-tall .mwe-popups-extract {
min-height:40px;
}

Event Timeline

Nirzar renamed this task from Avoid gradient fading if there is only one line of text in the text summary to Avoid gradient fading on Page Previews, if there is only one line of text in the text summary.Mar 1 2018, 1:37 AM
ovasileva triaged this task as Medium priority.Mar 1 2018, 11:23 AM

Please add a comment on that CSS rule about why there is a min-height.

min height here refers to the text area

min-height prevents the gradient to be applied to first line, it starts with second line given our line height

Change 417985 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/Popups@master] Give summary a min-height to avoid overlap with gradient.

https://gerrit.wikimedia.org/r/417985

Change 417985 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Give summary a min-height to avoid overlap with gradient.

https://gerrit.wikimedia.org/r/417985

Moving this to QA to test edge cases. @Jdlrobson - where can we test?

https://en.wikipedia.beta.wmflabs.org/wiki/Special:AllPages
(All merged changes automatically go to the beta cluster within 10 minutes). If you need staging let me know as I'll need to manually set that up.

I'm having a little trouble finding a preview that looks like the one in the original description. @Nirzar, what links are you hovering on and on what page? I tried the page in @Jdlrobson comment but I could not find a link to hover on that produced a similar preview.

I am also seeing this but not sure if it is related:
https://en.wikipedia.beta.wmflabs.org/wiki/Dog
This one used to produce a preview

Screen Shot 2018-03-14 at 4.02.39 PM.png (1×2 px, 1 MB)

Template info appears in preview
Screen Shot 2018-03-14 at 4.02.48 PM.png (1×2 px, 2 MB)

Infobox
Screen Shot 2018-03-14 at 4.03.48 PM.png (1×2 px, 1 MB)

Campaignbox
Screen Shot 2018-03-14 at 4.04.18 PM.png (1×2 px, 1 MB)

I was able to find this one on, which looks ok https://en.wikipedia.beta.wmflabs.org/wiki/Special:AllPages

Screen Shot 2018-03-14 at 4.15.35 PM.png (1×2 px, 1 MB)

@ABorbaWMF : Ouch. The previews in your examples are seriously broken. I hope this is not coming into production.

@Vachovec1 @ABorbaWMF this is the beta cluster. As can be seen the pages themselves are broken which is why their previews are broken - https://en.m.wikipedia.beta.wmflabs.org/wiki/Border_Terrier
The beta cluster is not a good place to test summaries :)

https://en.wikipedia.beta.wmflabs.org/wiki/Special:AllPages

10.1093/acprof:oso/9780195314250.003.0001 < this link has a preview that ends in one line at the edge. it doesn't fade into the gradient.

@Nirzar and @Jdlrobson, thanks for the link. I tried that one yesterday but figured it was a hair too short for the gradient to kick in. On my side, I am not seeing the gradient at all on that link. I purged the cache on the page. Let me know if I am missing something.

Screen Shot 2018-03-16 at 2.20.33 PM.png (1×2 px, 1 MB)

image.png (768×1 px, 258 KB)

image.png (768×1 px, 154 KB)

image.png (768×1 px, 141 KB)

You should't be seeing gradient on it. since the sentence or text ends where it ends. if it wraps to second line. it will start showing the gradient. that is intended.

Got it, sorry for the confusion. Looks good to me.

@Dvorapa

image.png (910×1 px, 514 KB)

Fixed on production now.

Macro votecat: looks good