Page MenuHomePhabricator
Create Task
Maniphest T209909

VE's advanced template dialog (transclusion dialog) is unusable on mobile
Closed, ResolvedPublic
Actions

Assigned To
None
Authored By
matmarex
Nov 20 2018, 4:32 AM
Tags
Referenced Files
F27262747: 0338D56B-92B4-4398-A00C-93F74D7F5E7C.MP4
Nov 20 2018, 4:55 AM
F27262759: image.png
Nov 20 2018, 4:55 AM
F27262757: image.png
Nov 20 2018, 4:55 AM
F27262761: image.png
Nov 20 2018, 4:55 AM
F25465553: image.png
Nov 20 2018, 4:32 AM
Subscribers
Aklapper
Esanders
gerritbot
• iamjessklein
matmarex
• ppelberg
Volker_E

Description

VE's advanced template dialog (a.k.a. transclusion dialog) is unusable on mobile. You can see this by clicking "Show options" while inside the template dialog, or by editing a multi-template transclusion.

In T202575#4538134, @Esanders wrote:

This is an outlined BooketLayout from OOUI.

(…)

A more thorough fix would be to make the outlined BookletLayout more responsive. This would have the benefit of fixing all other such layouts on the site in mobile, such as our template editor in advanced mode (after clicking show options) and probably others outside VE:

image.png (757×440 px, 34 KB)

Related Objects
Search...

Event Timeline

matmarex created this task.Nov 20 2018, 4:32 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 20 2018, 4:32 AM
matmarex added a parent task: T202575: Epic: Be more consistent about dialog availability in mobile visual editor.Nov 20 2018, 4:42 AM
gerritbot subscribed.Nov 20 2018, 4:42 AM

Change 474839 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[oojs/ui@master] Make BookletLayout usable on mobile

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

gerritbot added a project: Patch-For-Review.Nov 20 2018, 4:42 AM
matmarex added a comment.Nov 20 2018, 4:55 AM

After the patch, interacting with a multi-template transclusion on mobile (iPhone SE):

0338D56B-92B4-4398-A00C-93F74D7F5E7C.MP43 MBDownload

When opening a dialog, the menu in closed, appears as a "sidebar"
image.png (568×320 px, 22 KB)
After tapping the sidebar, the menu opens, pushing content off-screen
image.png (568×320 px, 20 KB)
After picking an option, or tapping the content, the menu closes again
image.png (568×320 px, 23 KB)
matmarex added a subtask: T209912: BookletLayout is unusable on mobile.Nov 20 2018, 5:08 AM
matmarex moved this task from Incoming to Code review on the VisualEditor (Current work) board.Nov 20 2018, 5:25 AM
matmarex mentioned this in T202575: Epic: Be more consistent about dialog availability in mobile visual editor.Nov 20 2018, 5:30 AM
Volker_E mentioned this in T209917: Re-evaluate `-webkit-text-size-adjust` value `none`.Nov 20 2018, 6:08 AM
• iamjessklein added a project: Editing Design.Dec 5 2018, 10:52 PM
• iamjessklein mentioned this in T209911: Page options dialog (meta dialog) is unavailable in mobile VE.
JTannerWMF moved this task from 📚 Backlog to 📢 To Do on the Editing Design board.Dec 5 2018, 10:55 PM
JTannerWMF moved this task from Code review to Design and Product Analytics review on the VisualEditor (Current work) board.
• iamjessklein claimed this task.Dec 5 2018, 10:57 PM
• iamjessklein removed a project: Editing Design.Dec 12 2018, 2:01 PM
• iamjessklein added a subscriber: Volker_E.

@matmarex - Thanks for taking the time to layout the problem and solution so succinctly here. I don't think this is quite ready for merging. The main concern that I have is the sidebar. Although this works perfectly fine and seems logical, it's introducing a new pattern for the user to orient themselves to in what's currently already an environment full of information overload. I would iterate on a solution to match the main toolbar patterns.

All of my other concerns around this are fixable things:

  • Lots of clicks - @Volker_E mentioned this over in T209911#4815657 - but our goal with the whole refresh right now is to reduce the number of clicks, and this is introducing a lot more interaction.
  • focusing issues
  • state changes etc.
JTannerWMF added a project: Editing Design.Dec 12 2018, 3:00 PM
JTannerWMF edited projects, added VisualEditor; removed VisualEditor (Current work).Dec 12 2018, 5:44 PM
JTannerWMF moved this task from To Triage to FY 18-19 Q3/Q4 on the VisualEditor board.
Volker_E added a comment.Dec 12 2018, 6:39 PM

@iamjessklein So do you agree that the sidebar menu elements should remain clickable as menu items even when shortened in “close” state?

  • What are the focusing issues and state changes you mentioned?
• ppelberg subscribed.Mar 7 2019, 2:29 AM
JTannerWMF moved this task from 📢 To Do to 📐 Doing on the Editing Design board.Mar 18 2019, 3:52 PM
• iamjessklein moved this task from 📐 Doing to ⚠️ Blocked on the Editing Design board.Mar 19 2019, 1:28 PM
• iamjessklein added a comment.Mar 19 2019, 1:31 PM

Moving this to Blocked/Waiting because I suspect that the work in T211255 will impact the decisions on this.

• marcella added a project: VisualEditor-MediaWiki-Mobile.Mar 26 2019, 1:43 PM
matmarex closed subtask T209912: BookletLayout is unusable on mobile as Declined.May 19 2019, 7:59 PM
matmarex mentioned this in T209912: BookletLayout is unusable on mobile.
matmarex removed a parent task: T202575: Epic: Be more consistent about dialog availability in mobile visual editor.May 23 2019, 7:08 PM
matmarex added a comment.May 23 2019, 7:20 PM

With T209912 being declined, we should think about a design for this from scratch.

matmarex removed • iamjessklein as the assignee of this task.Jun 11 2019, 4:56 PM
matmarex moved this task from FY 18-19 Q3/Q4 to Freezer on the VisualEditor board.
matmarex removed projects: Editing Design, Patch-For-Review.
matmarex added a subscriber: • iamjessklein.

(We talked about this one today and it doesn't seem like we're going to work on it anytime soon.)

matmarex mentioned this in T274554: Make sidebar responsive.Sep 13 2021, 4:59 PM
awight added a subtask: T274554: Make sidebar responsive.Sep 14 2021, 7:22 AM
thiemowmde closed subtask T274554: Make sidebar responsive as Resolved.Sep 14 2021, 9:05 AM
matmarex closed this task as Resolved.May 19 2022, 10:58 PM

This has been fixed by WMDE's work on the template dialog (T274554).

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and 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