Page MenuHomePhabricator

Fix hovercard preferences alignment issues [polish]
Closed, ResolvedPublic2 Estimated Story Points

Description

Hovercard has alignment issues.

As a designer, I would like to fix those issues. and clean the modal window.

Here's a final mock

hovercard-pref.png (1×2 px, 557 KB)

Sidenote: something I worked on because I found it easy to fix and helps me sleep better at night :)

My gerrit account is expired, @Volker_E will submit the patch on my behalf.

Suggested testing. Latest stable versions, LTR+RTL:

  • Chrome desktop
  • Firefox desktop
  • Safari desktop
  • Internet Explorer 11
  • Edge

added scope

  • replace the "Okay" button from next step of "disable" screen to use the same button as save but just change the button label to "done"

Event Timeline

Change 295946 had a related patch set uploaded (by VolkerE):
Hovercards: Improve layout of settings dialog to design spec

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

Nirzar renamed this task from Fix hovercard preferences alignment issues to Fix hovercard preferences alignment issues [Polish].Jun 24 2016, 4:29 PM
Jdlrobson subscribed.

Please remove this tag when the patch is ready for review again. Thank you!

dr0ptp4kt renamed this task from Fix hovercard preferences alignment issues [Polish] to Fix hovercard preferences alignment issues [polish].Jul 25 2016, 4:25 PM
MBinder_WMF set the point value for this task to 2.Jul 25 2016, 4:31 PM
dr0ptp4kt removed the point value for this task.
dr0ptp4kt set the point value for this task to 2.Jul 25 2016, 4:40 PM

The patch needs improvement. Please test this before submitting again. Also the unit test fails due to jQueryInit.withArgs stubbing. We should aim to remove that from the tests:

Screen Shot 2016-07-26 at 1.45.42 PM.png (404×647 px, 20 KB)

Screen Shot 2016-07-26 at 1.38.28 PM.png (304×629 px, 21 KB)

+ @Ckoerner heads up, when this is merged it should be in production about a week or two later for your announcement on Tech News.

Splitting the text changes to a different patch.

@jhobs let's hold off on text changes. no text changes to the existing settings. sorry about the confusion but i made this mock a long time back :)

Jdlrobson added subscribers: bmansurov, phuedx.

I paired with @jhobs and @Nirzar and we got the design sorted.

There are just some Jenkins complaints that unfortunately were not addressed before end of day. @jhobs / @phuedx / @bmansurov would be great if you could get this fixed and merged together before standup tomorrow.

I won't be available to sign off on this, and am booked fully for the rest of the normal business hours today. Please do test on all (or nearly all if we genuinely have no access to some of them even through a testing service of on-person device) of the UAs above and sign off once appropriate.

I believe this will be a group collaboration of engineers (@Jdlrobson @phuedx @bmansurov ) and @Nirzar for signoff.

I seem to recall there being IE-related (and maybe Edge?) issues with assets, so that probably will need a little extra attention.

@jhobs let me know when this is on staging or beta or anywhere i can use.

Change 295946 merged by jenkins-bot:
Hovercards: Improve layout of settings dialog to design spec

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

@Nirzar you should be able to signoff using this link: https://en.wikipedia.beta.wmflabs.org/wiki/25thjuneChrome
@bmansurov I think it's up to you to sign off from the engineering end since @Jdlrobson merged.

Jdlrobson added a subscriber: jhobs.

@Nirzar should sign this off.

Looks good on

  • Chrome, Firefox, and Safari on OSX.
  • MS Edge on Win 10, 14.14393.

Here is how it looks on IE 11 / Win 7.

Screen Shot 2016-08-10 at 17.32.11.png (1×2 px, 225 KB)

Looks similarly bad on IE 9 / Win 7.

Screen Shot 2016-08-10 at 17.44.58.png (1×2 px, 264 KB)

@bmansurov out of curiosity is that a regression or did it always look like that?

Here is how it looks current in stable on IE 9 / Win 7:

Screen Shot 2016-08-10 at 17.52.57.png (1×2 px, 605 KB)

Change 304242 had a related patch set uploaded (by Jhobs):
Fix settings dialog layout on IE

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

^ Turned out to be a pretty simple fix on IE11. @bmansurov could you check again on IE9?

I only asked because I recently wiped the vagrant instance I had on Windows. I'm setting up a new one now, but if anyone else can test this to expedite the process, go ahead.

Edit: I didn't realize Microsoft made these available for Mac-compatible VMs too. Should be able to test sooner then.

You may want to use ngrok to make your Mac vagrant server public and access it from the downloaded virtual image if you don't want to mess with networking between the host and the guest OSes.

Change 304242 merged by jenkins-bot:
Fix settings dialog layout on IE

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

You may want to use ngrok to make your Mac vagrant server public and access it from the downloaded virtual image if you don't want to mess with networking between the host and the guest OSes.

On the VirtualBox VMs provided by Microsoft the host is accessible from the guest using the 10.0.2.2 IP address, e.g. I access my MediaWiki-Vagrant instance running on the host by navigating to http://10.0.2.2:8080/ on the guest.

10.0.2.2 might actually be assigned by the default networking configuration provided by VirtualBox – it certainly rings a bell…

Great info, @phuedx. I thought the default IP depended on the way you configure networking: bridged, etc. Good to have this info handy.

Tested on the browsers mentioned above. Also tested on the latests Firefox, and Chrome on Win 7. Good work, everyone.