Page MenuHomePhabricator

Article styling elements
Closed, ResolvedPublic

Assigned To
Authored By
cmadeo
Oct 23 2019, 8:05 PM
Referenced Files
F31103852: Screen Shot 2019-11-19 at 5.03.13 PM.png
Nov 19 2019, 10:03 PM
F31103810: 12a - Table view - With links.png
Nov 19 2019, 10:02 PM
F31103809: 12 - Table view.png
Nov 19 2019, 10:02 PM
F30878833: Image.png
Oct 24 2019, 8:38 PM
F30878835: Heading styles.png
Oct 24 2019, 8:38 PM
F30878828: tables.png
Oct 24 2019, 8:38 PM
F30878825: Quote and long header.png
Oct 24 2019, 8:38 PM

Description

Why are we doing this?

We want to be able to support the various article styling elements that are commonly present in Wikipedia article

Elements

  • In line images
  • Headers
  • Tables
  • Quotes

Proposed designs

Design details

  • using the left and right hardware keys when in an expanded table should move the view to the left or the right (eg. expose more table data)

API

Using the mobile-html API instead of mobile-sections should get us closer to the above design with less work: https://en.wikipedia.org/api/rest_v1/page/mobile-html/Cat

Related Objects

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
cmadeo renamed this task from Article UI elements to Article styling elements.Oct 24 2019, 8:38 PM
cmadeo updated the task description. (Show Details)
cmadeo moved this task from Design doing to Ready for approval on the KaiOS-Wikipedia-app board.
SBisson edited projects, added: Inuka-Team (Kanban); removed: Inuka-Team.

using the left and right hardware keys when in an expanded table should move the view to the left or the right (eg. expose more table data)

This might conflict with the left/right keys being used to navigate between the links on the page. To complicate matters further, tables often contain links and images.

Do you think it would make sense to represent the table as a special link that opens up in a popup? We could also flatten the table to a single column.

@SBisson That's a good idea, we can treat expanded tables as a new window, therefore allowing for left and right movement.
While I like the idea of flattening a table to a single column, I imagine this would be hard to do with the large variety of tables out there. I'll work on a pop-up design for next week.

@SBisson Can we keep the unfurled styling as described above and use this full page view for the table, this way we can use the D-pad directional keys to navigate, although if there are links in the table we might need to first place focus and then use the same key being tapped as a scroll. If this doesn't work we might want to just strip links from within tables.

@SBisson On inline images, let's experiment with your idea of a small image icon, slightly larger than the one in search results, that pops out into an image viewer. If the image viewer could allow for descriptive text/captions of the image, that'd be great.

@SBisson On inline images, let's experiment with your idea of a small image icon, slightly larger than the one in search results, that pops out into an image viewer. If the image viewer could allow for descriptive text/captions of the image, that'd be great.

Specifications related to images should be in T236302: Image view and gallery

See en/List of United States cities by population for an article that displays particularly badly.

@cmadeo and Sudhanshu, design is needed on how to handle/support tables within articles.

The tables need further design thinking, that is broader than the app. Table styling will be handled in a future version.

AMuigai removed SGautam_WMF as the assignee of this task.
AMuigai added a subscriber: SGautam_WMF.

Re-opening as we need to re-review the previous designs from current implementation.

Finished reviewing it on Banana phone and updated below document with my comments and suggestions.

https://docs.google.com/document/d/1PctpeiTdS4I_C1EaW9vj71w5hRAUKsKOuvDz9vKEPjw/edit?usp=sharing

Next step - Discuss it with the engineering team and accordingly decide the next step.

AMuigai claimed this task.

Each of the issues in the design review document have been created as separate tickets.