Page MenuHomePhabricator

PagePreviews settings dialog doesn't adjust position on resize/orientation change
Closed, ResolvedPublic3 Estimated Story Points

Description

When user clicks settings cog in Page Preview we show nice dialog window that allows enable/disable PagePreviews feature.
This popup is centered vertically and horizontally but it doesn't reposition on window resize/orientation change.

Because settings popup has fixed width it's possible to hide popup by resizing window, after that there is no possibility to close
the modal as clicking overlay doesn't dismiss the popup. The only way to close the popup is to or resize it or refresh the page.

I'm able to reproduce this issue all browsers and some tablets [Galaxy Note 10.1 allows you to hover over link].

initial renderon resize
Screen Shot 2018-02-06 at 20.05.05.png (917×1 px, 332 KB)
Screen Shot 2018-02-06 at 20.05.14.png (800×887 px, 236 KB)

Event Timeline

ovasileva triaged this task as Medium priority.Feb 3 2017, 2:02 PM
ovasileva moved this task from Incoming to Triaged but Future on the Web-Team-Backlog board.
ovasileva set the point value for this task to 2.May 16 2017, 3:22 PM
Jdlrobson lowered the priority of this task from Medium to Low.Aug 17 2017, 2:40 PM
ovasileva raised the priority of this task from Low to Medium.Feb 6 2018, 5:26 PM
ovasileva changed the point value for this task from 2 to 3.

This should be blocked on T165036 which should hopefully make this a lot easier.

I think we can opt-in for a CSS only solution to this problem and avoid the dependancy on T165036.

Page previews is only enabled for Grade A browsers, which all support the flex-box layout model, which makes vertical/horizontal centring + resizing easy.

Using flex-box, this would largely avoid conflicts with T165036 as it would only require removing a few lines here and adding some CSS.

Change 410492 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/extensions/Popups@master] Centering settings dialog and overlay

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

Change 410492 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Centering settings dialog and overlay

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

ABorbaWMF subscribed.

Looking good to me. Tried on https://en.wikipedia.beta.wmflabs.org/wiki/Math on a number of different browsers. The popup is staying nice and centered.