Page MenuHomePhabricator

Highlight statement(s) when using "#P" in URL
Open, LowestPublic

Description

It's possible to link to statements using a specific property by adding "#P" followed by the property number to the URL (for example: https://www.wikidata.org/wiki/Q2013#P1833).

But when the statement is near the bottom of the page or the page shifts due to scripts (or other reasons) it might be unclear what property is meant. Highlighting the statement would be a good way to indicate this.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 21 2017, 7:40 PM
thiemowmde triaged this task as Lowest priority.Oct 23 2017, 6:36 AM
thiemowmde moved this task from incoming to needs discussion or investigation on the Wikidata board.

This needs a suggestion by WMDE-Design and a decision by the product manager: how would such a highlighting look like?

The technical implementation is super trivial: just utilize the :target CSS feature.

Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptOct 23 2017, 6:36 AM
Jan_Dittrich added a comment.EditedOct 23 2017, 7:04 AM

I agree that this would be a useful feature. It is also used on other sites, so having it won't cause confusion.

My largest concern is that we don't have a styleguide or anything like that now. Thus, it is hard to determine a color (or other means of highlighting) that will not clash with other possible functionality and by that introduce design debt (like tech. debt, but visible in the UI)

abian added a subscriber: abian.
Ivanhercaz added a subscriber: Ivanhercaz.EditedFeb 9 2019, 2:33 AM

That's a nice idea and easy to implement. I would do it, but as @thiemowmde and @Jan_Dittrich note, it is necessary to have a concern about it. Could we agree a basic style and then request comments about it?

Something like that?

:target .wikibase-statementgroupview-property-label {
  background-color: aliceblue;
}

:target .wikibase-statementgroupview-property-label a {
  font-weight: bold;
}
Jan_Dittrich added a comment.EditedFeb 10 2019, 6:50 PM

If we do this it should be very subtle; I looked at some other pages and did not see any highlighting in Wikipedia articles or e.g. at this handbook so it might be perceived as unusual or irritating. But we could just enable the browser defaults as on this page (I think this is the browser style; on Firefox it is black dotted outline, on chrome it is blue solid outline)

Firefox

Chromium:

abian added a comment.Feb 10 2019, 7:29 PM

An option similar to the one @Ivanhercaz suggests would be choosing the accent color #eaf3ff instead of the base color #eaecf0 for the background; this color is documented on M101.

jeblad added a subscriber: jeblad.Feb 11 2019, 9:42 AM
This comment was removed by jeblad.

Thanks for following up on that @Ivanhercaz and giving input @abian.

I think going for highlights is the right direction. I would argue though changing the background color could have two disadvantages

  1. We use blue as a background color for things being in edit mode. Even though you chose a different one, this might be confusing.
  2. The difference between the grey and the light blue might not be accessible to everyone.

Therefor I propose to consider either Jan's suggestion to take advantage of browsers highlighting mechanism.
Or,
in case we want to have a highlight which remains, use a 2px blue border. We have blue as a highlight color in other places as well.

Find a screenshot of a mockup below.

An option similar to the one @Ivanhercaz suggests would be choosing the accent color #eaf3ff instead of the base color #eaecf0 for the background; this color is documented on M101.

Thank you for your recommendation, @abian!

Therefor I propose to consider either Jan's suggestion to take advantage of browsers highlighting mechanism.
Or,
in case we want to have a highlight which remains, use a 2px blue border. We have blue as a highlight color in other places as well.

Although the Jan's and Hanna's suggestion seems very attractive and useful. Abian, hat do you think about it?

abian added a comment.Feb 21 2019, 2:03 PM

Although the Jan's and Hanna's suggestion seems very attractive and useful. Abian, hat do you think about it?

Hanna's solution looks great to me! Anyway, my opinion shouldn't be that relevant. :-)

Looks good to me, "box-sizing:border-box;" might be needed in the CSS to keep the padding the same.

Does anyone want to give a patch a try?