Page MenuHomePhabricator

Help panel: design - CTA on mobile view should be circular
Closed, ResolvedPublic

Description

Broken out from T211633:

The Help panel CTA should be in a circular "floating action button" style on mobile.
Expected: The help panel CTA should be a "floating action button" style which has (i) Rounded corners; (ii) Taller height than a standard button; and (iii) Drop shadow to visual distinguish the elevation of the button from the content below it {box-shadow: 0px 1px 2px rgba(0,0,0,.5);}.

Expected mobile:
image.png (360×370 px, 27 KB)
Actual mobile:
image.png (196×220 px, 4 KB)

Related task in OOUI: T210770: Create a rounded button widget for Floating action buttons

Event Timeline

RHo triaged this task as High priority.Jan 4 2019, 6:27 PM

Change 482882 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] Make the CTA round on mobile

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

Change 482882 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Make the CTA round on mobile

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

Change 483312 had a related patch set uploaded (by Catrope; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@wmf/1.33.0-wmf.12] Make the CTA round on mobile

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

Change 483312 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@wmf/1.33.0-wmf.12] Make the CTA round on mobile

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

Stashbot subscribed.

Mentioned in SAL (#wikimedia-operations) [2019-01-10T00:20:09Z] <catrope@deploy1001> Synchronized php-1.33.0-wmf.12/extensions/GrowthExperiments/: Help panel fixes (T212973, T212890, T213186) (duration: 00m 54s)

for @RHo - the icon looks sufficiently round to me (iPhone 6S).

IMG_6669.PNG (1×640 px, 60 KB)