Page MenuHomePhabricator

Adjust alignment for robot icon and "Automatic translation" label
Closed, ResolvedPublic

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:

Screenshot 2019-02-08 at 11.44.33 2.png (428×157 px, 21 KB)

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:

Screenshot 2019-01-21 at 13.54.30.png (907×504 px, 22 KB)

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

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

image.png (1,495×137 px, 16 KB)

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

image.png (1,495×137 px, 16 KB)

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

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