Page MenuHomePhabricator

Newcomer tasks: UI enhancement - add a drop-shadow under the header and footer when guidance contents scroll
Closed, ResolvedPublic

Description

Minor visual enhancement to distinguish the sticky header and footer when guidance contents scroll.

Current
Proposed

Proposal
When the help panel content overflows the fixed height available and the user starts scrolling, a slight drop shadow should appear on the header and footer (as illustrated above)
box-shadow:0 0px 2px 0 rgba(0, 0, 0, 0.25);

Event Timeline

RHo created this task.Jun 4 2020, 10:28 PM
Tgr claimed this task.Jun 24 2020, 10:06 PM
Tgr added a comment.Jun 24 2020, 11:52 PM

I don't think it's possible to have a box shadow which is visible at the top and bottom but not at the sides; but hopefully a border will be close enough.

Change 607642 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] [WIP] Add a border above/below guidance when it is cut off due to scrolling

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

Tgr added a comment.Jun 25 2020, 9:00 PM

I don't think it's possible to have a box shadow which is visible at the top and bottom but not at the sides; but hopefully a border will be close enough.

Of course shadow needs to be applied to the header/footer, not the panel itself, d'oh.

Change 607642 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Add a box-shadow above/below guidance when it is cut off due to scrolling

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

Checked in betalabs - looks according to the specs; please review the gifs below:

betalabsproduction (no header shadow)
MMiller_WMF closed this task as Resolved.Jun 30 2020, 5:21 AM

Thank you!