Page MenuHomePhabricator

[wmf.17-regression] A notice on the Special:ContentTranslation overlaps personal header controls
Closed, ResolvedPublic

Description

In enwiki (wmf.17)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 19 2018, 12:33 AM

Interesting case.

This happens because code for dashboard specifies which text it wants to display (this one - not overridden), but there is no specific message defined for translation view, so it defaults to this overridden message. This behavior was present on wmf.16, I think, but header was not blocked.

The real problem is how sidebar on the right is positioned and that should be fixed with this new knowledge in mind.

Change 409414 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Fix tools column positioning on translation view

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

Petar.petkovic moved this task from Needs Triage to April-June 2018 on the ContentTranslation board.
Petar.petkovic moved this task from Backlog to In Review on the Language-2018-Jan-Mar board.
Pginer-WMF triaged this task as Normal priority.Feb 12 2018, 7:11 AM
santhosh updated the task description. (Show Details)Feb 14 2018, 5:01 AM

@Petar.petkovic Isn't this a problem of we not explicitly setting the maximum container width for the <div class="cx-header__trademark cx-header__trademark--has-wordmark">?

My expected rendering when the text is too long is this. The text get wordwrapped and we should even set an overflow property.

What I meant is this. Is there a reason you think this is not sufficient to fix this issue?

@Petar.petkovic Isn't this a problem of we not explicitly setting the maximum container width for the <div class="cx-header__trademark cx-header__trademark--has-wordmark">?

Not exactly. Even with setting max-width to cx-header__trademark you can see slight misalignment of sidebar and publish header. On smaller screen sizes this becomes much more apparent:

What I meant is this. Is there a reason you think this is not sufficient to fix this issue?

I did not want to forbid any of the cx-header__personal or cx-header__trademark from growing how much they need. Setting explicit max-width (presumably 50% each) will do exactly that and result would affect all the cases, when we want to prevent extremes like this.
Only non-JS way of achieving this alignment is if header stays on one line and doesn't wrap. Some items in personal header can grow unpredictably: username, localized message for "Translate page", ULS autonym name and possibly even wordmark. Three of those are text and subject to text-overflow: ellipsis, but that might look ugly. Again, this is extreme case, but these situations might be more prevalent after T186871.

santhosh added a comment.EditedFeb 15 2018, 5:54 AM

Not exactly. Even with setting max-width to cx-header__trademark you can see slight misalignment of sidebar and publish header.

Yes, there is a mis-alignment and you are trying to address this issue in javascript. But the root cause for that mis-alignemnt is not this custom message. It is a fundamental mistake in the semantic layout of source, translation and tools columns. In old design, we had 3 column concept - 3 equal columns for source, translation and tools.But in new design @Pginer-WMF proposed connecting the the publishing, saving controls close to the source, translation columns. That means, in new design, we have 2 columns. The first column has 2 column wide header, then source and translation columns.
The second column is tools column

This is illustrated below:

Following old layout of elements to achieve the new UI is the root cause for the misalginement issue and adding js to fix this not recommended. This issues will repeat in future. Aso, the tools column is soon going to be a detachable container (See T157216: CX2: Make translation editor layout responsive to adapt to small screens).

So once we refactor the DOM to match the new layout as illustrated above,we can make the whole translation view not affected by the header changes. Making the column layout aware of the header is wrong approach. This issue about layout is a techdebt from re-design and shold be dealt in a separate ticket. I would recommend t fix the custom message issue just with overflow constraints and detach the issue with the source-translation-tools container.

+cc @Pginer-WMF

We have agreed to deal with most of the issues in T187433. I have changed the patch to only limit the width allowed to trademark inside header.

Change 409414 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Limit maximum width of CX header trademark

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

Etonkovidova closed this task as Resolved.Feb 16 2018, 10:23 PM

Checked in cx-testing - with some rudimentary manipulation, it seems that following element fits in without overflowing or pushing down other elements:

<"cx-header__trademark-text">Translate page - Note: This utility is currently restricted to extended confirmed editors on the English Wikipedia, see [[WP:CXT]] for more information

I'm closing this task as Resolved and add it to my list of fixes to check after wmf.22 deployment.


Note: In cx-testing the logo icon is different from the production and betalabs - would be great to have the same icon in cx-testing too.
From enwiki:

<div class="cx-header__trademark cx-header__trademark--has-wordmark"><a href="/wiki/Main_Page"><img src="/static/images/mobile/copyright/wikipedia-wordmark-en.svg" id="cx-header__wordmark" width="116" height="18"></a>