Page MenuHomePhabricator

Restrict image to viewport
Open, NormalPublic2 Story Points

Description

Current behavior:

Image extends outside the viewport.

Expected behavior:

The image is not cut-off and completely visible within the viewport window. If the user wants to zoom in, they can do so. The image preview loading indicator (T210218) should also be within the viewport

The fix for this may be a tweak to some Leaflet configuration. If it's not, that should be documented here and further requirements will be discussed before any extra work.

Event Timeline

Niharika triaged this task as Normal priority.Feb 7 2019, 9:16 PM
Niharika created this task.
Restricted Application added a project: Community-Tech. · View Herald TranscriptFeb 7 2019, 9:16 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Niharika updated the task description. (Show Details)
Niharika added subscribers: Samwilson, Prtksxna.

@Samwilson @Prtksxna I want your opinions on this ticket. Any thoughts? Anything I missed?

How would this work for images that are tall (higher than the viewport) and narrow (e.g.)? I think we want to initially display the whole image, in which case there would be whitespace on one side or the other of the image area. Alternatively, we could initially be zoomed-in so that the full width is shown but the bottom of the image hidden.

Niharika added a comment.EditedFeb 8 2019, 6:24 PM

How would this work for images that are tall (higher than the viewport) and narrow (e.g.)? I think we want to initially display the whole image, in which case there would be whitespace on one side or the other of the image area. Alternatively, we could initially be zoomed-in so that the full width is shown but the bottom of the image hidden.

You're right. We should display the whole image and whitespace on the sides is okay. I'll modify the task description.
Edit: I took that part out completely. Your comment made me realize that there will be other such edge cases too. Probably best to leave it be for now.

Niharika renamed this task from [BUG] Restrict Leaflet dimensions to be same as the image and restrict image to viewport to [BUG] Restrict image to viewport.Feb 8 2019, 8:51 PM
Niharika updated the task description. (Show Details)
Niharika renamed this task from [BUG] Restrict image to viewport to Restrict image to viewport.Feb 12 2019, 10:04 PM
Niharika set the point value for this task to 2.Feb 13 2019, 12:11 AM
Niharika moved this task from To be estimated/discussed to Estimated on the Community-Tech board.
Samwilson updated the task description. (Show Details)Feb 13 2019, 12:12 AM

The height of the image box is currently set to 80% of the viewport. This means that when the page first loads, for most screens, a good chunk of the image is below the fold. Then, when the user scrolls down to start translating the whole image (including bottom border loading indicator) is visible and stays visible as they scroll further down.

I think what this task requires is that the initial view has the image box made as small as is required for the bottom edge to be visible (with some sensible minimum I guess?) and then for it to gradually grow until it's back to 80% of the viewport.

Is that right?

The height of the image box is currently set to 80% of the viewport. This means that when the page first loads, for most screens, a good chunk of the image is below the fold. Then, when the user scrolls down to start translating the whole image (including bottom border loading indicator) is visible and stays visible as they scroll further down.
I think what this task requires is that the initial view has the image box made as small as is required for the bottom edge to be visible (with some sensible minimum I guess?) and then for it to gradually grow until it's back to 80% of the viewport.
Is that right?

It doesn't need to grow. It can stay the small size (as small as is required for the bottom edge to be visible). Does that make sense?

I think the trouble with that is the larger white space that appears under the image area when you scroll down, e.g.:

At top of page with bottom of image visible:Scrolled down, keeping the image the same size:

(Ignore the fact that the whole image isn't visible here, I forgot to make it smaller for the screenshots.)

@Samwilson Hmm, I'm not sure. I think some whitespace is okay but it does look too big here. @Prtksxna Do you have thoughts on this ticket?

Any ideas on the best way to solve this?

How about we scroll the page down (enough to hide the header) as soon as an input gets focus?