Page MenuHomePhabricator

Distance squished on Nearby article with two line header and two line subhead on Explore feed Nearby card
Closed, ResolvedPublic

Description

Steps to reproduce
Scroll to Nearby item on the Explore feed and look for an article that has four lines of header/subhead text displayed on card.

Expected results
The cell height should adjust to accommodate two lines of header text, two lines of subhead text and the distance maker (see the Nearby list screenshot).

Alternatively if the card/cells must remain a fixed height, the maximum number of lines or text shown should be three with headers displayed before subheads (eg. if there are three lines of header text and two lines of subhead only the three lines of header would be shown).

Actual results

Squished distance on Explore feedProperly displayed distance on full Nearby list

Potential design solutions
Depending of if the card and it's cells must remain a fixed height or if they are free to expand there are two potential solutions.

Static cell heightExpanded cell

Static cell height - lines displayed

Number of header linesNumber of subhead linesWhat is displayed
10All lines displayed
11All lines displayed
12All lines displayed
13+Full header, 2 lines of subhead
20All lines displayed
21All lines displayed
22+Full header, 1 line of subhead
30All lines displayed
31+Full header, no lines of subhead
4+anyFirst 3 lines of header, no lines of subhead

Expanded cell height - lines displayed

Number of header linesNumber of subhead linesWhat is displayed
10All lines displayed
11All lines displayed
12All lines displayed
13+Full header, 3 lines of subhead
20All lines displayed
21All lines displayed
22+Full header, 2 lines of subhead
30All lines displayed
31+Full header, 1 line of subhead
4+0First 3 lines of header
4+1+First 3 lines of header, 1 line of subhead

Event Timeline

cmadeo created this task.Dec 23 2016, 6:10 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 23 2016, 6:10 PM
JMinor triaged this task as Low priority.Jan 3 2017, 9:32 PM
JMinor moved this task from Needs Triage to Design Backlog on the Wikipedia-iOS-App-Backlog board.
cmadeo updated the task description. (Show Details)Jan 6 2017, 11:40 PM

Updated description with two potential design solutions. Should also be noted that the card will change to only display one cell at a time once the nearby tab is live.

I decided to stick with the fixed height approach because it was much simpler to implement and this wasn't high priority. I think these screenshots cover all the cases

@ABorbaWMF I think the New York City staff will have to confirm if this is fixed, as currently for San Francisco there are no Nearby items on the Explore feed with four lines of header/subhead text (only the expanded cell shows four-line examples). Changing time zone/region settings on the device did not help.

This Issue appears to be fixed when I am looking at the Basilica of St Joseph, Alameda. This article/location has a long name and long title which takes up the available space. Now the long title is truncated and ellipses are shown. This one is fixed.

JMinor closed this task as Resolved.Mar 22 2017, 4:49 PM