Page MenuHomePhabricator

Alternative MT selection: adjust layout and style
Closed, ResolvedPublic

Description

As part of the "Pick a sentence" step (T251551) of the Section Translation mobile editor, an option to select alternative MT options is provided.

In the current implementation, the layout needs adjustment. Implementation shows a panel that is not taking the whole screen width. It was intended to be full width, with a grey background and the options should be shown as cards.

SpecImplementation
Pick a sentence - MT Options.png (722×375 px, 57 KB)
Screenshot 2020-09-17 at 14.38.42.png (764×591 px, 132 KB)

This ticket is a follow-up of T259503: Pick a sentence: Support alternative MT selection

Event Timeline

Pginer-WMF triaged this task as Medium priority.Sep 17 2020, 4:34 PM
Pginer-WMF created this task.

Change 640075 had a related patch set uploaded (by Nik Gkountas; owner: Nik Gkountas):
[mediawiki/extensions/ContentTranslation@master] SX Sentence Selector: Fix layout for alternative MT selection

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

Change 640075 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] SX Sentence Selector: Fix layout for alternative MT selection

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

Jpita subscribed.

@Pginer-WMF looks good now or still not the same as the spec?

specimplementation
image.png (722×375 px, 49 KB)
image.png (753×440 px, 35 KB)

@Pginer-WMF looks good now or still not the same as the spec?

specimplementation
image.png (722×375 px, 49 KB)
image.png (753×440 px, 35 KB)

Looks good in general. The most notable difference is the background that being white makes it hard to distinguish the cards. @ngkountas would it be possible to adjust the background to be Base80 instead? Seems a simple change that can be done as part of the ticket. If it hides some complexity we can create as separate task.

There is another minor difference in the "empty sentence" visual treatment, but we can leave it as is for now and check how well it works to just have the empty space.

Change 645366 had a related patch set uploaded (by Nik Gkountas; owner: Nik Gkountas):
[mediawiki/extensions/ContentTranslation@master] SXTranslationSelector: Nest styles under parent class to increase specificity

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

@Pginer-WMF looks good now or still not the same as the spec?

specimplementation
image.png (722×375 px, 49 KB)
image.png (753×440 px, 35 KB)

This is happening because of CSS rules conflict. Fixed in above patch.

Change 645366 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] SXTranslationSelector: Increase specificity to apply background color

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