Page MenuHomePhabricator

Responsive adjustments to language selection in translation dashboard lists
Open, MediumPublic

Description

After the responsive adjustments (T319181), the lists of suggestions, in-progress, and translated articles adapt to different screen sizes.

MobileTablet VerticalTablet HorizontalDesktop
bn.m.wikipedia.org_w_index.php_title=Special_ContentTranslation&from=en&to=bn(Wiki Mobile) (1).png (568×320 px, 46 KB)
bn.m.wikipedia.org_w_index.php_title=%E0%A6%AC%E0%A6%BF%E0%A6%B6%E0%A7%87%E0%A6%B7_%E0%A6%AC%E0%A6%BF%E0%A6%B7%E0%A6%AF%E0%A6%BC%E0%A6%AC%E0%A6%B8%E0%A7%8D%E0%A6%A4%E0%A7%81_%E0%A6%85%E0%A6%A8%E0%A7%81%E0%A6%AC%E0%A6%BE%E0%A6%A6&from=en&to=.png (1×768 px, 158 KB)
bn.m.wikipedia.org_w_index.php_title=Special_ContentTranslation&from=en&to=bn(Wiki Tablet) (1).png (767×1 px, 103 KB)
bn.m.wikipedia.org_w_index.php_title=Special_ContentTranslation&from=en&to=bn(Wiki Desktop).png (900×1 px, 163 KB)

Currently, the language pair selector to filter the list presents some issues about the (a) language pair position and (b) list of languages dialog adjustments

A) Language pair position

For all screen sizes, it is shown in a separate line below the list header. This layout was only intended for narrow sizes. On other sizes, the selector is expected to be integrated in the list header.

Based on the specs from the responsive adjustments (T319181), the mockups below show the expected layout for the selector:

MobileTablet VerticalTablet HorizontalDesktop
Mobile.png (896×320 px, 89 KB)
TabletV.png (784×768 px, 88 KB)
TabletH.png (768×1 px, 75 KB)
Desktop - Suggestions.png (900×1 px, 115 KB)

B) List of languages dialog adjustments

For sizes largest than narrow, the list of languages is shown as a dialog. Currently, it is not possible to close the dialog by taping outside. When the list of languages is shown as a dialog it is expected that an overlay with the standard style (Base20 (#54595D), Opacity: 85% ) is provided behind the dialog, and tapping on it closes the dialog.

List of languages responsive behaviour based on T253303:

Wide screenNarrow screen
Group.png (572×904 px, 41 KB)
mobile.png (669×348 px, 34 KB)

Event Timeline

Pginer-WMF triaged this task as Medium priority.Nov 21 2023, 3:52 PM
Pginer-WMF created this task.
Pginer-WMF moved this task from Backlog to Core workflow on the SectionTranslation board.