Adjust layout on entry page for mobile so users can scroll to text

[geealbers]

On phones (and it has been reported on tablets as well) when looking at one of the catalogue entries, there is only a very narrow and easy-to-miss strip at the bottom (circled in red in the image below) where a user can touch to scroll the page down to the text below the image. Touching anywhere on the image area otherwise activate leaflet controls.

This means users are having a difficult time getting to the text, or even realizing that there's text there at all. To fix this, we should make the image height shorter in order to expand the touch space below, and then on tablet and smaller devices, also add a down chevron icon to visually indicate that there's content below. Ramon also suggested that we "disable the zoom interaction at least 24px on the left/right edge of the leaflet area" (red overlay in image below) with a couple invisible divs. This sounds good to me, but I'm mindful of getting too close to the leaflet controls and interfering with how they operate. Thoughts?

Proposed changes:

[mandrijauskas]

Just added and pushed it up with 348bd12

[geealbers]

Thanks @mandrijauskas that was fast! Not sure if this is something you can test easily, but on my phone (iPhone 6), at the beginning of the page load on several pages, it looks right, but near the end of the page load, the image area suddenly enlarges and pushes the chevron down below the scroll. And now, on other pages, the image area is too large from the beginning so that I can't see the chevron at all. Not sure what's going on.

[mandrijauskas]

Left & right padding is on a PR for review now.

[mandrijauskas]

Hmm, I'll check it out on my phone to see if I can reproduce it.

[mandrijauskas]

Was able to reproduce and pushed up a fix for it. Also pushed the padding left & right live.

[geealbers]

Thanks @mandrijauskas. The space below the image is the right size, is it possible to consistently vertically center the chevron in that space between the bottom of the image and the top of the browser bar? So in the below screenshot it would need to move up.

Also, the left and right padding looks odd to me since it has pushed the controls in as well. (Also, I'm getting some side-to-side play when I scroll down on my phone that I don't think was there before.) If there's not a functional way to add some scroll area without moving or getting in the way of the leaflet controls, I'd like to hold off on doing that and instead test this with users with just the chevron addition and see if that's enough.

[mandrijauskas]

Let me know how it looks now. Just reverted the left & right changes and tried to center the down arrow more; it looks pretty centered on my phone.

[geealbers]

@mandrijauskas, looking good. I sent along to Ramon to take a look, and I'm going to pass it by some other users as well to see if this addresses the issue well. Thanks!