Page MenuHomePhabricator

Adjust alignment for robot icon and "Automatic translation" label
Open, MediumPublic

Description

An "Automatic translation" label and a robot icon are added to externally translated pages (T212202). Currently the vertical alignment and the distance between these elements needs adjustment.

Vertical alignment

The robot seems to be below where it should be:

The difference in size between the element wrapping the icon and the text next to it, makes the icon closer to the bottom of the label than the top as shown here:

That rounding deviation, plus the icon shape having more weight in the bottom, visually it looks to be too low. We may need to mode the icon two pixels up either by adjusting the size of the different elements involved, or making a custom correction.

Separation between icon and label

The robot icon and the label look also too close to each other. The distance should be increased to be 4px instead.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 8 2019, 12:03 PM
Pginer-WMF renamed this task from Vertically adjust the robot icon and "Automatic translation" label to Adjust vertical alignment for robot icon and "Automatic translation" label.Feb 8 2019, 12:04 PM
Pginer-WMF triaged this task as Medium priority.
Pginer-WMF renamed this task from Adjust vertical alignment for robot icon and "Automatic translation" label to Adjust alignment for robot icon and "Automatic translation" label.Feb 25 2019, 1:29 PM
Pginer-WMF updated the task description. (Show Details)
Pginer-WMF added a subscriber: santhosh.

@Pginer-WMF, please provide the correct icon. I can update. I am bit reluctant to add style overrides since every byte added here is critical for initial rendering.

@Pginer-WMF, please provide the correct icon. I can update. I am bit reluctant to add style overrides since every byte added here is critical for initial rendering.

The icon shape is already going from top to bottom edge of the canvas (the blue area above). So adjustments would require a non-standard canvas size. Below I added a 22x22px version in case it helps, but I think that the non-standard size could bring more problems than other approaches.

I used the given image. If you can confirm the below rendering, I can submit a patch

I used the given image. If you can confirm the below rendering, I can submit a patch

I think this is better than what the current alignment. Thanks!

Change 497266 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ExternalGuidance@master] Update the robot icon to fix alignment optically correct

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

santhosh moved this task from Backlog to In Review on the ExternalGuidance board.

Change 497266 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ExternalGuidance@master] Update the robot icon to fix alignment optically correct

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

Change 497266 merged by Santhosh:
[mediawiki/extensions/ExternalGuidance@master] Update the robot icon to fix alignment optically correct

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

santhosh moved this task from In Review to Done on the ExternalGuidance board.Mar 20 2019, 4:20 AM