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

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

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)