Page MenuHomePhabricator

coordinates display is broken in the several Wikipedias with the new Vector language button position
Open, HighPublic0 Estimated Story Points

Description

When Legacy Vector is disabled in the preferences, the coordinates in the top right corner of the page overlap with other content.

It's a community-maintained template, so it's not exactly in the new Vector code, but it's so common and special that the developers of the new Vector should probably do something about it :)

Screenshots:

Broken, with the new Vector:

צילום מסך 2021-05-05 ב-15.26.00.png (1×1 px, 649 KB)

Correct, with Legacy Vector:

צילום מסך 2021-05-05 ב-15.26.21.png (1×2 px, 786 KB)

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Izno triaged this task as High priority.May 20 2021, 7:50 PM

And now old Vector.

Bumping priority out of triage because this is live.

image.png (153×1 px, 51 KB)

It's expected that this will break in new Vector as we need to coordinate with editors first via our community liason. Cc @sgrabarczuk who is leading that.

I am not sure why legacy is broken as we have not touched anything I am aware of relating to that... will investigate.

Legacy is likely fixed by https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/693237 and unrelated to the issue with new Vector. Should be fixed by Monday latest.
Test link: https://patchdemo.wmflabs.org/wikis/7066f96f37/w/index.php?title=Crotona+Park&mobileaction=toggle_view_desktop

Lets keep this ticket about modern.

Jdlrobson raised the priority of this task from High to Needs Triage.May 21 2021, 4:02 AM

Since this is a very common use case across wikis, I think it makes sense to introduce a way to explicitly mark a code snippet as a such coordinates link (e.g. by passing it to the {{#coordinates:}} parser function of GeoData, introducing a new extension tag/parser function, or by using indicators with an appropriate semantic tag as I proposed in T75299#6951825), and let skins decide where to put it.

Jdlrobson renamed this task from coordinates display is broken in the English Wikipedia with the new Vector to coordinates display is broken in the several Wikipedias with the new Vector language button position.May 21 2021, 2:18 PM

It's expected that this will break in new Vector as we need to coordinate with editors first via our community liason. Cc @sgrabarczuk who is leading that.

Because there is no way to differentiate between new and old Vector that I know of, there's no way to fix this that makes both new and old variants of the skin happy. Either a) it's time to split new Vector out, b) time to give up on legacy vector for all involved, or c) give me a vector2 somewhere in one of elements toward the top of the DOM.

If you (anyone) can see another way to fix it, I'm ears. (I guess Tacsipacsi's solution might work, but that is also work.)

