New tick flow - "Log Ascent" button not visible on small screen device

[martymh]

Summary

When attempting to log ascents using the new tick flow UI on a small screen device (320px wide by 568px high), under certain conditions noted below, the Log ascent button is not visible, and ascents cannot be logged.

NOTE: I first raised this issue in the forum for release 104.

Screenshots

The following screenshots were taken on my iPhone (details below) while trying to log an ascent for Freeloader (The Sanctuary - Flinders Peak).

Tick interface scrolled all the way to the bottom (portrait layout)

NOTE: The last UI element visible is the Show advanced fields checkbox.

Tick interface scrolled all the way to the bottom (landscape layout)

NOTE: The last UI element visible is the Show advanced fields checkbox.

Device Details

• Device: iPhone SE (1st gen)
• OS: iOS 15.7
• Browser: Safari (15.6)
• Viewport width: 320px
• Viewport height: 568px

Further investigations

I investigated whether I could use the new ticking interface on my desktop browser (Chrome). As expected, everything renders just fine. So logging ascents is (of course) possible on desktop.

Next, I used the Chrome developer tools on my desktop machine to emulate a device with the screen resolution of my iPhone (viewport of 320 x 568 pixels). This layout also correctly showed the Log ascent button, so there appeared to be no fundamental problem with small screens.

I then went back to my iPhone to confirm that it was indeed failing to show the Log ascent button. I tried to log my ascent for Freeloader, and again the Log ascent button was not visible.

But, when I scrolled the dimmed page behind the modal tick interface (not the tick interface itself) towards the bottom of the page, Safari hid/minimised the back/forward and address bar controls that are located at the bottom of the screen (visible in the first attached screenshot). With those browser controls hidden, the Log ascent button finally became visible.

It appears that the Safari browser navigation controls can obscure the Cancel and Log ascent controls of the tick interface. These browser controls dynamically show/hide as the user scrolls up and down the page.

The trick of scrolling the backing page is not a trick that the average user is likely to find (at least not on a small screen device where there is little of the backing page visible), and is somewhat finicky. So, while it is possible to work around this UI issue, it definitely degrades the UX (not being able to log an ascent is a very frustrating user experience).

Possible solutions

I have looked at some of the CSS that is being used to provide the tick interface modal dialog, and some possible solutions could involve one or more of the following:

• Moving the modal dialog further up the screen
  • It is interesting to note that top: 100px is being set from portal-1.1.92a.css:1817, which appears to be overriding a previous top: 20px set from portal-1.1.92a.css:879
  • These CSS rules mentioned are both for @media (max-width: 767px)
  • Moving the modal further up the screen would probably keep the .modal-footer clear of the Safari browser navigation controls, at least in portrait layout. Landscape layout may still not work right, but I don't think many people would want to use landscape on small screens anyway.
• The size of the .modal-body could be reduced
  • It is currently 60vh
  • Perhaps 50vh would work
  • But, I can see that reducing the size of the modal could be undesirable
• The tick interface scrolling could be moved from the inner .modal-body to the outer .modal (or .modal-complex) by changing where overflow-y is applied
  • This could possibly allow for scrolling to bring the Cancel and Log ascent buttons into view

I'm sure that there are probably other solutions, and/or the one's that I have suggested aren't valid for one reason or another. Just thought, I would have a bit of a look, in case it could be of assistance.

[scd]

@martymh I have hot fixed this by moving the modal up. Hopefully this does not break anything else. Please confirm that this now works for you.

Thank you for providing such a well described issue with great screenshots and analysis. It certainly made it a lot easier to resolve, especially since I was guessing with the iphone as I don' have one.

[martymh]

@scd, yes, that looks like it has fixed it!

As the screenshots below show, I am now able to see the Cancel and Log ascent buttons (with the Safari navigation controls at full height), and I can scroll the full extent of the new ticking interface.

Thanks for solving this issue. It is greatly appreciated.

And, of course, no worries. Am happy to help out. I use thecrag all the time, and love to see it grow and keep on improving.

Please feel free to contact me if you think I might be of assistance again some time in the future. I work professionally as a full-stack software engineer, so have applicable experience with web based systems (Linux, PostgreSQL, Python, Rust, C/C++, PHP, HTML, CSS, JavaScript/TypeScript, jQuery/AngularJS/Svelte, Cloud/AWS, Docker, Kubernetes, Containers, Backend/Frontend, and so on).

And thanks again for all the great work.