Page MenuHomePhabricator

Indicators (protected icon, featured icon) are not shown in Minerva
Open, MediumPublic

Description

Indicator elements <indicator> are not shown in mobile view. They are not part of the html source code.

In desktop for instance, protected pages are shown like so:

In Minerva we are free to display the protection logo how and where we choose.

This also impacts the featured article of the day (via the Main page)
On desktop a star is shown, but not on mobile

Developer notes

These indicators are defined in templates like so:
https://en.wikipedia.org/wiki/Template:Pp-vandalism

Details

Reference
bz73299

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 3:50 AM
bzimport set Reference to bz73299.
bzimport added a subscriber: Unknown Object (MLST).

Yeah, MobileFrontend's Minerva skin needs to have support for them added (assuming that it is wanted, I'm not sure if it currently displays FA icons and the like). I completely forgot about it.

Example similar change for MonoBook: https://gerrit.wikimedia.org/r/#/c/163558/

bingle-admin wrote:

Prioritization and scheduling of this bug is tracked on Trello card https://trello.com/c/gb3kNPJJ

I'm not sure where to show the indicators :) If we know this, this could be a gci2014 (is Mobile team participating gci?)

Krinkle removed a subscriber: Krinkle.Dec 8 2014, 12:51 AM

Could someone please explain what an 'indicator' is?

https://www.mediawiki.org/wiki/Help:Page_status_indicators

Do you know the "featured articles" badge/indicator in the top right? It is now added in mediawiki-core, instead of ugly templates :)

I'm still seeing ugly templates in mobile view on English Wikipedia - $( '.top-icon' ).length > 0
Am I misunderstanding how they work?

The templates must be changed by the community to remove the ugly css solutions and replace it with the new indicator tag :)

Is there a tracking bug for that? Seems like a blocker from our perspective...

Is there a tracking bug for that?

Not that i know any. There is already a discussion for the Top_icon template on enwiki:
https://en.wikipedia.org/wiki/Template_talk:Top_icon#Page_status_indicators

And a new version of the template in the sandbox: https://en.wikipedia.org/wiki/Template:Top_icon/sandbox

I don't know, if this blocks us from implementing the feature.

I would say no value comes out of doing this work our end unless they become widely adopted (as this will mean we can kill some of the css rules in hacks.less relating to getting page status indicators to render nicely on mobile). Let's wait and see how this unfolds.

Ricordisamoa added a subscriber: Ricordisamoa.
Nemo_bis set Security to None.
Restricted Application added a project: Readers-Web-Backlog. · View Herald TranscriptApr 8 2015, 7:03 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 14 2015, 10:56 PM

Is there some kind of plan to get more widespread adoption of these indicators? e.g. a tracking bug?

They're already widely used. For example, https://en.wikipedia.org/wiki/Template:Top_icon uses them (a meta-template used for all kinds of stuff, 38,214 transclusions), as do several top icon templates on the Polish Wikipedia.

MaxSem removed a subscriber: MaxSem.Aug 17 2015, 6:37 PM

These seem a bit crufty for the mobile view. We don't have much real estate to work with and these indicators are not a critical part of the UI.

Jdlrobson triaged this task as Low priority.Aug 19 2015, 5:13 PM
Jdlrobson added a project: Design.

Ping: there is a discussion about that on fr.wp here. I think this should be a must-have.

@Trizek-WMF sure but this is a considerable investment in designing how this should work on a mobile screen and we only have one designer.

we only have one designer.

Ah, you too. :/

putnik added a subscriber: putnik.Jan 25 2017, 3:35 AM

can someone please flesh out the problem statement?

kaldari removed a subscriber: kaldari.Jul 3 2017, 9:24 PM

For sure I'm simplify too much the issue, but maybe could be enough to add the block <div class="mw-indicators mw-body-content">...</div> (or maybe the renamed mw-mf classes) to allow the whole indicator mechanism.

Can this be tried one single minor wiki to test it?

Jdlrobson renamed this task from Indicators are not shown in mobile view to Indicators are not shown in Minerva.Aug 28 2018, 5:44 PM
Jdlrobson raised the priority of this task from Low to Medium.
Jdlrobson edited projects, added MinervaNeue; removed MobileFrontend.
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
Jdlrobson renamed this task from Indicators are not shown in Minerva to Indicators (protected icon, featured icon) are not shown in Minerva.Aug 28 2018, 5:48 PM
Jdlrobson updated the task description. (Show Details)

We can also make the MobileDetect extension works with indicator, if this feature is implamented, an editor would be allowed to determin whether an indicator is visible on mobile screen. If he doesn't want to do, he can use the <nomobile> tag surrounding the indicator, then it would be ignored in Minerva skin.