Since this is a very common use case across wikis, I think it makes sense to introduce a way to explicitly mark a code snippet as a such coordinates link (e.g. by passing it to the {{#coordinates:}} parser function of GeoData, introducing a new extension tag/parser function, or by using indicators with an appropriate semantic tag as I proposed in T75299#6951825), and let skins decide where to put it.

We did briefly consider making GeoData responsible for outputting coordinates in the skin just like we do with indicators for all skins but this would also require coordination to avoid 2 sets of templates.

@Izno there is a class that allows targetting old vector -.skin-vector.skin-vector-legacy

.skin-vector should be used for the newer version. We will have better guidance up shortly.

Ok, I'll take a look at that. (I didn't specifically need skin-vector since these are all styled in their respective skin.css files anyway, not in Common.css.)

Also, I am really sorry that we didn't send out the guidance with the deploy. This whole thing would have been a lot less confusing!

@Tacsipacsi I think your idea is a good one, and I'm going to spend some time thinking about a better long-term solution.

French Wikipedia uses indicators for displaying the coordinates link and they are displaying great.

@Tacsipacsi @Izno is there any reason your projects don't use indicators for displaying coordinates?

Some results from testing coordinates are available in T282543#7098552 and T282543#7099757. It seems that wikis that are using indicators as coordinate templates are not affected by the change. In terms of the pilot wikis, the list that currently has issues with coordinates is:

  • fawiki
  • bnwiki
  • kowiki
  • srwiki
  • trwiki

French Wikipedia uses indicators for displaying the coordinates link and they are displaying great.

@Tacsipacsi @Izno is there any reason your projects don't use indicators for displaying coordinates?

I am not a coords guy. I will ask onwiki.

A little homework done: Asked when it was first introduced. I don't know which of those issues is still an issue. Edokter seemed to think it would function fine.

French Wikipedia uses indicators for displaying the coordinates link and they are displaying great.

Though, spacing seems odd, especially on wikis that don't use tagline (T282027), and a little inconsitent depending on whether page has indicator or not.

In terms of fixing I see several issues. I think the indicator solution is the only one I can recommend right now. The issues with whitespace can easily be addressed without editor involvement at a later date.

Option 1: Use an indicator (Recommended)

In wikis using Lua modules, for example French Wikipedia this is done in the template using titleText = frame:extensionTag( 'indicator', tostring(htmlTitle), { name = 'coordinates' } )

In wikis using raw templates, https://www.mediawiki.org/wiki/Help:Page_status_indicators#Adding_page_status_indicators_in_wikitext can provide guidance

Using indicators will be much more resilient against any future changes to skins and enjoy good support across skins.

Option 2: Adjust absolute positioning (not recommended)

This is not very resilient and will break in different layouts.

Consider pages:

  • which use page status indicators
  • pages which have banners/ site notices
  • pages at lower resolutions for overlap:

Screen Shot 2021-05-24 at 2.37.49 PM.png (374×1 px, 69 KB)

Screen Shot 2021-05-24 at 2.43.11 PM.png (958×2 px, 915 KB)

Screen Shot 2021-05-24 at 2.41.57 PM.png (1×1 px, 759 KB)

.skin-vector.skin-vector-legacy #coordinates { top: 0px; }
.skin-vector #coordinates { top: -20px; }

French Wikipedia uses indicators for displaying the coordinates link and they are displaying great.

@Tacsipacsi @Izno is there any reason your projects don't use indicators for displaying coordinates?

First, the coordinates styles are way older than indicators, they’ve been around at least since 2009. Second, these links look (at least IMO) ugly next to the title (especially with the—default—gadget showing an OSM map toggle, see e.g. https://hu.wikipedia.org/wiki/Budapest), they look much better below it. Which is the case for indicators on new Vector, but not the legacy one.

I'm aware coordinates predate indicators, but thanks for the insight around concerns with the look and feel for legacy Vector. I'm not much of a template expert but is there any technical reason that we couldn't output an indicator AND the link in a page and then using site styles to hide the indicator in legacy, and hide the absolutely positioned link in modern Vector?

From a template programming perspective, I don’t see anything that would make it impossible (although, depending on how the template/module is written, it may require considerable rewriting or copy&paste). I have two concerns, namely accessibility (isn’t duplicating and then hiding content bad for web accessibility? I’m not that much of an expert in this area to tell it for sure) and increasing CSS size (all these CSS should be put in a stylesheet downloaded by all Vector users, although much of it applies only to legacy Vector—maybe there could be a separate stylesheet that’s downloaded only by legacy Vector users? that would help in other cases as well where legacy and new Vector need different CSS).

...

  1. Option 1: Use an indicator (Recommended)

Please see my response here. In short, flagged revs may need to be revised to also use indicators.

In short, flagged revs may need to be revised to also use indicators.

I requested this a long ago in T197912, but since FlaggedRevs doesn’t have a maintainer, nobody did it yet. Maybe Reading Web may do it as part of the Desktop Improvements project? I’d expect the indicator to look and work roughly the same as the new languages dropdown, so actually Reading Web may have the most experience to do it.

On this example https://de.wikipedia.beta.wmflabs.org/wiki/Berlin?useskinversion=2 coordinates are indicators, and the flagged revision indicator is floated to the right. Is that something that could be used on Persian Wikipedia?

Please see my response here. In short, flagged revs may need to be revised to also use indicators.

Also, on Farsi Wikipedia, there's an issue with the coordinates being displayed inline with the content instead of above the content. @Huji, would you be able to check if this is technically possible to be fixed by a user, or is it related to the conflict with the FlaggedRevs? If the first is true, could you fix that?

For what it's worth, I've added display:none; to the FlaggedRevs button in my DOM inspector and the coordinates were still inline with the content. So maybe you could be able to make coordinates display above.

Also, @Mehran, FYI

Jdlrobson set the point value for this task to 0.Jun 21 2021, 6:03 PM

Hi @Huji I saw this diff but that isn't quite what's being asked for here.

Mimicking the HTML e.g. '<div class="mw-indicators">' .. co .. '</div>'; won't have the same effect.

A page indicator is essentially a magic word as documented on https://www.mediawiki.org/wiki/Help:Page_status_indicators

This page demonstrates how this should work:
https://fa.wikipedia.org/wiki/%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1:Jdlrobson/test/%D8%A7%DB%8C%D8%B1%D8%A7%D9%86?languageinheader=1

Wrapping the existing template contents in an indicator tag should be the most straightforward way to do this:

<indicator name="coords">
{{coord|۳۲|N|۵۴|E|display=title}}
</indicator>

@Jdlrobson that does not seem to work properly when used inside the Lua code.

In other words, when I change:

return '<span style="font-size: small;">' .. co .. '</span>';

to:

return '<indicator name="coordinates"><span style="font-size: small;">' .. co .. '</span></indicator>';

The coords do get moved to the top of the page, but the indicator tag also gets displayed in unparsed form in the output of the infobox. See below:

Screen Shot 2021-06-26 at 12.20.54 PM.png (1×566 px, 502 KB)

return '<indicator name="coordinates"><span style="font-size: small;">' .. co .. '</span></indicator>';

The coords do get moved to the top of the page, but the indicator tag also gets displayed in unparsed form in the output of the infobox. See below:

Try using frame:extensionTag to add the indicator.

@JJMC89 thanks; I am not great with Lua but your pointer was enough. Now it seems to work. Here is an example.

Can you kindly review my change to mw:Help:Page status indicators and make sure it is correct? It will also need to be made translatable.

Can you kindly review my change to mw:Help:Page status indicators and make sure it is correct? It will also need to be made translatable.

Looks good. I've merged it with the wikitext section to show equivalent syntaxes.

Thanks.

Now this seems to work properly with Vector (legacy and improved). However, when I try Timeless, the coord indicator is just not shown at all. See this example. Going to the browser console and looking for an element with id=coordinates, I can find it in the upper-left corner of the page but it seems to be hidden behind the dropdown menu for user actions. Any idea why the indicator is being rendered there?

Thank you @JJMC89 and @Huji for working this out and huge wiki love for updating the documentation!

Of course!
It seems like we managed to fix the issues just in time for the latest changes in Desktop Improvements to go into effect; namely, the new display location for the language links. See screenshot below from fa:تهران which happens to show the protection indicator, the good article indicator, the coord indicator, and the FlaggRev box all working nicely alongside each other:

image.png (298×1 px, 97 KB)

I think this is done? Or are we now looking at wikis outside the test wikis?

I think this is done? Or are we now looking at wikis outside the test wikis?

The display of Vientiane in the English Wikipedia is still broken as described in the initial description. Is this something to be fixed locally?

Izno added a subscriber: TheDJ.

@TheDJ prepared a change to the relevant module onwiki which would remove the conflict but has previously expressed a desire not to be the one to deal with the fallout.

TBH not sure I want to either, which is why I haven't merged it.

@Izno @TheDJ is there a way I can support you both with this to make it a less controversial change? For example, are there code changes I could make to allow you to isolate this change to the modern Vector skin and keep the existing behaviour on legacy?

One thing that was considered, was making coordinate rendering a responsibility of the Extension:Geo skin rather than on-wiki templates for example. Another might be some kind of change to the indicator system to allow you to render on different lines and get the same visual effect.

Right now there's a technical problem stopping it that I need to spend time looking at, and then I probably just have to bite the bullet. :^)

I think that the best solution is provided by the German Wikivoyage:
https://de.wikivoyage.org/wiki/Halle_(Saale)

irudia.png (335×1 px, 112 KB)