Page MenuHomePhabricator

Regression: Close icon is hidden and badly positioned in image overlay
Closed, ResolvedPublic2 Estimated Story Points

Description

There are issues with the current image overlay

https://en.m.wikipedia.org/wiki/President_of_Republika_Srpska#/media/File%3AMilorad_Dodik_mod_cropped.jpg

  • Reposition close icon to right:0 so that it is closer to the top right corner.
  • On tapping the image we hide the details to show the image fullscreen. Let's also hide the close icon and arrow icons.

Current:

gallery-12.png (1×641 px, 731 KB)

Design:

gallery-11.png (1×641 px, 761 KB)

On tap the close button should hide.

Event Timeline

Jdlrobson raised the priority of this task from to Needs Triage.
Jdlrobson updated the task description. (Show Details)
Jdlrobson moved this task to Incoming on the Readers-Web-Backlog board.
Jdlrobson added a subscriber: Jdlrobson.

@Jdlrobson, take a look at the attached screenshot. As you can see there is no room to the right of the image. If we want to make the close icon not overlap the image, then the image will have to be made smaller. I think the solution is to hide the close icon on tap (similar to the attribution text).

Screen Shot 2015-08-04 at 8.24.48 PM.png (1×1 px, 2 MB)

Point taken. I think the more serious part of this bug is the latter statement. I think if it lines up with the details button it won't look so strange.

I think it maybe best not to align the close icon with the details button because doings so will reduce the tappable area for the close icon and makes it hard for the user to close the image overlay on small screens.

@KHammerstein please advise on what we should do here..

@bmansurov @Jdlrobson
Button should align with details button, I think tap area is large enough. I added a mock to the description with them aligned and the button slightly smaller ~ 17 px square. Good point about how most interface disappears on tap. Apps also hide all buttons on tap. Lets do this too.

Also the arrows are very tiny and hard to see, I made them the same size as close in the mock and created a task to enlarge them here T108657

Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: KHammerstein.

Thanks @KHammerstein
@bmansurov is this clear now?

Jhernandez edited projects, added MobileFrontend; removed Readers-Web-Backlog.
Jdlrobson lowered the priority of this task from High to Medium.Nov 3 2015, 6:44 PM
Jdlrobson added a project: good first task.
Jdlrobson renamed this task from Close icon badly positioned in image overlay to Regression: Close icon is hidden and badly positioned in image overlay.Jul 28 2016, 8:29 PM
Jdlrobson raised the priority of this task from Medium to High.
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a project: Regression.
Jdlrobson moved this task from Incoming to Epics/Goals on the Readers-Web-Backlog board.
Jdlrobson added a subscriber: dr0ptp4kt.

@dr0ptp4kt next sprint?

Maybe the following one, sprint 80. Is this one really, really simple? @Nirzar, you okay with us tackling this one?

I think it's low priority. is there space for 1-2 pointer? we can fix something that is broken?

Diid you fix this @bmansurov in your other patch?

MBinder_WMF set the point value for this task to 2.Aug 24 2016, 4:53 PM

Change 306801 had a related patch set uploaded (by Jdlrobson):
Media viewer design tweaks

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

Change 306801 merged by jenkins-bot:
Media viewer design tweaks

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

phuedx claimed this task.
phuedx added a subscriber: phuedx.

This LGTM. Given the AC and the contents of the change, I was happy to only test this in Safari 9 on an iPhone 6.