Page MenuHomePhabricator

Improve the ease of viewing individual citations references grouped together
Closed, ResolvedPublic3 Estimated Story Points

Authored By
RHo
Aug 2 2017, 12:56 PM
Referenced Files
F24602236: walleyeOPM2.171026.006.G1rho08062018190822.gif
Aug 6 2018, 5:09 PM
F24406617: reference-bug.gif
Aug 1 2018, 5:36 PM
F24405844: image.png
Aug 1 2018, 5:36 PM
F24406706: iOS grouped citation example.png
Aug 1 2018, 5:36 PM
F24405909: Screenshot_1533143945.png
Aug 1 2018, 5:36 PM
F24406269: Screenshot_1533140591.png
Aug 1 2018, 5:36 PM
F24406170: Screenshot_1533144564.png
Aug 1 2018, 5:36 PM
F18654453: image.png
Jun 1 2018, 6:25 PM

Description

Mocks provided. Ready for estimation.

Problem

When multiple citation references are grouped together in an article, the tap affordance for viewing each individual citation is sub-optimal.

Proposed solution

In case where there is there is more than one citation reference grouped together, tapping on one brings up the bottom sheet for the particular citation reference tapped (per the current behavior); but users are provided with an additional affordable to swipe left and right to view the adjacent citations in the group.


  • Notes on design:

    • the bottom sheet opens at a standard height (1/2 of height of device)
    • users may swipe left and right in the bottom sheet to go through through the references in that group
    • a series of indicator dots denotes the number of references in the group and the current (active) reference shown

    See Zeplin board for redline version of mocks tagged with "Dark mode" and "Citation"

    Note: This functionality exists in the iOS app already, so we may be able to leverage some of their code.

    Event Timeline

    RHo renamed this task from Improve the ease of viewing individual citations references grouped together to [MED] Improve the ease of viewing individual citations references grouped together.Mar 2 2018, 3:42 PM
    RHo renamed this task from [MED] Improve the ease of viewing individual citations references grouped together to Improve the ease of viewing individual citations references grouped together.Mar 2 2018, 3:53 PM
    RHo triaged this task as Medium priority.
    RHo updated the task description. (Show Details)
    Charlotte set the point value for this task to 3.Mar 12 2018, 5:50 PM

    Change 433915 had a related patch set uploaded (by Sharvaniharan; owner: Sharvaniharan):
    [apps/android/wikipedia@master] [WIP] Grouped citations

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

    hi @Sharvaniharan - please see below:

    @RHo changes are complete and a patch is available for review here : https://gerrit.wikimedia.org/r/#/c/433915/.
    However, since the supporting page library PR is still not merged and published, you will not be able to verify it by checking out the patch and running as-is. So, just to get us started I have taken a few key screenshots here : https://drive.google.com/open?id=1RiL4-5kylhHps4-PHfFE_4zDcxt_XYLL . Please let me know if they need any design changes.

    • Initial review is that there shouldn't be white gaps between the dividers and the overflowing text
    Actual:
    image.png (666×1,188 px, 201 KB)
    Expected:
    image.png (360×640 px, 88 KB)
    • ideally when a single citation, the height of the bottom sheet is only the text height plus 16dp top and bottom padding, with a max height of 50% of the screen height.
    • also the citation text should also not be entirely italicized (only names of any publications within the text), but think this is bug that is already filed separately.
    Actual:
    image.png (664×1,184 px, 151 KB)
    Expected
    Article - citation - Light.png (360×640 px, 71 KB)

    Also, a question:
    I am using the material_theme_shadow color theme for the unselected dot indicators at the bottom, which is : light: black26, dark: base10, and black: base10. However, it looks different from the zeplin mock. It looks like whte40? which we don't have in our palette at all. However, I used that and took one screenshot: https://drive.google.com/open?id=1fNAlg4zCJMD9eN67Yl07dQyLOqDOOGwU which looks like the mock. So just wondering what it should be?

    • Let's use 'Material theme Disabled/De-emphasised' (which in Light theme is Black@12%, and Dark/Black is White@20%)

    Thanks! Though fyi if this is more finicky than anticipated, would prefer we put this on pause for the Jaffa release and finish the multilingual tagged items as prio.

    @RHo let me know if it looks fine now.. The page-library changes have also been included, so you are good to go if you just build it and run! https://gerrit.wikimedia.org/r/#/c/apps/android/wikipedia/+/433915/

    hi @Sharvaniharan – still a couple of issues but it's close!

    1. Height of sheet is still extending to the very top when there is a long citation:
    • ideally when a single citation, the height of the bottom sheet is only the text height plus 16dp top and bottom padding, with a max height of 50% of the screen height.
    Actual:
    Screenshot_1533143945.png (1,080×1,920 px, 230 KB)
    Expected:
    image.png (123×220 px, 32 KB)
    1. Any reference with overflowing text in a group of citations 'jumps' upwards:
    Actual: (open gif to see bug when swiping reference 14 to view)
    reference-bug.gif (1,080×1,920 px, 2 MB)
    Expected: reference 14 should start with space between the divider and first line of text
    Screenshot_1533144564.png (1,080×1,920 px, 181 KB)
    1. Alphabetical references are not rendered correctly in the title:
      • Actual:
        Screenshot_1533140591.png (1,080×1,920 px, 241 KB)
      • Expected: Title should say Reference [d]
    1. References inside of a citation pane should not be rendered as clickable links
      • Actual:
        Screenshot_1533140591.png (1,080×1,920 px, 241 KB)
      • Expected: see iOS example
        iOS grouped citation example.png (1,242×2,208 px, 351 KB)

    @RHo Could you please give me the article name, for the long reference?

    Sure @Sharvaniharan - here are the articles used:

    Change 433915 merged by jenkins-bot:
    [apps/android/wikipedia@master] Grouped citations

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

    Change 450045 had a related patch set uploaded (by Sharvaniharan; owner: Sharvaniharan):
    [apps/android/wikipedia@master] Grouped citations - Tweaks

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

    hi @RHo

    1. References inside of a citation pane should not be rendered as clickable links
      • Actual:
        Screenshot_1533140591.png (1,080×1,920 px, 241 KB)
      • Expected: see iOS example
        iOS grouped citation example.png (1,242×2,208 px, 351 KB)

    Would it be ok if we made the reference inside a citation pane clickable and render its related info in the pane?

    hi @RHo

    1. References inside of a citation pane should not be rendered as clickable links
      • Actual:
        Screenshot_1533140591.png (1,080×1,920 px, 241 KB)
      • Expected: see iOS example
        iOS grouped citation example.png (1,242×2,208 px, 351 KB)

    Would it be ok if we made the reference inside a citation pane clickable and render its related info in the pane?

    Hi @Sharvaniharan - I'm not quite sure what you mean? It appears to be doing so right now but without showing the clicked reference number, which is unexpected and undesired. Eg, clicking on [34] inside the citation pane brings up a new citation pane for [34] but it doesn't show what reference it is:

    walleyeOPM2.171026.006.G1rho08062018190822.gif (540×960 px, 2 MB)

    (open full screen to view animated gif)

    Change 450634 had a related patch set uploaded (by Dbrant; owner: Dbrant):
    [apps/android/wikipedia@master] Fix ability to click on references within references.

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

    Change 450640 had a related patch set uploaded (by Dbrant; owner: Dbrant):
    [apps/android/wikipedia@master] Correctly pass link text through sub-reference click handler.

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

    Change 450045 merged by jenkins-bot:
    [apps/android/wikipedia@master] Grouped citations - Tweaks

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

    Change 450634 merged by jenkins-bot:
    [apps/android/wikipedia@master] Fix ability to click on references within references.

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

    Change 450640 merged by jenkins-bot:
    [apps/android/wikipedia@master] Correctly pass link text through sub-reference click handler.

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

    ABorbaWMF subscribed.

    I think this is fixed 2.7.239-alpha-2018-08-21. Sending to Design for review.