Page MenuHomePhabricator

Tighten spacing so that each field is more clearly a cohesive unit (template dialog)
Closed, ResolvedPublic2 Estimated Story Points

Description

All adjustments are to the right hand side/ main editing area.

Mobile and desktop:

  • Remove margin under parameter name labels, between label and description
  • If possible, also remove the padding/margin between the description and the default/example so that it looks like it's part of the same paragraph
  • Increase padding between parameters (between bottom of input field of previous and parameter name label of next) from 16px to 20px

Desktop only:

  • Decrease parameter description <p> lineheight from 1.5 to 1.3
CurrentAfter
Screen Shot 2022-05-18 at 11.14.28.png (756×916 px, 124 KB)
Screen Shot 2022-05-18 at 11.26.20.png (769×918 px, 129 KB)
Screen Shot 2022-05-18 at 15.59.24.png (820×886 px, 119 KB)
Screen Shot 2022-05-18 at 16.00.32.png (827×899 px, 121 KB)

Event Timeline

Change 802167 had a related patch set uploaded (by Svantje Lilienthal; author: Svantje Lilienthal):

[mediawiki/extensions/VisualEditor@master] Tighten spacing in VE template dialog

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

Without padding between descriptions and the other texts it would look something like:

desc nopadding.png (330×653 px, 27 KB)

With padding:
desc padding.png (330×650 px, 23 KB)

Without padding between descriptions and the other texts it would look something like:

desc nopadding.png (330×653 px, 27 KB)

I just realized, that this is the default on the mobile skin. So I guess it's all good and reviewed from design perspective ;-).

Test wiki created on Patch demo by Svantje Lilienthal (WMDE) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/6554179747/w/

  • If possible, also remove the padding/margin between the description and the default/example so that it looks like it's part of the same paragraph

I would say that it looks a little bit strange without any spacing between the description and the other entries below. Also Default is styled like the description and looks like it is part of it now:

Screenshot from 2022-06-03 16-49-51.png (251×717 px, 45 KB)

I would leave the margin as they were before. Or at least only reduce a little bit. Maybe we can also apply the same to mobile?

What would you prefer, @ECohen_WMDE? You can also try it out live at patchdemo.

P.S. in case you are wondering why the Example looks strange at the bottom have a look a this: T309875 😎

Moving this back to doing to make the spacing the same in both mobile and desktop. [Update] Left as is, we can createa a follow-up, if we want to make adjustments.

Change 802167 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Tighten spacing in VE template dialog

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

@lilients_WMDE my day is full, but I am planning to look at this and respond to the questions tomorrow morning. Maybe once you finish, you can create another patch demo with all changes and I'll review there.

@lilients_WMDE my day is full, but I am planning to look at this and respond to the questions tomorrow morning. Maybe once you finish, you can create another patch demo with all changes and I'll review there.

First version should be on beta now.

thiemowmde claimed this task.