Page MenuHomePhabricator
Create Task
Maniphest T308646

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

Assigned To
thiemowmde
Authored By
ECohen_WMDE
May 18 2022, 9:25 AM
Tags
Referenced Files
F35203831: Screenshot from 2022-06-03 16-49-51.png
Fri, Jun 3, 3:20 PM
F35203585: desc padding.png
Jun 3 2022, 12:52 PM
F35203578: desc nopadding.png
Jun 3 2022, 12:51 PM
F35203576: desc nopadding.png
Jun 3 2022, 12:51 PM
F35151562: Screen Shot 2022-05-18 at 16.00.32.png
May 18 2022, 2:01 PM
F35151556: Screen Shot 2022-05-18 at 15.59.24.png
May 18 2022, 1:59 PM
F35151558: Screen Shot 2022-05-18 at 15.59.08.png
May 18 2022, 1:59 PM
F35151102: Screen Shot 2022-05-18 at 11.26.20.png
May 18 2022, 9:26 AM
View All 10 Files
Subscribers
Aklapper
ECohen_WMDE
lilients_WMDE
WMDE-Fisch

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)

Details

ProjectBranchLines +/-Subject
mediawiki/extensions/VisualEditormaster+3 -7Tighten spacing in VE template dialog
Customize query in gerrit

Related Objects

Event Timeline

ECohen_WMDE created this task.May 18 2022, 9:25 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 18 2022, 9:25 AM
ECohen_WMDE updated the task description. (Show Details)May 18 2022, 9:26 AM
ECohen_WMDE updated the task description. (Show Details)
Maintenance_bot added a project: VisualEditor.May 18 2022, 9:29 AM
ECohen_WMDE updated the task description. (Show Details)May 18 2022, 9:29 AM
Lena_WMDE updated the task description. (Show Details)May 18 2022, 9:38 AM
ECohen_WMDE updated the task description. (Show Details)May 18 2022, 10:03 AM
Lena_WMDE updated the task description. (Show Details)May 18 2022, 10:05 AM
ECohen_WMDE updated the task description. (Show Details)May 18 2022, 10:10 AM
ECohen_WMDE updated the task description. (Show Details)May 18 2022, 1:59 PM
ECohen_WMDE updated the task description. (Show Details)
ECohen_WMDE moved this task from Backlog to Ready for story time on the WMDE-Templates-FocusArea board.May 18 2022, 2:09 PM
• ppelberg moved this task from To Triage to Triaged on the VisualEditor board.May 19 2022, 3:35 PM
Lena_WMDE set the point value for this task to 2.May 25 2022, 1:30 PM
Lena_WMDE moved this task from Ready for story time to Ready for pickup on the WMDE-Templates-FocusArea board.
lilients_WMDE claimed this task.May 31 2022, 3:08 PM
lilients_WMDE added a project: WMDE-TechWish-Sprint-2022-05-25.
lilients_WMDE moved this task from Ready for pickup to In sprint on the WMDE-Templates-FocusArea board.
lilients_WMDE moved this task from Sprint Backlog to Doing on the WMDE-TechWish-Sprint-2022-05-25 board.
lilients_WMDE added a project: Unplanned-Sprint-Work.May 31 2022, 3:19 PM
gerritbot added a comment.Jun 1 2022, 3:59 PM

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

gerritbot added a project: Patch-For-Review.Jun 1 2022, 3:59 PM
lilients_WMDE updated the task description. (Show Details)Jun 1 2022, 4:09 PM
lilients_WMDE moved this task from Doing to Tech Review on the WMDE-TechWish-Sprint-2022-05-25 board.Jun 2 2022, 12:25 PM
WMDE-Fisch added a subscriber: WMDE-Fisch.EditedJun 3 2022, 12:51 PM

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)

WMDE-Fisch added a comment.Fri, Jun 3, 2:03 PM
In T308646#7978974, @WMDE-Fisch wrote:

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 ;-).

PatchDemoBot added a comment.Fri, Jun 3, 2:39 PM

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

lilients_WMDE added a comment.EditedFri, Jun 3, 3:20 PM
  • 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 😎

lilients_WMDE moved this task from Tech Review to UX/PM Review on the WMDE-TechWish-Sprint-2022-05-25 board.Fri, Jun 3, 3:55 PM
awight added a project: WMDE-TechWish-Sprint-2022-06-08.Tue, Jun 7, 11:10 AM
awight moved this task from Sprint Backlog to UX/PM Review on the WMDE-TechWish-Sprint-2022-06-08 board.
Tobi_WMDE_SW removed a project: Unplanned-Sprint-Work.Wed, Jun 8, 8:35 AM
lilients_WMDE moved this task from UX/PM Review to Doing on the WMDE-TechWish-Sprint-2022-06-08 board.Fri, Jun 10, 1:18 PM
lilients_WMDE added a comment.EditedFri, Jun 10, 1:45 PM

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.

gerritbot added a comment.Mon, Jun 13, 7:52 AM

Change 802167 merged by jenkins-bot:

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

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

ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.16; 2022-06-13).Mon, Jun 13, 8:00 AM
ECohen_WMDE added a comment.Mon, Jun 13, 8:22 AM

@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.

Maintenance_bot removed a project: Patch-For-Review.Mon, Jun 13, 8:30 AM
lilients_WMDE moved this task from Doing to UX/PM Review on the WMDE-TechWish-Sprint-2022-06-08 board.Mon, Jun 13, 8:52 AM
WMDE-Fisch added a comment.Mon, Jun 13, 8:53 AM
In T308646#7997774, @ECohen_WMDE wrote:

@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.

lilients_WMDE removed lilients_WMDE as the assignee of this task.Tue, Jun 14, 10:04 AM
lilients_WMDE moved this task from UX/PM Review to Demo on the WMDE-TechWish-Sprint-2022-06-08 board.
lilients_WMDE added a subscriber: lilients_WMDE.
awight moved this task from Demo to Done on the WMDE-TechWish-Sprint-2022-06-08 board.Tue, Jun 21, 8:09 AM
thiemowmde closed this task as Resolved.Wed, Jun 22, 8:23 AM
thiemowmde claimed this task.
Content licensed under Creative Commons Attribution-ShareAlike 3.0 (CC-BY-SA) unless otherwise noted; code licensed under GNU General Public License (GPL) or other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL