Page MenuHomePhabricator

Monthly convert: some display issues
Closed, ResolvedPublic1 Estimate Story Points

Description

Hey @Ejegg, while testing a few of the variants yesterday, we found some display issues that are particularly noticeable on my smallish iphoneSE in portrait mode. The specific problems vary a bit, based off the variant, but I think it'd be best to implement tweaks that work everywhere.

I haven't had time to look into the CSS and suggest specific changes, and was hoping that just sharing screenshots would give y'all something to work with. If the most efficient answer is for us to provide updated CSS/HTML, we can do that! For the sake of my own time, I wanted to just get this card started.

cc'ing @EWilfong_WMF, @Pcoombe and @jbolorinos-ctr.


control (preview, submit a one-time donation to trigger modal)


issues:

  • Modal unnecessarily narrow
  • Yes, I'll donate .. custom monthly amount link isn't entirely visible because the modal isn't scrollable

variant 003 (preview, submit a one-time donation to trigger modal)


issues:

  • Lots of the content isn't visible and the modal isn't scrollable

variant 006 (preview, submit a one-time donation to trigger modal)


issues:

  • Same as in first screenshot (narrow, Other amount link overflows
  • Buttons overflow modal

Details

Related Gerrit Patches:
mediawiki/extensions/DonationInterface : masterAdd with to .mc-edit-amount for smaller screen resolutions.
mediawiki/extensions/DonationInterface : masterAdd width to monthly convert modal and donate monthly button.

Event Timeline

spatton created this task.Nov 20 2019, 7:39 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 20 2019, 7:39 PM
Cstone claimed this task.Nov 21 2019, 8:00 PM

Taking a look at the control banner and I think these CSS changes would resolve the issues noted:

  1. On .mc-modal-screen, add "overflow-y: scroll;" and remove "height: 100vh;". That height declaration is overriding "height: 100%;" and I don't think we want that.
  2. On .mc-modal, change the width declaration to "width: 90%;". This gets overridden by a media query at 800px, which is no problem.

For the button issue noted in variant 006, I would recommend solving it by changing the styles on .mc-button to the following:

font-size: 18px;
line-height: 1.2;
width: 100%;
height: 100%;
max-width: 240px;

This could be add globally to all variations with monthly convert.

Change 552341 had a related patch set uploaded (by Cstone; owner: Cstone):
[mediawiki/extensions/DonationInterface@master] Add width to monthly convert modal and donate monthly button.

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

Change 552341 merged by jenkins-bot:
[mediawiki/extensions/DonationInterface@master] Add width to monthly convert modal and donate monthly button.

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

Hey @spatton this is deployed now. Could you test on your iphone? It looks okay on my LG.

Thanks @Cstone, I can confirm that the modal is now scrollable and works better on my iphone5, thank you! I am seeing an issue with the Donate Monthly button copy wrapping to a new line and being partially hidden if I select Yes, I'll donate monthly, but for another amount. Screenshot:

It doesn't look like @EWilfong_WMF's suggestions for .mc-button were implemented:

font-size: 18px;
line-height: 1.2;
width: 100%;
height: 100%;
max-width: 240px;

Agreed, @spatton. And to be clear, you can add this CSS to the .mc-button class and then I *think* you can get rid of the .mc-edit-amount .mc-button CSS altogether.

This looks good to me otherwise!

Change 553211 had a related patch set uploaded (by Cstone; owner: Cstone):
[mediawiki/extensions/DonationInterface@master] Add with to .mc-edit-amount for smaller screen resolutions.

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

Change 553211 merged by jenkins-bot:
[mediawiki/extensions/DonationInterface@master] Add with to .mc-edit-amount for smaller screen resolutions.

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

@spatton @EWilfong_WMF

I just deployed an update to this. I didn't make all the changes as it started messing up the button on the non responsive version.

I was able to replicate what the iphone SE looks like on Safari on my mac and this last change fixed the button there.

@spatton have you been able to test this?

Cstone set the point value for this task to 1.Dec 10 2019, 9:05 PM
DStrine closed this task as Resolved.Jan 7 2020, 9:04 PM