Page MenuHomePhabricator

Hovercard: Drop a shadow on the card
Closed, ResolvedPublic

Description

Drop a shadow on the bottom-right side of the Hovercard.

Event Timeline

Prtksxna raised the priority of this task from to Low.
Prtksxna updated the task description. (Show Details)
Prtksxna added a project: Page-Previews.
Prtksxna changed Security from none to None.

@Jaredzimmerman-WMF Can you add a mock of what you want it to look like?

The current implementation has issues with adding a shadow on the triangle.

normal-text.png (179×341 px, 16 KB)
stupid_stupid_box_shadow.png (223×333 px, 22 KB)
bottom-triangle-text.png (164×328 px, 16 KB)

Yeah thats certainly not a good look, based on how your code is, will either of these work out better? you get a similar enough look with an inner box shadow, and it has the upside of being more consistent with the other controls.

Slice_1.png (1×2 px, 280 KB)

Jared I think, this solution carries half of the same issue that prateek mentioned.
Can we consider doing a regular box shadow (like facebook and twitter) without the grey hard offset?

the shadow I'm proposing is inside, the one from facebook is still outside. Also we're not using soft shadows anywhere else so it could be odd. I thought the issue was we can't have the shadow outside for some reason?

Yeah thats certainly not a good look, based on how your code is, will either of these work out better? you get a similar enough look with an inner box shadow, and it has the upside of being more consistent with the other controls.

Slice_1.png (1×2 px, 280 KB)

I'll try my hand it implementing it this week and let you know how it goes.

Prateek,
Can we try doing a regular drop shadow/ outer glow that applies to the entire card (like the facebook/ national geographic screenshot)

What this will accomplish:
It will create depth between the card and the background.
If i'm correctly understanding, we wont have to deal with the position of the pokey.

Con's:
I have discussed the consistency concern with Jared, but IMO, this seems to be the simplest way to work around the pokey issue and the enormous testing involved.

gerritbot added a subscriber: gerritbot.

Change 140265 had a related patch set uploaded (by Prtksxna):
[wip] core.less: Visual refinement & drop shadow

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

Patch-For-Review

I think this drop shadow is working.
Its giving the modal overlay some depth.
Can you include a full page screenshot, so I can see a good portion of the article text around it?

also cc: @Jaredzimmerman

I think its workable, I still have concerns about inconsistencies but it is solving for the primary issue of making the card clearly stand out from the page body.

There you go @Vibhabamba:

Screen_Shot_2015-01-18_at_10.08.51_PM.png (900×1 px, 354 KB)
Screen_Shot_2015-01-18_at_10.08.54_PM.png (900×1 px, 479 KB)
Screen_Shot_2015-01-18_at_10.08.56_PM.png (900×1 px, 467 KB)
Screen_Shot_2015-01-18_at_10.08.59_PM.png (900×1 px, 362 KB)
Screen_Shot_2015-01-18_at_10.09.01_PM.png (900×1 px, 482 KB)
Screen_Shot_2015-01-18_at_10.09.03_PM.png (900×1 px, 468 KB)

I am happy with this :)

I think this addresses all the issues. Drop Shadow Issue is resolved.

OOjs UI gives its PopupWidget a drop-shadow by default:

normal_PopupWidget (385×747 px, 100 KB)

here is a test with Prtksxna's drop-shadow:

PopupWidget_with_different_drop-shadow (385×747 px, 103 KB)

OOjs UI gives its PopupWidget a drop-shadow by default.

I know, its great! But I don't think I want to transition to it in the near future.
T88882: Move Hovercards to OOjs and OOjs UI (I know you're already subscribed)

Also we're not using soft shadows anywhere else so it could be odd.

We are using soft shadows. The most prominent shadowed UI element on Wikipedia is the notifications pop-up which uses:

box-shadow: 0 3px 8px rgba( 50, 50, 50, 0.35 );

This is a very soft shadow and looks a lot better IMO than the hard-edged shadow.

Change 140265 merged by jenkins-bot:
core.less: Visual refinement & drop shadow

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

Jdlrobson added a subscriber: Jdlrobson.