Page MenuHomePhabricator

[Bug] Block quotes are truncated instead of faded out
Closed, ResolvedPublic2 Estimated Story Points

Description

Steps to reproduce

  1. Visit https://en.wikipedia.org/wiki/Eye_in_the_Sky_(2015_film)#See_also on the MinervaNeue or Vector skin
  2. Hover over "the Trolley problem."

Expected results

  • Content is faded out.

Actual results

  • Content is abruptly truncated.

In Minerva:

en.wikipedia.org_wiki_Eye_in_the_Sky_(2015_film) (1).png (1×1 px, 382 KB)

In Vector:
Screen Shot 2019-01-07 at 11.55.36 AM.png (403×468 px, 94 KB)

Environments observed

  • Browser version: Chrome v71.0.3578.94
  • OS version: Chrome OS v71.0.3578.94
  • Device model: Pixel Slate
  • Device language: English

Developer notes

The problem is the use of the blockquote tag. We have not specifically thought about how blockquotes should display in preview.
Guidance needed from designers about how to style blockquotes within summaries

QA Results - Beta

ACStatusDetails
1T213107#7324820

QA Results - Prod

ACStatusDetails
1T213107#7339278

Event Timeline

Jdlrobson renamed this task from [Bug] Bulleted lists are truncated instead of faded out to [Bug] Block quotes are truncated instead of faded out.Jan 7 2019, 7:57 PM
Jdlrobson triaged this task as Medium priority.
Jdlrobson edited projects, added Web-Team-Backlog (Design); removed Web-Team-Backlog.
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a project: UI-Standardization.
Jdlrobson added subscribers: Volker_E, Jdlrobson.

Flagging to design. Adjusted description to mention that it is also present in Vector and relates to the blockquote element. cc @Volker_E

Just stumbling across this, same or similar styling like in T114885.

@alexhollender we are focusing on page previews technical/design debt soon. Please consider if this should be a subtask of T284095.

I agree with @Volker_E that it would be great to add some additional quote styling to the preview, however to keep thing simple for now I think we should only address the clipped text issue.

The reference in the description no longer has a block quote in the page preview so I'm not sure where we can test this, but here's how it would look:

image.png (403×468 px, 84 KB)

bwang removed bwang as the assignee of this task.Aug 25 2021, 5:04 PM
bwang moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
bwang subscribed.

Change 714809 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/extensions/Popups@master] Handle clipped blockquote by adding blockquote fade out effect

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

Change 714809 merged by jenkins-bot:

[mediawiki/extensions/Popups@master] Handle clipped blockquote by adding blockquote fade out effect

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

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Find a page that links to a page with blockquotes and hover over the link to view he preview.
✅ AC1: The preview should not be truncated but should fade out per T213107#7296096

Screen Shot 2021-09-01 at 6.47.41 AM.png (866×756 px, 135 KB)

Edtadros subscribed.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Find a page that links to a page with blockquotes and hover over the link to view he preview.
✅ AC1: The preview should not be truncated but should fade out per T213107#7296096

Screen Shot 2021-09-08 at 6.42.43 AM.png (718×763 px, 186 KB)

Screen Shot 2021-09-08 at 6.43.12 AM.png (536×559 px, 138 KB)