Page MenuHomePhabricator

When tapping a shortened footnote, the "parent" reference should get highlighted
Closed, InvalidPublic

Description

Description

Some articles use Harvard/shortened footnotes, particularly for references that occur multiple times within the article (link to documentation). On desktop if you click on a shortened footnote it scrolls you to the full reference and highlights it in blue. We should extend this behavior to Minerva/mobile.

To see this working on desktop:

  • go to the A article (link)
  • scroll to the Footnotes section
  • click "Simpson & Weiner 1989" (the second footnote)
  • you will be scrolled to the full reference in the references section and it will be highlighted in blue

Screen Shot 2021-06-14 at 9.27.37 AM.png (674×1 px, 242 KB)

Developer notes

On desktop, there is simple CSS line which brings these citations in line with our other citations.

/* Highlight linked elements (such as clicked references) in blue */
body.action-info .mw-body-content :target,
.citation:target {
    background-color: #DEF;  /* Fallback */
    background-color: rgba(0, 127, 255, 0.133);
}

We need to come up with a strategy to unify these elements. Can we extend the classiest that will lead to notifications being triggered ?

Related might be:

  1. T138601: Possibility to refine existing <ref>, e.g. reference individual pages in a book
  2. T8272: Allow display text to be specified for <ref> (to support "Harvard-style referencing" in the text)
  3. T154861: Clicking certain references results in infinite spinner on mobile

Event Timeline

I don't think this will be fixed in a sustainable way soon, so my proposal is to do something similar to the desktop experience, but use a background color that is more in line with the UI of minerva, and then use CSS animations to have it highlighted for only a limited amount of time or something.

Could design maybe assist ?

ping @Nirzar in hopes that he can provided guidance on my suggestion one comment up.

Jdlrobson triaged this task as Medium priority.May 4 2017, 6:29 PM
Jdlrobson moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.

@TheDJ is there an example of Harvard citation on an article so i can compare desktop and mobile and provide recommendation?

@Nirzar https://en.wikipedia.org/wiki/A is referenced with Harvard citations. Perhaps Harvard reference links could trigger the usual pop-ups on hover/click like <ref>...</ref> tags.

@Jc86035

pasted_file (1×1 px, 317 KB)

Im getting the usual popup on citations in https://en.m.wikipedia.org/wiki/A

is there any other particular citation on that page that i should be checking?

Screen Shot 2017-05-08 at 22.17.49.png (848×2 px, 412 KB)

See reference 1 (not [nb 1] ): Simpson & Weiner 1989, p. 1. This contains a link to Simpson & Weiner 1989. Clicking the Simpson & Weiner link, highlights the last reference in the references section, which is the full description of the reference. It's the highlighting of that particular target that this report is about.

Usually it's employed on pages, where many different pages of a single book are referred to within one article for instance.

ahh got it..

@TheDJ is there a reason we don't want to adapt the same solution for mobilefrontend?

using the :target css to highlight the reference?

if there is no objection for using highlight color we should add this css to mobilefrontend.

No objection, it's just that on Desktop, we only do it for references.

Personally, i currently use this for headlines in my own css, based on T109815: Briefly change color of section header selected by user in the menu (implement yellow fade effect)

/* T109815 */
@keyframes highlight { /* this is a bad, overly generic name for a unique CSS rule btw. */
    from {
        background-color: yellow;
    }
    to {
        background-color: transparent;
    } 
}
.mw-headline:target {
    animation-name: highlight;
    animation-duration: 2s;
}

I think something similar, with a more suited color scheme, could work just fine for Minerva.

I was going to suggest the same! :) We can use the light blue color from our color palette and remove it with css animation.

I will update the description and move the card to "Triaged but future" and add "easy" and "needs volunteer" tags

Thank you!

Removing @Nirzar as assignee, as that account has been disabled.

alexhollender renamed this task from Highlighting shortened footnotes to When tapping a shortened footnote, the "parent" reference should get highlighted.Jun 14 2021, 1:28 PM
alexhollender added a project: MobileFrontend.
alexhollender updated the task description. (Show Details)

@Jdlrobson it seems ready for development. I've just updated the description to make things more clear.

This appears to be an on-wiki issue. The behaviour doesn't show on desktop in safemode=1 when clicked.
The line https://en.wikipedia.org/wiki/MediaWiki:Common.css#L-59 needs to be moved to https://en.m.wikipedia.org/wiki/MediaWiki:Common.css#L-59

We need to come up with a strategy to unify these elements. Can we extend the class-list[sic] that will lead to notifications being triggered ?

@alexhollender there is a question around whether this should be a standard behaviour provided by the software, and under which circumstances the highlight should occur. If so that's not ready for development.