Page MenuHomePhabricator

Improve Page Preview visual design
Closed, ResolvedPublic

Description

Story

As a reader, I want Page Previews to have unified design.

Follow-on story: As a reader, I do not want Page Previews to end abruptly as it is confusing. From T132522:

Currently, there is either a character count or word count limiting hovercard text. In the case that the text ends mid-sentence, there should be an [ellipsis] to indicate there is more text.

Description

Page previews need visual design improvement in the following areas:

  1. Shadow depth.
  2. No border.
  3. Transition time.
  4. Long extract handling.

Acceptance Criteria

  • Reduce the fade-in animation delay from 0.3s to 0.2s.
  • As in the Cards extension, use a pseudo element to fade out a long text extract as truncating multiline text in CSS is hard.
  • Apply the following to all previews (including generic previews).
.mwe-popups {
  box-shadow: box-shadow: 0 30px 90px -20px rgba(0,0,0,0.3), 0px 0px 1px rgba(0,0,0,0.5);
  border: none;
  border-radius: 2px;
}

Before

After

Event Timeline

Is this still assigned to Nirzar? Is this task stalled now until the rewrite?

@Jdlrobson done from design, probably up next on rewrite?

Change 323507 had a related patch set uploaded (by Phuedx):
Visual design tweaks

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

Change 323507 merged by jenkins-bot:
Visual design tweaks

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

@Nirzar: You can take a look at the results of the (first, likely!) visual design tweaks change here: http://reading-web-staging.wmflabs.org/wiki/Special:AllPages

phuedx moved this task from Needs Analysis to Code Review on the Reading-Web-Sprint-86-🔪🦃 board.
phuedx added a subscriber: phuedx.

Hey @phuedx
after using the new shadow in real cases i wanna tweak it a bit to this >

box-shadow: 0 30px 90px -20px rgba(0,0,0,0.3),0px 0px 1px rgba(0,0,0,0.5);

The animation property right now says 0.15s and after trying multiple values i think the 0.2 works best. so changing the timing in .fade-in-up to 0.2s would be nice.

I forgot a css property to .mwe-popups

border-radius:2px;

I've updated the task with @Nirzar's suggestions from T150814#2833030.


The animation property right now says 0.15s and after trying multiple values i think the 0.2 works best. so changing the timing in .fade-in-up to 0.2s would be nice.

I think you're looking at the length of the fade out animation here. The fade in animations are definitely 0.2s. Do you want all animations to be 0.2s?

Change 324399 had a related patch set uploaded (by Phuedx):
previews: More visual design tweaks

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

Change 324399 merged by jenkins-bot:
previews: More visual design tweaks

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

phuedx moved this task from Needs QA to Ready for Signoff on the Reading-Web-Sprint-86-🔪🦃 board.

^ We're skipping Needs QA as the mpga branch is being QA'd as a whole.