Page MenuHomePhabricator

Complete layout adjustments after removing map from language list
Closed, ResolvedPublic

Description

Context
Recent observations suggest that the map from the language list in the ULS is not being used. It was removed as part of T64637.
Since the map is no longer present, the designs can be adjusted to make the selector more compact.

Tracked in GitHub as issue #128

Important: This card tracks the work to be done in iterations for ULS redesigns related to the language selector. This is the main card to be used for the design reference. Please don't close this without checking with the Language Engineering team.

Narrative
As a user, I can select languages without the map getting in the way, so that the main entry points (search and common languages) become more prominent.

Acceptance Criteria

  1. The map and header elements (title, close button) are removed (see mockups below).
  2. The list is styled according to the compact style by default, additional styling will be added to follow the Agora style (see mockups below).
  3. When the list is connected to an element, the connection triangle is preserved (see mockups below).
  4. When used as part of ULS settings, the context of the selection and a way to go back will be integrated into the search area (see mockups below)

Design notes

A compact version is already available (as extra CSS rules that hide the map) since it is needed for other contexts. Having the current CSS for the compact version is expected to simplify the refactoring, and will avoid having to deal with two slightly different versions. In addition, the compact version worked well when testing the prototypes for compact links.

Some mockups reflecting the final result under different conditions.

Regular list:

When the list is attached to an element (e.g., connected to the cog icon, or a button) a triangle points to the element:

When the list is used as part of the ULS settings (note the option to go back, and the change in the search placeholder):

More on user observations:

  • Use speaking Hindi and Bengali picks the languages she knows form "Common languages" section (view).
  • When "common languages" is lacking, the user from [1], uses search to pick Bengali (view).
  • English-speaking user picks Nepali by searching (view)
  • French-speaker changes to Brezoneg from the "Common languages" section (view).
  • Users making use of the compact version of the language list with no other issues that the search being less powerful since was client-side only (view)

Deliverables
https://github.com/wikimedia/jquery.uls/pull/152 - Removes the map and reorganizes the code

Event Timeline

Arrbee created this task.Dec 30 2014, 9:49 AM
Arrbee raised the priority of this task from to Needs Triage.
Arrbee updated the task description. (Show Details)
Arrbee updated the task description. (Show Details)
Arrbee set Security to None.
Arrbee added a subscriber: Arrbee.
Arrbee reopened this task as Open.Dec 30 2014, 2:09 PM
Arrbee updated the task description. (Show Details)
Pginer-WMF renamed this task from Remove map from language list and redesign the language selector to Complete layout adjustments after removing map from language list.Jan 5 2015, 9:05 AM
Pginer-WMF updated the task description. (Show Details)
Amire80 triaged this task as Normal priority.Jan 12 2015, 12:08 PM
Arrbee updated the task description. (Show Details)Apr 20 2016, 5:30 AM

The graphical assets needed for the back arrow (SVG/PNG and LTR/RTL):

I am working on this as low priority.

Change 285593 had a related patch set uploaded (by Santhosh):
WIP update jquery.uls and adapt styling

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

Change 285593 merged by jenkins-bot:
Update jquery.uls and adapt styling

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

I am submitting some small clean-ups to GitHub now, but no need to wait for that.

Arrbee moved this task from QA to Done on the Language-Q4-2016-Sprint 3 board.May 31 2016, 6:35 AM
Arrbee closed this task as Resolved.Jun 1 2016, 5:12 PM