Have been using status indicator for https://commons.wikimedia.org/wiki/Template:Upload_picture_from_category_icon ; unfortunate that it does not show on mobile… :-(

(off topic, but are there workaround for this? CSS classes I could add to display it on Minerva somehow?)

Restricted Application added a subscriber: Liuxinyu970226. · View Herald TranscriptApr 16 2019, 8:23 AM

As far as I understand, the only major issue preventing us from implementing this feature is that we don’t know where to put the indicators. What about placing them just before the watch star?


Although I would like to hear a UX designer about how confusing the two stars (featured article icon and watch button) next to each other are. (And the size of the icon also doesn’t match, maybe it can be resized by Minerva. Also there can be put some rule to prevent long indicators from showing up on small screens.)

Use-case: As a user, I want to access the help documentation for [feature].

In desktop skins, many feature pages will show a .mw-helplink button for "Help" in the top corner of the content-area - E.g.

In minerva those links are not currently shown.

Implementation - I believe this section might indicate how it is done? https://www.mediawiki.org/wiki/Help:Page_status_indicators#Using_indicators_from_PHP_code

(I was about to file a task, but then found this one. Pasting my draft above.)

Majavah added a subscriber: Majavah.

The featured article stars are a valuable recognition of article quality, and it's a shame they aren't visible on mobile. At the moment https://en.wikipedia.org/wiki/Wikipedia:Featured_articles has resorted to telling readers to use the desktop site on mobile instead.

Jdlrobson updated the task description. (Show Details)Apr 20 2020, 5:06 PM

For sure I'm simplify too much the issue, but maybe could be enough to add the block <div class="mw-indicators mw-body-content">...</div> (or maybe the renamed mw-mf classes) to allow the whole indicator mechanism.

Can this be tried one single minor wiki to test it?

Is it possible to have an update on the status of this apparently easy to solve ticket? Indicators in Wikivoyage & Wikipedia are used for many purpose and it's fundamental to show them on mobile view as well.

Is it possible to have an update on the status of this apparently easy to solve ticket?

This requires design so I'm not sure it's fair to say it's easy to solve. Space on mobile is pretty limited and some articles can have lots of indicators, some articles have long titles. With my engineering hat if the goal is simply to show them a trivial first step could be placing indicators at the bottom of an article so at least they are present on the page, however the lack of prominence is likely to be a problem.

Maybe @ovasileva can provide some idea around priority.

[…] and some articles can have lots of indicators, some articles have long titles.

I think long titles are not really a problem, as titles can (and do) break into several lines if they can’t fit on one line. As long is a moderate number of indicators, it’s OK.
Do you have an example of an article that has many indicators? I can’t imagine more than two or three really essential indicators. If there are more, most probably some of them should not be there in the first place. If they are really important on desktop but not needed on mobile, they can be hidden using CSS (and this should be done based on screen size, not skin), e.g.

@media (max-width: 719px) {
	/* hide everything but <indicator name="featured-star"> and <indicator name="pp-default"> */
	.mw-indicator:not(#mw-indicator-featured-star):not(#mw-indicator-pp-default) {
		display: none;
	}
}

or

@media (max-width: 719px) {
	/* hide <indicator name="my-useless-indicator"> */
	#mw-indicator-my-useless-indicator {
		display: none;
	}
}

(These IDs and classes are based on the ones present on Vector. I don’t know to what extent are these controlled by the skin, but using consistent names across skins is a good idea anyway.)

a trivial first step could be placing indicators at the bottom of an article

I think this doesn’t make sense. The bottom of the article is so unintuitive that nobody will notice them; it’s not worth the effort. Furthermore, the icons were put there using wikitext in the pre-<indicator> world, and they were moved to the top using a mix of CSS and JavaScript hacks, so I can imagine this is what will happen if indicators appear at the bottom—likely without proper UI/UX design.

Andyrom75 added a comment.EditedMay 28 2020, 8:23 PM

a trivial first step could be placing indicators at the bottom of an article so at least they are present on the page, however the lack of prominence is likely to be a problem.

Indicators are important so they are not supposed to stay at the bottom but inside "div.pre-content", if you think that there are cases with many indicators, maybe the could stay in their own new line.

By the way I agree with:

If they are really important on desktop but not needed on mobile, they can be hidden using CSS (and this should be done based on screen size, not skin), e.g.

with templatestyle is quite easy to do.

A conservative approach can be: add the indicator div that will enable the whole mechanism, but set it not visible by default (in the short term) to allow some wiki to test it in advance and evaluate if their indicators are ok, or too many or in a position that is not the best one.
Notwithstanding this, if https://it.m.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch has a title spread in three lines, I don't think that adding in the same line the indicators would make such big difference.