Page MenuHomePhabricator

Design: Function editor, redefine separation between fields and blocks.
Closed, ResolvedPublic

Assigned To
Authored By
gengh
Oct 10 2022, 12:51 PM
Referenced Files
F36077680: image.png
Jan 9 2023, 5:37 PM
F36077676: image.png
Jan 9 2023, 5:37 PM
F36077667: image.png
Jan 9 2023, 5:37 PM
F36077642: image.png
Jan 9 2023, 5:37 PM
F36076860: image.png
Jan 9 2023, 3:17 PM
Subscribers

Description

Description

In mobile function editor, the separation between fields and language blocks is unclear, and it makes function creation process a bit confusing.
An example:

Screenshot 2022-10-10 at 14-49-15 Create a new ZObject - Wikifunctions.png (2×402 px, 123 KB)

Devices

  • Desktop
  • Small screens/mobile

Design proposal

Figma file https://www.figma.com/file/nUPU2V5n4llBx7XfiLKosw/T320410?node-id=0%3A1&t=dzsmMNQT9OggCzE4-1

First visit

image.png (1×1 px, 393 KB)

Add a second (or nth) input

image.png (1×1 px, 371 KB)

Add labels in another language

image.png (1×1 px, 339 KB)

Remove first input

image.png (1×1 px, 318 KB)


Completion checklist

Event Timeline

gengh renamed this task from Design: Function editor, define separation between fields and blocks. to Design: Function editor, redefine separation between fields and blocks..Oct 10 2022, 12:51 PM
gengh created this task.
gengh moved this task from To triage to Phase θ – Throttling on the Abstract Wikipedia team board.
gengh added a project: WikiLambda Front-end.

Here's a first design proposal for how we could improve the layout and the spacing for the function definition page on mobile:

  1. Add separators between sections
  2. Use the default Codex components whenever possible, e.g.
  3. Set spacing (margins and paddings) on a base 8 grid (4, 8, 16, 24)

image.png (1×1 px, 405 KB)

If this looks reasonable, and in scope with the given task, I'll go ahead and put together the different variants!

AAlhazwani-WMF added a subscriber: DVrandecic.

The task description has been updated! cc @DVrandecic for general feedback, and @gengh for engineering (:

Approved. To be implemented through T326656