Page MenuHomePhabricator

Adding 'margin-bottom' for widgets which are part of OOUI HorizontalLayout
Closed, ResolvedPublic

Description

We need to add a margin-bottom rule for widgets that are part of OOUI HorizontalLayout in forms, because it looks strange on a small screen.

BeforeAfter

This is best handled in OOUI themes, the specific file for WikimediaUI theme is for example /src/themes/wikimediaui/layouts.less
A solution should be added to both, WikimediaUI and Apex theme.

Event Timeline

Iniquity created this task.Oct 25 2017, 8:16 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 25 2017, 8:16 PM
Iniquity updated the task description. (Show Details)Oct 25 2017, 8:22 PM
Iniquity renamed this task from A little bit 'margin' for OO buttons to A little bit 'margin' for our OO-forms.Oct 25 2017, 8:29 PM
Iniquity updated the task description. (Show Details)
Aklapper added a comment.EditedOct 26 2017, 10:46 AM

@Iniquity: Is this about the buttons only? Or something else?

If someone provides a hint about the place(s) in the code, could this become an good first bug task or a Google-Code-in-2017 task if someone offered to mentor?

Iniquity added a comment.EditedOct 26 2017, 2:34 PM

@Aklapper <input>, <button> only, I think. I hope @Volker_E can help with it.

Good catch, @Iniquity – although having this on my list for a bit, I've never filed a task about it. The better you've started it here. :)

Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptOct 28 2017, 3:13 AM
Legoktm renamed this task from A little bit 'margin' for our OO-forms to A little bit 'margin' for OOUI forms.Oct 28 2017, 3:33 AM
Volker_E renamed this task from A little bit 'margin' for OOUI forms to Adding 'margin-bottom' for widgets which are part of OOUI HorizontalLayout.Oct 28 2017, 4:09 AM
Volker_E triaged this task as Normal priority.
Volker_E added a project: Mobile.
Volker_E updated the task description. (Show Details)
Jdlrobson moved this task from Needs triage to Triaged on the Mobile board.Oct 31 2017, 10:38 PM

@Volker_E Thank you for your answer on this issue :)

nikitavbv added a subscriber: nikitavbv.

I will work on fixing this :)

Well, I checked source code for EditPage and I noticed that those buttons are not part of HorizontalLayout. This forced me to look for alternative solutions. I decided that it would be better just to add a css rule for .editButtons in MediaWiki Core. I will upload a patch soon. @Volker_E, if I am wrong with this - please tell and I will fix this other way.

Change 399416 had a related patch set uploaded (by Phantom42; owner: Phantom42):
[mediawiki/core@master] Add margin-bottom for editButtons (EditPage)

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

Anyway, I will submit a patch for OOUI too, so it fixes issue on second screenshot

Change 399423 had a related patch set uploaded (by Phantom42; owner: Phantom42):
[oojs/ui@master] Add margin-bottom for widgets which are part of OOUI HorizontalLayout

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

@Phantom42 You're right with this approach of splitting into two patch sets. :)
One problem that we currently have though, is that the “non-buttonized” links are set to display: inline leading to such situations with your patch in core:


There might have been another technical reason behind keeping them inline instead of inline-block. Let me double-check that.

@matmarex @Ladsgroup A longer-term solution would be to put those buttons into a HorizontalLayout then. Any foreseeable objections? (@Phantom42 that might be out of reach for the GCI task scope)

that might be out of reach for the GCI task scope

Well, I checked that yesterday. Placing edit buttons into HorizontalLayout shouldn't be difficult. So if @matmarex @Ladsgroup approve this solution, I may do it.

Having .cancelLink and editHelp not set to display: inline-block is actually an open issue as well.
They all carry inline-block child elements already, so it would just simplify the layout.

Also margin-bottom won't be the promised way out due to the historically grown, overly complex DOM construct here.
You might also look into adding vertical-align to workaround the different element's responses to adding margin.

And a last annoyance is the “&nbsp;|” DOM text node addition. In the best of all possible worlds, we would add that via CSS generated content. Again, don't see this as your topic, @Phantom42 – let's keep it simpler for your task to be successfully accomplishable.
We can care about this in a follow-up patch.

Change 399423 merged by jenkins-bot:
[oojs/ui@master] Add margin-bottom for widgets which are part of OOUI HorizontalLayout

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

Change 399416 merged by jenkins-bot:
[mediawiki/core@master] Add margin-bottom for editButtons (EditPage)

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

matmarex closed this task as Resolved.Dec 25 2017, 2:28 PM
matmarex removed a project: Patch-For-Review.