Page MenuHomePhabricator

Update reference styling for Mobile HTML work
Open, MediumPublic

Description

Work left to be done

  • In reference lists, update the reference link font weight to 400

Why are we doing this?

With the updates from Mobile HTML we have the opportunity to redesign reference styling at the bottom of the article.

Proposed designs

References section at the bottom of the article
References onlyReferences and other listsCollapsedHighlight of reference on return to ref list
https://zpl.io/VQ8WYzPhttps://zpl.io/aBD5p5mhttps://zpl.io/V0Dj5Yohttps://zpl.io/2veoZXP
Viewing instances of a reference
Multiple instancesSingle instance
https://zpl.io/aX81moXhttps://zpl.io/V1d5pvX
Updated reference previews
Grouped reference
https://zpl.io/29REz8A
Design details
References section at the bottom of the article
  • Link age (year) is shown in a grey box with a clock arrow when available
  • Type of reference is shown above the reference (if no reference type is available via template simply use 'Reference'
  • Reference numbers over 999 are truncated [...1]
  • When returning to the reference list from either a reference preview (clicking on a reference in the article view) or the instance view (clicking on the reference number from the reference list) the associated reference number is highlighted and then fades out after 2 seconds.
Viewing instances of a reference
  • Associated reference number appears in the header
  • Tapping the icon with the blue books returns the user to the reference list scrolled to the associated reference which is briefly highlighted
  • When there is only one instance of the reference the up and down arrows are greyed out
  • Up and down arrows allow the user to cycle through all instances of the reference
  • Tapping anywhere in the article text area or on the close button exits the view
Updated reference previews
  • Card style is updated to reflect the new reference styles
  • Reference number is shown in header

Details

Related Gerrit Patches:
mediawiki/services/mobileapps : masterFix issues with reference navigation and hr height

Event Timeline

cmadeo created this task.Feb 8 2020, 12:28 AM
Restricted Application added a project: Wikipedia-iOS-App-Backlog. · View Herald TranscriptFeb 8 2020, 12:28 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
JMinor triaged this task as Medium priority.Feb 10 2020, 7:38 PM
JMinor moved this task from Needs Triage to Design on the Wikipedia-iOS-App-Backlog board.
cmadeo updated the task description. (Show Details)Feb 25 2020, 6:56 PM
cmadeo removed cmadeo as the assignee of this task.Feb 25 2020, 9:18 PM
cmadeo updated the task description. (Show Details)
JMinor added a subscriber: JMinor.Mon, Mar 2, 8:00 PM

Looks good, but couple potential scope cuts/nice-to-haves:

  • Full section collapsing
  • Type indicator and grouping by type will be at the API level, will spin off as separate ticket
  • Special handling for notes/N 1 styling

We had to drop full section collapsing, type indicators and special handling for notes sections (just the header name) from v1. Highlight of reference on return to ref list still needs to be implemented and Carolyn requested the ability to be able scroll the page through the reference navigator overlay

Change 580081 had a related patch set uploaded (by Joewalsh; owner: Joewalsh):
[mediawiki/services/mobileapps@master] Fix issues with reference navigation and hr height

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

Change 580081 merged by jenkins-bot:
[mediawiki/services/mobileapps@master] Fix issues with reference navigation and hr height

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

bearND added a subscriber: bearND.Mon, Mar 16, 8:10 PM

The PCS change is merged and deployed. PCS JS/CSS have been purged from cache.

cmadeo added a subscriber: MattCleinman.

@JoeWalsh this is looking really good! Thank you!
One small note, would it be possible to use a stronger (bolder) text weight on the reference links in the reference list. I believe @MattCleinman used a weight of 400 to approximate SF medium in the updated title description CTA.

LGoto removed JoeWalsh as the assignee of this task.Mon, Mar 30, 6:35 PM

Tagging into Product infrastructure to update the reference link font weight to 400 as per @cmadeo's comment above

@cmadeo Are you talking about the ones highlighted in the screenshot (arrow on the left)? If so it's already at 400 font-weight, see the arrow on the right in that screenshot.

Below is how 500 looks like: