Page MenuHomePhabricator

Modal to create a new page is missing styles
Open, MediumPublic

Description

The view to create a new page (example) is not rendering well on desktop.
The view is not presented as the usual mobile modal view, probably due to some missing styles:

  • The "X" icon is displayed as a small button.
  • The header is not separated from the contents with a line separator.
  • Contents are reaching the very left edge of the surface they are in.

These issues are not happening for the similar modal we are using to show additional details about automatic translation (T212329).


If I recall correctly this was working before, so a regression or upstream changes may be the origin of the regression.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 8 2019, 11:43 AM
Pginer-WMF triaged this task as Medium priority.Mar 8 2019, 11:43 AM

@Jdrewniak I was trying to reuse the overlay in desktop too. It seems I am missing something here. Some styles are missing for vector.

If we cannot have a clean overlay on top of vector skin, the option is to write a oojs-ui dialog in desktop, but that would need to duplicate lot of code and style we wrote for MF creatpageoverlay.

Jdrewniak added a subscriber: Jdlrobson.EditedMar 14 2019, 8:09 AM

To be honest I'm surprised the overlay works in Vector at all. It's my understanding that the Overlay component was designed to work with Minerva and MobileFrontEnd, and as far as I know, it's never been used outside of this context.

You might be able to get it work by including extra styles, as @santhosh mentions, but just be aware that some of those style might be in MobileFrontend, and some might be in Minerva.

I'm pinging @Jdlrobson in case he has experience dealing with this kind of use-case.

Overlay has always been written in such a way that it can be used in Vector, but it's never had a use case, so that's never been prioritised. You'll need to skin it for Vector.

I will happily review a submission that adds mobile.startup/vector.less file to https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/tree/master/skinStyles but @Pginer-WMF you'll need to define a spec for how this should look!

I think the challenge here is that nobody has ever written an experience that spans mobile and desktop.. I know, right!??! OOjs UI comes with a performance penalty on mobile and isn't compatible with our overlay management system there. I'm guessing the skinStyle can copy oojs ui's styles for OO.ui.Dialog - this would also be super helpful for putting us on course for consolidating the two on mobile and desktop.

I have a quick and dirty less file here

1
2.overlay {
3 position: absolute;
4 top: 10em;
5 left: 10em;
6 transition: all 0.25s ease-out 0s;
7 width: 75%;
8 max-height: calc( 100% - 2em );
9 border: 1px solid #a2a9b1;
10 border-radius: 2px;
11 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
12
13 .overlay-content {
14 padding: 1em;
15 outline: 1px solid #c8ccd1;
16 }
17
18 .mw-ui-icon-mf-overlay-close {
19 border: 0;
20 background: none;
21 }
22}
23
24.overlay-header {
25 .overlay-title {
26 padding: 0 1em;
27 cursor: default;
28 text-align: center;
29
30 h2 {
31 border: 0;
32 }
33 }
34
35 ul {
36 float: right;
37 }
38}
39
40.overlay-enabled .overlay,
41.overlay-enabled #mw-mf-page-center {
42 height: auto;
43}
that will make this overly look like an OOUI dialog. But still it will miss the overlay, wont cover the background page from actions.

But, if we have a definition what we need to do, I can either patch MF or add custom style to ExternalGuidance.

If @Pginer-WMF agrees with the styling changes please patch MF (using a Vector skinStyle). I think this would be awesome to have (note you could also replicate OOUI Dialog styles with substituted class names).

This view represents a confirmation step before starting to contribute. I don't have a strong preference about the kind of dialog to use, but I think it make sense to reuse existing solutions instead of inventing a different one. So the to options I was considering are:

A) Mobile dialog, as seen for the example page on a mobile device or when inspected in mobile modeB) Desktop dialog, as in the "process dialog" example from the ooui demos

Since the "Automatic translation" view is based on the mobile layout, I was expecting to support A), but I'm not sure whether the above comments are about how to technically support it, or about supporting some other option.

I have a quick and dirty less file here

1
2.overlay {
3 position: absolute;
4 top: 10em;
5 left: 10em;
6 transition: all 0.25s ease-out 0s;
7 width: 75%;
8 max-height: calc( 100% - 2em );
9 border: 1px solid #a2a9b1;
10 border-radius: 2px;
11 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
12
13 .overlay-content {
14 padding: 1em;
15 outline: 1px solid #c8ccd1;
16 }
17
18 .mw-ui-icon-mf-overlay-close {
19 border: 0;
20 background: none;
21 }
22}
23
24.overlay-header {
25 .overlay-title {
26 padding: 0 1em;
27 cursor: default;
28 text-align: center;
29
30 h2 {
31 border: 0;
32 }
33 }
34
35 ul {
36 float: right;
37 }
38}
39
40.overlay-enabled .overlay,
41.overlay-enabled #mw-mf-page-center {
42 height: auto;
43}
that will make this overly look like an OOUI dialog.

Can you share a screenshot? I tried to apply these in a CSS browser extension and got weird results.

Change 497753 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/MobileFrontend@master] Add vector skin style for overlay

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

I submitted a patch to MF - https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/497753

The overlay in vector skin looks like below. Let us iterate from here to improve, @Jdlrobson, I am less familiar with the MF, so please review and help with suggestions.

santhosh moved this task from Backlog to In Review on the ExternalGuidance board.

Change 497753 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Add vector skin style for overlay

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

santhosh moved this task from In Review to Done on the ExternalGuidance board.Apr 18 2019, 5:36 AM