Landscape view on mobile
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	• AMuigai
	Jun 23 2020, 6:26 PM

Description

Request

Design the experience with Wikipedia Preview when a user has their phone in landscape mode.

Proposed Design

Preview before expanding	Preview after expanding	Gallery view

Zeplin

https://app.zeplin.io/project/5edf645eef92dfb2dc2f8ce8/dashboard?seid=5f055410b423945b10e1fc7b

Design Details

In landscape mode height wise preview covers the entire screen unless it has short text to present. This goes for both before and after expanding(continue reading) the preview.
Tapping on continue reading will expand the preview to reveal the entire summary of an article along with the images present in the article.
Freeze the movement of the background content when the user is viewing/scrolling Wikipedia preview content.
Allow users to view each image independently.
Images are a gallery of pictures from the article which is being previewed.
Gallery does not include video and audio content.
If an article does not have images, no image gallery options will show.

Related Objects

Mentioned In: T256309: Loading state
T257774: issue with the close button/top bar with chrome on mobile landscape mode

Event Timeline

• AMuigai created this task.Jun 23 2020, 6:26 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 23 2020, 6:26 PM

• AMuigai triaged this task as Medium priority.Jun 23 2020, 6:27 PM

• AMuigai edited projects, added Inuka-Team (Kanban); removed Inuka-Team.

SBisson moved this task from Backlog to Mobile-Prototype on the Wikipedia-Preview board.Jun 25 2020, 3:42 PM

SBisson edited projects, added Wikipedia-Preview (Mobile-Prototype); removed Wikipedia-Preview.

SBisson moved this task from Backlog to two on the Wikipedia-Preview (Mobile-Prototype) board.Jun 25 2020, 5:09 PM

• Rileych added a project: Design.Jun 30 2020, 5:56 PM

• Rileych removed a project: Design.Jul 2 2020, 2:41 PM

• AMuigai moved this task from Backlog to Definition on the Inuka-Team (Kanban) board.Jul 2 2020, 4:37 PM

SGautam_WMF updated the task description. (Show Details)Jul 8 2020, 5:28 AM

SGautam_WMF moved this task from Definition to Ready for Dev on the Inuka-Team (Kanban) board.

hueitan mentioned this in T257774: issue with the close button/top bar with chrome on mobile landscape mode.Jul 13 2020, 10:32 AM

SGautam_WMF updated the task description. (Show Details)Jul 14 2020, 4:00 AM

eamedina mentioned this in T256309: Loading state.Jul 22 2020, 3:48 AM

hueitan claimed this task.Jul 28 2020, 1:18 PM

hueitan moved this task from Ready for Dev to Dev on the Inuka-Team (Kanban) board.

PR Link : https://github.com/wikimedia/wikipedia-preview/pull/29

PR is merged

Galaxy S10E on Chrome browser
when we open the popup, the top of the popup is a bit cut (the Wikipedia text/logo)

Once we click on "continue reading" then it looks fine

I tried in many different devices in browserstack and can't replicate this, maybe it has something to do with the resolution and text size I have set on my device, not sure we can fix it

@Jpita
We have a thread discussing the same thing, and design is working on that right now, so I think this can be another ticket?
"preview header being cut-off by the address bar (either expanded or collapsed mode)

In T256157#6372085, @hueitan wrote:

@Jpita
We have a thread discussing the same thing, and design is working on that right now, so I think this can be another ticket?
"preview header being cut-off by the address bar (either expanded or collapsed mode)

another ticket is fine, yeah

• Jpita moved this task from QA to Design sign off on the Inuka-Team (Kanban) board.Aug 10 2020, 9:32 AM

We will take care of gallery section, corner radius, and above mentioned issue in different tickets. For now, moving this to product signoff.

SGautam_WMF moved this task from Design sign off to Product sign off on the Inuka-Team (Kanban) board.Aug 12 2020, 8:43 AM

• AMuigai closed this task as Resolved.Aug 12 2020, 12:28 PM

	F31934590: Mobile Landscape before expand.png
	Jul 14 2020, 4:00 AM

	F31934592: Mobile Landscape after expand.png
	Jul 14 2020, 4:00 AM

	F31920590: Mobile Landscape after expand.png
	Jul 8 2020, 5:28 AM

	F31920589: Mobile Landscape before expand.png
	Jul 8 2020, 5:28 AM

	F32024902: image.png
	Aug 10 2020, 9:02 AM

	F31987231: before.jpg
	Aug 8 2020, 11:57 AM

	F31987233: after.jpg
	Aug 8 2020, 11:57 AM

Landscape view on mobileClosed, ResolvedPublicActions