Page MenuHomePhabricator

Horizontal rule element underneath “Translate this page” should be removed
Closed, ResolvedPublic

Description

The baked-in hr element underneath the “Translate this page” translate header

  • seems unnecessary as the translate header receives a separation by the languages box underneath anyways
  • is not hidden on mobile
  • hard to skin consistently across browsers

Resulting in

MobileDesktop (Vector)

Proposal

Remove it.

Related Objects

Event Timeline

Volker_E created this task.Apr 12 2019, 5:08 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 12 2019, 5:08 PM

@Pginer-WMF for your visibility!

Change 503405 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Translate@master] Remove hr element from page translation header

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

The language bar does not always follow the header.

@Nikerabbit Do you have an in-production example for me?

First example is now invalid, but basically at least two(/three) cases:

  • Pages with <translate> tags, but not marked for translation yet
  • Pages where <languages /> is not placed at the top
  • Wikis where list of languages has been configured to show in the sidebar (translatewiki.net, none in WMF production currently)
Tacsipacsi added a subscriber: Tacsipacsi.EditedJun 1 2019, 5:51 PM

Maybe instead of completely removing the horizontal bar the <hr> tag could be replaced by a bottom border of the above <div>. This would solve the mobile (and print, by the way) issue, and make the HTML code simpler, while causing no visible change on desktop.

.mw-pt-translate-header {
	padding-bottom: .2em;
	border-bottom: 1px solid #a2a9b1;
	margin-bottom: .2em;
}

simulates the current appearance of a <hr>.

I would also question why are the action links hidden on mobile (probably I did it without thinking) and make them not hidden. For print yeah it should be hidden and then the above proposal works.

They got hidden probably because Special:Translate was not so mobile-friendly back then. But now it is, so the link can be unhidden.

Above would also make possible to remove the border without impacting the cases provided by @Nikerabbit.
And the context that bugs design here is the duplicated border, which could be tackled by a sibling selector and negative margin.

Further thoughts should be put into too small font-size (10px below a11y recommendations) of the translate header and probably positioning. But leaving that for Language team considerations and should be tackled in different task.

Restricted Application added a project: UI-Standardization. · View Herald TranscriptOct 17 2019, 4:39 AM
abi_ added a subscriber: abi_.Oct 17 2019, 8:37 AM

Images from local testing,

Page marked for translation

Not marked for translation

Change 503405 merged by jenkins-bot:
[mediawiki/extensions/Translate@master] Remove hr element from page translation header

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

I think this causes double lines on translation pages:

abi_ added a comment.Oct 17 2019, 1:26 PM

I think this causes double lines on translation pages:

Thanks. Working on a patch to fix this.

Change 543850 had a related patch set uploaded (by Abijeet Patro; owner: Abijeet Patro):
[mediawiki/extensions/Translate@master] Remove double horizontal lines from appearing on translation pages

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

Change 543850 merged by jenkins-bot:
[mediawiki/extensions/Translate@master] Remove double horizontal lines from appearing on translation pages

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

abi_ claimed this task.Oct 18 2019, 4:43 AM

Merged, will test after deployment to Twn / Mediawiki and resolve.

abi_ triaged this task as Medium priority.Oct 18 2019, 6:35 AM
abi_ closed this task as Resolved.Oct 31 2019, 11:14 AM

Tested this as part of T236978: Test MLEB 2019.10

Also tested it on Mediawiki.org. Thanks @Volker_E