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

Nirzar created this task.Nov 15 2016, 11:31 PM
Restricted Application added a subscriber: Aklapper. ยท View Herald TranscriptNov 15 2016, 11:31 PM
Nirzar updated the task description. (Show Details)Nov 15 2016, 11:49 PM
ovasileva triaged this task as High priority.Nov 16 2016, 1:01 PM
ovasileva updated the task description. (Show Details)
ovasileva updated the task description. (Show Details)Nov 18 2016, 1:43 PM

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

Nirzar removed Nirzar as the assignee of this task.Nov 23 2016, 5:10 PM

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

phuedx claimed this task.Nov 24 2016, 6:27 PM
phuedx updated the task description. (Show Details)Nov 24 2016, 7:18 PM

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 reassigned this task from phuedx to Nirzar.
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;
phuedx updated the task description. (Show Details)EditedNov 30 2016, 9:15 AM

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

signed off from design

thanks @phuedx looking sharp!

Nirzar removed Nirzar as the assignee of this task.Nov 30 2016, 9:45 PM

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

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

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

Nirzar updated the task description. (Show Details)Dec 6 2016, 6:26 PM